@mui/material 5.15.13 → 6.0.0-alpha.0

package/legacy/Slider/Slider.js

@@ -1,8 +1,9 @@
 'use client';
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,14 +13,14 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import BaseSliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiSlider');
 function Identity(x) {
   return x;
 }
@@ -31,44 +32,16 @@ export var SliderRoot = styled('span', {
     return [styles.root, styles["color".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["size".concat(capitalize(ownerState.size))], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var _theme$vars;
+  var theme = _ref.theme;
+  return _defineProperty(_defineProperty(_defineProperty({
     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
-  }), _defineProperty(_defineProperty({
+    WebkitTapHighlightColor: 'transparent',
     '@media print': {
       colorAdjust: 'exact'
     }
@@ -78,7 +51,79 @@ export var SliderRoot = styled('span', {
     color: (theme.vars || theme).palette.grey[400]
   }), "&.".concat(sliderClasses.dragging), _defineProperty({}, "& .".concat(sliderClasses.thumb, ", & .").concat(sliderClasses.track), {
     transition: 'none'
-  })));
+  })), "variants", [].concat(_toConsumableArray(Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(function (key) {
+    var _theme$vars2;
+    return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
+  }).map(function (color) {
+    return {
+      props: {
+        color: 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
+    }
+  }]));
 });
 export var SliderRail = styled('span', {
   name: 'MuiSlider',
@@ -86,27 +131,40 @@ export var SliderRail = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.rail;
   }
-})(function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  return _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
-  });
+})({
+  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
+    }
+  }]
 });
 export var SliderTrack = styled('span', {
   name: 'MuiSlider',
@@ -115,12 +173,9 @@ export var SliderTrack = styled('span', {
     return styles.track;
   }
 })(function (_ref3) {
-  var theme = _ref3.theme,
-    ownerState = _ref3.ownerState;
-  var 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;
+  var theme = _ref3.theme;
+  return {
     display: 'block',
     position: 'absolute',
     borderRadius: 'inherit',
@@ -128,23 +183,62 @@ export var 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["".concat(ownerState.color, "Track")] : color,
-    borderColor: theme.vars ? theme.vars.palette.Slider["".concat(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'
+      }
+    }].concat(_toConsumableArray(Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter(function (key) {
+      var _theme$vars4;
+      return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
+    }).map(function (color) {
+      return {
+        props: {
+          color: color,
+          track: 'inverted'
+        },
+        style: _extends({}, theme.vars ? {
+          backgroundColor: theme.vars.palette.Slider["".concat(color, "Track")],
+          borderColor: theme.vars.palette.Slider["".concat(color, "Track")]
+        } : _extends({
+          backgroundColor: lighten(theme.palette[color].main, 0.62),
+          borderColor: lighten(theme.palette[color].main, 0.62)
+        }, theme.applyStyles('dark', {
+          backgroundColor: darken(theme.palette[color].main, 0.5)
+        }), theme.applyStyles('dark', {
+          borderColor: darken(theme.palette[color].main, 0.5)
+        })))
+      };
+    })))
+  };
 });
 export var SliderThumb = styled('span', {
   name: 'MuiSlider',
@@ -154,9 +248,9 @@ export var SliderThumb = styled('span', {
     return [styles.thumb, styles["thumbColor".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["thumbSize".concat(capitalize(ownerState.size))]];
   }
 })(function (_ref4) {
-  var theme = _ref4.theme,
-    ownerState = _ref4.ownerState;
-  return _extends({
+  var _theme$vars5;
+  var theme = _ref4.theme;
+  return _defineProperty(_defineProperty({
     position: 'absolute',
     width: 20,
     height: 20,
@@ -169,27 +263,15 @@ export var SliderThumb = styled('span', {
     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%)'
-  }, _defineProperty(_defineProperty(_defineProperty({
-    '&::before': _extends({
+    }),
+    '&::before': {
       position: 'absolute',
       content: '""',
       borderRadius: 'inherit',
       width: '100%',
       height: '100%',
       boxShadow: (theme.vars || theme).shadows[2]
-    }, ownerState.size === 'small' && {
-      boxShadow: 'none'
-    }),
+    },
     '&::after': {
       position: 'absolute',
       content: '""',
@@ -201,18 +283,60 @@ export var SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, -50%)'
     }
-  }, "&:hover, &.".concat(sliderClasses.focusVisible), {
-    boxShadow: "0px 0px 0px 8px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16)),
-    '@media (hover: none)': {
-      boxShadow: 'none'
-    }
-  }), "&.".concat(sliderClasses.active), {
-    boxShadow: "0px 0px 0px 14px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16))
-  }), "&.".concat(sliderClasses.disabled), {
+  }, "&.".concat(sliderClasses.disabled), {
     '&:hover': {
       boxShadow: 'none'
     }
-  }));
+  }), "variants", [].concat(_toConsumableArray(Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(function (key) {
+    var _theme$vars6;
+    return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
+  }).map(function (color) {
+    return {
+      props: {
+        color: color
+      },
+      style: _defineProperty(_defineProperty({}, "&:hover, &.".concat(sliderClasses.focusVisible), _extends({}, theme.vars ? {
+        boxShadow: "0px 0px 0px 8px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)")
+      } : {
+        boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[color].main, 0.16))
+      }, {
+        '@media (hover: none)': {
+          boxShadow: 'none'
+        }
+      })), "&.".concat(sliderClasses.active), _extends({}, theme.vars ? {
+        boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)}")
+      } : {
+        boxShadow: "0px 0px 0px 14px ".concat(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%)'
+    }
+  }]));
 });
 export var SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
