@mui/material 5.8.2 → 5.8.3

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export declare type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export declare type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/className/index.d.ts

@@ -1 +1 @@
-export { unstable_ClassNameGenerator } from '@mui/utils';
+export { unstable_ClassNameGenerator } from '@mui/utils';

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.2
+/** @license MUI v5.8.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Alert/Alert.js

@@ -90,7 +90,9 @@ var AlertMessage = styled('div', {
     return styles.message;
   }
 })({
-  padding: '8px 0'
+  padding: '8px 0',
+  minWidth: 0,
+  overflow: 'auto'
 });
 var AlertAction = styled('div', {
   name: 'MuiAlert',

package/legacy/Checkbox/Checkbox.js

@@ -43,19 +43,19 @@ var CheckboxRoot = styled(SwitchBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, ownerState.color !== 'default' && (_ref2 = {}, _defineProperty(_ref2, "&.".concat(checkboxClasses.checked, ", &.").concat(checkboxClasses.indeterminate), {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), _defineProperty(_ref2, "&.".concat(checkboxClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }), _ref2));
 });
 

package/legacy/Slider/Slider.js

@@ -283,7 +283,6 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    top: -10,
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
@@ -294,20 +293,34 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     alignItems: 'center',
     justifyContent: 'center',
     padding: '0.25rem 0.75rem'
-  }, ownerState.size === 'small' && {
-    fontSize: theme.typography.pxToRem(12),
-    padding: '0.25rem 0.5rem'
-  }, {
+  }, ownerState.orientation === 'horizontal' && {
+    top: '-10px',
     '&:before': {
       position: 'absolute',
       content: '""',
       width: 8,
       height: 8,
+      transform: 'translate(-50%, 50%) rotate(45deg)',
+      backgroundColor: 'inherit',
       bottom: 0,
-      left: '50%',
+      left: '50%'
+    }
+  }, ownerState.orientation === 'vertical' && {
+    right: '30px',
+    top: '25px',
+    '&:before': {
+      position: 'absolute',
+      content: '""',
+      width: 8,
+      height: 8,
       transform: 'translate(-50%, 50%) rotate(45deg)',
-      backgroundColor: 'inherit'
+      backgroundColor: 'inherit',
+      right: '-20%',
+      top: '25%'
     }
+  }, ownerState.size === 'small' && {
+    fontSize: theme.typography.pxToRem(12),
+    padding: '0.25rem 0.5rem'
   });
 });
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.2
+/** @license MUI v5.8.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/styles/CssVarsProvider.js

@@ -8,6 +8,9 @@ var defaultTheme = experimental_extendTheme();
 
 var _createCssVarsProvide = createCssVarsProvider({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Alert/Alert.js

@@ -93,7 +93,9 @@ const AlertMessage = styled('div', {
   slot: 'Message',
   overridesResolver: (props, styles) => styles.message
 })({
-  padding: '8px 0'
+  padding: '8px 0',
+  minWidth: 0,
+  overflow: 'auto'
 });
 const AlertAction = styled('div', {
   name: 'MuiAlert',

package/modern/Checkbox/Checkbox.js

@@ -43,10 +43,10 @@ const CheckboxRoot = styled(SwitchBase, {
   theme,
   ownerState
 }) => _extends({
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }, !ownerState.disableRipple && {
   '&:hover': {
-    backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -54,10 +54,10 @@ const CheckboxRoot = styled(SwitchBase, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   },
   [`&.${checkboxClasses.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 

package/modern/Slider/Slider.js

@@ -284,7 +284,6 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  top: -10,
   transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
@@ -295,20 +294,34 @@ const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   alignItems: 'center',
   justifyContent: 'center',
   padding: '0.25rem 0.75rem'
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(12),
-  padding: '0.25rem 0.5rem'
-}, {
+}, ownerState.orientation === 'horizontal' && {
+  top: '-10px',
   '&:before': {
     position: 'absolute',
     content: '""',
     width: 8,
     height: 8,
+    transform: 'translate(-50%, 50%) rotate(45deg)',
+    backgroundColor: 'inherit',
     bottom: 0,
-    left: '50%',
+    left: '50%'
+  }
+}, ownerState.orientation === 'vertical' && {
+  right: '30px',
+  top: '25px',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
     transform: 'translate(-50%, 50%) rotate(45deg)',
-    backgroundColor: 'inherit'
+    backgroundColor: 'inherit',
+    right: '-20%',
+    top: '25%'
   }
+}, ownerState.size === 'small' && {
+  fontSize: theme.typography.pxToRem(12),
+  padding: '0.25rem 0.5rem'
 }));
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
 /* remove-proptypes */

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.2
+/** @license MUI v5.8.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/styles/CssVarsProvider.js

@@ -11,6 +11,9 @@ const {
   getInitColorSchemeScript
 } = createCssVarsProvider({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'

package/node/Alert/Alert.js

@@ -123,7 +123,9 @@ const AlertMessage = (0, _styled.default)('div', {
   slot: 'Message',
   overridesResolver: (props, styles) => styles.message
 })({
-  padding: '8px 0'
+  padding: '8px 0',
+  minWidth: 0,
+  overflow: 'auto'
 });
 const AlertAction = (0, _styled.default)('div', {
   name: 'MuiAlert',

package/node/Checkbox/Checkbox.js

@@ -72,10 +72,10 @@ const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }, !ownerState.disableRipple && {
   '&:hover': {
-    backgroundColor: (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -83,10 +83,10 @@ const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   },
   [`&.${_checkboxClasses.default.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.default, {});

package/node/Slider/Slider.js

@@ -314,7 +314,6 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  top: -10,
   transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
@@ -325,20 +324,34 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   alignItems: 'center',
   justifyContent: 'center',
   padding: '0.25rem 0.75rem'
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(12),
-  padding: '0.25rem 0.5rem'
-}, {
+}, ownerState.orientation === 'horizontal' && {
+  top: '-10px',
   '&:before': {
     position: 'absolute',
     content: '""',
     width: 8,
     height: 8,
+    transform: 'translate(-50%, 50%) rotate(45deg)',
+    backgroundColor: 'inherit',
     bottom: 0,
-    left: '50%',
+    left: '50%'
+  }
+}, ownerState.orientation === 'vertical' && {
+  right: '30px',
+  top: '25px',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
     transform: 'translate(-50%, 50%) rotate(45deg)',
-    backgroundColor: 'inherit'
+    backgroundColor: 'inherit',
+    right: '-20%',
+    top: '25%'
   }
+}, ownerState.size === 'small' && {
+  fontSize: theme.typography.pxToRem(12),
+  padding: '0.25rem 0.5rem'
 }));
 exports.SliderValueLabel = SliderValueLabel;
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.2
+/** @license MUI v5.8.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.