@reltio/components 1.4.1589 → 1.4.1590

package/esm/components/ExpandableSearchInput/ExpandableSearchInput.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import i18n from 'ui-i18n';
 import { always, F, pipe, propEq, T, tap, trim, when } from 'ramda';
-import CloseIcon from '@material-ui/icons/Close';
-import IconButton from '@material-ui/core/IconButton';
-import Input from '@material-ui/core/Input';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import SearchIcon from '@material-ui/icons/Search';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import SearchIcon from '@mui/icons-material/Search';
 import { SmallIconButton } from '../SmallIconButton';
 import { getValue } from '../../core';
 import { useStyles } from './styles';
@@ -19,6 +19,6 @@ export var ExpandableSearchInput = function (_a) {
     var styles = useStyles();
     var hasValue = value && value.length;
     return isOpen ? (React.createElement(Input, { className: styles.input, value: value, autoFocus: true, placeholder: i18n.text('Search'), disableUnderline: true, onChange: pipe(getValue, setValue), startAdornment: React.createElement(InputAdornment, { position: "start" },
-            React.createElement(SearchIcon, { className: styles.startAdornment })), endAdornment: React.createElement(InputAdornment, { position: "end" }, hasValue && (React.createElement(SmallIconButton, { size: "S", icon: CloseIcon, onClick: pipe(F, setIsOpen, always(''), tap(onChange), setValue) }))), onKeyPress: when(propEq('key', 'Enter'), pipe(always(value), trim, onChange)) })) : (React.createElement(IconButton, { className: styles.searchButton, onClick: pipe(T, setIsOpen) },
+            React.createElement(SearchIcon, { className: styles.startAdornment })), endAdornment: React.createElement(InputAdornment, { position: "end" }, hasValue && (React.createElement(SmallIconButton, { size: "S", icon: CloseIcon, onClick: pipe(F, setIsOpen, always(''), tap(onChange), setValue) }))), onKeyPress: when(propEq('key', 'Enter'), pipe(always(value), trim, onChange)) })) : (React.createElement(IconButton, { className: styles.searchButton, onClick: pipe(T, setIsOpen), size: "large" },
         React.createElement(SearchIcon, null)));
 };

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

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

package/esm/components/ExpandableSearchInput/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     searchButton: {
         marginLeft: 'auto !important',

package/esm/components/ExpandedValueTooltip/ExpandedValueTooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TooltipProps } from '@material-ui/core/Tooltip';
+import { TooltipProps } from '@mui/material/Tooltip';
 type Props = Omit<TooltipProps, 'title' | 'classes'> & {
     children: React.ReactNode;
     value?: React.ReactNode;

package/esm/components/ExpandedValueTooltip/ExpandedValueTooltip.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useRef, useState, useEffect } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
-import Tooltip from '@material-ui/core/Tooltip';
-import RootRef from '@material-ui/core/RootRef';
+import Tooltip from '@mui/material/Tooltip';
 import { useStyles } from './styles';
 var checkOverflow = function (el, showOnExceededWidth, showOnExceededHeight) {
     return (el &&
@@ -41,7 +40,6 @@ var ExpandedValueTooltip = function (_a) {
     useEffect(updateOverflowState, [showOnExceededHeight, showOnExceededWidth, value]);
     return (React.createElement(React.Fragment, null,
         React.createElement(ReactResizeDetector, { handleWidth: showOnExceededWidth, handleHeight: showOnExceededHeight, onResize: updateOverflowState, refreshMode: "debounce", refreshRate: 100 }),
-        React.createElement(RootRef, { rootRef: childrenRef },
-            React.createElement(Tooltip, __assign({ title: isOverflowing ? value : '', classes: __assign(__assign({}, tooltipStyles), { tooltip: className }) }, otherProps), children))));
+        React.createElement(Tooltip, __assign({ ref: childrenRef, title: isOverflowing ? value : '', classes: __assign(__assign({}, tooltipStyles), { tooltip: className }) }, otherProps), children)));
 };
 export default ExpandedValueTooltip;

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

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

