@reltio/components 1.4.1589 → 1.4.1591

package/cjs/components/EmptyState/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 var maxWidth = 500;
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     root: {

package/cjs/components/EntityAvatar/EntityAvatar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_redux_1 = require("react-redux");
 var classnames_1 = __importDefault(require("classnames"));
-var Avatar_1 = __importDefault(require("@material-ui/core/Avatar"));
+var Avatar_1 = __importDefault(require("@mui/material/Avatar"));
 var no_photo_svg_1 = require("./no-photo.svg");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));

package/cjs/components/EntityTypeBadge/EntityTypeBadge.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_redux_1 = require("react-redux");
 var classnames_1 = __importDefault(require("classnames"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));

package/cjs/components/EntityTypeBadge/styles.d.ts

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

package/cjs/components/EntityTypeBadge/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 var useStyles = (0, styles_1.makeStyles)({
     'entityType-overflow': {
         textOverflow: 'ellipsis',

package/cjs/components/EntityUriLink/EntityUriLink.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,13 +33,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var contexts_1 = require("../../contexts");
 var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var EntityUriLink = (0, react_1.forwardRef)(function (_a, ref) {
-    var value = _a.value, children = _a.children, screen = _a.screen, className = _a.className;
+    var value = _a.value, children = _a.children, screen = _a.screen, className = _a.className, otherProps = __rest(_a, ["value", "children", "screen", "className"]);
     var dispatch = (0, react_redux_1.useDispatch)();
     var viewId = (0, react_1.useContext)(contexts_1.ViewIdContext);
     var generateEntityUrl = (0, react_1.useContext)(contexts_1.UrlGeneratorsContext).generateEntityUrl;
@@ -37,11 +59,11 @@ var EntityUriLink = (0, react_1.forwardRef)(function (_a, ref) {
     var onClick = (0, react_1.useCallback)(function () {
         dispatch(mdm_module_1.ui.actions.openEntity({ uri: value, viewId: viewId, screen: screen }));
     }, [viewId, value, dispatch, screen]);
-    return (react_1.default.createElement("a", { ref: ref, href: generateEntityUrlByUri(value), onClick: function (e) {
+    return (react_1.default.createElement("a", __assign({ ref: ref, href: generateEntityUrlByUri(value), onClick: function (e) {
             onClick();
             e.stopPropagation();
             e.preventDefault();
-        }, className: className }, children));
+        }, className: className }, otherProps), children));
 });
 EntityUriLink.displayName = 'EntityUriLink';
 exports.default = EntityUriLink;

package/cjs/components/ErrorPopup/ErrorPopup.js

@@ -43,7 +43,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Portal_1 = __importDefault(require("@material-ui/core/Portal"));
+var Portal_1 = __importDefault(require("@mui/material/Portal"));
 var ErrorPopup_1 = __importDefault(require("react-components/dist/ErrorPopup/ErrorPopup"));
 var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var styles_1 = require("./styles");

package/cjs/components/ErrorPopup/styles.d.ts

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

package/cjs/components/ErrorPopup/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     errorBlock: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif',

package/cjs/components/ErrorWrapper/ErrorMessage.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var styles_1 = require("./styles");
 var ErrorMessage = function (_a) {
     var className = _a.className, message = _a.message;

package/cjs/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -1,4 +1,4 @@
-import { FormControlProps } from '@material-ui/core/FormControl';
+import { FormControlProps } from '@mui/material/FormControl';
 import React from 'react';
 type Props = FormControlProps & {
     errorMessage?: string;

package/cjs/components/ErrorWrapper/ErrorWrapper.js

@@ -50,15 +50,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var classnames_1 = __importDefault(require("classnames"));
 var ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
-var FormControl_1 = __importDefault(require("@material-ui/core/FormControl"));
-var FormHelperText_1 = __importDefault(require("@material-ui/core/FormHelperText"));
+var FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+var FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
 var react_1 = __importStar(require("react"));
 var styles_1 = require("./styles");
 var ErrorWrapper = function (_a) {
     var errorMessage = _a.errorMessage, children = _a.children, className = _a.className, classes = _a.classes, otherProps = __rest(_a, ["errorMessage", "children", "className", "classes"]);
     var styles = (0, styles_1.useStyles)();
     var hasError = !!errorMessage;
-    return (react_1.default.createElement(FormControl_1.default, __assign({ className: (0, classnames_1.default)(styles.wrapper, className, classes === null || classes === void 0 ? void 0 : classes.root), error: true }, otherProps),
+    return (react_1.default.createElement(FormControl_1.default, __assign({ variant: "standard", className: (0, classnames_1.default)(styles.wrapper, className, classes === null || classes === void 0 ? void 0 : classes.root), error: true }, otherProps),
         children,
         hasError && (react_1.default.createElement(FormHelperText_1.default, { className: (0, classnames_1.default)(styles.helperText, classes === null || classes === void 0 ? void 0 : classes.helperText) },
             react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage })))));

package/cjs/components/ErrorWrapper/styles.d.ts

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

package/cjs/components/ErrorWrapper/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     wrapper: {
         width: '100%'

package/cjs/components/ExpandableSearchInput/ExpandableSearchInput.js

@@ -30,11 +30,11 @@ exports.ExpandableSearchInput = void 0;
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
-var Close_1 = __importDefault(require("@material-ui/icons/Close"));
-var IconButton_1 = __importDefault(require("@material-ui/core/IconButton"));
-var Input_1 = __importDefault(require("@material-ui/core/Input"));
-var InputAdornment_1 = __importDefault(require("@material-ui/core/InputAdornment"));
-var Search_1 = __importDefault(require("@material-ui/icons/Search"));
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+var Input_1 = __importDefault(require("@mui/material/Input"));
+var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+var Search_1 = __importDefault(require("@mui/icons-material/Search"));
 var SmallIconButton_1 = require("../SmallIconButton");
 var core_1 = require("../../core");
 var styles_1 = require("./styles");
@@ -48,7 +48,7 @@ var ExpandableSearchInput = function (_a) {
     var styles = (0, styles_1.useStyles)();
     var hasValue = value && value.length;
     return isOpen ? (react_1.default.createElement(Input_1.default, { className: styles.input, value: value, autoFocus: true, placeholder: ui_i18n_1.default.text('Search'), disableUnderline: true, onChange: (0, ramda_1.pipe)(core_1.getValue, setValue), startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
-            react_1.default.createElement(Search_1.default, { className: styles.startAdornment })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, hasValue && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "S", icon: Close_1.default, onClick: (0, ramda_1.pipe)(ramda_1.F, setIsOpen, (0, ramda_1.always)(''), (0, ramda_1.tap)(onChange), setValue) }))), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.pipe)((0, ramda_1.always)(value), ramda_1.trim, onChange)) })) : (react_1.default.createElement(IconButton_1.default, { className: styles.searchButton, onClick: (0, ramda_1.pipe)(ramda_1.T, setIsOpen) },
+            react_1.default.createElement(Search_1.default, { className: styles.startAdornment })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, hasValue && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "S", icon: Close_1.default, onClick: (0, ramda_1.pipe)(ramda_1.F, setIsOpen, (0, ramda_1.always)(''), (0, ramda_1.tap)(onChange), setValue) }))), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.pipe)((0, ramda_1.always)(value), ramda_1.trim, onChange)) })) : (react_1.default.createElement(IconButton_1.default, { className: styles.searchButton, onClick: (0, ramda_1.pipe)(ramda_1.T, setIsOpen), size: "large" },
         react_1.default.createElement(Search_1.default, null)));
 };
 exports.ExpandableSearchInput = ExpandableSearchInput;

