@mui/material 5.5.3 → 5.6.0

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/locale/index.js

@@ -1047,9 +1047,12 @@ export const etEE = {
 
           return 'Vali eelmine lehekülg';
         },
-        labelRowsPerPage: 'Ridu leheküljel:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Ridu leheküljel:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `rohkem kui ${to}`}`
       }
     },
     MuiRating: {

package/modern/Badge/Badge.js

@@ -1,19 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses } from '@mui/base';
-import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
+import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
-'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
@@ -21,12 +19,15 @@ const extendUtilityClasses = ownerState => {
   const {
     color,
     anchorOrigin,
+    invisible,
     overlap,
+    variant,
     classes = {}
   } = ownerState;
-  return _extends({}, classes, {
-    badge: clsx(classes.badge, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
-  });
+  return {
+    root: clsx(classes.root, 'root'),
+    badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]], invisible && getBadgeUtilityClass('invisible'))
+  };
 };
 
 const BadgeRoot = styled('span', {
@@ -164,12 +165,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       vertical: 'top',
       horizontal: 'right'
     },
+    className,
     component = 'span',
     components = {},
     componentsProps = {},
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
     invisible: invisibleProp = false,
+    max,
     badgeContent: badgeContentProp,
     showZero = false,
     variant: variantProp = 'standard'
@@ -179,7 +182,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
-    overlap: overlapProp
+    overlap: overlapProp,
+    variant: variantProp
   });
   let invisible = invisibleProp;
 
@@ -190,44 +194,57 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const {
     color = colorProp,
     overlap = overlapProp,
-    anchorOrigin = anchorOriginProp
+    anchorOrigin = anchorOriginProp,
+    variant = variantProp
   } = invisible ? prevProps : props;
 
   const ownerState = _extends({}, props, {
     anchorOrigin,
     invisible,
     color,
-    overlap
+    overlap,
+    variant
   });
 
   const classes = extendUtilityClasses(ownerState);
+  let displayValue;
+
+  if (variant !== 'dot') {
+    displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
+  }
+
   return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
-    anchorOrigin: anchorOrigin,
     invisible: invisibleProp,
-    badgeContent: badgeContentProp,
+    badgeContent: displayValue,
     showZero: showZero,
-    variant: variantProp
+    max: max
   }, other, {
     components: _extends({
       Root: BadgeRoot,
       Badge: BadgeBadge
     }, components),
+    className: clsx(className, classes.root, componentsProps.root?.className),
     componentsProps: {
       root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
         as: component,
         ownerState: _extends({}, componentsProps.root?.ownerState, {
+          anchorOrigin,
           color,
-          overlap
+          overlap,
+          variant
         })
       }),
-      badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
+      badge: _extends({}, componentsProps.badge, {
+        className: clsx(classes.badge, componentsProps.badge?.className)
+      }, shouldSpreadAdditionalProps(components.Badge) && {
         ownerState: _extends({}, componentsProps.badge?.ownerState, {
+          anchorOrigin,
           color,
-          overlap
+          overlap,
+          variant
         })
       })
     },
-    classes: classes,
     ref: ref
   }));
 });
@@ -266,6 +283,11 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/modern/Badge/badgeClasses.js

@@ -0,0 +1,8 @@
+import generateUtilityClasses from '@mui/base/generateUtilityClasses';
+import generateUtilityClass from '@mui/base/generateUtilityClass';
+export function getBadgeUtilityClass(slot) {
+  return generateUtilityClass('MuiBadge', slot);
+}
+const badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
+export default badgeClasses;

package/modern/Badge/index.js

@@ -1,2 +1,3 @@
 export { default } from './Badge';
-export * from './Badge';
+export { default as badgeClasses } from './badgeClasses';
+export * from './badgeClasses';

package/modern/Button/Button.js

@@ -65,79 +65,80 @@ const ButtonRoot = styled(ButtonBase, {
 }) => _extends({}, theme.typography.button, {
   minWidth: 64,
   padding: '6px 16px',
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
   transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
     duration: theme.transitions.duration.short
   }),
   '&:hover': _extends({
     textDecoration: 'none',
-    backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
   }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
   }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    border: `1px solid ${theme.palette[ownerState.color].main}`,
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
   }, ownerState.variant === 'contained' && {
-    backgroundColor: theme.palette.grey.A100,
-    boxShadow: theme.shadows[4],
+    backgroundColor: (theme.vars || theme).palette.grey.A100,
+    boxShadow: (theme.vars || theme).shadows[4],
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      boxShadow: theme.shadows[2],
-      backgroundColor: theme.palette.grey[300]
+      boxShadow: (theme.vars || theme).shadows[2],
+      backgroundColor: (theme.vars || theme).palette.grey[300]
     }
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    backgroundColor: theme.palette[ownerState.color].dark,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.palette[ownerState.color].main
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
     }
   }),
   '&:active': _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[8]
+    boxShadow: (theme.vars || theme).shadows[8]
   }),
   [`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[6]
+    boxShadow: (theme.vars || theme).shadows[6]
   }),
   [`&.${buttonClasses.disabled}`]: _extends({
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${theme.palette.action.disabledBackground}`
+    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
   }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: `1px solid ${theme.palette.action.disabled}`
+    border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
   }, ownerState.variant === 'contained' && {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
+    color: (theme.vars || theme).palette.action.disabled,
+    boxShadow: (theme.vars || theme).shadows[0],
+    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   })
 }, ownerState.variant === 'text' && {
   padding: '6px 8px'
 }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].main
 }, ownerState.variant === 'outlined' && {
   padding: '5px 15px',
-  border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+  border: '1px solid currentColor'
 }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main,
