@material-ui/unstyled - npm Package Compare versions

Comparing version 5.0.0-alpha.18 to 5.0.0-alpha.19

index.d.ts

@@ -0,2 +1,7 @@
+export { default as BadgeUnstyled } from './BadgeUnstyled';
+export * from './BadgeUnstyled';
+
 export { default as SliderUnstyled } from './SliderUnstyled';
 export * from './SliderUnstyled';
+
+export * from './utils';

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.18
+/** @license Material-UI v5.0.0-alpha.19
  *
@@ -6,3 +6,6 @@ * This source code is licensed under the MIT license found in the
  */
+export { default as BadgeUnstyled } from './BadgeUnstyled';
+export * from './BadgeUnstyled';
 export { default as SliderUnstyled } from './SliderUnstyled';
-export * from './SliderUnstyled';
+export * from './SliderUnstyled';
+export * from './utils';

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.18
+/** @license Material-UI v5.0.0-alpha.19
  *
@@ -6,3 +6,6 @@ * This source code is licensed under the MIT license found in the
  */
+export { default as BadgeUnstyled } from './BadgeUnstyled';
+export * from './BadgeUnstyled';
 export { default as SliderUnstyled } from './SliderUnstyled';
-export * from './SliderUnstyled';
+export * from './SliderUnstyled';
+export * from './utils';

legacy/SliderUnstyled/index.js

 export { default } from './SliderUnstyled';
 export { default as SliderValueLabelUnstyled } from './SliderValueLabelUnstyled';
-export { default as sliderClasses } from './sliderClasses';
+export { default as sliderUnstyledClasses } from './sliderUnstyledClasses';
+export * from './sliderUnstyledClasses';

legacy/SliderUnstyled/SliderUnstyled.js

@@ -8,4 +8,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import clsx from 'clsx';
-import { chainPropTypes, unstable_useIsFocusVisible as useIsFocusVisible, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_useControlled as useControlled } from '@material-ui/utils';
-import sliderClasses from './sliderClasses';
+import { chainPropTypes, unstable_useIsFocusVisible as useIsFocusVisible, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_useControlled as useControlled } from '@material-ui/utils';
+import isHostComponent from '../utils/isHostComponent';
+import sliderUnstyledClasses from './sliderUnstyledClasses';
 import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
@@ -182,4 +183,3 @@
 var useSliderClasses = function useSliderClasses(props) {
-  var color = props.color,
-      disabled = props.disabled,
+  var disabled = props.disabled,
       marked = props.marked,
@@ -191,9 +191,9 @@ orientation = props.orientation,
   var utilityClasses = {
-    root: clsx(sliderClasses['root'], classes['root'], sliderClasses["color".concat(capitalize(color))], classes["color".concat(capitalize(color))], marked && [sliderClasses['marked'], classes['marked']], track === false && [sliderClasses['trackFalse'], classes['trackFalse']], disabled && sliderClasses['disabled'], orientation === 'vertical' && [sliderClasses['vertical'], classes['vertical']], track === 'inverted' && [sliderClasses['trackInverted'], classes['trackInverted']]),
-    rail: clsx(sliderClasses['rail'], classes['rail']),
-    track: clsx(sliderClasses['track'], classes['track']),
-    mark: clsx(sliderClasses['mark'], classes['mark']),
-    markLabel: clsx(sliderClasses['markLabel'], classes['markLabel']),
-    valueLabel: clsx(sliderClasses['valueLabel'], classes['valueLabel']),
-    thumb: clsx(sliderClasses['thumb'], classes['thumb'], sliderClasses["thumbColor".concat(capitalize(color))], classes["thumbColor".concat(capitalize(color))], disabled && sliderClasses['disabled'], orientation === 'vertical' && sliderClasses['vertical'])
+    root: clsx(sliderUnstyledClasses['root'], classes['root'], marked && [sliderUnstyledClasses['marked'], classes['marked']], track === false && [sliderUnstyledClasses['trackFalse'], classes['trackFalse']], disabled && sliderUnstyledClasses['disabled'], orientation === 'vertical' && [sliderUnstyledClasses['vertical'], classes['vertical']], track === 'inverted' && [sliderUnstyledClasses['trackInverted'], classes['trackInverted']]),
+    rail: clsx(sliderUnstyledClasses['rail'], classes['rail']),
+    track: clsx(sliderUnstyledClasses['track'], classes['track']),
+    mark: clsx(sliderUnstyledClasses['mark'], classes['mark']),
+    markLabel: clsx(sliderUnstyledClasses['markLabel'], classes['markLabel']),
+    valueLabel: clsx(sliderUnstyledClasses['valueLabel'], classes['valueLabel']),
+    thumb: clsx(sliderUnstyledClasses['thumb'], classes['thumb'], disabled && sliderUnstyledClasses['disabled'], orientation === 'vertical' && sliderUnstyledClasses['vertical'])
   };
@@ -203,6 +203,2 @@ return utilityClasses;
 
-var isHostComponent = function isHostComponent(element) {
-  return typeof element === 'string';
-};
-
 var Forward = function Forward(_ref3) {
@@ -218,6 +214,6 @@ var children = _ref3.children;
       className = props.className,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'primary' : _props$color,
       _props$component = props.component,
       Component = _props$component === void 0 ? 'span' : _props$component,
+      _props$classes2 = props.classes,
+      classesProps = _props$classes2 === void 0 ? {} : _props$classes2,
       defaultValue = props.defaultValue,
@@ -258,3 +254,3 @@ _props$disabled = props.disabled,
       theme = props.theme,
-      other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "color", "component", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
+      other = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
 
@@ -696,3 +692,3 @@ var touchId = React.useRef(); // We can't use the :active browser pseudo-classes.
 
-  var Root = components.Root || Component;
+  var Root = components.Root || 'span';
   var rootProps = componentsProps.root || {};
@@ -715,3 +711,2 @@ var Rail = components.Rail || 'span';
     classes: {},
-    color: color,
     disabled: disabled,
@@ -736,9 +731,10 @@ max: max,
     onMouseDown: handleMouseDown
-  }, !isHostComponent(Root) && {
-    styleProps: stateAndProps,
+  }, rootProps, !isHostComponent(Root) && {
+    as: Component,
+    styleProps: _extends({}, stateAndProps, rootProps.styleProps),
     theme: theme
-  }, rootProps, other, {
+  }, other, {
     className: clsx(utilityClasses.root, rootProps.className, className)
   }), /*#__PURE__*/React.createElement(Rail, _extends({}, railProps, !isHostComponent(Rail) && {
-    styleProps: stateAndProps,
+    styleProps: _extends({}, stateAndProps, railProps.styleProps),
     theme: theme
@@ -748,3 +744,3 @@ }, {
   })), /*#__PURE__*/React.createElement(Track, _extends({}, trackProps, !isHostComponent(Track) && {
-    styleProps: stateAndProps,
+    styleProps: _extends({}, stateAndProps, trackProps.styleProps),
     theme: theme
@@ -774,7 +770,7 @@ }, {
     }, markProps, !isHostComponent(Mark) && {
-      styleProps: stateAndProps,
+      styleProps: _extends({}, stateAndProps, markProps.styleProps),
       theme: theme
     }, {
       style: _extends({}, style, markProps.style),
-      className: clsx(utilityClasses.mark, markProps.className, markActive && sliderClasses['markActive'])
+      className: clsx(utilityClasses.mark, markProps.className, markActive && sliderUnstyledClasses['markActive'])
     })), mark.label != null ? /*#__PURE__*/React.createElement(MarkLabel, _extends({
@@ -784,7 +780,7 @@ "aria-hidden": true,
     }, markLabelProps, !isHostComponent(MarkLabel) && {
-      styleProps: stateAndProps,
+      styleProps: _extends({}, stateAndProps, markLabelProps.styleProps),
       theme: theme
     }, {
       style: _extends({}, style, markLabelProps.style),
-      className: clsx(utilityClasses.markLabel, markLabelProps.className, markActive && sliderClasses['markLabelActive'])
+      className: clsx(utilityClasses.markLabel, markLabelProps.className, markActive && sliderUnstyledClasses['markLabelActive'])
     }), mark.label) : null);