package/cjs/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/cjs/components/ExpandableSearchInput/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     searchButton: {
         marginLeft: 'auto !important',

package/cjs/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/cjs/components/ExpandedValueTooltip/ExpandedValueTooltip.js

@@ -50,8 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
-var RootRef_1 = __importDefault(require("@material-ui/core/RootRef"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var styles_1 = require("./styles");
 var checkOverflow = function (el, showOnExceededWidth, showOnExceededHeight) {
     return (el &&
@@ -69,7 +68,6 @@ var ExpandedValueTooltip = function (_a) {
     (0, react_1.useEffect)(updateOverflowState, [showOnExceededHeight, showOnExceededWidth, value]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_resize_detector_1.default, { handleWidth: showOnExceededWidth, handleHeight: showOnExceededHeight, onResize: updateOverflowState, refreshMode: "debounce", refreshRate: 100 }),
-        react_1.default.createElement(RootRef_1.default, { rootRef: childrenRef },
-            react_1.default.createElement(Tooltip_1.default, __assign({ title: isOverflowing ? value : '', classes: __assign(__assign({}, tooltipStyles), { tooltip: className }) }, otherProps), children))));
+        react_1.default.createElement(Tooltip_1.default, __assign({ ref: childrenRef, title: isOverflowing ? value : '', classes: __assign(__assign({}, tooltipStyles), { tooltip: className }) }, otherProps), children)));
 };
 exports.default = ExpandedValueTooltip;

package/cjs/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/cjs/components/ExpandedValueTooltip/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     tooltip: theme.tooltip,
     popper: {

package/cjs/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/cjs/components/FacetViewHeader/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     container: {
         padding: '0 16px',

package/cjs/components/FlipCard/FlipCard.js

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

package/cjs/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/cjs/components/FlipCard/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@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/cjs/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/cjs/components/HideOnShrink/HideOnShrink.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importDefault(require("react"));
 var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
 var EmptyStub = function () { return react_1.default.createElement("div", { style: { display: 'none' } }); };
@@ -14,8 +13,4 @@ var HideOnShrink = function (_a) {
             return (width > widthToHide ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement(EmptyStub, null));
         } }));
 };