package/esm/components/ExpandedValueTooltip/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: theme.tooltip,
     popper: {

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

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

package/esm/components/FacetViewHeader/styles.js

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

package/esm/components/FlipCard/FlipCard.js

@@ -11,7 +11,7 @@ var FlipCard = forwardRef(function (_a, ref) {
         }
     }, [isCardFlipped, isFlipped]);
     return (React.createElement("div", { className: classnames(styles.flipper, className), ref: ref },
-        React.createElement("div", { "data-id": "front", className: styles.front }, children[0]),
-        React.createElement("div", { "data-id": "back", className: styles.back }, children[1])));
+        React.createElement("div", { "data-reltio-id": "flip-card-front", className: styles.front }, children[0]),
+        React.createElement("div", { "data-reltio-id": "flip-card-back", className: styles.back }, children[1])));
 });
 export default FlipCard;

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

@@ -1,2 +1,2 @@
 import { StylesProps } from './types';
-export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container" | "back" | "flipper" | "front">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"container" | "back" | "flipper" | "front">;

package/esm/components/FlipCard/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var frontRotateY = function (isFlipped) { return "rotateY(".concat(isFlipped ? 180 : 0, "deg)"); };
 var frontRotateX = function (isFlipped) { return "rotateX(".concat(isFlipped ? 180 : 0, "deg)"); };
 var backRotateY = function (isFlipped) { return "rotateY(".concat(isFlipped ? 0 : -180, "deg)"); };

package/esm/components/HideOnShrink/HideOnShrink.d.ts

@@ -1,12 +1,7 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    widthToHide: number;
+};
+declare const HideOnShrink: ({ widthToHide, children }: Props) => JSX.Element;
 export default HideOnShrink;
-declare function HideOnShrink({ widthToHide, children }: {
-    widthToHide: any;
-    children: any;
-}): JSX.Element;
-declare namespace HideOnShrink {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const widthToHide: PropTypes.Validator<number>;
-    }
-}
-import PropTypes from 'prop-types';

package/esm/components/HideOnShrink/HideOnShrink.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 var EmptyStub = function () { return React.createElement("div", { style: { display: 'none' } }); };
@@ -9,8 +8,4 @@ var HideOnShrink = function (_a) {
             return (width > widthToHide ? React.createElement(React.Fragment, null, children) : React.createElement(EmptyStub, null));
         } }));
 };
-HideOnShrink.propTypes = {
-    children: PropTypes.node,
-    widthToHide: PropTypes.number.isRequired
-};
 export default HideOnShrink;

