@sis-cc/dotstatsuite-visions 11.4.2 → 12.0.0

package/es/Dataflow/index.js

@@ -1,62 +1,62 @@
-/**
- * Without onDownload the button download will disappear
- *
- * @demoReady
- * @memberOf VISIONS
- * @name Dataflow
- * @tag component
- * @api public
- * @props
- * Dataflow.propTypes = {
- *   id: PropTypes.string,
- *   testId: PropTypes.string,
- *   title: PropTypes.string,
- *   body: PropTypes.shape({
- *     description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     highlightDescription: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   }),
- *   url: PropTypes.string,
- *   handleUrl: PropTypes.func,
- *   label: PropTypes.string,
- *   labels: PropTypes.shape({
- *     source: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     lastUpdated: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     readMore: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     note: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     date: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   }),
- *   dimensions: PropTypes.array,
- *   highlights: PropTypes.array,
- *   categories: PropTypes.array,
- *   HTMLRenderer: PropTypes.func,
- * };
- *
- * @theme
- * {
- *   palette: {
- *     primary: {
- *       light: // title hover. globale override: outerPalette.primaryLight
- *     },
- *     highlight: {
- *       hl3: // background color for highlighting words. globale override: outerPalette.highlight2
- *       hl2: // color to underline highlighted words. globale override: outerPalette.highlight3
- *     },
- *     success: {
- *       main: // used if hl3 is null
- *       dark: // used if hl2 is null
- *     },
- *     grey: {
- *       "A200": // fade content color
- *       700: // color of the divider and muted text*
- *       800: // open text description color. globale override: outerPalette.textLight
- *     }
- *   }
- * }
- * *muted text is when the description is not open
- * @testId
- * root: [testId]
- * title: [testId]_title
- * highlight: [testId]_highlight_[highlights[field]]
+/**
+ * Without onDownload the button download will disappear
+ *
+ * @demoReady
+ * @memberOf VISIONS
+ * @name Dataflow
+ * @tag component
+ * @api public
+ * @props
+ * Dataflow.propTypes = {
+ *   id: PropTypes.string,
+ *   testId: PropTypes.string,
+ *   title: PropTypes.string,
+ *   body: PropTypes.shape({
+ *     description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     highlightDescription: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   }),
+ *   url: PropTypes.string,
+ *   handleUrl: PropTypes.func,
+ *   label: PropTypes.string,
+ *   labels: PropTypes.shape({
+ *     source: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     lastUpdated: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     readMore: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     note: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     date: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   }),
+ *   dimensions: PropTypes.array,
+ *   highlights: PropTypes.array,
+ *   categories: PropTypes.array,
+ *   HTMLRenderer: PropTypes.func,
+ * };
+ *
+ * @theme
+ * {
+ *   palette: {
+ *     primary: {
+ *       light: // title hover. globale override: outerPalette.primaryLight
+ *     },
+ *     highlight: {
+ *       hl3: // background color for highlighting words. globale override: outerPalette.highlight2
+ *       hl2: // color to underline highlighted words. globale override: outerPalette.highlight3
+ *     },
+ *     success: {
+ *       main: // used if hl3 is null
+ *       dark: // used if hl2 is null
+ *     },
+ *     grey: {
+ *       "A200": // fade content color
+ *       700: // color of the divider and muted text*
+ *       800: // open text description color. globale override: outerPalette.textLight
+ *     }
+ *   }
+ * }
+ * *muted text is when the description is not open
+ * @testId
+ * root: [testId]
+ * title: [testId]_title
+ * highlight: [testId]_highlight_[highlights[field]]
  */
 
 export { default } from './Dataflow';

package/es/ExpansionPanel/ExpansionPanel.js

@@ -2,13 +2,14 @@ import React from 'react';
 import * as R from 'ramda';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import HelpIcon from '@material-ui/icons/EmojiObjects';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import HelpIcon from '@mui/icons-material/EmojiObjects';
+import { visuallyHidden } from '@mui/utils';
 import { useStyles } from './styles';
 import { withBlank } from '../utils';
 import Tooltip from '../Tooltip';