@@ -799,7 +795,3 @@ }), values.map(function (value, index) {
       valueLabelDisplay: valueLabelDisplay,
-      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat
-    }, !isHostComponent(ValueLabel) && {
-      styleProps: stateAndProps,
-      theme: theme
-    }, {
+      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
       index: index,
@@ -810,11 +802,8 @@ open: open === index || active === index || valueLabelDisplay === 'on',
       className: clsx(utilityClasses.valueLabel, valueLabelProps.className)
-    }), /*#__PURE__*/React.createElement(Thumb, _extends({}, thumbProps, {
-      className: clsx(utilityClasses.thumb, thumbProps.className, active === index && sliderClasses['active'], disabled && sliderClasses['disabled'], focusVisible === index && sliderClasses['focusVisible'])
-    }, !isHostComponent(Thumb) && {
-      styleProps: stateAndProps,
+    }, !isHostComponent(ValueLabel) && {
+      styleProps: _extends({}, stateAndProps, valueLabelProps.styleProps),
       theme: theme
-    }, {
+    }), /*#__PURE__*/React.createElement(Thumb, _extends({
       tabIndex: disabled ? null : 0,
       role: "slider",
-      style: _extends({}, style, thumbProps.style),
       "data-index": index,
@@ -833,2 +822,9 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
       onMouseLeave: handleMouseLeave
+    }, thumbProps, {
+      className: clsx(utilityClasses.thumb, thumbProps.className, active === index && sliderUnstyledClasses['active'], disabled && sliderUnstyledClasses['disabled'], focusVisible === index && sliderUnstyledClasses['focusVisible'])
+    }, !isHostComponent(Thumb) && {
+      styleProps: _extends({}, stateAndProps, thumbProps.styleProps),
+      theme: theme
+    }, {
+      style: _extends({}, style, thumbProps.style)
     })));
@@ -881,2 +877,3 @@ }));
    * Override or extend the styles applied to the component.
+   * @default {}
    */
@@ -891,8 +888,2 @@ classes: PropTypes.object,
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'primary'
-   */
-  color: PropTypes.oneOf(['primary', 'secondary']),
-
-  /**
    * The component used for the root node.
@@ -899,0 +890,0 @@ * Either a string to use a HTML element or a component.

legacy/SliderUnstyled/SliderValueLabelUnstyled.js

 import * as React from 'react';
 import clsx from 'clsx';
-import sliderClasses from './sliderClasses';
+import sliderUnstyledClasses from './sliderUnstyledClasses';
 
@@ -8,5 +8,5 @@ var useValueLabelClasses = function useValueLabelClasses(props) {
   var utilityClasses = {
-    offset: clsx(sliderClasses.valueLabel, sliderClasses.valueLabelOffset, open && sliderClasses.valueLabelOpen),
-    circle: sliderClasses.valueLabelCircle,
-    label: sliderClasses.valueLabelLabel
+    offset: clsx(sliderUnstyledClasses.valueLabel, sliderUnstyledClasses.valueLabelOffset, open && sliderUnstyledClasses.valueLabelOpen),
+    circle: sliderUnstyledClasses.valueLabelCircle,
+    label: sliderUnstyledClasses.valueLabelLabel
   };
@@ -13,0 +13,0 @@ return utilityClasses;

modern/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.18
+/** @license Material-UI v5.0.0-alpha.19
  *
@@ -6,3 +6,6 @@ * This source code is licensed under the MIT license found in the
  */