package/esm/components/HierarchicalAttributeTooltip/HierarchicalAttributeTooltip.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TooltipProps } from '@material-ui/core/Tooltip';
+import { TooltipProps } from '@mui/material/Tooltip';
 type Props = Omit<TooltipProps, 'title'> & {
     pathToTitle?: string[];
     title?: string;

package/esm/components/HierarchicalAttributeTooltip/HierarchicalAttributeTooltip.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { last } from 'ramda';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 import { useStyles } from './styles';
 var HierarchicalAttributeTooltip = function (_a) {
     var pathToTitle = _a.pathToTitle, children = _a.children, tooltipProps = __rest(_a, ["pathToTitle", "children"]);

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

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

package/esm/components/HierarchicalAttributeTooltip/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';
 import { range } from 'ramda';
 var nthLiStyles = range(2, 10).reduce(function (acc, i) {
     var _a;

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

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

package/esm/components/HierarchyNodeTitle/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: {
         cursor: 'pointer',

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

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

package/esm/components/Highlighter/styles.js

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

package/esm/components/Image/CheckedIcon/CheckedIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { useStyles } from './styles';
 export var CheckedIcon = function (_a) {
     var checked = _a.checked, className = _a.className, onClick = _a.onClick;

package/esm/components/Image/CheckedIcon/styles.d.ts

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

package/esm/components/Image/CheckedIcon/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: {
         fontSize: '24px',

package/esm/components/Image/Image.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { memo, useState, useEffect } from 'react';
 import classnames from 'classnames';
-import NotAvailableImage from '@material-ui/icons/BrokenImage';
+import NotAvailableImage from '@mui/icons-material/BrokenImage';
 import DefaultImage from '../../icons/DefaultImage';
 import { isEmptyValue } from '@reltio/mdm-sdk';
 import { useStyles } from './styles';

package/esm/components/Image/ImageActionsOverlay/ImageActionsOverlay.js

@@ -2,8 +2,8 @@ import React, { memo, useMemo, useState } from 'react';
 import i18n from 'ui-i18n';
 import { ifElse, equals, prop } from 'ramda';
 import classnames from 'classnames';
-import Button from '@material-ui/core/Button';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Button from '@mui/material/Button';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { SmallIconButton } from '../../SmallIconButton';
 import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
 import { CheckedIcon } from '../CheckedIcon/CheckedIcon';

package/esm/components/Image/ImageActionsOverlay/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "overlay" | "actions" | "selected" | "checkedIcon" | "selectionMode" | "actionButton" | "dropDownMenuButton">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "overlay" | "selected" | "actions" | "checkedIcon" | "selectionMode" | "actionButton" | "dropDownMenuButton">;

package/esm/components/Image/ImageActionsOverlay/styles.js

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

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

@@ -1,2 +1,2 @@
 import { ImageSizeType } from './Image';
-export declare const useStyles: (props: ImageSizeType) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "image" | "defaultContainer" | "defaultImage" | "hideImage">;
+export declare const useStyles: (props: ImageSizeType) => import("@mui/styles").ClassNameMap<"image" | "root" | "defaultContainer" | "defaultImage" | "hideImage">;

package/esm/components/Image/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/ImageAttributesGallery/GalleryView/GalleryView.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
 import Image, { ImageSizesStyles } from '../../Image/Image';
 import ImageActionsOverlay from '../../Image/ImageActionsOverlay/ImageActionsOverlay';
 import { useStyles } from './styles';

package/esm/components/ImageAttributesGallery/GalleryView/styles.d.ts

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

package/esm/components/ImageAttributesGallery/GalleryView/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: {
         padding: '0 24px',

package/esm/components/ImageAttributesGallery/HeaderLeft/HeaderLeft.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import Link from '@material-ui/core/Link';
+import Link from '@mui/material/Link';
 import { useStyles } from './styles';
 export var HeaderLeft = function (_a) {
     var selectedItems = _a.selectedItems, items = _a.items, onSelectAll = _a.onSelectAll, onClearAll = _a.onClearAll;

package/esm/components/ImageAttributesGallery/HeaderLeft/styles.d.ts

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

package/esm/components/ImageAttributesGallery/HeaderLeft/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 ({
     selectButton: {
         fontSize: '14px',

package/esm/components/ImageAttributesGallery/HeaderRight/HeaderRight.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import i18n from 'ui-i18n';
-import Button from '@material-ui/core/Button';
-import CloudUploadIcon from '@material-ui/icons/CloudUpload';
-import DeleteIcon from '@material-ui/icons/Delete';
-import LinkIcon from '@material-ui/icons/Link';
+import Button from '@mui/material/Button';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import DeleteIcon from '@mui/icons-material/Delete';
+import LinkIcon from '@mui/icons-material/Link';
 import DownloadIcon from '../../../icons/Download';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { useStyles } from './styles';

package/esm/components/ImageAttributesGallery/HeaderRight/styles.d.ts

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

package/esm/components/ImageAttributesGallery/HeaderRight/styles.js

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

package/esm/components/ImageDetailsView/ImageDetailsView.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import Box from '@material-ui/core/Box';
+import Box from '@mui/material/Box';
 import { ImageDetailsViewCarousel } from './ImageDetailsViewCarousel/ImageDetailsViewCarousel';
 import { ImageDetailsViewSidebar } from './ImageDetailsViewSidebar/ImageDetailsViewSidebar';
 import { useStyles } from './styles';

package/esm/components/ImageDetailsView/ImageDetailsViewCarousel/ImageDetailsViewCarousel.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
-import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { getImageAttributeOvPreviewUrl } from '@reltio/mdm-sdk';
 import classnames from 'classnames';
 import Image, { ImageSizesStyles } from '../../Image/Image';

package/esm/components/ImageDetailsView/ImageDetailsViewCarousel/Thumbnails/Thumbnails.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import { getImageAttributeOvThumbnailUrl } from '@reltio/mdm-sdk';
 import classnames from 'classnames';
 import Image from '../../../Image/Image';

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

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

package/esm/components/ImageDetailsView/ImageDetailsViewCarousel/Thumbnails/styles.js

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

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

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

package/esm/components/ImageDetailsView/ImageDetailsViewCarousel/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: {
         display: 'flex',

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<"body" | "header" | "checkbox" | "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<"form" | "root" | "actions" | "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',