@@ -62,7 +63,7 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
         className: cx(classes.container, (_cx2 = {}, _cx2[classes.moreFiltersContainer] = moreFilters, _cx2)),
         classes: {
           content: cx(classes.content, classes.ellipsis, (_cx3 = {}, _cx3[classes.moreFiltersContent] = moreFilters, _cx3)),
-          expandIcon: cx(classes.iconSummaryPanel, (_cx4 = {}, _cx4[classes.moreFiltersExpandIcon] = moreFilters, _cx4))
+          expandIconWrapper: cx(classes.iconSummaryPanel, (_cx4 = {}, _cx4[classes.moreFiltersExpandIcon] = moreFilters, _cx4))
         },
         expandIcon: React.createElement(ExpandMoreIcon, null),
         'aria-controls': id,
@@ -74,7 +75,7 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
         { container: true, item: true, className: classes.ellipsis },
         isPinned && React.createElement(
           Typography,
-          { variant: 'srOnly' },
+          { style: visuallyHidden },
           pinnedLabel
         ),
         React.createElement(

package/es/ExpansionPanel/styles.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import * as R from 'ramda';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 export var useStyles = makeStyles(function (theme) {
   return {

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -3,14 +3,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import Container from '@material-ui/core/Container';
-import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
+import Container from '@mui/material/Container';
+import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
 import { ExpansionPanel, Tag as InternalTag, VerticalButton, Spotlight, VirtualizedTree, Tooltip } from '../';
 import { withExpansionTree } from '../VirtualizedTree/withExpansionTree';
 import { withSpotlight } from '../VirtualizedTree/withSpotlight';
 import { getEvolvedDisableAccessor } from '../VirtualizedTree/utils';
 import { useStyles } from '../ScopeList/styles';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material';
 import { getIsRtl } from '../utils';
 
 var getCounter = function getCounter(items, disableAccessor, tagAccessor) {

package/es/Icons/AccessibilityFilled.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/AccessibilityOutlined.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/AccountFilled.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/AccountOutlined.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Api.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Asterisk.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Bar.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/CopyContent.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Cross.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/HSymbol.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Row.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Scatter.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/StackedBar.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/StackedRow.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Timeline.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/VSymbol.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export default (function (props) {
   return React.createElement(

package/es/Icons/Warning.js

@@ -3,7 +3,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 var WarningIcon = React.forwardRef(function (props, ref) {
   return React.createElement(

package/es/Icons/index.js

@@ -1,12 +1,12 @@
-/**
- * Set of custom icons not in MUI set, similar usage that MUI icon
- *
- * @memberOf VISIONS
- * @name Icons
- * @tag component
- * @api public
- *
- * @demoReady
+/**
+ * Set of custom icons not in MUI set, similar usage that MUI icon
+ *
+ * @memberOf VISIONS
+ * @name Icons
+ * @tag component
+ * @api public
+ *
+ * @demoReady
  */
 
 export { default as VSymbol } from './VSymbol';

package/es/Input/Input.js

@@ -4,11 +4,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import IconButton from '@material-ui/core/IconButton';
-import Done from '@material-ui/icons/Done';
+import makeStyles from '@mui/styles/makeStyles';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import Done from '@mui/icons-material/Done';
 import { withInput } from './with-input';
 
 var useStyles = makeStyles(function () {
@@ -36,7 +36,7 @@ var RightIcon = function RightIcon(_ref2) {
     IconButton,
     { color: 'primary', onClick: function onClick() {
         return onSubmit();
-      } },
+      }, size: 'large' },
     React.createElement(Icon, null)
   );
 };

package/es/Input/index.js

@@ -1,26 +1,26 @@
-/**
- * Input let users enter and edit text.
- *
- * @memberOf VISIONS
- * @name Input
- * @tag component
- * @api public
- * @props
- * Input.propTypes = {
- *   id: PropTypes.string,
- *   label: PropTypes.string,
- *   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   leftIcon: PropTypes.object,
- *   rightIcon: PropTypes.object,
- *   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- *   type: PropTypes.string,
- *   onChange: PropTypes.func,
- *   onSubmit: PropTypes.func,
- *   fullWidth: PropTypes.bool,
- *   inputProps: PropTypes.object,
- * };
- * @theme
- * // no custom theme there
+/**
+ * Input let users enter and edit text.
+ *
+ * @memberOf VISIONS
+ * @name Input
+ * @tag component
+ * @api public
+ * @props
+ * Input.propTypes = {
+ *   id: PropTypes.string,
+ *   label: PropTypes.string,
+ *   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   leftIcon: PropTypes.object,
+ *   rightIcon: PropTypes.object,
+ *   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ *   type: PropTypes.string,
+ *   onChange: PropTypes.func,
+ *   onSubmit: PropTypes.func,
+ *   fullWidth: PropTypes.bool,
+ *   inputProps: PropTypes.object,
+ * };
+ * @theme
+ * // no custom theme there
  **/
 
 export { default } from './Input';

package/es/InputNumber/InputNumber.js

@@ -4,10 +4,10 @@ import React from 'react';
 import * as R from 'ramda';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Help from '@material-ui/icons/Help';
+import TextField from '@mui/material/TextField';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Help from '@mui/icons-material/Help';
 import Tooltip from '../Tooltip/Tooltip';
 import { withBlank } from '../utils';
 

package/es/InputNumber/index.js

@@ -1,23 +1,23 @@
-/**
- * InputNumber you can use this input number between two label and with a popper
- *
- * @memberOf VISIONS
- * @name InputNumber
- * @tag component
- * @api public
- * @demoReady
- * @props
- * InputNumber.propTypes = {
- *   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- *   onChange: PropTypes.func,
- *   beforeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   afterLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   popperLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   textFieldProps: PropTypes.object,
- * };
- * @theme
- * // no custom theme there
+/**
+ * InputNumber you can use this input number between two label and with a popper
+ *
+ * @memberOf VISIONS
+ * @name InputNumber
+ * @tag component
+ * @api public
+ * @demoReady
+ * @props
+ * InputNumber.propTypes = {
+ *   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ *   onChange: PropTypes.func,
+ *   beforeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   afterLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   popperLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   textFieldProps: PropTypes.object,
+ * };
+ * @theme
+ * // no custom theme there
  **/
 
 export { default } from './InputNumber';

package/es/LabelDivider/LabelDivider.js

@@ -4,8 +4,8 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
 
 var useStyles = makeStyles(function (theme) {
   return {

package/es/LabelDivider/index.js

@@ -1,32 +1,32 @@
-/**
- * LabelDivider is label between two divider.
- *
- * @memberOf VISIONS
- * @name LabelDivider
- * @tag component
- * @api public
- * @props
- * LabelDivider.propTypes = {
- *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   color: PropTypes.string,
- *   withMargin: PropTypes.bool,
- * };
- * @theme
- * {
- *   palette: {
- *     tertiary: {
- *       main: // text's color
- *     },
- *     common: {
- *       black: // use common black if tertiary is null
- *     }
- *   }
- *   mixins: {
- *     labelDivider: {
- *       root: // font, color...
- *     }
- *   }
- * }
+/**
+ * LabelDivider is label between two divider.
+ *
+ * @memberOf VISIONS
+ * @name LabelDivider
+ * @tag component
+ * @api public
+ * @props
+ * LabelDivider.propTypes = {
+ *   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *   color: PropTypes.string,
+ *   withMargin: PropTypes.bool,
+ * };
+ * @theme
+ * {
+ *   palette: {
+ *     tertiary: {
+ *       main: // text's color
+ *     },
+ *     common: {
+ *       black: // use common black if tertiary is null
+ *     }
+ *   }
+ *   mixins: {
+ *     labelDivider: {
+ *       root: // font, color...
+ *     }
+ *   }
+ * }
  */
 
 export { default } from './LabelDivider';

package/es/Loading/Loading.js

@@ -2,8 +2,8 @@ import React from 'react';
 import * as R from 'ramda';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
 
 var useStyles = makeStyles(function (theme) {
   return {

package/es/Logo/Logo.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 var useStyles = makeStyles(function () {
   return {