+export { default as BadgeUnstyled } from './BadgeUnstyled';
+export * from './BadgeUnstyled';
 export { default as SliderUnstyled } from './SliderUnstyled';
-export * from './SliderUnstyled';
+export * from './SliderUnstyled';
+export * from './utils';

modern/SliderUnstyled/index.js

 export { default } from './SliderUnstyled';
 export { default as SliderValueLabelUnstyled } from './SliderValueLabelUnstyled';
-export { default as sliderClasses } from './sliderClasses';
+export { default as sliderUnstyledClasses } from './sliderUnstyledClasses';
+export * from './sliderUnstyledClasses';

modern/SliderUnstyled/SliderUnstyled.js

@@ -6,4 +6,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import clsx from 'clsx';
-import { chainPropTypes, unstable_useIsFocusVisible as useIsFocusVisible, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_useControlled as useControlled } from '@material-ui/utils';
-import sliderClasses from './sliderClasses';
+import { chainPropTypes, unstable_useIsFocusVisible as useIsFocusVisible, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_useControlled as useControlled } from '@material-ui/utils';
+import isHostComponent from '../utils/isHostComponent';
+import sliderUnstyledClasses from './sliderUnstyledClasses';
 import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
@@ -168,3 +169,2 @@
   const {
-    color,
     disabled,
@@ -177,9 +177,9 @@ marked,
   const utilityClasses = {
-    root: clsx(sliderClasses['root'], classes['root'], sliderClasses[`color${capitalize(color)}`], classes[`color${capitalize(color)}`], marked && [sliderClasses['marked'], classes['marked']], track === false && [sliderClasses['trackFalse'], classes['trackFalse']], disabled && sliderClasses['disabled'], orientation === 'vertical' && [sliderClasses['vertical'], classes['vertical']], track === 'inverted' && [sliderClasses['trackInverted'], classes['trackInverted']]),
-    rail: clsx(sliderClasses['rail'], classes['rail']),
-    track: clsx(sliderClasses['track'], classes['track']),
-    mark: clsx(sliderClasses['mark'], classes['mark']),
-    markLabel: clsx(sliderClasses['markLabel'], classes['markLabel']),
-    valueLabel: clsx(sliderClasses['valueLabel'], classes['valueLabel']),
-    thumb: clsx(sliderClasses['thumb'], classes['thumb'], sliderClasses[`thumbColor${capitalize(color)}`], classes[`thumbColor${capitalize(color)}`], disabled && sliderClasses['disabled'], orientation === 'vertical' && sliderClasses['vertical'])
+    root: clsx(sliderUnstyledClasses['root'], classes['root'], marked && [sliderUnstyledClasses['marked'], classes['marked']], track === false && [sliderUnstyledClasses['trackFalse'], classes['trackFalse']], disabled && sliderUnstyledClasses['disabled'], orientation === 'vertical' && [sliderUnstyledClasses['vertical'], classes['vertical']], track === 'inverted' && [sliderUnstyledClasses['trackInverted'], classes['trackInverted']]),
+    rail: clsx(sliderUnstyledClasses['rail'], classes['rail']),
+    track: clsx(sliderUnstyledClasses['track'], classes['track']),
+    mark: clsx(sliderUnstyledClasses['mark'], classes['mark']),
+    markLabel: clsx(sliderUnstyledClasses['markLabel'], classes['markLabel']),
+    valueLabel: clsx(sliderUnstyledClasses['valueLabel'], classes['valueLabel']),
+    thumb: clsx(sliderUnstyledClasses['thumb'], classes['thumb'], disabled && sliderUnstyledClasses['disabled'], orientation === 'vertical' && sliderUnstyledClasses['vertical'])
   };
@@ -189,4 +189,2 @@ return utilityClasses;
 
-const isHostComponent = element => typeof element === 'string';
-
 const Forward = ({
@@ -202,4 +200,5 @@ children
     className,
-    color = 'primary',
     component: Component = 'span',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    classes: classesProps = {},
     defaultValue,
@@ -230,3 +229,3 @@ disabled = false,
   } = props,
-        other = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "color", "component", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
+        other = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
 
@@ -648,3 +647,3 @@ const touchId = React.useRef(); // We can't use the :active browser pseudo-classes.
 
-  const Root = components.Root || Component;
+  const Root = components.Root || 'span';
   const rootProps = componentsProps.root || {};
@@ -667,3 +666,2 @@ const Rail = components.Rail || 'span';
     classes: {},
-    color,
     disabled,
@@ -686,9 +684,10 @@ max,
     onMouseDown: handleMouseDown
-  }, !isHostComponent(Root) && {
-    styleProps: stateAndProps,
+  }, rootProps, !isHostComponent(Root) && {
+    as: Component,
+    styleProps: _extends({}, stateAndProps, rootProps.styleProps),
     theme
-  }, rootProps, other, {
+  }, other, {
     className: clsx(utilityClasses.root, rootProps.className, className)
   }), /*#__PURE__*/React.createElement(Rail, _extends({}, railProps, !isHostComponent(Rail) && {
-    styleProps: stateAndProps,
+    styleProps: _extends({}, stateAndProps, railProps.styleProps),
     theme
@@ -698,3 +697,3 @@ }, {
   })), /*#__PURE__*/React.createElement(Track, _extends({}, trackProps, !isHostComponent(Track) && {
-    styleProps: stateAndProps,
+    styleProps: _extends({}, stateAndProps, trackProps.styleProps),
     theme
@@ -724,7 +723,7 @@ }, {
     }, markProps, !isHostComponent(Mark) && {
-      styleProps: stateAndProps,
+      styleProps: _extends({}, stateAndProps, markProps.styleProps),
       theme
     }, {
       style: _extends({}, style, markProps.style),
-      className: clsx(utilityClasses.mark, markProps.className, markActive && sliderClasses['markActive'])
+      className: clsx(utilityClasses.mark, markProps.className, markActive && sliderUnstyledClasses['markActive'])
     })), mark.label != null ? /*#__PURE__*/React.createElement(MarkLabel, _extends({
@@ -734,7 +733,7 @@ "aria-hidden": true,
     }, markLabelProps, !isHostComponent(MarkLabel) && {
-      styleProps: stateAndProps,
+      styleProps: _extends({}, stateAndProps, markLabelProps.styleProps),
       theme
     }, {
       style: _extends({}, style, markLabelProps.style),
-      className: clsx(utilityClasses.markLabel, markLabelProps.className, markActive && sliderClasses['markLabelActive'])
+      className: clsx(utilityClasses.markLabel, markLabelProps.className, markActive && sliderUnstyledClasses['markLabelActive'])
     }), mark.label) : null);
