@sis-cc/dotstatsuite-visions 11.4.2 → 12.0.0

package/lib/SisccFooter/SisccFooter.js

@@ -14,21 +14,25 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/material/styles');
 
-var _AppBar = require('@material-ui/core/AppBar');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _AppBar = require('@mui/material/AppBar');
 
 var _AppBar2 = _interopRequireDefault(_AppBar);
 
-var _Toolbar = require('@material-ui/core/Toolbar');
+var _Toolbar = require('@mui/material/Toolbar');
 
 var _Toolbar2 = _interopRequireDefault(_Toolbar);
 
-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);
 
@@ -36,7 +40,7 @@ var _utils = require('../utils');
 
 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 {
     appBar: {
       background: theme.palette.grey[100],

package/lib/Spotlight/Fields.js

@@ -19,19 +19,19 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _Popover = require('@material-ui/core/Popover');
+var _Popover = require('@mui/material/Popover');
 
 var _Popover2 = _interopRequireDefault(_Popover);
 
-var _Button = require('@material-ui/core/Button');
+var _Button = require('@mui/material/Button');
 
 var _Button2 = _interopRequireDefault(_Button);
 
-var _ArrowDropDown = require('@material-ui/icons/ArrowDropDown');
+var _ArrowDropDown = require('@mui/icons-material/ArrowDropDown');
 
 var _ArrowDropDown2 = _interopRequireDefault(_ArrowDropDown);
 
-var _Check = require('@material-ui/icons/Check');
+var _Check = require('@mui/icons-material/Check');
 
 var _Check2 = _interopRequireDefault(_Check);
 

package/lib/Spotlight/Spotlight.js

@@ -18,33 +18,33 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _ArrowForward = require('@material-ui/icons/ArrowForward');
+var _ArrowForward = require('@mui/icons-material/ArrowForward');
 
 var _ArrowForward2 = _interopRequireDefault(_ArrowForward);
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/material/styles');
 
-var _ArrowBack = require('@material-ui/icons/ArrowBack');
+var _ArrowBack = require('@mui/icons-material/ArrowBack');
 
 var _ArrowBack2 = _interopRequireDefault(_ArrowBack);
 
-var _Search = require('@material-ui/icons/Search');
+var _Search = require('@mui/icons-material/Search');
 
 var _Search2 = _interopRequireDefault(_Search);
 
-var _Paper = require('@material-ui/core/Paper');
+var _Paper = require('@mui/material/Paper');
 
 var _Paper2 = _interopRequireDefault(_Paper);
 
-var _IconButton = require('@material-ui/core/IconButton');
+var _IconButton = require('@mui/material/IconButton');
 
 var _IconButton2 = _interopRequireDefault(_IconButton);
 
-var _InputBase = require('@material-ui/core/InputBase');
+var _InputBase = require('@mui/material/InputBase');
 
 var _InputBase2 = _interopRequireDefault(_InputBase);
 
-var _Divider = require('@material-ui/core/Divider');
+var _Divider = require('@mui/material/Divider');
 
 var _Divider2 = _interopRequireDefault(_Divider);
 
@@ -107,7 +107,7 @@ var Spotlight = function Spotlight(_ref) {
       { className: classes.root, elevation: 0 },
       _react2.default.createElement(
         _IconButton2.default,
-        { className: classes.leftIcon, disabled: true, 'aria-label': 'search' },
+        { className: classes.leftIcon, disabled: true, 'aria-label': 'search', size: 'large' },
         _react2.default.createElement(_Search2.default, null)
       ),
       _react2.default.createElement(_InputBase2.default, {
@@ -135,7 +135,8 @@ var Spotlight = function Spotlight(_ref) {
         {
           'aria-label': 'Clear',
           onClick: onClearTerm,
-          className: (0, _classnames2.default)(classes.rightIcon, classes.clear)
+          className: (0, _classnames2.default)(classes.rightIcon, classes.clear),
+          size: 'large'
         },
         _react2.default.createElement(_Cross2.default, null)
       ) : null,
@@ -162,7 +163,8 @@ var Spotlight = function Spotlight(_ref) {
             color: 'primary',
             className: classes.rightIcon,
             'aria-label': 'commit',
-            onClick: onCommitTerm
+            onClick: onCommitTerm,
+            size: 'large'
           },
           isRtl ? _react2.default.createElement(_ArrowBack2.default, null) : _react2.default.createElement(_ArrowForward2.default, null)
         )

package/lib/Spotlight/useStyles.js

@@ -9,11 +9,15 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; } }
 
-var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = exports.useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     container: {
       padding: theme.spacing(1.875),

package/lib/TableFooter/TableFooter.js

@@ -14,13 +14,15 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
 
-var _Typography = require('@material-ui/core/Typography');
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _Grid = require('@material-ui/core/Grid');
+var _Grid = require('@mui/material/Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
 
@@ -32,7 +34,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 {
     font: {
       color: theme.palette.grey[600]
@@ -66,7 +68,6 @@ var TableFooter = function TableFooter(_ref) {
         _Tooltip2.default,
         {
           placement: 'top',
-          interactive: true,
           title: _react2.default.createElement(
             _Typography2.default,
             { variant: 'body2' },

package/lib/TableHeader/TableHeader.js

@@ -14,13 +14,15 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
 
-var _Typography = require('@material-ui/core/Typography');
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _Lens = require('@material-ui/icons/Lens');
+var _Lens = require('@mui/icons-material/Lens');
 
 var _Lens2 = _interopRequireDefault(_Lens);
 
@@ -28,7 +30,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 {
     title: {
       color: theme.palette.text.primary

package/lib/TableHtml5/TableHtml5.js

@@ -9,7 +9,9 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _propTypes = require('prop-types');
 
@@ -19,7 +21,7 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _Table = require('@material-ui/core/Table');
+var _Table = require('@mui/material/Table');
 
 var _Table2 = _interopRequireDefault(_Table);
 
@@ -53,7 +55,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *  We are using "headers" attribute because the table is too complexe to use "scope".
  */
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2.default)(function (theme) {
   return {
     table: {
       borderCollapse: 'separate',

package/lib/TableHtml5/cell.js

@@ -18,13 +18,17 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _styles = require('@material-ui/core/styles');
+var _styles = require('@mui/material/styles');
 
-var _TableCell = require('@material-ui/core/TableCell');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _TableCell = require('@mui/material/TableCell');
 
 var _TableCell2 = _interopRequireDefault(_TableCell);
 
-var _Link = require('@material-ui/core/Link');
+var _Link = require('@mui/material/Link');
 
 var _Link2 = _interopRequireDefault(_Link);
 
@@ -38,12 +42,12 @@ 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 {
     cell: {
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'baseline',
       color: theme.palette.grey['A700'],
       '&:hover': {

package/lib/TableHtml5/flags.js

@@ -20,19 +20,23 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _styles = require('@material-ui/core/styles');
+var _makeStyles = require('@mui/styles/makeStyles');
 
-var _Typography = require('@material-ui/core/Typography');
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-var _Tooltip = require('@material-ui/core/Tooltip');
+var _utils = require('@mui/utils');
+
+var _Tooltip = require('@mui/material/Tooltip');
 
 var _Tooltip2 = _interopRequireDefault(_Tooltip);
 
 var _ = require('../');
 
-var _utils = require('./utils');
+var _utils2 = require('./utils');
 
 var _useKeybordEscapeHandler = require('../hooks/useKeybordEscapeHandler');
 
@@ -42,7 +46,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 {
     content: _extends({
       borderRadius: 3,
@@ -96,7 +100,7 @@ var Flags = function Flags(_ref) {
   }, []), R.join(','))(flags);
 
   var labels = R.map(function (flag) {
-    var value = (0, _utils.getValue)(labelAccessor)(flag);
+    var value = (0, _utils2.getValue)(labelAccessor)(flag);
     return R.isEmpty(labelAccessor(flag)) ? value.label : labelAccessor(flag) + ': ' + value.label;
   }, flags);
   var content = _react2.default.createElement(
@@ -119,7 +123,6 @@ var Flags = function Flags(_ref) {
       title: content,
       placement: 'top',
       open: open,
-      interactive: true,
       onOpen: function onOpen() {
         return setOpen(true);
       },
@@ -146,7 +149,7 @@ var Flags = function Flags(_ref) {
         _react2.default.createElement(_.Asterisk, { className: classes.svg, style: { fontSize: 11 } }),
         _react2.default.createElement(
           _Typography2.default,
-          { variant: 'srOnly' },
+          { style: _utils.visuallyHidden },
           '* ' + labels
         )
       )

package/lib/TableHtml5/header.js

@@ -18,17 +18,21 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-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 _styles = require('@mui/material/styles');
 
-var _TableCell = require('@material-ui/core/TableCell');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _TableCell = require('@mui/material/TableCell');
 
 var _TableCell2 = _interopRequireDefault(_TableCell);
 
-var _TableRow = require('@material-ui/core/TableRow');
+var _TableRow = require('@mui/material/TableRow');
 
 var _TableRow2 = _interopRequireDefault(_TableRow);
 
@@ -44,7 +48,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 {
     tableHeadCell: {
       color: theme.palette.getContrastText(theme.palette.primary.main),
@@ -52,7 +56,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'top',
       '&:focus ': {
         opacity: '.85'

package/lib/TableHtml5/section.js

@@ -20,21 +20,25 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-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 _styles = require('@mui/material/styles');
 
-var _TableBody = require('@material-ui/core/TableBody');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _TableBody = require('@mui/material/TableBody');
 
 var _TableBody2 = _interopRequireDefault(_TableBody);
 
-var _TableCell = require('@material-ui/core/TableCell');
+var _TableCell = require('@mui/material/TableCell');
 
 var _TableCell2 = _interopRequireDefault(_TableCell);
 
-var _TableRow = require('@material-ui/core/TableRow');
+var _TableRow = require('@mui/material/TableRow');
 
 var _TableRow2 = _interopRequireDefault(_TableRow);
 
@@ -58,14 +62,14 @@ 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 {
     rowTitle: {
       backgroundColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light,
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'top',
       align: 'left'
@@ -80,7 +84,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       position: 'sticky',
       zIndex: 1
     },

package/lib/TableHtml5/sectionHeader.js

@@ -18,21 +18,25 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _Typography = require('@material-ui/core/Typography');
+var _Typography = require('@mui/material/Typography');
 
 var _Typography2 = _interopRequireDefault(_Typography);
 
-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 _styles = require('@mui/material/styles');
 
-var _TableCell = require('@material-ui/core/TableCell');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _TableCell = require('@mui/material/TableCell');
 
 var _TableCell2 = _interopRequireDefault(_TableCell);
 
-var _TableRow = require('@material-ui/core/TableRow');
+var _TableRow = require('@mui/material/TableRow');
 
 var _TableRow2 = _interopRequireDefault(_TableRow);
 
@@ -48,7 +52,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 {
     section: {
       backgroundColor: (0, _utils.getDark)(theme) || theme.palette.secondary.dark,

package/lib/TableHtml5/subHeader.js

@@ -18,17 +18,21 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-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 _styles = require('@mui/material/styles');
 
-var _TableCell = require('@material-ui/core/TableCell');
+var _makeStyles = require('@mui/styles/makeStyles');
+
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
+
+var _TableCell = require('@mui/material/TableCell');
 
 var _TableCell2 = _interopRequireDefault(_TableCell);
 
-var _TableRow = require('@material-ui/core/TableRow');
+var _TableRow = require('@mui/material/TableRow');
 
 var _TableRow2 = _interopRequireDefault(_TableRow);
 
@@ -42,14 +46,14 @@ 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 {
     columnsTitle: {
       backgroundColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light,
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle',
       position: 'sticky',
@@ -60,7 +64,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'middle',
       textAlign: 'center',
       color: theme.palette.grey['A700']

package/lib/TableLayout/Box.js

@@ -15,27 +15,31 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _Typography = require('@material-ui/core/Typography');
+var _classnames = require('classnames');
 
-var _Typography2 = _interopRequireDefault(_Typography);
+var _classnames2 = _interopRequireDefault(_classnames);
 
-var _Grid = require('@material-ui/core/Grid');
+var _dnd = require('@hello-pangea/dnd');
 
-var _Grid2 = _interopRequireDefault(_Grid);
+var _Typography = require('@mui/material/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
 
-var _styles = require('@material-ui/core/styles');
+var _Grid = require('@mui/material/Grid');
 
-var _classnames = require('classnames');
+var _Grid2 = _interopRequireDefault(_Grid);
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _makeStyles = require('@mui/styles/makeStyles');
 
-var _dnd = require('@hello-pangea/dnd');
+var _makeStyles2 = _interopRequireDefault(_makeStyles);
 
 var _DnDItem = require('./DnDItem');
 
 var _DnDItem2 = _interopRequireDefault(_DnDItem);
 
-var _utils = require('../utils');
+var _utils = require('@mui/utils');
+
+var _utils2 = require('../utils');
 
 var _constants = require('./constants');
 
@@ -43,7 +47,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) {
   var _ref;
 
   return _ref = {
@@ -62,9 +66,9 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       borderStyle: 'dashed'
     }
   }, _ref[_constants.BOX.sections + 'Container'] = {
-    borderColor: (0, _utils.getDark)(theme) || theme.palette.secondary.dark
+    borderColor: (0, _utils2.getDark)(theme) || theme.palette.secondary.dark
   }, _ref[_constants.BOX.rows + 'Container'] = {
-    borderColor: (0, _utils.getLight)(theme) || theme.palette.secondary.light
+    borderColor: (0, _utils2.getLight)(theme) || theme.palette.secondary.light
   }, _ref[_constants.BOX.header + 'Container'] = {
     borderColor: theme.palette.primary.main
   }, _ref.iconTitle = {
@@ -103,7 +107,7 @@ var Box = function Box(_ref2) {
       ),
       _react2.default.createElement(
         _Typography2.default,
-        { variant: 'srOnly' },
+        { style: _utils.visuallyHidden },
         title
       )
     ),