@reltio/components 1.4.1585 → 1.4.1586-mui5-2

package/esm/components/ImageDetailsView/ImageDetailsViewSidebar/ImageDetailsViewSidebar.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
-import Box from '@material-ui/core/Box';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
 import mdm from '@reltio/mdm-module';
 import classnames from 'classnames';
 import { MetaInfo } from '../MetaInfo/MetaInfo';
@@ -30,6 +30,6 @@ export var ImageDetailsViewSidebar = function (_a) {
             React.createElement(Typography, { className: styles.headerTitle }, i18n.text('Details'))),
         React.createElement(Box, { className: styles.bodyWrapper },
             React.createElement(Box, { className: styles.body },
-                React.createElement(FormControlLabel, { classes: { root: styles.formControlLabel, label: styles.checkboxLabel }, control: React.createElement(Checkbox, { className: styles.checkbox, checked: isDefault, onChange: handleChange, color: "default" }), label: i18n.text('Set as default') }),
+                React.createElement(FormControlLabel, { classes: { root: styles.formControlLabel, label: styles.checkboxLabel }, control: React.createElement(Checkbox, { className: styles.checkbox, checked: isDefault, onChange: handleChange }), label: i18n.text('Set as default') }),
                 React.createElement(MetaInfo, { attributeType: attributeType, imageAttributeFieldsOrder: imageAttributeFieldsOrder, attributeValue: attributeValue })))));
 };

package/esm/components/ImageDetailsView/ImageDetailsViewSidebar/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"checkbox" | "root" | "body" | "header" | "headerTitle" | "bodyWrapper" | "formControlLabel" | "checkboxLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"checkbox" | "body" | "header" | "root" | "headerTitle" | "bodyWrapper" | "formControlLabel" | "checkboxLabel">;

package/esm/components/ImageDetailsView/ImageDetailsViewSidebar/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 ({
     root: {
         position: 'relative',

package/esm/components/ImageDetailsView/MetaInfo/MetaInfo.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import mdm from '@reltio/mdm-module';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 import { MetaInfoHeader } from '../MetaInfoHeader/MetaInfoHeader';
 import { MetaInfoList } from '../MetaInfoList/MetaInfoList';
 import { MetaInfoForm } from '../MetaInfoForm/MetaInfoForm';
 import { useEditMetaInfo } from '../hooks/useEditMetaInfo';
 import { darkTheme } from '../theme';
-var darkMuiTheme = createMuiTheme(darkTheme);
+var darkMuiTheme = createTheme(darkTheme);
 export var MetaInfo = function (_a) {
     var imageAttributeFieldsOrder = _a.imageAttributeFieldsOrder, attributeType = _a.attributeType, initialAttributeValue = _a.attributeValue;
     var _b = useEditMetaInfo({ attributeType: attributeType, initialAttributeValue: initialAttributeValue }), addAttributes = _b.addAttributes, changeAttribute = _b.changeAttribute, deleteAttribute = _b.deleteAttribute, clearLocalChanges = _b.clearLocalChanges, applyLocalChanges = _b.applyLocalChanges, attributeValue = _b.attributeValue, hasChanges = _b.hasChanges;
     var mode = useSelector(mdm.selectors.getMode);
     var isEditableMode = useSelector(mdm.selectors.getIsEditableMode);
-    return (React.createElement(MuiThemeProvider, { theme: darkMuiTheme },
+    return (React.createElement(ThemeProvider, { theme: darkMuiTheme },
         React.createElement(Box, null,
             React.createElement(MetaInfoHeader, { attributeType: attributeType, uri: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, onAddAttributes: isEditableMode ? addAttributes : undefined }),
             React.createElement(MetaInfoList, { attributeType: attributeType, attributeValue: attributeValue, imageAttributeFieldsOrder: imageAttributeFieldsOrder }),

package/esm/components/ImageDetailsView/MetaInfoForm/MetaInfoForm.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import i18n from 'ui-i18n';
 import { isTempUri } from '@reltio/mdm-sdk';
-import Box from '@material-ui/core/Box';
-import Divider from '@material-ui/core/Divider';
-import Button from '@material-ui/core/Button';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
 import AttributesPager from '../../attributes/editMode/AttributesPager';
 import { getNotSystemAttributesList } from '../helpers';
 import { useStyles } from './styles';

package/esm/components/ImageDetailsView/MetaInfoForm/styles.d.ts

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

package/esm/components/ImageDetailsView/MetaInfoForm/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     root: {},
     form: {
@@ -7,7 +7,7 @@ export var useStyles = makeStyles({
     divider: {
         width: '100%',
         height: '1px',
-        background: 'rgba(255,255,255,0.12)'
+        borderColor: 'rgba(255,255,255,0.12)'
     },
     actions: {
         display: 'flex',

package/esm/components/ImageDetailsView/MetaInfoHeader/MetaInfoHeader.js

@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import Divider from '@material-ui/core/Divider';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import MoreAttributesButton from '../../attributes/editMode/MoreAttributesButton';
 import { getMoreAttrTypes } from '../helpers';
 import { useStyles } from './styles';

package/esm/components/ImageDetailsView/MetaInfoHeader/styles.d.ts

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

package/esm/components/ImageDetailsView/MetaInfoHeader/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     title: {
         marginBottom: '10px',
@@ -12,7 +12,7 @@ export var useStyles = makeStyles({
     divider: {
         width: '100%',
         height: '1px',
-        background: 'rgba(255,255,255,0.12)'
+        borderColor: 'rgba(255,255,255,0.12)'
     },
     canAdd: {}
 });

package/esm/components/ImageDetailsView/MetaInfoList/MetaInfoItem/styles.d.ts

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

package/esm/components/ImageDetailsView/MetaInfoList/MetaInfoItem/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 ({
     root: {
         fontSize: '13px',

package/esm/components/ImageDetailsView/MetaInfoList/MetaInfoList.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import mdm from '@reltio/mdm-module';
-import Box from '@material-ui/core/Box';
+import Box from '@mui/material/Box';
 import AttributesPager from '../../attributes/readMode/AttributesPager';
 import { MetaInfoItem } from './MetaInfoItem/MetaInfoItem';
 import { getNotSystemAttributesList, getSystemAttributesList } from '../helpers';

package/esm/components/ImageDetailsView/MetaInfoList/styles.d.ts

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

package/esm/components/ImageDetailsView/MetaInfoList/styles.js

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

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

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

package/esm/components/ImageDetailsView/styles.js

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

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<"container" | "expanded" | "label">;
 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<"container" | "title" | "body" | "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<"container" | "title" | "relevanceScore" | "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<"container" | "icon" | "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<"container" | "label" | "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';