@mui/material 5.11.3 → 5.11.5

package/modern/index.js

@@ -1,5 +1,7 @@
-/** @license MUI v5.11.3
+/**
+ * @mui/material v5.11.5
  *
+ * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */

package/modern/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/styles/experimental_extendTheme.js

@@ -25,6 +25,13 @@ function setColor(obj, key, defaultValue) {
     obj[key] = defaultValue;
   }
 }
+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(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.`);
+  }
+}
 const silent = fn => {
   try {
     return fn();
@@ -214,11 +221,12 @@ export default function extendTheme(options = {}, ...args) {
       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(color => {
       const colors = palette[color];
 
@@ -240,16 +248,16 @@ export default function extendTheme(options = {}, ...args) {
         }
         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/node/Autocomplete/Autocomplete.js

@@ -516,6 +516,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       className: classes.option
     }), option, {
       selected: optionProps['aria-selected'],
+      index,
       inputValue
     });
   };

package/node/FilledInput/FilledInput.js

@@ -99,12 +99,8 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     [`&.${_filledInputClasses.default.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,

package/node/Input/Input.js

@@ -82,12 +82,8 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     [`&.${_inputClasses.default.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
@@ -103,7 +99,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     },
 
     [`&:hover:not(.${_inputClasses.default.disabled}, .${_inputClasses.default.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`

package/node/MenuItem/MenuItem.js

@@ -252,7 +252,8 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
    */
   role: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
   /**
-   * @ignore
+   * If `true`, the component is selected.
+   * @default false
    */
   selected: _propTypes.default.bool,
   /**

package/node/Slider/Slider.js

@@ -4,26 +4,31 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sliderClasses = exports.default = exports.SliderValueLabel = exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRail = exports.SliderMarkLabel = exports.SliderMark = void 0;
+exports.default = exports.SliderValueLabel = exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRail = exports.SliderMarkLabel = exports.SliderMark = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _SliderUnstyled = _interopRequireWildcard(require("@mui/base/SliderUnstyled"));
+var _base = require("@mui/base");
+var _SliderUnstyled = require("@mui/base/SliderUnstyled");
 var _system = require("@mui/system");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
+var _sliderClasses = _interopRequireDefault(require("./sliderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const sliderClasses = (0, _extends2.default)({}, _SliderUnstyled.sliderUnstyledClasses, (0, _utils.unstable_generateUtilityClasses)('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
-exports.sliderClasses = sliderClasses;
+const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
+function Identity(x) {
+  return x;
+}
 const SliderRoot = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Root',
@@ -75,13 +80,13 @@ const SliderRoot = (0, _styled.default)('span', {
   '@media print': {
     colorAdjust: 'exact'
   },
-  [`&.${sliderClasses.disabled}`]: {
+  [`&.${_sliderClasses.default.disabled}`]: {
     pointerEvents: 'none',
     cursor: 'default',
     color: (theme.vars || theme).palette.grey[400]
   },
-  [`&.${sliderClasses.dragging}`]: {
-    [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+  [`&.${_sliderClasses.default.dragging}`]: {
+    [`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.track}`]: {
       transition: 'none'
     }
   }
@@ -238,16 +243,16 @@ const SliderThumb = (0, _styled.default)('span', {
     left: '50%',
     transform: 'translate(-50%, -50%)'
   },
-  [`&:hover, &.${sliderClasses.focusVisible}`]: {
+  [`&:hover, &.${_sliderClasses.default.focusVisible}`]: {
     boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   },
-  [`&.${sliderClasses.active}`]: {
+  [`&.${_sliderClasses.default.active}`]: {
     boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`
   },
-  [`&.${sliderClasses.disabled}`]: {
+  [`&.${_sliderClasses.default.disabled}`]: {
     '&:hover': {
       boxShadow: 'none'
     }
@@ -264,7 +269,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
    */
   children: _propTypes.default.node
 } : void 0;
-const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUnstyled, {
+const SliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -272,7 +277,7 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  [`&.${sliderClasses.valueLabelOpen}`]: {
+  [`&.${_sliderClasses.default.valueLabelOpen}`]: {
     transform: 'translateY(-100%) scale(1)'
   },
   zIndex: 1,
@@ -413,19 +418,38 @@ process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-prop
    */
   children: _propTypes.default.node
 } : void 0;
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
+    disabled,
+    dragging,
+    marked,
+    orientation,
+    track,
+    classes,
     color,
-    size,
-    classes = {}
+    size
   } = ownerState;
-  return (0, _extends2.default)({}, classes, {
-    root: (0, _clsx.default)(classes.root, (0, _SliderUnstyled.getSliderUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`], size && [(0, _SliderUnstyled.getSliderUtilityClass)(`size${(0, _capitalize.default)(size)}`), classes[`size${(0, _capitalize.default)(size)}`]]),
-    thumb: (0, _clsx.default)(classes.thumb, (0, _SliderUnstyled.getSliderUtilityClass)(`thumbColor${(0, _capitalize.default)(color)}`), classes[`thumbColor${(0, _capitalize.default)(color)}`], size && [(0, _SliderUnstyled.getSliderUtilityClass)(`thumbSize${(0, _capitalize.default)(size)}`), classes[`thumbSize${(0, _capitalize.default)(size)}`]])
-  });
+  const slots = {
+    root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && `color${(0, _capitalize.default)(color)}`, size && `size${(0, _capitalize.default)(size)}`],
+    rail: ['rail'],
+    track: ['track'],
+    mark: ['mark'],
+    markActive: ['markActive'],
+    markLabel: ['markLabel'],
+    markLabelActive: ['markLabelActive'],
+    valueLabel: ['valueLabel'],
+    thumb: ['thumb', disabled && 'disabled', size && `thumbSize${(0, _capitalize.default)(size)}`, color && `thumbColor${(0, _capitalize.default)(color)}`],
+    active: ['active'],
+    disabled: ['disabled'],
+    focusVisible: ['focusVisible']
+  };
+  return (0, _base.unstable_composeClasses)(slots, _SliderUnstyled.getSliderUtilityClass, classes);
 };
+const Forward = ({
+  children
+}) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
+  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
   const props = (0, _useThemeProps.default)({
     props: inputProps,
     name: 'MuiSlider'
@@ -433,21 +457,74 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const theme = (0, _useTheme.default)();
   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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, 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
+  } = (0, _SliderUnstyled.useSlider)((0, _extends2.default)({}, 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 = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : SliderRoot;
@@ -457,7 +534,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : SliderValueLabel;
   const MarkSlot = (_ref6 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref6 : SliderMark;
   const MarkLabelSlot = (_ref7 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref7 : SliderMarkLabel;
-  const InputSlot = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input;
+  const InputSlot = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
   const trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
@@ -466,51 +543,123 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
   const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
   const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SliderUnstyled.default, (0, _extends2.default)({}, other, {
-    isRtl: isRtl,
-    slots: {
-      root: RootSlot,
-      rail: RailSlot,
-      track: TrackSlot,
-      thumb: ThumbSlot,
-      valueLabel: ValueLabelSlot,
-      mark: MarkSlot,
-      markLabel: MarkLabelSlot,
-      input: InputSlot
-    },
-    slotProps: (0, _extends2.default)({}, componentsProps, {
-      root: (0, _extends2.default)({}, rootSlotProps, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
-        as: component,
-        ownerState: (0, _extends2.default)({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      rail: railSlotProps,
-      thumb: (0, _extends2.default)({}, thumbSlotProps, (0, _shouldSpreadAdditionalProps.default)(ThumbSlot) && {
-        ownerState: (0, _extends2.default)({}, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      track: (0, _extends2.default)({}, trackSlotProps, (0, _shouldSpreadAdditionalProps.default)(TrackSlot) && {
-        ownerState: (0, _extends2.default)({}, trackSlotProps == null ? void 0 : trackSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      valueLabel: (0, _extends2.default)({}, valueLabelSlotProps, (0, _shouldSpreadAdditionalProps.default)(ValueLabelSlot) && {
-        ownerState: (0, _extends2.default)({}, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      mark: markSlotProps,
-      markLabel: markLabelSlotProps,
-      input: inputSlotProps
+  const rootProps = (0, _base.useSlotProps)({
+    elementType: RootSlot,
+    getSlotProps: getRootProps,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: (0, _extends2.default)({}, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
+      as: component
     }),
-    classes: classes,
-    ref: ref
+    ownerState: (0, _extends2.default)({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    className: [classes.root, className]
+  });
+  const railProps = (0, _base.useSlotProps)({
+    elementType: RailSlot,
+    externalSlotProps: railSlotProps,
+    ownerState,
+    className: classes.rail
+  });
+  const trackProps = (0, _base.useSlotProps)({
+    elementType: TrackSlot,
+    externalSlotProps: trackSlotProps,
+    additionalProps: {
+      style: (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState: (0, _extends2.default)({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
+    className: classes.track
+  });
+  const thumbProps = (0, _base.useSlotProps)({
+    elementType: ThumbSlot,
+    getSlotProps: getThumbProps,
+    externalSlotProps: thumbSlotProps,
+    ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+  });
+  const valueLabelProps = (0, _base.useSlotProps)({
+    elementType: ValueLabelSlot,
+    externalSlotProps: valueLabelSlotProps,
+    ownerState: (0, _extends2.default)({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    className: classes.valueLabel
+  });
+  const markProps = (0, _base.useSlotProps)({
+    elementType: MarkSlot,
+    externalSlotProps: markSlotProps,
+    ownerState,
+    className: classes.mark
+  });
+  const markLabelProps = (0, _base.useSlotProps)({
+    elementType: MarkLabelSlot,
+    externalSlotProps: markLabelSlotProps,
+    ownerState
+  });
+  const inputSliderProps = (0, _base.useSlotProps)({
+    elementType: InputSlot,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: inputSlotProps,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, (0, _extends2.default)({}, rootProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RailSlot, (0, _extends2.default)({}, railProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, (0, _extends2.default)({
+          "data-index": index
+        }, markProps, !(0, _base.isHostComponent)(MarkSlot) && {
+          markActive
+        }, {
+          style: (0, _extends2.default)({}, style, markProps.style),
+          className: (0, _clsx.default)(markProps.className, markActive && classes.markActive)
+        })), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, (0, _extends2.default)({
+          "aria-hidden": true,
+          "data-index": index
+        }, markLabelProps, !(0, _base.isHostComponent)(MarkLabelSlot) && {
+          markLabelActive: markActive
+        }, {
+          style: (0, _extends2.default)({}, style, markLabelProps.style),
+          className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _base.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__*/(0, _jsxRuntime.jsx)(ThumbSlot, (0, _extends2.default)({
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+            style: (0, _extends2.default)({}, style, {
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined
+            }, thumbProps.style),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, (0, _extends2.default)({
+              "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 */ = {
@@ -680,7 +829,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   orientation: _propTypes.default.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.default.func,
   /**
@@ -771,7 +924,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.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
 } : void 0;