@@ -220,17 +344,16 @@ export var SliderValueLabel = styled(BaseSliderValueLabel, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.valueLabel;
   }
-})(function (_ref5) {
-  var theme = _ref5.theme,
-    ownerState = _ref5.ownerState;
-  return _extends(_defineProperty(_defineProperty(_defineProperty({}, "&.".concat(sliderClasses.valueLabelOpen), {
-    transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(1)")
-  }), "zIndex", 1), "whiteSpace", 'nowrap'), theme.typography.body2, {
+})(function (_ref6) {
+  var theme = _ref6.theme;
+  return _extends({
+    zIndex: 1,
+    whiteSpace: 'nowrap'
+  }, theme.typography.body2, {
     fontWeight: 500,
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(0)"),
     position: 'absolute',
     backgroundColor: (theme.vars || theme).palette.grey[600],
     borderRadius: 2,
@@ -238,37 +361,67 @@ export var SliderValueLabel = styled(BaseSliderValueLabel, {
     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: _defineProperty({
+        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%'
+        }
+      }, "&.".concat(sliderClasses.valueLabelOpen), {
+        transform: 'translateY(-100%) scale(1)'
+      })
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: _defineProperty({
+        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%'
+        }
+      }, "&.".concat(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'
+      }
+    }]
   });
 });
 export var SliderMark = styled('span', {
@@ -281,26 +434,40 @@ export var SliderMark = styled('span', {
     var markActive = props.markActive;
     return [styles.mark, markActive && styles.markActive];
   }
-})(function (_ref6) {
-  var theme = _ref6.theme,
-    ownerState = _ref6.ownerState,
-    markActive = _ref6.markActive;
-  return _extends({
+})(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
     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
+      }
+    }]
+  };
 });
 export var SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
@@ -311,28 +478,42 @@ export var SliderMarkLabel = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.markLabel;
   }
-})(function (_ref7) {
-  var theme = _ref7.theme,
-    ownerState = _ref7.ownerState,
-    markLabelActive = _ref7.markLabelActive;
+})(function (_ref8) {
+  var theme = _ref8.theme;
   return _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
+      }
+    }]
   });
 });
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -360,12 +541,12 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getSliderUtilityClass, classes);
 };
-var Forward = function Forward(_ref8) {
-  var children = _ref8.children;
+var Forward = function Forward(_ref9) {
+  var children = _ref9.children;
   return children;
 };
 var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  var _ref9, _slots$root, _ref10, _slots$rail, _ref11, _slots$track, _ref12, _slots$thumb, _ref13, _slots$valueLabel, _ref14, _slots$mark, _ref15, _slots$markLabel, _ref16, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
+  var _ref10, _slots$root, _ref11, _slots$rail, _ref12, _slots$track, _ref13, _slots$thumb, _ref14, _slots$valueLabel, _ref15, _slots$mark, _ref16, _slots$markLabel, _ref17, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
   var props = useThemeProps({
     props: inputProps,
     name: 'MuiSlider'
@@ -464,14 +645,14 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  var RootSlot = (_ref9 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref9 : SliderRoot;
-  var RailSlot = (_ref10 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref10 : SliderRail;
-  var TrackSlot = (_ref11 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref11 : SliderTrack;
-  var ThumbSlot = (_ref12 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref12 : SliderThumb;
-  var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : SliderValueLabel;
-  var MarkSlot = (_ref14 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref14 : SliderMark;
-  var MarkLabelSlot = (_ref15 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref15 : SliderMarkLabel;
-  var InputSlot = (_ref16 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref16 : 'input';
+  var RootSlot = (_ref10 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref10 : SliderRoot;
+  var RailSlot = (_ref11 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref11 : SliderRail;
+  var TrackSlot = (_ref12 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref12 : SliderTrack;
+  var ThumbSlot = (_ref13 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref13 : SliderThumb;
+  var ValueLabelSlot = (_ref14 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref14 : SliderValueLabel;
+  var MarkSlot = (_ref15 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref15 : SliderMark;
+  var MarkLabelSlot = (_ref16 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref16 : SliderMarkLabel;
+  var InputSlot = (_ref17 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref17 : 'input';
   var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   var railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
   var trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;