npm - @reltio/components - Versions diffs - 1.4.1585 → 1.4.1586-mui5-2 - Mend

@reltio/components 1.4.1585 → 1.4.1586-mui5-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1673) hide show

package/esm/components/DropDownSelector/components/styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useMenuStyles = makeStyles(function (theme) { return ({
     addLabel: {
         display: 'flex',
@@ -28,6 +28,6 @@ export var useSingleValueStyles = makeStyles({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        marginTop: '21px'
+        marginTop: '17px'
     }
 });

package/esm/components/DropDownSelector/styles.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"inputLabel" | "formControl" | "control" | "filledInputUnderline" | "valueContainer" | "dropdownIndicator" | "filledInputRoot">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"control" | "formControl" | "filledInputUnderline" | "inputLabel" | "valueContainer" | "dropdownIndicator" | "filledInputRoot">;
 export namespace customStyles {
     function menu(baseStyles: any): any;
     function menuList(baseStyles: any): any;

package/esm/components/DropDownSelector/styles.js CHANGED Viewed

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     control: {
         height: 'auto'
@@ -45,7 +45,6 @@ export var useStyles = makeStyles({
     inputLabel: {
         color: 'rgba(0,0,0,0.6)',
         fontSize: '14px',
-        lineHeight: '16px',
         paddingLeft: '4px',
         '&.shrink': {
             paddingLeft: '4px'

package/esm/components/EmptySearchResult/styles.d.ts CHANGED Viewed

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

package/esm/components/EmptySearchResult/styles.js CHANGED Viewed

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

package/esm/components/EmptyState/EmptyState.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
 import { identity } from 'ramda';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
 import EmptySearchResultsIcon from '../../icons/EmptySearchResults';
 import SelectAttributesIcon from '../../icons/SelectAttributes';
 import NoData from '../../icons/NoData';

package/esm/components/EmptyState/styles.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const useStyles: (props?: any) => import("@~~material-ui~~/~~core/~~styles~~/withStyles~~").ClassNameMap<"button" \| "text" \| "root" \| "textBox" \| "secondaryText" \| "root_small" \| "embedded" \| "full">;
1	+ export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" \| "text" \| "root" \| "textBox" \| "secondaryText" \| "root_small" \| "embedded" \| "full">;

package/esm/components/EmptyState/styles.js CHANGED Viewed

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

package/esm/components/EntityAvatar/EntityAvatar.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import Avatar from '@material-ui/core/Avatar';
+import Avatar from '@mui/material/Avatar';
 import { DEFAULT_PROFILE_IMAGE } from './no-photo.svg';
 import { getEntityImage, getEntityTypeImage, getAbsoluteImageUrl, svg2Url } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';

package/esm/components/EntityTypeBadge/EntityTypeBadge.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { getEntityType, getEntityTypeLabel, getPropWithInheritance, theme, utils } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';
 import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';

package/esm/components/EntityTypeBadge/styles.d.ts CHANGED Viewed

@@ -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/esm/components/EntityTypeBadge/styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 var useStyles = makeStyles({
     'entityType-overflow': {
         textOverflow: 'ellipsis',

package/esm/components/ErrorPopup/ErrorPopup.js CHANGED Viewed

@@ -15,7 +15,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { path } from 'ramda';
 import i18n from 'ui-i18n';
-import Portal from '@material-ui/core/Portal';
+import Portal from '@mui/material/Portal';
 import RCErrorPopup from 'react-components/dist/ErrorPopup/ErrorPopup';
 import mdmModule, { ui } from '@reltio/mdm-module';
 import { useStyles } from './styles';

package/esm/components/ErrorPopup/styles.d.ts CHANGED Viewed

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

package/esm/components/ErrorPopup/styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function () { return ({
     errorBlock: {
         fontFamily: 'Roboto, Helvetica, Arial, sans-serif',

package/esm/components/ErrorWrapper/ErrorMessage.js CHANGED Viewed

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

package/esm/components/ErrorWrapper/ErrorWrapper.d.ts CHANGED Viewed

@@ -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/esm/components/ErrorWrapper/ErrorWrapper.js CHANGED Viewed

@@ -22,15 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classnames from 'classnames';
 import ErrorMessage from './ErrorMessage';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
 import React, { memo } from 'react';
 import { useStyles } from './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 = useStyles();
     var hasError = !!errorMessage;
-    return (React.createElement(FormControl, __assign({ className: classnames(styles.wrapper, className, classes === null || classes === void 0 ? void 0 : classes.root), error: true }, otherProps),
+    return (React.createElement(FormControl, __assign({ variant: "standard", className: classnames(styles.wrapper, className, classes === null || classes === void 0 ? void 0 : classes.root), error: true }, otherProps),
         children,
         hasError && (React.createElement(FormHelperText, { className: classnames(styles.helperText, classes === null || classes === void 0 ? void 0 : classes.helperText) },
             React.createElement(ErrorMessage, { message: errorMessage })))));

package/esm/components/ErrorWrapper/styles.d.ts CHANGED Viewed

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

package/esm/components/ErrorWrapper/styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     wrapper: {
         width: '100%'

package/esm/components/ExpandableSearchInput/ExpandableSearchInput.js CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/ExpandableSearchInput/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/ExpandedValueTooltip/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/FacetViewHeader/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/HierarchicalAttributeTooltip/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/HierarchyNodeTitle/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/Highlighter/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/Image/CheckedIcon/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/ImageAttributesGallery/GalleryView/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/esm/components/ImageAttributesGallery/HeaderLeft/styles.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

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

package/esm/components/ImageDetailsView/ImageDetailsViewCarousel/styles.js CHANGED Viewed

@@ -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',