@mui/material 5.11.4 → 5.11.6

package/legacy/styles/experimental_extendTheme.js

@@ -25,6 +25,13 @@ function setColor(obj, key, defaultValue) {
     obj[key] = defaultValue;
   }
 }
+function setColorChannel(obj, key) {
+  if (!("".concat(key, "Channel") in obj)) {
+    // custom channel token is not provided, generate one.
+    // if channel token can't be generated, show a warning.
+    obj["".concat(key, "Channel")] = safeColorChannel(obj[key], "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(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.".concat(key, "Channel` as a string (in rgb format, e.g. \"12 12 12\") or undefined if you want to remove the channel token."));
+  }
+}
 var silent = function silent(fn) {
   try {
     return fn();
@@ -236,11 +243,12 @@ export default function extendTheme() {
       setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
     }
-    setColor(palette.background, 'defaultChannel', safeColorChannel(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
 
-    setColor(palette.common, 'backgroundChannel', safeColorChannel(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-    setColor(palette.common, 'onBackgroundChannel', safeColorChannel(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-    setColor(palette, 'dividerChannel', safeColorChannel(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+    // MUI X - DataGrid needs this token.
+    setColorChannel(palette.background, 'default');
+    setColorChannel(palette.common, 'background');
+    setColorChannel(palette.common, 'onBackground');
+    setColorChannel(palette, 'divider');
     Object.keys(palette).forEach(function (color) {
       var colors = palette[color];
 
@@ -262,16 +270,16 @@ export default function extendTheme() {
         }
         if (color === 'text') {
           // Text colors: text.primary, text.secondary
-          setColor(palette[color], 'primaryChannel', safeColorChannel(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
-          setColor(palette[color], 'secondaryChannel', safeColorChannel(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          setColorChannel(palette[color], 'primary');
+          setColorChannel(palette[color], 'secondary');
         }
         if (color === 'action') {
           // Action colors: action.active, action.selected
           if (colors.active) {
-            setColor(palette[color], 'activeChannel', safeColorChannel(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColorChannel(palette[color], 'active');
           }
           if (colors.selected) {
-            setColor(palette[color], 'selectedChannel', safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+            setColorChannel(palette[color], 'selected');
           }
         }
       }

package/locale/index.d.ts

@@ -27,6 +27,7 @@ export declare const arSA: Localization;
 export declare const arSD: Localization;
 export declare const azAZ: Localization;
 export declare const bnBD: Localization;
+export declare const beBY: Localization;
 export declare const bgBG: Localization;
 export declare const caES: Localization;
 export declare const csCZ: Localization;

package/locale/index.js

@@ -441,6 +441,91 @@ export const bnBD = {
     }
   }
 };
+export const beBY = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'Паказаць шлях'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'Перайсці на першую старонку';
+          }
+          if (type === 'last') {
+            return 'Перайсці на апошнюю старонку';
+          }
+          if (type === 'next') {
+            return 'Перайсці на наступную старонку';
+          }
+          // if (type === 'previous') {
+          return 'Перайсці на папярэднюю старонку';
+        },
+        labelRowsPerPage: 'Радкоў на старонцы:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} з ${count !== -1 ? count : `больш чым ${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => {
+          let pluralForm = 'Зорак';
+          const lastDigit = value % 10;
+          if (lastDigit > 1 && lastDigit < 5 && (value < 10 || value > 20)) {
+            pluralForm = 'Зоркі';
+          } else if (lastDigit === 1 && value % 100 !== 11) {
+            pluralForm = 'Зорка';
+          }
+          return `${value} ${pluralForm}`;
+        },
+        emptyLabelText: 'Рэйтынг адсутнічае'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'Ачысціць',
+        closeText: 'Закрыць',
+        loadingText: 'Загрузка…',
+        noOptionsText: 'Няма варыянтаў',
+        openText: 'Адкрыць'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'Закрыць'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'Навігацыя па старонкам',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            if (selected) {
+              return `${page} старонка`;
+            }
+            return `Перайсці на ${page} старонку`;
+          }
+          if (type === 'first') {
+            return 'Перайсці на першую старонку';
+          }
+          if (type === 'last') {
+            return 'Перайсці на апошнюю старонку';
+          }
+          if (type === 'next') {
+            return 'Перайсці на наступную старонку';
+          }
+          // if (type === 'previous') {
+          return 'Перайсці на папярэднюю старонку';
+        }
+      }
+    }
+  }
+};
 export const bgBG = {
   components: {
     MuiBreadcrumbs: {

package/modern/Button/Button.js

@@ -111,8 +111,6 @@ const ButtonRoot = styled(ButtonBase, {
     color: (theme.vars || theme).palette.action.disabled
   }, ownerState.variant === 'outlined' && {
     border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-  }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
   }, ownerState.variant === 'contained' && {
     color: (theme.vars || theme).palette.action.disabled,
     boxShadow: (theme.vars || theme).shadows[0],

package/modern/Slider/Slider.js

@@ -1,19 +1,26 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"];
+const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
+import { chainPropTypes } from '@mui/utils';
+import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
+import { useSlider } from '@mui/base/SliderUnstyled';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
+import SliderValueLabel from './SliderValueLabel';
+import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
+function Identity(x) {
+  return x;
+}
 const SliderRoot = styled('span', {
   name: 'MuiSlider',
   slot: 'Root',
@@ -254,7 +261,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
   children: PropTypes.node
 } : void 0;
 export { SliderThumb };
-const SliderValueLabel = styled(SliderValueLabelUnstyled, {
+const StyledSliderValueLabel = styled(SliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -312,7 +319,7 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   fontSize: theme.typography.pxToRem(12),
   padding: '0.25rem 0.5rem'
 }));
-process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? StyledSliderValueLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -322,7 +329,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
    */
   children: PropTypes.node
 } : void 0;
-export { SliderValueLabel };
+export { StyledSliderValueLabel as SliderValueLabel };
 const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -403,17 +410,36 @@ process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-prop
   children: PropTypes.node
 } : void 0;
 export { SliderMarkLabel };
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
+    disabled,
+    dragging,
+    marked,
+    orientation,
+    track,
+    classes,
     color,
-    size,
-    classes = {}
+    size
   } = ownerState;
-  return _extends({}, classes, {
-    root: clsx(classes.root, getSliderUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`], size && [getSliderUtilityClass(`size${capitalize(size)}`), classes[`size${capitalize(size)}`]]),
-    thumb: clsx(classes.thumb, getSliderUtilityClass(`thumbColor${capitalize(color)}`), classes[`thumbColor${capitalize(color)}`], size && [getSliderUtilityClass(`thumbSize${capitalize(size)}`), classes[`thumbSize${capitalize(size)}`]])
-  });
+  const slots = {
+    root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && `color${capitalize(color)}`, size && `size${capitalize(size)}`],
+    rail: ['rail'],
+    track: ['track'],
+    mark: ['mark'],
+    markActive: ['markActive'],
+    markLabel: ['markLabel'],
+    markLabelActive: ['markLabelActive'],
+    valueLabel: ['valueLabel'],
+    thumb: ['thumb', disabled && 'disabled', size && `thumbSize${capitalize(size)}`, color && `thumbColor${capitalize(color)}`],
+    active: ['active'],
+    disabled: ['disabled'],
+    focusVisible: ['focusVisible']
+  };
+  return composeClasses(slots, getSliderUtilityClass, classes);
 };
+const Forward = ({
+  children
+}) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const props = useThemeProps({
     props: inputProps,
@@ -422,31 +448,84 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
   const {
+      'aria-label': ariaLabel,
+      'aria-valuetext': ariaValuetext,
+      'aria-labelledby': ariaLabelledby,
       // eslint-disable-next-line react/prop-types
       component = 'span',
       components = {},
       componentsProps = {},
       color = 'primary',
+      classes: classesProp,
+      // eslint-disable-next-line react/prop-types
+      className,
+      disableSwap = false,
+      disabled = false,
+      getAriaLabel,
+      getAriaValueText,
+      marks: marksProp = false,
+      max = 100,
+      min = 0,
+      orientation = 'horizontal',
       size = 'medium',
+      step = 1,
+      scale = Identity,
       slotProps,
-      slots
+      slots,
+      track = 'normal',
+      valueLabelDisplay = 'off',
+      valueLabelFormat = Identity
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
+    isRtl,
+    max,
+    min,
+    classes: classesProp,
+    disabled,
+    disableSwap,
+    orientation,
+    marks: marksProp,
     color,
-    size
+    size,
+    step,
+    scale,
+    track,
+    valueLabelDisplay,
+    valueLabelFormat
   });
-  const classes = extendUtilityClasses(ownerState);
+  const {
+    axisProps,
+    getRootProps,
+    getHiddenInputProps,
+    getThumbProps,
+    open,
+    active,
+    axis,
+    focusedThumbIndex,
+    range,
+    dragging,
+    marks,
+    values,
+    trackOffset,
+    trackLeap
+  } = useSlider(_extends({}, ownerState, {
+    ref
+  }));
+  ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
+  ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
   const RootSlot = slots?.root ?? components.Root ?? SliderRoot;
   const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
   const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
   const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb;
-  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel;
+  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? StyledSliderValueLabel;
   const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark;
   const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel;
-  const InputSlot = slots?.input ?? components.Input;
+  const InputSlot = slots?.input ?? components.Input ?? 'input';
   const rootSlotProps = slotProps?.root ?? componentsProps.root;
   const railSlotProps = slotProps?.rail ?? componentsProps.rail;
   const trackSlotProps = slotProps?.track ?? componentsProps.track;
@@ -455,51 +534,123 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markSlotProps = slotProps?.mark ?? componentsProps.mark;
   const markLabelSlotProps = slotProps?.markLabel ?? componentsProps.markLabel;
   const inputSlotProps = slotProps?.input ?? componentsProps.input;
-  return /*#__PURE__*/_jsx(SliderUnstyled, _extends({}, other, {
-    isRtl: isRtl,
-    slots: {
-      root: RootSlot,
-      rail: RailSlot,
-      track: TrackSlot,
-      thumb: ThumbSlot,
-      valueLabel: ValueLabelSlot,
-      mark: MarkSlot,
-      markLabel: MarkLabelSlot,
-      input: InputSlot
-    },
-    slotProps: _extends({}, componentsProps, {
-      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
-        as: component,
-        ownerState: _extends({}, rootSlotProps?.ownerState, {
-          color,
-          size
-        })
-      }),
-      rail: railSlotProps,
-      thumb: _extends({}, thumbSlotProps, shouldSpreadAdditionalProps(ThumbSlot) && {
-        ownerState: _extends({}, thumbSlotProps?.ownerState, {
-          color,
-          size
-        })
-      }),
-      track: _extends({}, trackSlotProps, shouldSpreadAdditionalProps(TrackSlot) && {
-        ownerState: _extends({}, trackSlotProps?.ownerState, {
-          color,
-          size
-        })
-      }),
-      valueLabel: _extends({}, valueLabelSlotProps, shouldSpreadAdditionalProps(ValueLabelSlot) && {
-        ownerState: _extends({}, valueLabelSlotProps?.ownerState, {
-          color,
-          size
-        })
-      }),
-      mark: markSlotProps,
-      markLabel: markLabelSlotProps,
-      input: inputSlotProps
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    getSlotProps: getRootProps,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
+      as: component
     }),
-    classes: classes,
-    ref: ref
+    ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
+    className: [classes.root, className]
+  });
+  const railProps = useSlotProps({
+    elementType: RailSlot,
+    externalSlotProps: railSlotProps,
+    ownerState,
+    className: classes.rail
+  });
+  const trackProps = useSlotProps({
+    elementType: TrackSlot,
+    externalSlotProps: trackSlotProps,
+    additionalProps: {
+      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState: _extends({}, ownerState, trackSlotProps?.ownerState),
+    className: classes.track
+  });
+  const thumbProps = useSlotProps({
+    elementType: ThumbSlot,
+    getSlotProps: getThumbProps,
+    externalSlotProps: thumbSlotProps,
+    ownerState: _extends({}, ownerState, thumbSlotProps?.ownerState)
+  });
+  const valueLabelProps = useSlotProps({
+    elementType: ValueLabelSlot,
+    externalSlotProps: valueLabelSlotProps,
+    ownerState: _extends({}, ownerState, valueLabelSlotProps?.ownerState),
+    className: classes.valueLabel
+  });
+  const markProps = useSlotProps({
+    elementType: MarkSlot,
+    externalSlotProps: markSlotProps,
+    ownerState,
+    className: classes.mark
+  });
+  const markLabelProps = useSlotProps({
+    elementType: MarkLabelSlot,
+    externalSlotProps: markLabelSlotProps,
+    ownerState
+  });
+  const inputSliderProps = useSlotProps({
+    elementType: InputSlot,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: inputSlotProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
+    children: [/*#__PURE__*/_jsx(RailSlot, _extends({}, railProps)), /*#__PURE__*/_jsx(TrackSlot, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+      const percent = valueToPercent(mark.value, min, max);
+      const style = axisProps[axis].offset(percent);
+      let markActive;
+      if (track === false) {
+        markActive = values.indexOf(mark.value) !== -1;
+      } else {
+        markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
+      }
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
+          "data-index": index
+        }, markProps, !isHostComponent(MarkSlot) && {
+          markActive
+        }, {
+          style: _extends({}, style, markProps.style),
+          className: clsx(markProps.className, markActive && classes.markActive)
+        })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
+          "aria-hidden": true,
+          "data-index": index
+        }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
+          markLabelActive: markActive
+        }, {
+          style: _extends({}, style, markLabelProps.style),
+          className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+          children: mark.label
+        })) : null]
+      }, index);
+    }), values.map((value, index) => {
+      const percent = valueToPercent(value, min, max);
+      const style = axisProps[axis].offset(percent);
+      const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
+      return /*#__PURE__*/_jsx(React.Fragment, {
+        children: /*#__PURE__*/_jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
+          valueLabelFormat,
+          valueLabelDisplay,
+          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+          index,
+          open: open === index || active === index || valueLabelDisplay === 'on',
+          disabled
+        }, valueLabelProps, {
+          children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+            style: _extends({}, style, {
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined
+            }, thumbProps.style),
+            children: /*#__PURE__*/_jsx(InputSlot, _extends({
+              "data-index": index,
+              "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+              "aria-valuenow": scale(value),
+              "aria-labelledby": ariaLabelledby,
+              "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+              value: values[index]
+            }, inputSliderProps))
+          }))
+        }))
+      }, index);
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
@@ -669,7 +820,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * A transformation function, to change the scale of the slider.
-   * @default (x) => x
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
    */
   scale: PropTypes.func,
   /**
@@ -760,7 +915,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    *
    * - {number} value The value label's value to format
    * - {number} index The value label's index to format
-   * @default (x) => x
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
    */
   valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 } : void 0;

package/modern/Slider/SliderValueLabel.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import sliderClasses from './sliderClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useValueLabelClasses = props => {
+  const {
+    open
+  } = props;
+  const utilityClasses = {
+    offset: clsx(open && sliderClasses.valueLabelOpen),
+    circle: sliderClasses.valueLabelCircle,
+    label: sliderClasses.valueLabelLabel
+  };
+  return utilityClasses;
+};
+
+/**
+ * @ignore - internal component.
+ */
+export default function SliderValueLabel(props) {
+  const {
+    children,
+    className,
+    value
+  } = props;
+  const classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.cloneElement(children, {
+    className: clsx(children.props.className)
+  }, /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [children.props.children, /*#__PURE__*/_jsx("span", {
+      className: clsx(classes.offset, className),
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("span", {
+        className: classes.circle,
+        children: /*#__PURE__*/_jsx("span", {
+          className: classes.label,
+          children: value
+        })
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+  className: PropTypes.string,
+  value: PropTypes.node
+} : void 0;

package/modern/Slider/SliderValueLabel.types.js

@@ -0,0 +1 @@
+export {};

package/modern/Slider/index.js

@@ -1,2 +1,4 @@
 export { default } from './Slider';
-export * from './Slider';
+export * from './Slider';
+export { default as sliderClasses } from './sliderClasses';
+export * from './sliderClasses';

package/modern/Slider/sliderClasses.js

@@ -0,0 +1,7 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
+export function getSliderUtilityClass(slot) {
+  return generateUtilityClass('MuiSlider', slot);
+}
+const sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
+export default sliderClasses;