@mui/material 5.15.13 → 5.15.15

package/Slider/Slider.js

@@ -12,14 +12,15 @@ 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";
+const useThemeProps = createUseThemeProps('MuiSlider');
 function Identity(x) {
   return x;
 }
@@ -33,95 +34,151 @@ export 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'
-    }
-  }
-}));
+  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
+      }
+    }]
+  };
+});
 export 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
-}));
+  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 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',
@@ -129,23 +186,60 @@ export 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(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 const SliderThumb = styled('span', {
   name: 'MuiSlider',
@@ -157,79 +251,107 @@ export 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'
-    }
-  }
-}));
+    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: [...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(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(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 const SliderValueLabel = styled(BaseSliderValueLabel, {
   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, {
@@ -237,7 +359,6 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
   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,
@@ -245,37 +366,69 @@ export const 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: {
+      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'
+    }
+  }]
 }));
 export const SliderMark = styled('span', {
   name: 'MuiSlider',
@@ -288,24 +441,38 @@ export 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
+    }
+  }]
 }));
 export const SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
@@ -313,27 +480,41 @@ export const SliderMarkLabel = styled('span', {
   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
+    }
+  }]
 }));
 const useUtilityClasses = ownerState => {
   const {