@@ -749,7 +748,3 @@ }), values.map((value, index) => {
       valueLabelDisplay: valueLabelDisplay,
-      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat
-    }, !isHostComponent(ValueLabel) && {
-      styleProps: stateAndProps,
-      theme
-    }, {
+      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
       index: index,
@@ -760,11 +755,8 @@ open: open === index || active === index || valueLabelDisplay === 'on',
       className: clsx(utilityClasses.valueLabel, valueLabelProps.className)
-    }), /*#__PURE__*/React.createElement(Thumb, _extends({}, thumbProps, {
-      className: clsx(utilityClasses.thumb, thumbProps.className, active === index && sliderClasses['active'], disabled && sliderClasses['disabled'], focusVisible === index && sliderClasses['focusVisible'])
-    }, !isHostComponent(Thumb) && {
-      styleProps: stateAndProps,
+    }, !isHostComponent(ValueLabel) && {
+      styleProps: _extends({}, stateAndProps, valueLabelProps.styleProps),
       theme
-    }, {
+    }), /*#__PURE__*/React.createElement(Thumb, _extends({
       tabIndex: disabled ? null : 0,
       role: "slider",
-      style: _extends({}, style, thumbProps.style),
       "data-index": index,
@@ -783,2 +775,9 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
       onMouseLeave: handleMouseLeave
+    }, thumbProps, {
+      className: clsx(utilityClasses.thumb, thumbProps.className, active === index && sliderUnstyledClasses['active'], disabled && sliderUnstyledClasses['disabled'], focusVisible === index && sliderUnstyledClasses['focusVisible'])
+    }, !isHostComponent(Thumb) && {
+      styleProps: _extends({}, stateAndProps, thumbProps.styleProps),
+      theme
+    }, {
+      style: _extends({}, style, thumbProps.style)
     })));
@@ -831,2 +830,3 @@ }));
    * Override or extend the styles applied to the component.
+   * @default {}
    */