-HideOnShrink.propTypes = {
-    children: prop_types_1.default.node,
-    widthToHide: prop_types_1.default.number.isRequired
-};
 exports.default = HideOnShrink;

package/cjs/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/cjs/components/HierarchicalAttributeTooltip/HierarchicalAttributeTooltip.js

@@ -27,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ramda_1 = require("ramda");
-var Tooltip_1 = __importDefault(require("@material-ui/core/Tooltip"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var styles_1 = require("./styles");
 var HierarchicalAttributeTooltip = function (_a) {
     var pathToTitle = _a.pathToTitle, children = _a.children, tooltipProps = __rest(_a, ["pathToTitle", "children"]);

package/cjs/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/cjs/components/HierarchicalAttributeTooltip/styles.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 var ramda_1 = require("ramda");
 var nthLiStyles = (0, ramda_1.range)(2, 10).reduce(function (acc, i) {
     var _a;

package/cjs/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/cjs/components/HierarchyNodeTitle/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     link: {
         cursor: 'pointer',

package/cjs/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/cjs/components/Highlighter/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     highlight: {
         fontWeight: 600

package/cjs/components/Image/CheckedIcon/CheckedIcon.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckedIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var RadioButtonUnchecked_1 = __importDefault(require("@material-ui/icons/RadioButtonUnchecked"));
-var CheckCircle_1 = __importDefault(require("@material-ui/icons/CheckCircle"));
+var RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
+var CheckCircle_1 = __importDefault(require("@mui/icons-material/CheckCircle"));
 var styles_1 = require("./styles");
 var CheckedIcon = function (_a) {
     var checked = _a.checked, className = _a.className, onClick = _a.onClick;

package/cjs/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/cjs/components/Image/CheckedIcon/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     root: {
         fontSize: '24px',

package/cjs/components/Image/Image.js

@@ -51,7 +51,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageSizesStyles = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var BrokenImage_1 = __importDefault(require("@material-ui/icons/BrokenImage"));
+var BrokenImage_1 = __importDefault(require("@mui/icons-material/BrokenImage"));
 var DefaultImage_1 = __importDefault(require("../../icons/DefaultImage"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var styles_1 = require("./styles");

package/cjs/components/Image/ImageActionsOverlay/ImageActionsOverlay.js

@@ -30,8 +30,8 @@ var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var classnames_1 = __importDefault(require("classnames"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
 var SmallIconButton_1 = require("../../SmallIconButton");
 var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
 var CheckedIcon_1 = require("../CheckedIcon/CheckedIcon");

package/cjs/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/cjs/components/Image/ImageActionsOverlay/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     overlay: {
         position: 'absolute',

package/cjs/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/cjs/components/Image/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     root: {
         position: 'relative'

package/cjs/components/ImageAttributesGallery/GalleryView/GalleryView.js

@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GalleryView = void 0;
 var react_1 = __importDefault(require("react"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
-var Grid_1 = __importDefault(require("@material-ui/core/Grid"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
+var Grid_1 = __importDefault(require("@mui/material/Grid"));
 var Image_1 = __importStar(require("../../Image/Image"));
 var ImageActionsOverlay_1 = __importDefault(require("../../Image/ImageActionsOverlay/ImageActionsOverlay"));
 var styles_1 = require("./styles");

package/cjs/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/cjs/components/ImageAttributesGallery/GalleryView/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     root: {
         padding: '0 24px',

package/cjs/components/ImageAttributesGallery/HeaderLeft/HeaderLeft.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderLeft = void 0;
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var Link_1 = __importDefault(require("@mui/material/Link"));
 var styles_1 = require("./styles");
 var HeaderLeft = function (_a) {
     var selectedItems = _a.selectedItems, items = _a.items, onSelectAll = _a.onSelectAll, onClearAll = _a.onClearAll;

package/cjs/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/cjs/components/ImageAttributesGallery/HeaderLeft/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     selectButton: {
         fontSize: '14px',

package/cjs/components/ImageAttributesGallery/HeaderRight/HeaderRight.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderRight = void 0;
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var CloudUpload_1 = __importDefault(require("@material-ui/icons/CloudUpload"));
-var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
-var Link_1 = __importDefault(require("@material-ui/icons/Link"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var CloudUpload_1 = __importDefault(require("@mui/icons-material/CloudUpload"));
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var Link_1 = __importDefault(require("@mui/icons-material/Link"));
 var Download_1 = __importDefault(require("../../../icons/Download"));
 var SmallIconButton_1 = require("../../SmallIconButton");
 var styles_1 = require("./styles");

package/cjs/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/cjs/components/ImageAttributesGallery/HeaderRight/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
-var styles_1 = require("@material-ui/core/styles");
+var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     downloadButton: {
         color: '#fff',

package/cjs/components/ImageDetailsView/ImageDetailsView.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageDetailsView = void 0;
 var react_1 = __importStar(require("react"));
-var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var Box_1 = __importDefault(require("@mui/material/Box"));
 var ImageDetailsViewCarousel_1 = require("./ImageDetailsViewCarousel/ImageDetailsViewCarousel");
 var ImageDetailsViewSidebar_1 = require("./ImageDetailsViewSidebar/ImageDetailsViewSidebar");
 var styles_1 = require("./styles");

package/cjs/components/ImageDetailsView/ImageDetailsViewCarousel/ImageDetailsViewCarousel.js

@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageDetailsViewCarousel = void 0;
 var react_1 = __importDefault(require("react"));
-var NavigateBefore_1 = __importDefault(require("@material-ui/icons/NavigateBefore"));
-var NavigateNext_1 = __importDefault(require("@material-ui/icons/NavigateNext"));
+var NavigateBefore_1 = __importDefault(require("@mui/icons-material/NavigateBefore"));
+var NavigateNext_1 = __importDefault(require("@mui/icons-material/NavigateNext"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var classnames_1 = __importDefault(require("classnames"));
 var Image_1 = __importStar(require("../../Image/Image"));