@mui/material 5.15.13 → 5.15.15

package/modern/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,44 +34,15 @@ 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({
+  theme
+}) => ({
   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
-}), {
+  WebkitTapHighlightColor: 'transparent',
   '@media print': {
     colorAdjust: 'exact'
   },
@@ -83,45 +55,123 @@ export const SliderRoot = styled('span', {
     [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
       transition: 'none'
     }
-  }
+  },
+  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? 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({
+  return {
     display: 'block',
     position: 'absolute',
     borderRadius: 'inherit',
@@ -129,23 +179,57 @@ 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.vars ?? theme).palette).filter(key => (theme.vars ?? 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,9 +241,8 @@ export const SliderThumb = styled('span', {
     return [styles.thumb, styles[`thumbColor${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'absolute',
   width: 20,
   height: 20,
@@ -172,27 +255,15 @@ export const 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%)'
-}, {
-  '&::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: '""',
@@ -204,32 +275,67 @@ export const SliderThumb = styled('span', {
     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'
     }
-  }
+  },
+  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? 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 +343,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 +350,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 +425,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 +464,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 {

package/modern/SvgIcon/SvgIcon.js

@@ -42,7 +42,7 @@ const SvgIconRoot = styled('svg', {
   height: '1em',
   display: 'inline-block',
   // the <svg> will define the property that has `currentColor`
-  // e.g. heroicons uses fill="none" and stroke="currentColor"
+  // for example heroicons uses fill="none" and stroke="currentColor"
   fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.13
+ * @mui/material v5.15.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/experimental_extendTheme.js

@@ -38,7 +38,7 @@ function setColorChannel(obj, key) {
   if (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 const silent = fn => {

package/modern/styles/rootShouldForwardProp.js

@@ -0,0 +1,3 @@
+import slotShouldForwardProp from './slotShouldForwardProp';
+const rootShouldForwardProp = prop => slotShouldForwardProp(prop) && prop !== 'classes';
+export default rootShouldForwardProp;

package/modern/styles/slotShouldForwardProp.js

@@ -0,0 +1,5 @@
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+export default slotShouldForwardProp;