-  border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
+  color: (theme.vars || theme).palette[ownerState.color].main,
+  border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
 }, ownerState.variant === 'contained' && {
-  color: theme.palette.getContrastText(theme.palette.grey[300]),
-  backgroundColor: theme.palette.grey[300],
-  boxShadow: theme.shadows[2]
+  color: theme.vars ? // this is safe because grey does not change between default light/dark mode
+  theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
+  backgroundColor: (theme.vars || theme).palette.grey[300],
+  boxShadow: (theme.vars || theme).shadows[2]
 }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].contrastText,
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main
 }, ownerState.color === 'inherit' && {
   color: 'inherit',
   borderColor: 'currentColor'

package/modern/Link/Link.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"];
+const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -9,6 +9,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
+import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
@@ -97,6 +98,7 @@ const LinkRoot = styled(Typography, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -110,7 +112,8 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus,
     TypographyClasses,
     underline = 'always',
-    variant = 'inherit'
+    variant = 'inherit',
+    sx
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -148,7 +151,9 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const ownerState = _extends({}, props, {
-    color,
+    // It is too complex to support any types of `sx`.
+    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
+    color: (typeof sx === 'function' ? sx(theme).color : sx?.color) || color,
     component,
     focusVisible,
     underline,
@@ -159,13 +164,15 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   return /*#__PURE__*/_jsx(LinkRoot, _extends({
     className: clsx(classes.root, className),
     classes: TypographyClasses,
-    color: color,
     component: component,
     onBlur: handleBlur,
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant
+    variant: variant,
+    sx: [{
+      color: colorTransformations[color] || color
+    }, ...(Array.isArray(sx) ? sx : [sx])]
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes

package/modern/ListItemButton/ListItemButton.js

@@ -53,6 +53,7 @@ const ListItemButtonRoot = styled(ButtonBase, {
   alignItems: 'center',
   position: 'relative',
   textDecoration: 'none',
+  minWidth: 0,
   boxSizing: 'border-box',
   textAlign: 'left',
   paddingTop: 8,

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.3
+/** @license MUI v5.6.0
  *
  * 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

@@ -1047,9 +1047,12 @@ export const etEE = {
 
           return 'Vali eelmine lehekülg';
         },
-        labelRowsPerPage: 'Ridu leheküljel:' // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
-
+        labelRowsPerPage: 'Ridu leheküljel:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} / ${count !== -1 ? count : `rohkem kui ${to}`}`
       }
     },
     MuiRating: {

package/modern/styles/CssVarsProvider.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
+import experimental_extendTheme from './experimental_extendTheme';
+import createTypography from './createTypography';
+const defaultTheme = experimental_extendTheme();
+const {
+  CssVarsProvider: Experimental_CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = createCssVarsProvider({
+  theme: defaultTheme,
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  prefix: 'md',
+  resolveTheme: theme => {
+    const newTheme = _extends({}, theme, {
+      typography: createTypography(theme.palette, theme.typography)
+    });
+
+    return newTheme;
+  },
+  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+});
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/modern/styles/experimental_extendTheme.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colorSchemes", "opacity"],
+      _excluded2 = ["palette"];
+import { deepmerge } from '@mui/utils';
+import { colorChannel } from '@mui/system';
+import createThemeWithoutVars from './createTheme';
+import createPalette from './createPalette';
+export const defaultOpacity = {
+  active: 0.54,
+  hover: 0.04,
+  selected: 0.08,
+  disabled: 0.26,
+  focus: 0.12
+};
+
+function createTheme(options = {}, ...args) {
+  const {
+    colorSchemes: colorSchemesInput = {},
+    opacity: opacityInput = {}
+  } = options,
+        input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
+
+
+  let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+    palette: colorSchemesInput.light?.palette
+  })),
+      {
+    palette: lightPalette
+  } = _createThemeWithoutVa,
+      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+
+  const {
+    palette: darkPalette
+  } = createThemeWithoutVars({
+    palette: _extends({
+      mode: 'dark'
+    }, colorSchemesInput.dark?.palette)
+  });
+  colorSchemesInput.light = {
+    palette: lightPalette
+  };
+  colorSchemesInput.dark = {
+    palette: darkPalette
+  };
+  const colorSchemes = {};
+  Object.keys(colorSchemesInput).forEach(key => {
+    const palette = createPalette(colorSchemesInput[key].palette);
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      if (colors.main) {
+        palette[color].mainChannel = colorChannel(colors.main);
+      }
+
+      if (colors.light) {
+        palette[color].lightChannel = colorChannel(colors.light);
+      }
+
+      if (colors.dark) {
+        palette[color].darkChannel = colorChannel(colors.dark);
+      }
+
+      if (colors.primary) {
+        palette[color].primaryChannel = colorChannel(colors.primary);
+      }
+
+      if (colors.secondary) {
+        palette[color].secondaryChannel = colorChannel(colors.secondary);
+      }
+
+      if (colors.disabled) {
+        palette[color].disabledChannel = colorChannel(colors.disabled);
+      }
+    });
+    colorSchemes[key] = {
+      palette
+    };
+  });
+
+  const opacity = _extends({}, defaultOpacity, opacityInput);
+
+  muiTheme.colorSchemes = colorSchemes;
+  muiTheme.opacity = opacity;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  return muiTheme;
+}
+
+export default createTheme;

package/modern/styles/index.js

@@ -16,4 +16,6 @@ export { StyledEngineProvider } from '@mui/system'; // The legacy utilities from
 
 export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
+export { default as withTheme } from './withTheme';
+export * from './CssVarsProvider';
+export { default as experimental_extendTheme } from './experimental_extendTheme';