@@ -841,8 +841,2 @@ classes: PropTypes.object,
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'primary'
-   */
-  color: PropTypes.oneOf(['primary', 'secondary']),
-
-  /**
    * The component used for the root node.
@@ -849,0 +843,0 @@ * Either a string to use a HTML element or a component.

modern/SliderUnstyled/SliderValueLabelUnstyled.js

 import * as React from 'react';
 import clsx from 'clsx';
-import sliderClasses from './sliderClasses';
+import sliderUnstyledClasses from './sliderUnstyledClasses';
 
@@ -10,5 +10,5 @@ const useValueLabelClasses = props => {
   const utilityClasses = {
-    offset: clsx(sliderClasses.valueLabel, sliderClasses.valueLabelOffset, open && sliderClasses.valueLabelOpen),
-    circle: sliderClasses.valueLabelCircle,
-    label: sliderClasses.valueLabelLabel
+    offset: clsx(sliderUnstyledClasses.valueLabel, sliderUnstyledClasses.valueLabelOffset, open && sliderUnstyledClasses.valueLabelOpen),
+    circle: sliderUnstyledClasses.valueLabelCircle,
+    label: sliderUnstyledClasses.valueLabelLabel
   };
@@ -15,0 +15,0 @@ return utilityClasses;

node/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-alpha.18
+/** @license Material-UI v5.0.0-alpha.19
  *
@@ -14,4 +14,11 @@ * This source code is licensed under the MIT license found in the
 var _exportNames = {
+  BadgeUnstyled: true,
   SliderUnstyled: true
 };
+Object.defineProperty(exports, "BadgeUnstyled", {
+  enumerable: true,
+  get: function () {
+    return _BadgeUnstyled.default;
+  }
+});
 Object.defineProperty(exports, "SliderUnstyled", {
@@ -24,2 +31,16 @@ enumerable: true,
 
+var _BadgeUnstyled = _interopRequireWildcard(require("./BadgeUnstyled"));
+
+Object.keys(_BadgeUnstyled).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _BadgeUnstyled[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BadgeUnstyled[key];
+    }
+  });
+});
+
 var _SliderUnstyled = _interopRequireWildcard(require("./SliderUnstyled"));
@@ -37,2 +58,16 @@
   });
+});
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
 });

node/SliderUnstyled/index.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -8,2 +10,6 @@
 });
+var _exportNames = {
+  SliderValueLabelUnstyled: true,
+  sliderUnstyledClasses: true
+};
 Object.defineProperty(exports, "default", {
@@ -21,6 +27,6 @@ enumerable: true,
 });
-Object.defineProperty(exports, "sliderClasses", {
+Object.defineProperty(exports, "sliderUnstyledClasses", {
   enumerable: true,
   get: function () {
-    return _sliderClasses.default;
+    return _sliderUnstyledClasses.default;
   }
@@ -33,2 +39,14 @@ });
 
-var _sliderClasses = _interopRequireDefault(require("./sliderClasses"));
+var _sliderUnstyledClasses = _interopRequireWildcard(require("./sliderUnstyledClasses"));
+
+Object.keys(_sliderUnstyledClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _sliderUnstyledClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sliderUnstyledClasses[key];
+    }
+  });
+});

node/SliderUnstyled/SliderUnstyled.js

@@ -24,4 +24,6 @@ "use strict";
 
-var _sliderClasses = _interopRequireDefault(require("./sliderClasses"));
+var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
 
+var _sliderUnstyledClasses = _interopRequireDefault(require("./sliderUnstyledClasses"));
+
 var _SliderValueLabelUnstyled = _interopRequireDefault(require("./SliderValueLabelUnstyled"));
@@ -186,3 +188,2 @@
   const {
-    color,
     disabled,
@@ -195,9 +196,9 @@ marked,
   const utilityClasses = {
-    root: (0, _clsx.default)(_sliderClasses.default['root'], classes['root'], _sliderClasses.default[`color${(0, _utils.unstable_capitalize)(color)}`], classes[`color${(0, _utils.unstable_capitalize)(color)}`], marked && [_sliderClasses.default['marked'], classes['marked']], track === false && [_sliderClasses.default['trackFalse'], classes['trackFalse']], disabled && _sliderClasses.default['disabled'], orientation === 'vertical' && [_sliderClasses.default['vertical'], classes['vertical']], track === 'inverted' && [_sliderClasses.default['trackInverted'], classes['trackInverted']]),
-    rail: (0, _clsx.default)(_sliderClasses.default['rail'], classes['rail']),
-    track: (0, _clsx.default)(_sliderClasses.default['track'], classes['track']),
-    mark: (0, _clsx.default)(_sliderClasses.default['mark'], classes['mark']),
-    markLabel: (0, _clsx.default)(_sliderClasses.default['markLabel'], classes['markLabel']),
-    valueLabel: (0, _clsx.default)(_sliderClasses.default['valueLabel'], classes['valueLabel']),
-    thumb: (0, _clsx.default)(_sliderClasses.default['thumb'], classes['thumb'], _sliderClasses.default[`thumbColor${(0, _utils.unstable_capitalize)(color)}`], classes[`thumbColor${(0, _utils.unstable_capitalize)(color)}`], disabled && _sliderClasses.default['disabled'], orientation === 'vertical' && _sliderClasses.default['vertical'])
+    root: (0, _clsx.default)(_sliderUnstyledClasses.default['root'], classes['root'], marked && [_sliderUnstyledClasses.default['marked'], classes['marked']], track === false && [_sliderUnstyledClasses.default['trackFalse'], classes['trackFalse']], disabled && _sliderUnstyledClasses.default['disabled'], orientation === 'vertical' && [_sliderUnstyledClasses.default['vertical'], classes['vertical']], track === 'inverted' && [_sliderUnstyledClasses.default['trackInverted'], classes['trackInverted']]),
+    rail: (0, _clsx.default)(_sliderUnstyledClasses.default['rail'], classes['rail']),
+    track: (0, _clsx.default)(_sliderUnstyledClasses.default['track'], classes['track']),
+    mark: (0, _clsx.default)(_sliderUnstyledClasses.default['mark'], classes['mark']),
+    markLabel: (0, _clsx.default)(_sliderUnstyledClasses.default['markLabel'], classes['markLabel']),
+    valueLabel: (0, _clsx.default)(_sliderUnstyledClasses.default['valueLabel'], classes['valueLabel']),
+    thumb: (0, _clsx.default)(_sliderUnstyledClasses.default['thumb'], classes['thumb'], disabled && _sliderUnstyledClasses.default['disabled'], orientation === 'vertical' && _sliderUnstyledClasses.default['vertical'])
   };
@@ -207,4 +208,2 @@ return utilityClasses;
 
-const isHostComponent = element => typeof element === 'string';
-
 const Forward = ({
@@ -220,4 +219,5 @@ children
     className,
-    color = 'primary',
     component: Component = 'span',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    classes: classesProps = {},
     defaultValue,
@@ -248,3 +248,3 @@ disabled = false,
   } = props,
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "color", "component", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
   const touchId = React.useRef(); // We can't use the :active browser pseudo-classes.
@@ -663,3 +663,3 @@ // - The active state isn't triggered when clicking on the rail.
   const trackStyle = (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
-  const Root = components.Root || Component;
+  const Root = components.Root || 'span';
   const rootProps = componentsProps.root || {};
@@ -682,3 +682,2 @@ const Rail = components.Rail || 'span';
     classes: {},
-    color,
     disabled,
@@ -700,14 +699,15 @@ max,
     onMouseDown: handleMouseDown
-  }, !isHostComponent(Root) && {
-    styleProps: stateAndProps,
+  }, rootProps, !(0, _isHostComponent.default)(Root) && {
+    as: Component,
+    styleProps: (0, _extends2.default)({}, stateAndProps, rootProps.styleProps),
     theme
-  }, rootProps, other, {
+  }, other, {
     className: (0, _clsx.default)(utilityClasses.root, rootProps.className, className)
-  }), /*#__PURE__*/React.createElement(Rail, (0, _extends2.default)({}, railProps, !isHostComponent(Rail) && {
-    styleProps: stateAndProps,
+  }), /*#__PURE__*/React.createElement(Rail, (0, _extends2.default)({}, railProps, !(0, _isHostComponent.default)(Rail) && {
+    styleProps: (0, _extends2.default)({}, stateAndProps, railProps.styleProps),
     theme
   }, {
     className: (0, _clsx.default)(utilityClasses.rail, railProps.className)
-  })), /*#__PURE__*/React.createElement(Track, (0, _extends2.default)({}, trackProps, !isHostComponent(Track) && {
-    styleProps: stateAndProps,
+  })), /*#__PURE__*/React.createElement(Track, (0, _extends2.default)({}, trackProps, !(0, _isHostComponent.default)(Track) && {
+    styleProps: (0, _extends2.default)({}, stateAndProps, trackProps.styleProps),
     theme
@@ -736,17 +736,17 @@ }, {
       "data-index": index
-    }, markProps, !isHostComponent(Mark) && {
-      styleProps: stateAndProps,
+    }, markProps, !(0, _isHostComponent.default)(Mark) && {
+      styleProps: (0, _extends2.default)({}, stateAndProps, markProps.styleProps),
       theme
     }, {
       style: (0, _extends2.default)({}, style, markProps.style),
-      className: (0, _clsx.default)(utilityClasses.mark, markProps.className, markActive && _sliderClasses.default['markActive'])
+      className: (0, _clsx.default)(utilityClasses.mark, markProps.className, markActive && _sliderUnstyledClasses.default['markActive'])
     })), mark.label != null ? /*#__PURE__*/React.createElement(MarkLabel, (0, _extends2.default)({
       "aria-hidden": true,
       "data-index": index
-    }, markLabelProps, !isHostComponent(MarkLabel) && {
-      styleProps: stateAndProps,
+    }, markLabelProps, !(0, _isHostComponent.default)(MarkLabel) && {
+      styleProps: (0, _extends2.default)({}, stateAndProps, markLabelProps.styleProps),
       theme
     }, {
       style: (0, _extends2.default)({}, style, markLabelProps.style),
-      className: (0, _clsx.default)(utilityClasses.markLabel, markLabelProps.className, markActive && _sliderClasses.default['markLabelActive'])
+      className: (0, _clsx.default)(utilityClasses.markLabel, markLabelProps.className, markActive && _sliderUnstyledClasses.default['markLabelActive'])
     }), mark.label) : null);
