@sis-cc/dotstatsuite-visions 11.4.2 → 12.0.0

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -22,39 +22,39 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 var _utils = require('../VirtualizedTree/utils');
 
-var _Button = require('@material-ui/core/Button');
+var _Button = require('@mui/material/Button');
 
 var _Button2 = _interopRequireDefault(_Button);
 
-var _Dialog = require('@material-ui/core/Dialog');
+var _Dialog = require('@mui/material/Dialog');
 
 var _Dialog2 = _interopRequireDefault(_Dialog);
 
-var _DialogTitle = require('@material-ui/core/DialogTitle');
+var _DialogTitle = require('@mui/material/DialogTitle');
 
 var _DialogTitle2 = _interopRequireDefault(_DialogTitle);
 
-var _DialogContent = require('@material-ui/core/DialogContent');
+var _DialogContent = require('@mui/material/DialogContent');
 
 var _DialogContent2 = _interopRequireDefault(_DialogContent);
 
-var _DialogActions = require('@material-ui/core/DialogActions');
+var _DialogActions = require('@mui/material/DialogActions');
 
 var _DialogActions2 = _interopRequireDefault(_DialogActions);
 
-var _Paper = require('@material-ui/core/Paper');
+var _Paper = require('@mui/material/Paper');
 
 var _Paper2 = _interopRequireDefault(_Paper);
 
-var _Grid = require('@material-ui/core/Grid');
+var _Grid = require('@mui/material/Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _Close = require('@material-ui/icons/Close');
+var _Close = require('@mui/icons-material/Close');
 
 var _Close2 = _interopRequireDefault(_Close);
 
@@ -68,9 +68,11 @@ var _withExpansionTree = require('../VirtualizedTree/withExpansionTree');
 
 var _withSpotlight = require('../VirtualizedTree/withSpotlight');
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
 
-var _EmojiObjects = require('@material-ui/icons/EmojiObjects');
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _EmojiObjects = require('@mui/icons-material/EmojiObjects');
 
 var _EmojiObjects2 = _interopRequireDefault(_EmojiObjects);
 
@@ -90,7 +92,7 @@ var _levelSelection = require('./images/level-selection.png');
 
 var _levelSelection2 = _interopRequireDefault(_levelSelection);
 
-var _core = require('@material-ui/core');
+var _material = require('@mui/material');
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
@@ -106,7 +108,7 @@ var PaperComponent = function PaperComponent(props) {
   );
 };
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     header: {
       color: 'black',
@@ -183,7 +185,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     selectModeItem: {
       boxShadow: 'none',
       display: 'flex',
-      backgroundColor: 'inherit',
+      backgroundColor: 'transparent',
       flexDirection: 'row-reverse',
       alignItems: 'center',
       '& p': {
@@ -470,7 +472,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
                         },
                         _react2.default.createElement(
                           _Paper2.default,
-                          { className: classes.selectModeItem, key: value },
+                          { elevation: 0, className: classes.selectModeItem, key: value },
                           _react2.default.createElement(
                             _Typography2.default,
                             null,
@@ -494,7 +496,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             {
               className: classes.closeButton,
               onClick: onClose,
-              'aria-label': R.prop('cancel', labels)
+              'aria-label': R.prop('cancel', labels),
+              size: 'large'
             },
             _react2.default.createElement(_Close2.default, null)
           )
@@ -554,7 +557,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
               )
             )
           ),
