@reltio/components 1.4.1589 → 1.4.1591

package/esm/components/ImageDetailsView/theme/index.d.ts

@@ -1,14 +1,3 @@
-declare const darkTheme: {
-    readonly palette: {
-        readonly type: "dark";
-        readonly primary: {
-            main: string;
-            light: string;
-            dark: string;
-        };
-        readonly secondary: {
-            main: string;
-        };
-    };
-};
+import { ThemeOptions } from '@mui/material/styles';
+declare const darkTheme: ThemeOptions;
 export { darkTheme };

package/esm/components/ImageDetailsView/theme/index.js

@@ -1,7 +1,7 @@
 import { theme } from '@reltio/mdm-sdk';
 var darkTheme = {
     palette: {
-        type: 'dark',
+        mode: 'dark',
         primary: theme.palette.primary,
         secondary: theme.palette.secondary
     }

package/esm/components/ImageGalleryDialog/ImageGalleryDialog.js

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 import i18n from 'ui-i18n';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Box from '@material-ui/core/Box';
-import CloseIcon from '@material-ui/icons/Close';
-import ViewComfyIcon from '@material-ui/icons/ViewComfy';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Box from '@mui/material/Box';
+import CloseIcon from '@mui/icons-material/Close';
+import ViewCompactIcon from '@mui/icons-material/ViewCompact';
 import DetailsIcon from '../../icons/Details';
 import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import ModeSwitcher from '../ModeSwitcher/ModeSwitcher';
@@ -23,7 +23,7 @@ export var ImageGalleryDialog = function (_a) {
         {
             id: Mode.GALLERY_MODE,
             title: i18n.text('Gallery'),
-            Icon: ViewComfyIcon
+            Icon: ViewCompactIcon
         },
         {
             id: Mode.DETAILS_MODE,

package/esm/components/ImageGalleryDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "toolbar" | "paper" | "backdrop" | "closeIcon" | "appBar" | "closeButton" | "headerLeft" | "headerCenter" | "headerRight" | "modeSwitcher">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "toolbar" | "backdrop" | "paper" | "closeIcon" | "appBar" | "closeButton" | "headerLeft" | "headerCenter" | "headerRight" | "modeSwitcher">;

package/esm/components/ImageGalleryDialog/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     paper: {
         backgroundColor: 'rgba(0, 0, 0, .85)'

package/esm/components/ImportButton/ImportButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 import { SmallIconButtonWithTooltip } from '../SmallIconButton';
-import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
-import DoneIcon from '@material-ui/icons/Done';
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
+import DoneIcon from '@mui/icons-material/Done';
 import { noop } from '../../core';
 import classnames from 'classnames';
 import { useStyles } from './styles';

package/esm/components/ImportButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "check">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "check">;

package/esm/components/ImportButton/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     root: {
         display: 'flex',

package/esm/components/InternalLink/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"link">;

package/esm/components/InternalLink/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     link: {
         color: theme.palette.primary.main,

package/esm/components/LightArrowTooltip/LightArrowTooltip.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { TooltipProps } from '@material-ui/core/Tooltip';
+import { TooltipProps } from '@mui/material/Tooltip';
 declare const LightArrowTooltip: (props: TooltipProps) => JSX.Element;
 export default LightArrowTooltip;

package/esm/components/LightArrowTooltip/LightArrowTooltip.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 import { useStyles } from './styles';
 var LightArrowTooltip = function (props) {
     var styles = useStyles();

package/esm/components/LightArrowTooltip/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"tooltip" | "arrow">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"tooltip" | "arrow">;

package/esm/components/LightArrowTooltip/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     tooltip: {
         backgroundColor: theme.palette.background.paper,

package/esm/components/LinearLoadIndicator/LinearLoadIndicator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import LinearProgress from '@material-ui/core/LinearProgress';
+import LinearProgress from '@mui/material/LinearProgress';
 import { useStyles } from './styles';
 var LinearLoadIndicator = function (_a) {
     var _b;

package/esm/components/LinearLoadIndicator/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"transparent" | "loadingOverlay" | "relativePosition">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"transparent" | "loadingOverlay" | "relativePosition">;

package/esm/components/LinearLoadIndicator/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     loadingOverlay: {
         position: 'absolute',

package/esm/components/Link/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"link">;

package/esm/components/Link/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     link: {
         textDecoration: 'inherit',

package/esm/components/MatchRulesBlock/MatchRulesBadge/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"expanded" | "label" | "container">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "container" | "expanded">;
 export default styles;

package/esm/components/MatchRulesBlock/MatchRulesBadge/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles(function (theme) {
     return {
         label: {

package/esm/components/MatchRulesBlock/MatchRulesTooltip/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "title" | "container" | "negativeRuleIcon">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "body" | "container" | "negativeRuleIcon">;
 export default styles;

package/esm/components/MatchRulesBlock/MatchRulesTooltip/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles({
     title: {
         fontWeight: 500,

package/esm/components/MatchRulesBlock/NotMatchRule/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"notMatch">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"notMatch">;

package/esm/components/MatchRulesBlock/NotMatchRule/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     notMatch: {
         display: 'flex',

package/esm/components/MatchRulesBlock/SimpleMatchRules/SimpleMatchRules.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { getMatchRuleSummary, formatRelevanceScore } from '@reltio/mdm-sdk';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 import i18n from 'ui-i18n';
 import MatchRulesTitle from '../MatchRulesTitle';
 import useStyles from './styles';

package/esm/components/MatchRulesBlock/SimpleMatchRules/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "relevanceScore" | "container" | "negativeRuleIcon" | "labelsContainer" | "matchRuleInfo" | "matchRuleLabel">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "relevanceScore" | "container" | "negativeRuleIcon" | "labelsContainer" | "matchRuleInfo" | "matchRuleLabel">;
 export default styles;

package/esm/components/MatchRulesBlock/SimpleMatchRules/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles(function (theme) { return ({
     container: {
         fontSize: '13px',

package/esm/components/MatchRulesBlock/SimpleMatchRulesBlock/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "container" | "rulesContainer">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "container" | "rulesContainer">;
 export default styles;

package/esm/components/MatchRulesBlock/SimpleMatchRulesBlock/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles({
     container: {
         display: 'flex',

package/esm/components/MatchRulesBlock/SimpleMatchRulesBuilder/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"container">;
 export default styles;

package/esm/components/MatchRulesBlock/SimpleMatchRulesBuilder/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles({
     container: {
         display: 'flex',

package/esm/components/MatchRulesBlock/TransitiveMatchBlock/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"container">;
 export default styles;

package/esm/components/MatchRulesBlock/TransitiveMatchBlock/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles({
     container: {
         display: 'flex',

package/esm/components/MatchRulesBlock/TransitiveMatchRules/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "container" | "badge" | "matchLabels">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "container" | "badge" | "matchLabels">;
 export default styles;

package/esm/components/MatchRulesBlock/TransitiveMatchRules/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles(function (theme) { return ({
     label: {
         fontSize: '13px',

package/esm/components/MatchRulesBlock/TransitiveMatchRulesTooltip/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "ruleWrapper">;
+declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "ruleWrapper">;
 export default styles;

package/esm/components/MatchRulesBlock/TransitiveMatchRulesTooltip/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var styles = makeStyles({
     ruleWrapper: {
         paddingTop: '8px'

package/esm/components/MatchRulesSelector/MatchRulesSelector.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TEntityType, MatchRulesAttrNames } from '@reltio/mdm-sdk';
-import { TextFieldProps as TextFieldPropsType } from '@material-ui/core/TextField';
+import { TextFieldProps as TextFieldPropsType } from '@mui/material/TextField';
 type Props = {
     name: MatchRulesAttrNames;
     values?: string[];

package/esm/components/MatchRulesSelector/MatchRulesSelector.js

@@ -13,10 +13,7 @@ var prepareOptions = function (options) {
 var MatchRulesSelector = function (_a) {
     var name = _a.name, values = _a.values, onChange = _a.onChange, entityType = _a.entityType, TextFieldProps = _a.TextFieldProps, fullWidth = _a.fullWidth;
     var metadata = useSelector(mdmModule.selectors.getMetadata);
-    var _b = useMemo(function () { return partitionByMlMatch(getMatchGroups(metadata, entityType === null || entityType === void 0 ? void 0 : entityType.uri)); }, [
-        entityType === null || entityType === void 0 ? void 0 : entityType.uri,
-        metadata
-    ]), mlMatchRules = _b[0], matchRules = _b[1];
+    var _b = useMemo(function () { return partitionByMlMatch(getMatchGroups(metadata, entityType === null || entityType === void 0 ? void 0 : entityType.uri)); }, [entityType === null || entityType === void 0 ? void 0 : entityType.uri, metadata]), mlMatchRules = _b[0], matchRules = _b[1];
     var options = useMemo(function () { return prepareOptions(name === MatchRulesAttrNames.matchRules ? matchRules : mlMatchRules); }, [name, matchRules, mlMatchRules]);
     return (React.createElement(MultiValueSelector, { values: values, onChange: onChange, options: options, TextFieldProps: TextFieldProps, fullWidth: fullWidth }));
 };

package/esm/components/MetadataTypesSelector/ListLabel/ListLabel.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 import { useStyles } from './styles';
 import { countHiddenItems, getListLabel, getListLabelWidth } from './helpers';
 export var ListLabel = function (_a) {

package/esm/components/MetadataTypesSelector/ListLabel/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"listLabelContainer" | "listLabel" | "visibleItemsLabel" | "hiddenCount">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"listLabelContainer" | "listLabel" | "visibleItemsLabel" | "hiddenCount">;

package/esm/components/MetadataTypesSelector/ListLabel/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     listLabelContainer: {
         display: 'flex',

package/esm/components/MetadataTypesSelector/MetadataTypesSelector.js

@@ -13,8 +13,8 @@ import React, { useRef, useState, useCallback, useMemo, memo } from 'react';
 import classnames from 'classnames';
 import { pipe, propEq, prop } from 'ramda';
 import { utils } from '@reltio/mdm-sdk';
-import TextField from '@material-ui/core/TextField';
-import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import TextField from '@mui/material/TextField';
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import { ListLabel } from './ListLabel/ListLabel';
 import { SmallIconButton } from '../SmallIconButton';
 import SelectionPopup from '../SelectionPopup/SelectionPopup';
@@ -83,7 +83,6 @@ export var MetadataTypesSelector = memo(function (_a) {
                         _d[styles['popup-opened-icon']] = isPopupOpen,
                         _d)), disabled: disabled })),
                 readOnly: true,
-                disabled: true,
                 disableUnderline: noTypesSelected && !enableEmptyValueUnderline
             }, inputProps: {
                 tabIndex: -1
@@ -91,7 +90,7 @@ export var MetadataTypesSelector = memo(function (_a) {
                 classes: {
                     root: classnames(styles.inputLabel, classes.label)
                 }
-            }, value: "", onClick: disabled ? undefined : openPopup, classes: { root: classnames(styles.root, classes.root) }, margin: "dense", variant: "filled", disabled: disabled, "data-reltio-id": dataReltioId }),
+            }, value: "", onClick: disabled ? undefined : openPopup, classes: { root: classnames(styles.root, classes.root) }, size: "small", variant: "filled", disabled: disabled, "data-reltio-id": dataReltioId }),
         React.createElement(SelectionPopup, { open: isPopupOpen, anchorEl: rootRef.current, onClose: handleClose, onSearch: setFilterText, title: selectionPopupTitle, containerWidth: containerWidth, containerHeight: POPUP_HEIGHT, searchInputOnKeyDown: handleKeyDown, transformOrigin: { horizontal: 'left', vertical: 'top' }, anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, PaperProps: (_e = {}, _e['data-reltio-id'] = "".concat(dataReltioId, "-popup"), _e) },
             React.createElement(SelectMetadataTypesList, { items: filteredItems, onItemClick: handleListItemClick, selectedItems: selectedItemsUris, width: containerWidth, height: LIST_HEIGHT, focusIndex: focusIndex }))));
 });

package/esm/components/MetadataTypesSelector/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "root" | "input" | "inputLabel" | "inputRoot" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "input" | "root" | "inputRoot" | "inputLabel" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;

package/esm/components/MetadataTypesSelector/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     root: {
         borderRadius: '4px 4px 0 0',
@@ -12,6 +12,7 @@ export var useStyles = makeStyles({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         width: '100%',
+        cursor: 'pointer',
         top: 'calc(50% - 23px)'
     },
     inputText: {
@@ -30,7 +31,7 @@ export var useStyles = makeStyles({
     input: {
         width: 0,
         cursor: 'pointer',
-        '&[disabled]': {
+        '&.Mui-disabled': {
             backgroundColor: 'transparent',
             cursor: 'default'
         },
@@ -48,6 +49,7 @@ export var useStyles = makeStyles({
         fontSize: '14px',
         letterSpacing: 0,
         lineHeight: '16px',
+        cursor: 'pointer',
         '&$disabledInput': {
             backgroundColor: 'rgba(0, 0, 0, 0.03)',
             cursor: 'pointer',

package/esm/components/ModeSwitcher/ModeSwitcher.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
 import classnames from 'classnames';
 import withTooltip from '../../HOCs/withTooltip/withTooltip';
 import useStyles from './styles';

package/esm/components/ModeSwitcher/styles.d.ts

@@ -1,2 +1,2 @@
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "icon" | "current" | "title">;
+declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "icon" | "button" | "current">;
 export default useStyles;

package/esm/components/ModeSwitcher/styles.js

@@ -1,12 +1,34 @@
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { alpha } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 var useStyles = makeStyles(function (theme) { return ({
     button: {
-        minWidth: '30px',
-        padding: '8px 8px',
-        justifyContent: 'start',
-        fill: 'rgba(0,0,0,0.54)',
-        textTransform: 'none',
-        borderColor: 'rgba(0,0,0,0.12)'
+        '&.MuiButtonGroup-grouped': {
+            minWidth: '30px',
+            padding: '8px 8px',
+            justifyContent: 'start',
+            fill: 'rgba(0,0,0,0.54)',
+            textTransform: 'none',
+            color: 'rgba(0,0,0,0.87)',
+            borderColor: 'rgba(0,0,0,0.12)',
+            '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.04)'
+            },
+            '&:not(:last-of-type):hover': {
+                borderRightColor: 'transparent'
+            },
+            '&$current': {
+                '& $icon': {
+                    color: theme.palette.primary.main
+                },
+                backgroundColor: alpha(theme.palette.primary.main, 0.12),
+                fill: theme.palette.primary.main,
+                color: theme.palette.primary.main,
+                '&:hover': {
+                    backgroundColor: alpha(theme.palette.primary.main, 0.24),
+                    borderRightColor: 'transparent'
+                }
+            }
+        }
     },
     icon: {
         color: 'rgba(0,0,0,0.54)',
@@ -21,16 +43,6 @@ var useStyles = makeStyles(function (theme) { return ({
         lineHeight: '15px',
         letterSpacing: 0
     },
-    current: {
-        '& $icon': {
-            color: theme.palette.primary.main
-        },
-        backgroundColor: fade(theme.palette.primary.main, 0.12),
-        fill: theme.palette.primary.main,
-        color: theme.palette.primary.main,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.primary.main, 0.24)
-        }
-    }
+    current: {}
 }); });
 export default useStyles;

package/esm/components/ModeSwitcherSelect/ModeSwitcherSelect.js

@@ -21,11 +21,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import React from 'react';
 import { propEq } from 'ramda';
 import classnames from 'classnames';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
 import { useStyles } from './styles';
 var isButton = function (value) { return 'onClick' in value; };
 export var ModeSwitcherSelect = function (_a) {
@@ -61,7 +61,7 @@ export var ModeSwitcherSelect = function (_a) {
         });
     };
     return (React.createElement(Select, { classes: {
-            root: styles.root,
+            select: styles.root,
             icon: styles.arrowIcon,
             outlined: styles.outlined
         }, value: value, onChange: handleChange, variant: "outlined", renderValue: function (value) {
@@ -78,7 +78,6 @@ export var ModeSwitcherSelect = function (_a) {
             transformOrigin: {
                 vertical: 'top',
                 horizontal: 'right'
-            },
-            getContentAnchorEl: null
+            }
         }, disabled: disabled, "data-reltio-id": "reltio-profile-select-mode" }, renderMenuItems(__spreadArray(__spreadArray([], optionsGroup, true), buttonsGroup, true))));
 };

package/esm/components/ModeSwitcherSelect/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "menuItem" | "outlined" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "outlined" | "menuItem" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;

package/esm/components/ModeSwitcherSelect/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var MAX_WIDTH_SELECT = 200;
 var SELECT_PADDING_RIGHT = 32;
 var SELECT_PADDING_LEFT = 12;
@@ -7,7 +7,10 @@ export var useStyles = makeStyles(function (theme) { return ({
     root: {
         maxWidth: CALCULATED_MAX_WIDTH_SELECT,
         paddingTop: '9px',
-        paddingBottom: '9px'
+        paddingBottom: '9px',
+        '&$outlined': {
+            minHeight: '1.1876em'
+        }
     },
     outlined: {
         paddingRight: SELECT_PADDING_RIGHT,

package/esm/components/MultiValueSelector/MultiValueSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextFieldProps as TextFieldPropsType } from '@material-ui/core/TextField';
+import { TextFieldProps as TextFieldPropsType } from '@mui/material/TextField';
 export type Option = {
     value: string;
     label: string;

package/esm/components/MultiValueSelector/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "clearIndicator" | "dropdownIndicator">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"option" | "clearIndicator" | "dropdownIndicator">;
 export declare const customStyles: {
     input: (currentStyles: any) => any;
     menuPortal: (currentStyles: any) => any;

package/esm/components/MultiValueSelector/styles.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     option: {
         paddingLeft: '35px'

package/esm/components/MultilineMenuItem/MultilineMenuItem.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
-import MenuItem from '@material-ui/core/MenuItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
 import { noop } from '../../core';
 import { useStyles } from './styles';
 var MultilineMenuItem = forwardRef(function (_a, ref) {

package/esm/components/MultilineMenuItem/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"menuItem" | "textPrimary" | "textSecondary" | "itemText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menuItem" | "textSecondary" | "itemText" | "textPrimary">;

package/esm/components/MultilineMenuItem/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     menuItem: {
         whiteSpace: 'inherit',