@@ -761,7 +761,3 @@ }), values.map((value, index) => {
       valueLabelDisplay: valueLabelDisplay,
-      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat
-    }, !isHostComponent(ValueLabel) && {
-      styleProps: stateAndProps,
-      theme
-    }, {
+      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
       index: index,
@@ -772,11 +768,8 @@ open: open === index || active === index || valueLabelDisplay === 'on',
       className: (0, _clsx.default)(utilityClasses.valueLabel, valueLabelProps.className)
-    }), /*#__PURE__*/React.createElement(Thumb, (0, _extends2.default)({}, thumbProps, {
-      className: (0, _clsx.default)(utilityClasses.thumb, thumbProps.className, active === index && _sliderClasses.default['active'], disabled && _sliderClasses.default['disabled'], focusVisible === index && _sliderClasses.default['focusVisible'])
-    }, !isHostComponent(Thumb) && {
-      styleProps: stateAndProps,
+    }, !(0, _isHostComponent.default)(ValueLabel) && {
+      styleProps: (0, _extends2.default)({}, stateAndProps, valueLabelProps.styleProps),
       theme
-    }, {
+    }), /*#__PURE__*/React.createElement(Thumb, (0, _extends2.default)({
       tabIndex: disabled ? null : 0,
       role: "slider",
-      style: (0, _extends2.default)({}, style, thumbProps.style),
       "data-index": index,
@@ -795,2 +788,9 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
       onMouseLeave: handleMouseLeave
+    }, thumbProps, {
+      className: (0, _clsx.default)(utilityClasses.thumb, thumbProps.className, active === index && _sliderUnstyledClasses.default['active'], disabled && _sliderUnstyledClasses.default['disabled'], focusVisible === index && _sliderUnstyledClasses.default['focusVisible'])
+    }, !(0, _isHostComponent.default)(Thumb) && {
+      styleProps: (0, _extends2.default)({}, stateAndProps, thumbProps.styleProps),
+      theme
+    }, {
+      style: (0, _extends2.default)({}, style, thumbProps.style)
     })));
@@ -843,2 +843,3 @@ }));
    * Override or extend the styles applied to the component.
+   * @default {}
    */
@@ -853,8 +854,2 @@ classes: _propTypes.default.object,
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'primary'
-   */
-  color: _propTypes.default.oneOf(['primary', 'secondary']),
-
-  /**
    * The component used for the root node.
@@ -861,0 +856,0 @@ * Either a string to use a HTML element or a component.

node/SliderUnstyled/SliderValueLabelUnstyled.js

@@ -16,3 +16,3 @@ "use strict";
 
-var _sliderClasses = _interopRequireDefault(require("./sliderClasses"));
+var _sliderUnstyledClasses = _interopRequireDefault(require("./sliderUnstyledClasses"));
 
@@ -24,5 +24,5 @@ const useValueLabelClasses = props => {
   const utilityClasses = {
-    offset: (0, _clsx.default)(_sliderClasses.default.valueLabel, _sliderClasses.default.valueLabelOffset, open && _sliderClasses.default.valueLabelOpen),
-    circle: _sliderClasses.default.valueLabelCircle,
-    label: _sliderClasses.default.valueLabelLabel
+    offset: (0, _clsx.default)(_sliderUnstyledClasses.default.valueLabel, _sliderUnstyledClasses.default.valueLabelOffset, open && _sliderUnstyledClasses.default.valueLabelOpen),
+    circle: _sliderUnstyledClasses.default.valueLabelCircle,
+    label: _sliderUnstyledClasses.default.valueLabelLabel
   };
@@ -29,0 +29,0 @@ return utilityClasses;

package.json

 {
   "name": "@material-ui/unstyled",
-  "version": "5.0.0-alpha.18",
+  "version": "5.0.0-alpha.19",
   "private": false,
@@ -36,3 +36,3 @@ "author": "Material-UI Team",
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "^5.0.0-alpha.18",
+    "@material-ui/utils": "5.0.0-alpha.19",
     "clsx": "^1.0.4",
@@ -39,0 +39,0 @@ "prop-types": "^15.7.2",

SliderUnstyled/index.d.ts

@@ -5,2 +5,3 @@ export { default } from './SliderUnstyled';
 export * from './SliderValueLabelUnstyled';
-export { default as sliderClasses } from './sliderClasses';
+export { default as sliderUnstyledClasses } from './sliderUnstyledClasses';
+export * from './sliderUnstyledClasses';

SliderUnstyled/index.js

 export { default } from './SliderUnstyled';
 export { default as SliderValueLabelUnstyled } from './SliderValueLabelUnstyled';
-export { default as sliderClasses } from './sliderClasses';
+export { default as sliderUnstyledClasses } from './sliderUnstyledClasses';
+export * from './sliderUnstyledClasses';

SliderUnstyled/SliderUnstyled.d.ts

@@ -31,2 +31,3 @@ import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';
      * Override or extend the styles applied to the component.
+     * @default {}
      */