-          _react2.default.createElement(_core.Divider, { className: classes.divider })
+          _react2.default.createElement(_material.Divider, { className: classes.divider })
         ),
         _react2.default.createElement(
           _Grid2.default,
@@ -596,6 +599,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           _.Button,
           {
             disabled: R.isEmpty(selection),
+            'aria-label': R.prop('apply', labels),
             onClick: handleSubmit,
             color: 'primary',
             variant: 'contained',

package/lib/AdvancedFilterDialog/SelectionModeMenu.js

@@ -14,23 +14,23 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _Card = require('@material-ui/core/Card');
+var _Card = require('@mui/material/Card');
 
 var _Card2 = _interopRequireDefault(_Card);
 
-var _CardContent = require('@material-ui/core/CardContent');
+var _CardContent = require('@mui/material/CardContent');
 
 var _CardContent2 = _interopRequireDefault(_CardContent);
 
-var _Paper = require('@material-ui/core/Paper');
+var _Paper = require('@mui/material/Paper');
 
 var _Paper2 = _interopRequireDefault(_Paper);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _EmojiObjects = require('@material-ui/icons/EmojiObjects');
+var _EmojiObjects = require('@mui/icons-material/EmojiObjects');
 
 var _EmojiObjects2 = _interopRequireDefault(_EmojiObjects);
 

package/lib/Alert/Alert.js

@@ -17,45 +17,49 @@ var _clsx = require('clsx');
 
 var _clsx2 = _interopRequireDefault(_clsx);
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/material/styles');
 
-var _Paper = require('@material-ui/core/Paper');
+var _withStyles = require('@mui/styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _Paper = require('@mui/material/Paper');
 
 var _Paper2 = _interopRequireDefault(_Paper);
 
-var _CheckCircleOutlineOutlined = require('@material-ui/icons/CheckCircleOutlineOutlined');
+var _CheckCircleOutlineOutlined = require('@mui/icons-material/CheckCircleOutlineOutlined');
 
 var _CheckCircleOutlineOutlined2 = _interopRequireDefault(_CheckCircleOutlineOutlined);
 
-var _ReportProblemOutlined = require('@material-ui/icons/ReportProblemOutlined');
+var _ReportProblemOutlined = require('@mui/icons-material/ReportProblemOutlined');
 
 var _ReportProblemOutlined2 = _interopRequireDefault(_ReportProblemOutlined);
 
-var _ErrorOutline = require('@material-ui/icons/ErrorOutline');
+var _ErrorOutline = require('@mui/icons-material/ErrorOutline');
 
 var _ErrorOutline2 = _interopRequireDefault(_ErrorOutline);
 
-var _InfoOutlined = require('@material-ui/icons/InfoOutlined');
+var _InfoOutlined = require('@mui/icons-material/InfoOutlined');
 
 var _InfoOutlined2 = _interopRequireDefault(_InfoOutlined);
 
-var _Close = require('@material-ui/icons/Close');
+var _Close = require('@mui/icons-material/Close');
 
 var _Close2 = _interopRequireDefault(_Close);
 
-var _IconButton = require('@material-ui/core/IconButton');
+var _IconButton = require('@mui/material/IconButton');
 
 var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _utils = require('@material-ui/core/utils');
+var _utils = require('@mui/material/utils');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 var styles = exports.styles = function styles(theme) {
-  var getColor = theme.palette.type === 'light' ? _styles.darken : _styles.lighten;
-  var getBackgroundColor = theme.palette.type === 'light' ? _styles.lighten : _styles.darken;
+  var getColor = theme.palette.mode === 'light' ? _styles.darken : _styles.lighten;
+  var getBackgroundColor = theme.palette.mode === 'light' ? _styles.lighten : _styles.darken;
 
   return {
     /* Styles applied to the root element. */
@@ -253,43 +257,43 @@ Alert.propTypes = process.env.NODE_ENV !== "production" ? {
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-  /**
-   * The action to display. It renders after the message, at the end of the alert.
+  /**
+   * The action to display. It renders after the message, at the end of the alert.
    */
   action: _propTypes2.default.node,
-  /**
-   * The content of the component.
+  /**
+   * The content of the component.
    */
   children: _propTypes2.default.node,
-  /**
-   * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
    */
   classes: _propTypes2.default.object,
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: _propTypes2.default.string,
-  /**
-   * Override the default label for the *close popup* icon button.
-   *
-   * For localization purposes, you can use the provided [translations](/guides/localization/).
+  /**
+   * Override the default label for the *close popup* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](/guides/localization/).
    */
   closeText: _propTypes2.default.string,
-  /**
-   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
+  /**
+   * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
    */
   color: _propTypes2.default.oneOf(['error', 'info', 'success', 'warning']),
-  /**
-   * Override the icon displayed before the children.
-   * Unless provided, the icon is mapped to the value of the `severity` prop.
+  /**
+   * Override the icon displayed before the children.
+   * Unless provided, the icon is mapped to the value of the `severity` prop.
    */
   icon: _propTypes2.default.node,
-  /**
-   * The component maps the `severity` prop to a range of different icons,
-   * for instance success to `<SuccessOutlined>`.
-   * If you wish to change this mapping, you can provide your own.
-   * Alternatively, you can use the `icon` prop to override the icon displayed.
+  /**
+   * The component maps the `severity` prop to a range of different icons,
+   * for instance success to `<SuccessOutlined>`.
+   * If you wish to change this mapping, you can provide your own.
+   * Alternatively, you can use the `icon` prop to override the icon displayed.
    */
   iconMapping: _propTypes2.default.shape({
     error: _propTypes2.default.node,
@@ -297,25 +301,25 @@ Alert.propTypes = process.env.NODE_ENV !== "production" ? {
     success: _propTypes2.default.node,
     warning: _propTypes2.default.node
   }),
-  /**
-   * Callback fired when the component requests to be closed.
-   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
-   *
-   * @param {object} event The event source of the callback.
+  /**
+   * Callback fired when the component requests to be closed.
+   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
+   *
+   * @param {object} event The event source of the callback.
    */
   onClose: _propTypes2.default.func,
-  /**
-   * The ARIA role attribute of the element.
+  /**
+   * The ARIA role attribute of the element.
    */
   role: _propTypes2.default.string,
-  /**
-   * The severity of the alert. This defines the color and icon used.
+  /**
+   * The severity of the alert. This defines the color and icon used.
    */
   severity: _propTypes2.default.oneOf(['error', 'info', 'success', 'warning']),
-  /**
-   * The variant to use.
+  /**
+   * The variant to use.
    */
   variant: _propTypes2.default.oneOf(['filled', 'outlined', 'standard'])
 } : {};
 
-exports.default = (0, _styles.withStyles)(styles, { name: 'MuiAlert' })(Alert);
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiAlert' })(Alert);

package/lib/ApiQueries/ApiQueries.js

@@ -14,19 +14,21 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _Divider = require('@material-ui/core/Divider');
+var _Divider = require('@mui/material/Divider');
 
 var _Divider2 = _interopRequireDefault(_Divider);
 
-var _Grid = require('@material-ui/core/Grid');
+var _Grid = require('@mui/material/Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _Query = require('./Query');
 
@@ -36,7 +38,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     divider: {
       padding: theme.spacing(2, 0)

package/lib/ApiQueries/Query.js

@@ -14,19 +14,21 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _TextareaAutosize = require('@material-ui/core/TextareaAutosize');
+var _TextareaAutosize = require('@mui/material/TextareaAutosize');
 
 var _TextareaAutosize2 = _interopRequireDefault(_TextareaAutosize);
 
-var _Grid = require('@material-ui/core/Grid');
+var _Grid = require('@mui/material/Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _ = require('../');
 
@@ -34,7 +36,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     error: {
       width: '100%',

package/lib/AuthDialog/index.js

@@ -12,35 +12,37 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _ramda = require('ramda');
 
-var _Checkbox = require('@material-ui/core/Checkbox');
+var _Checkbox = require('@mui/material/Checkbox');
 
 var _Checkbox2 = _interopRequireDefault(_Checkbox);
 
-var _Close = require('@material-ui/icons/Close');
+var _Close = require('@mui/icons-material/Close');
 
 var _Close2 = _interopRequireDefault(_Close);
 
-var _Dialog = require('@material-ui/core/Dialog');
+var _Dialog = require('@mui/material/Dialog');
 
 var _Dialog2 = _interopRequireDefault(_Dialog);
 
-var _IconButton = require('@material-ui/core/IconButton');
+var _IconButton = require('@mui/material/IconButton');
 
 var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _Person = require('@material-ui/icons/Person');
+var _Person = require('@mui/icons-material/Person');
 
 var _Person2 = _interopRequireDefault(_Person);
 
-var _TextField = require('@material-ui/core/TextField');
+var _TextField = require('@mui/material/TextField');
 
 var _TextField2 = _interopRequireDefault(_TextField);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _Button = require('../Button');
 
@@ -72,7 +74,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @demoReady
  */
 
-var useStyles = (0, _styles.makeStyles)(function () {
+var useStyles = (0, _makeStyles2.default)(function () {
   return {
     header: {
       color: 'grey',
@@ -163,7 +165,7 @@ var AuthDialog = function AuthDialog(_ref) {
       ),
       onClose && _react2.default.createElement(
         _IconButton2.default,
-        { className: classes.closeButton, onClick: onClose },
+        { className: classes.closeButton, onClick: onClose, size: 'large' },
         _react2.default.createElement(_Close2.default, null)
       )
     ),

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -14,21 +14,23 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
 
-var _Breadcrumbs = require('@material-ui/core/Breadcrumbs');
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _Breadcrumbs = require('@mui/material/Breadcrumbs');
 
 var _Breadcrumbs2 = _interopRequireDefault(_Breadcrumbs);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _NavigateNext = require('@material-ui/icons/NavigateNext');
+var _NavigateNext = require('@mui/icons-material/NavigateNext');
 
 var _NavigateNext2 = _interopRequireDefault(_NavigateNext);
 
-var _NavigateBefore = require('@material-ui/icons/NavigateBefore');
+var _NavigateBefore = require('@mui/icons-material/NavigateBefore');
 
 var _NavigateBefore2 = _interopRequireDefault(_NavigateBefore);
 
@@ -40,7 +42,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     action: {
       cursor: 'pointer',

package/lib/Button/Button.js

@@ -20,11 +20,13 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _Button = require('@material-ui/core/Button');
+var _Button = require('@mui/material/Button');
 
 var _Button2 = _interopRequireDefault(_Button);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
@@ -32,7 +34,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   var color1 = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;
 
   return {

package/lib/ChartsConfig/ChartsConfig.js

@@ -17,15 +17,15 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _Grid = require('@material-ui/core/Grid');
+var _Grid = require('@mui/material/Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
 
-var _ArrowForward = require('@material-ui/icons/ArrowForward');
+var _ArrowForward = require('@mui/icons-material/ArrowForward');
 
 var _ArrowForward2 = _interopRequireDefault(_ArrowForward);
 
-var _ArrowUpward = require('@material-ui/icons/ArrowUpward');
+var _ArrowUpward = require('@mui/icons-material/ArrowUpward');
 
 var _ArrowUpward2 = _interopRequireDefault(_ArrowUpward);
 
@@ -33,7 +33,7 @@ var _Title = require('./Title');
 
 var _Title2 = _interopRequireDefault(_Title);
 
-var _core = require('@material-ui/core');
+var _material = require('@mui/material');
 
 var _useFocusOptions3 = require('./useFocusOptions');
 
@@ -61,7 +61,9 @@ var _useAxisOptions = require('./useAxisOptions');
 
 var _useAxisOptions2 = _interopRequireDefault(_useAxisOptions);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _DataEdit = require('../DataEdit');
 
@@ -71,7 +73,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = exports.useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     greyVariant: {
       backgroundColor: theme.palette.secondary.dark,
@@ -153,7 +155,7 @@ var ChartConfig = function ChartConfig(_ref) {
                     _Grid2.default,
                     { item: true, xs: true },
                     _react2.default.createElement(
-                      _core.Typography,
+                      _material.Typography,
                       { variant: 'body2' },
                       labels.stackedMode
                     )
@@ -163,7 +165,7 @@ var ChartConfig = function ChartConfig(_ref) {
                       _Grid2.default,
                       { item: true, key: option.value },
                       _react2.default.createElement(
-                        _core.Button,
+                        _material.Button,
                         {
                           variant: option.value === stackedMode.value ? 'contained' : 'outlined',
                           onClick: function onClick() {
@@ -172,7 +174,7 @@ var ChartConfig = function ChartConfig(_ref) {
                           color: 'primary'
                         },
                         _react2.default.createElement(
-                          _core.Typography,
+                          _material.Typography,
                           { variant: 'body2' },
                           R.path(['stackedModeOptions', option.value], labels)
                         )
@@ -275,7 +277,7 @@ var ChartConfig = function ChartConfig(_ref) {
               properties: properties,
               InputProps: {
                 endAdornment: _react2.default.createElement(
-                  _core.InputAdornment,
+                  _material.InputAdornment,
                   { position: 'end' },
                   'px'
                 )
@@ -287,7 +289,7 @@ var ChartConfig = function ChartConfig(_ref) {
               properties: properties,
               InputProps: {
                 endAdornment: _react2.default.createElement(
-                  _core.InputAdornment,
+                  _material.InputAdornment,
                   { position: 'end' },
                   'px'
                 )
@@ -414,7 +416,7 @@ var ChartConfig = function ChartConfig(_ref) {
               _Grid2.default,
               { item: true, xs: true },
               _react2.default.createElement(
-                _core.Typography,
+                _material.Typography,
                 { variant: 'body2' },
                 labels.display
               )
@@ -424,7 +426,7 @@ var ChartConfig = function ChartConfig(_ref) {
                 _Grid2.default,
                 { item: true, key: option.value },
                 _react2.default.createElement(
-                  _core.Button,
+                  _material.Button,
                   {
                     variant: option.value === displayMode.value ? 'contained' : 'outlined',
                     onClick: function onClick() {
@@ -433,7 +435,7 @@ var ChartConfig = function ChartConfig(_ref) {
                     color: 'primary'
                   },
                   _react2.default.createElement(
-                    _core.Typography,
+                    _material.Typography,
                     { variant: 'body2' },
                     R.path(['displayOptions', option.value], labels)
                   )