@@ -36,6 +37,2 @@ classes?: {
       root?: string;
-      /** Class name applied to the root element if `color="primary"`. */
-      colorPrimary?: string;
-      /** Class name applied to the root element if `color="secondary"`. */
-      colorSecondary?: string;
       /** Class name applied to the root element if `marks` is provided with at least one label. */
@@ -57,6 +54,2 @@ marked?: string;
       thumb?: string;
-      /** Class name applied to the thumb element if `color="primary"`. */
-      thumbColorPrimary?: string;
-      /** Class name applied to the thumb element if `color="secondary"`. */
-      thumbColorSecondary?: string;
       /** Pseudo-class applied to the thumb element if it's active. */
@@ -78,7 +71,2 @@ active?: string;
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'primary'
-     */
-    color?: 'primary' | 'secondary';
-    /**
      * The components used for each slot inside the Slider.
@@ -85,0 +73,0 @@ * Either a string to use a HTML element or a component.

SliderUnstyled/SliderUnstyled.js

@@ -6,4 +6,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import clsx from 'clsx';
-import { chainPropTypes, unstable_useIsFocusVisible as useIsFocusVisible, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_useControlled as useControlled } from '@material-ui/utils';
-import sliderClasses from './sliderClasses';
+import { chainPropTypes, unstable_useIsFocusVisible as useIsFocusVisible, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback, unstable_useForkRef as useForkRef, unstable_useControlled as useControlled } from '@material-ui/utils';
+import isHostComponent from '../utils/isHostComponent';
+import sliderUnstyledClasses from './sliderUnstyledClasses';
 import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
@@ -168,3 +169,2 @@
   const {
-    color,
     disabled,
@@ -177,9 +177,9 @@ marked,
   const utilityClasses = {
-    root: clsx(sliderClasses['root'], classes['root'], sliderClasses[`color${capitalize(color)}`], classes[`color${capitalize(color)}`], marked && [sliderClasses['marked'], classes['marked']], track === false && [sliderClasses['trackFalse'], classes['trackFalse']], disabled && sliderClasses['disabled'], orientation === 'vertical' && [sliderClasses['vertical'], classes['vertical']], track === 'inverted' && [sliderClasses['trackInverted'], classes['trackInverted']]),
-    rail: clsx(sliderClasses['rail'], classes['rail']),
-    track: clsx(sliderClasses['track'], classes['track']),
-    mark: clsx(sliderClasses['mark'], classes['mark']),
-    markLabel: clsx(sliderClasses['markLabel'], classes['markLabel']),
-    valueLabel: clsx(sliderClasses['valueLabel'], classes['valueLabel']),
-    thumb: clsx(sliderClasses['thumb'], classes['thumb'], sliderClasses[`thumbColor${capitalize(color)}`], classes[`thumbColor${capitalize(color)}`], disabled && sliderClasses['disabled'], orientation === 'vertical' && sliderClasses['vertical'])
+    root: clsx(sliderUnstyledClasses['root'], classes['root'], marked && [sliderUnstyledClasses['marked'], classes['marked']], track === false && [sliderUnstyledClasses['trackFalse'], classes['trackFalse']], disabled && sliderUnstyledClasses['disabled'], orientation === 'vertical' && [sliderUnstyledClasses['vertical'], classes['vertical']], track === 'inverted' && [sliderUnstyledClasses['trackInverted'], classes['trackInverted']]),
+    rail: clsx(sliderUnstyledClasses['rail'], classes['rail']),
+    track: clsx(sliderUnstyledClasses['track'], classes['track']),
+    mark: clsx(sliderUnstyledClasses['mark'], classes['mark']),
+    markLabel: clsx(sliderUnstyledClasses['markLabel'], classes['markLabel']),
+    valueLabel: clsx(sliderUnstyledClasses['valueLabel'], classes['valueLabel']),
+    thumb: clsx(sliderUnstyledClasses['thumb'], classes['thumb'], disabled && sliderUnstyledClasses['disabled'], orientation === 'vertical' && sliderUnstyledClasses['vertical'])
   };
@@ -189,4 +189,2 @@ return utilityClasses;
 
-const isHostComponent = element => typeof element === 'string';
-
 const Forward = ({
@@ -202,4 +200,5 @@ children
     className,
-    color = 'primary',
     component: Component = 'span',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    classes: classesProps = {},
     defaultValue,
@@ -230,3 +229,3 @@ disabled = false,
   } = props,
-        other = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "color", "component", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
+        other = _objectWithoutPropertiesLoose(props, ["aria-label", "aria-labelledby", "aria-valuetext", "className", "component", "classes", "defaultValue", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps", "theme"]);
 
@@ -648,3 +647,3 @@ const touchId = React.useRef(); // We can't use the :active browser pseudo-classes.
 
-  const Root = components.Root || Component;
+  const Root = components.Root || 'span';
   const rootProps = componentsProps.root || {};
@@ -667,3 +666,2 @@ const Rail = components.Rail || 'span';
     classes: {},
-    color,
     disabled,
@@ -686,9 +684,10 @@ max,
     onMouseDown: handleMouseDown
-  }, !isHostComponent(Root) && {
-    styleProps: stateAndProps,
+  }, rootProps, !isHostComponent(Root) && {
+    as: Component,
+    styleProps: _extends({}, stateAndProps, rootProps.styleProps),
     theme
-  }, rootProps, other, {
+  }, other, {
     className: clsx(utilityClasses.root, rootProps.className, className)
   }), /*#__PURE__*/React.createElement(Rail, _extends({}, railProps, !isHostComponent(Rail) && {
-    styleProps: stateAndProps,
+    styleProps: _extends({}, stateAndProps, railProps.styleProps),
     theme
@@ -698,3 +697,3 @@ }, {
   })), /*#__PURE__*/React.createElement(Track, _extends({}, trackProps, !isHostComponent(Track) && {
-    styleProps: stateAndProps,
+    styleProps: _extends({}, stateAndProps, trackProps.styleProps),
     theme
@@ -724,7 +723,7 @@ }, {
     }, markProps, !isHostComponent(Mark) && {
-      styleProps: stateAndProps,
+      styleProps: _extends({}, stateAndProps, markProps.styleProps),
       theme
     }, {
       style: _extends({}, style, markProps.style),
-      className: clsx(utilityClasses.mark, markProps.className, markActive && sliderClasses['markActive'])
+      className: clsx(utilityClasses.mark, markProps.className, markActive && sliderUnstyledClasses['markActive'])
     })), mark.label != null ? /*#__PURE__*/React.createElement(MarkLabel, _extends({
@@ -734,7 +733,7 @@ "aria-hidden": true,
     }, markLabelProps, !isHostComponent(MarkLabel) && {
-      styleProps: stateAndProps,
+      styleProps: _extends({}, stateAndProps, markLabelProps.styleProps),
       theme
     }, {
       style: _extends({}, style, markLabelProps.style),
-      className: clsx(utilityClasses.markLabel, markLabelProps.className, markActive && sliderClasses['markLabelActive'])
+      className: clsx(utilityClasses.markLabel, markLabelProps.className, markActive && sliderUnstyledClasses['markLabelActive'])
     }), mark.label) : null);
@@ -749,7 +748,3 @@ }), values.map((value, index) => {
       valueLabelDisplay: valueLabelDisplay,
-      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat
-    }, !isHostComponent(ValueLabel) && {
-      styleProps: stateAndProps,
-      theme
-    }, {
+      value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
       index: index,
@@ -760,11 +755,8 @@ open: open === index || active === index || valueLabelDisplay === 'on',
       className: clsx(utilityClasses.valueLabel, valueLabelProps.className)
-    }), /*#__PURE__*/React.createElement(Thumb, _extends({}, thumbProps, {
-      className: clsx(utilityClasses.thumb, thumbProps.className, active === index && sliderClasses['active'], disabled && sliderClasses['disabled'], focusVisible === index && sliderClasses['focusVisible'])
-    }, !isHostComponent(Thumb) && {
-      styleProps: stateAndProps,
+    }, !isHostComponent(ValueLabel) && {
+      styleProps: _extends({}, stateAndProps, valueLabelProps.styleProps),
       theme
-    }, {
+    }), /*#__PURE__*/React.createElement(Thumb, _extends({
       tabIndex: disabled ? null : 0,
       role: "slider",
-      style: _extends({}, style, thumbProps.style),
       "data-index": index,
@@ -783,2 +775,9 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
       onMouseLeave: handleMouseLeave
+    }, thumbProps, {
+      className: clsx(utilityClasses.thumb, thumbProps.className, active === index && sliderUnstyledClasses['active'], disabled && sliderUnstyledClasses['disabled'], focusVisible === index && sliderUnstyledClasses['focusVisible'])
+    }, !isHostComponent(Thumb) && {
+      styleProps: _extends({}, stateAndProps, thumbProps.styleProps),
+      theme
+    }, {
+      style: _extends({}, style, thumbProps.style)
     })));
@@ -831,2 +830,3 @@ }));
    * Override or extend the styles applied to the component.
+   * @default {}
    */
@@ -841,8 +841,2 @@ classes: PropTypes.object,
   /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'primary'
-   */
-  color: PropTypes.oneOf(['primary', 'secondary']),
-
-  /**
    * The component used for the root node.
@@ -849,0 +843,0 @@ * Either a string to use a HTML element or a component.

SliderUnstyled/SliderValueLabelUnstyled.js

 import * as React from 'react';
 import clsx from 'clsx';
-import sliderClasses from './sliderClasses';
+import sliderUnstyledClasses from './sliderUnstyledClasses';
 
@@ -10,5 +10,5 @@ const useValueLabelClasses = props => {
   const utilityClasses = {
-    offset: clsx(sliderClasses.valueLabel, sliderClasses.valueLabelOffset, open && sliderClasses.valueLabelOpen),
-    circle: sliderClasses.valueLabelCircle,
-    label: sliderClasses.valueLabelLabel
+    offset: clsx(sliderUnstyledClasses.valueLabel, sliderUnstyledClasses.valueLabelOffset, open && sliderUnstyledClasses.valueLabelOpen),
+    circle: sliderUnstyledClasses.valueLabelCircle,
+    label: sliderUnstyledClasses.valueLabelLabel
   };
@@ -15,0 +15,0 @@ return utilityClasses;

No alert changes

Improved metrics

Total package byte prevSize

874063

increased by5.6%

Number of package files

57

increased by83.87%

Lines of code

5282

increased by23.9%

Worsened metrics

Number of low supply chain risk alerts

8

increased by100%

Dependency changes

• + Added@material-ui/utils@5.0.0-alpha.19(transitive)

• - Removed@material-ui/utils@5.0.0-beta.5(transitive)

• Updated@material-ui/utils@5.0.0-alpha.19