@hipay/hipay-material-ui 2.2.0-RC2 → 2.2.0-beta-core

package/es/HiCell/CellNumeric.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { formatNumber, formatCurrencyAmount } from '../utils/helpers';
 export const styles = () => ({
   wrapper: {

package/es/HiCell/CellPinToAction.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiPin from '../HiPin';
 export const styles = {
   wrapper: {

package/es/HiCell/CellRate.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { ArrowBottomRight, ArrowTopRight, Equal } from 'mdi-material-ui';
 import { formatRate } from '../utils/helpers';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   flexContent: {
     display: 'flex',

package/es/HiCell/CellSentinel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiColoredLabel from '../HiColoredLabel';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = {
   flexContent: {
     display: 'flex',

package/es/HiCell/CellSentinelScore.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiColoredLabel from '../HiColoredLabel';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = {
   flexContent: {
     display: 'flex',

package/es/HiCell/CellText.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiColoredLabel from '../HiColoredLabel';
 export const styles = {
   leftEllipsisSpan: {

package/es/HiCell/CellTextStyled.js

@@ -58,7 +58,7 @@ const CellTextStyled = ({
       onClick: onClick,
       size: "small",
       style: styleButton,
-      variant: "raised"
+      variant: "contained"
     }, valueString);
   }
 

package/es/HiCheckbox/HiCheckbox.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import PropTypes from 'prop-types';
 import Checkbox from '@material-ui/core/Checkbox';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiIcon from '../HiIcon';
 import classNames from 'classnames';
 export const styles = theme => ({

package/es/HiChip/HiChip.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode';
 import HiIcon from '../HiIcon';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   root: _objectSpread({}, theme.typography.b3, {
     display: 'inline-flex',

package/es/HiChip/HiChipSwitch.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode/index';
 import HiIcon from '../HiIcon';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { emphasize } from '../styles/colorManipulator';
 export const styles = theme => ({
   root: _objectSpread({}, theme.typography.b3, {

package/es/HiColoredLabel/HiColoredLabel.js

@@ -4,7 +4,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { capitalize } from '../utils/helpers';
 import { fade } from '../styles/colorManipulator';
 export const styles = theme => ({

package/es/HiDatePicker/Caption.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiButton from '../HiButton';
 export const styles = theme => ({
   caption: _objectSpread({

package/es/HiDatePicker/HiDatePicker.js

@@ -7,7 +7,7 @@ import moment from 'moment-timezone';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import HiLocaleUtils from './hiLocaleUtils';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Caption from './Caption';
 import Overlay from './Overlays/Overlay';
 import TimePickerOverlay from './Overlays/TimePickerOverlay';

package/es/HiDatePicker/HiDatePickerMobile.js

@@ -6,7 +6,7 @@ import HiFormControl from '../HiForm/HiFormControl';
 import moment from 'moment-timezone';
 import styles from './stylesheet';
 import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiInput from '../HiForm/HiInput';
 
 class HiDatePickerMobile extends React.Component {

package/es/HiDatePicker/HiDateRangePicker.js

@@ -8,7 +8,7 @@ import MomentLocaleUtils from 'react-day-picker/moment';
 import HiLocaleUtils from './hiLocaleUtils';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Caption from './Caption';
 import Overlay from './Overlays/Overlay';
 import TimePickerOverlay from './Overlays/TimePickerOverlay';

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import moment from 'moment-timezone';
 import { findDOMNode } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiSelectField from '../HiSelect/HiSelectField';
 import HiDateRangePicker from './HiDateRangePicker';
 import HiFormControl from '../HiForm/HiFormControl';
@@ -163,7 +163,9 @@ export const styles = () => ({
     width: 'calc(100% + 8px)',
     marginTop: 0
   },
-  smSelect: {},
+  smSelect: {
+    padding: 4
+  },
   smRangePicker: {}
 });
 

package/es/HiDatePicker/ListPicker.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars';
 import MenuList from '@material-ui/core/MenuList';
 import MenuItem from '@material-ui/core/MenuItem';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   itemRoot: {
     '&:hover': {

package/es/HiDatePicker/NavBar.js

@@ -5,7 +5,7 @@ import IconButton from '@material-ui/core/IconButton';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import AccessTime from '@material-ui/icons/AccessTime';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   root: {
     width: '100%',

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Paper from '@material-ui/core/Paper';
-import withStyles from '../../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   paper: {
     width: '100%',

package/es/HiDatePicker/Overlays/CustomOverlayLayoutWithoutFooter.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Paper from '@material-ui/core/Paper';
-import withStyles from '../../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   paper: {
     width: '100%',

package/es/HiDatePicker/Overlays/Overlay.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Paper from '@material-ui/core/Paper';
-import withStyles from '../../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = () => ({
   paper: {
     width: '100%',

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -7,7 +7,7 @@ import IconButton from '@material-ui/core/IconButton';
 import CalendarIcon from 'mdi-material-ui/Calendar';
 import CustomOverlayLayout from './CustomOverlayLayout';
 import ListPicker from '../ListPicker';
-import withStyles from '../../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   paper: {
     position: 'absolute',

package/es/HiDotsStepper/HiDot.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiIcon from '../HiIcon';
 import HiIconButton from '../HiIconButton';
 export const styles = () => ({

package/es/HiDotsStepper/HiDotsStepper.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiDot from './HiDot';
 export const styles = () => ({
   dotStepper: {

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -8,7 +8,7 @@ import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import HiIcon from './../HiIcon';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 export const styles = theme => ({
   summaryContent: {

package/es/HiForm/HiFormControl.js

@@ -9,7 +9,7 @@ import Warning from '@material-ui/icons/Warning';
 import Info from '@material-ui/icons/Info';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiFormLabel from './HiFormLabel';
 import HiIconButton from '../HiIconButton';
 import { escapeHTML } from '../utils/helpers';

package/es/HiForm/HiFormLabel.js

@@ -6,7 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import InputLabel from '@material-ui/core/InputLabel';
 import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   root: _objectSpread({}, theme.typography.h4, {
     fontWeight: theme.typography.fontWeightRegular,
@@ -57,7 +57,7 @@ class HiFormLabel extends React.PureComponent {
       className: className,
       focused: focused,
       required: false,
-      FormLabelClasses: {
+      classes: {
         root: classes.root,
         error: classes.error,
         focused: classes.focused

package/es/HiForm/HiInput.js

@@ -6,7 +6,7 @@ import keycode from 'keycode/index';
 import Input from '@material-ui/core/Input';
 import HiIcon from '../HiIcon';
 import HiIconButton from '../HiIconButton';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   root: _objectSpread({
     position: 'relative'

package/es/HiForm/HiPasswordField.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiTextField from './HiTextField';
 export const styles = () => ({
   inputPassword: {

package/es/HiForm/HiSlider.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiFormControl from './HiFormControl';
 import PropTypes from 'prop-types';
 import HiIcon from '../HiIcon/HiIcon';

package/es/HiForm/HiUpload.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode/index';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiUploadInput from './HiUploadInput';
 import HiIcon from '../HiIcon';
 export const styles = theme => ({

package/es/HiForm/HiUploadInput.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiIconButton from '../HiIconButton';
 import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
 import Delete from '@material-ui/icons/Delete';
@@ -105,7 +105,7 @@ export const styles = theme => ({
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
+    padding: `${theme.spacing(2) - 2}px 0 ${theme.spacing(2) - 1}px`,
     height: 39,
     display: 'inline-flex',
     width: '100%',

package/es/HiIcon/HiIcon.js

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '@material-ui/core/Icon';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { camelize, capitalize } from '../utils/helpers';
 import * as hiSvgIcons from '../hi-svg-icons';
 import * as mdi from 'mdi-material-ui';

package/es/HiLoader/HiLoader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import PropagateLoader from 'react-spinners/PropagateLoader';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 
 function HiLoader(props) {
   const {

package/es/HiPin/HiPin.js

@@ -50,7 +50,7 @@ export const styles = theme => ({
 /**
  * HiPins
  *
- * Tiny raised button used to display subsidiary datas like item count, (...), and throw an onClick event.
+ * Tiny contained button used to display subsidiary datas like item count, (...), and throw an onClick event.
  * Used in:
  * - CellStatus to display operations count and to deploy operation rows on click.
  *

package/es/HiSelect/HiNestedSelect.js

@@ -6,7 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import HiSelect from './HiSelect';
 import HiIcon from '../HiIcon';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { foldAccents } from '../utils/helpers';
 /**
  * Return array of final item id in nested list (via props chlidren)

package/es/HiSelect/HiSelect.js

@@ -10,7 +10,7 @@ import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
 import HiSelectInput from './HiSelectInput';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { foldAccents } from '../utils/helpers';
 import HiIcon from '../HiIcon';
 import keycode from 'keycode';

package/es/HiSelect/HiSelectContent.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Scrollbars from 'react-custom-scrollbars';
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import keycode from 'keycode';
 export const styles = theme => ({

package/es/HiSelect/HiSelectInput.js

@@ -6,7 +6,7 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Icon from '@material-ui/core/Icon';
 import HiIcon from '../HiIcon';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import keycode from 'keycode';
 import { isMobile } from 'react-device-detect';
 export const styles = theme => ({

package/es/HiSelect/HiSelectMobile.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   root: {
     position: 'absolute',

package/es/HiSelectableList/HiSelectableList.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiSelectableListItem from './HiSelectableListItem';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import keycode from 'keycode';

package/es/HiSelectableList/HiSelectableListHierarchic.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import HiSelectableListItem from './HiSelectableListItem';
 export const styles = () => ({
   root: {}

package/es/HiSelectableList/HiSelectableListItem.js

@@ -9,7 +9,7 @@ import HiIcon from '../HiIcon';
 import HiCheckbox from '../HiCheckbox';
 import HiColoredLabel from '../HiColoredLabel';
 import HiLoader from '../HiLoader';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { escapeHTML } from '../utils/helpers';
 import pure from 'recompose/pure';
 import keycode from 'keycode';

package/es/HiSwitch/HiSwitch.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import SwitchBase from '@material-ui/core/internal/SwitchBase';
 import Check from '@material-ui/icons/Check';
 import { capitalize } from '../utils/helpers';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   root: {
     display: 'inline-flex',

package/es/HiSwitch/HiSwitchState.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import HiButton from '../HiButton';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import { capitalize } from '../utils/helpers';
 export const styles = theme => ({
   root: {

package/es/HiTable/HiTable.js

@@ -1,7 +1,7 @@
 // @inheritedComponent Table
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import HiTableHeader from './HiTableHeader';
 import HiTableBody from './HiTableBody';

package/es/HiTable/HiTableHeader.js

@@ -1,7 +1,7 @@
 // @inheritedComponent TableHeader
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';

package/es/HiTable/HiTableRow.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
 import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import TableRow from '@material-ui/core/TableRow';
 import HiCellBuilder from './HiCellBuilder';
 import * as cst from './constants';

package/es/styles/createMixins.js

@@ -3,12 +3,12 @@ export default function createMixins(breakpoints, spacing, mixins) {
   return _objectSpread({
     gutters: (styles = {}) => {
       return _objectSpread({
-        paddingLeft: spacing.unit * 2,
-        paddingRight: spacing.unit * 2
+        paddingLeft: spacing(4),
+        paddingRight: spacing(4)
       }, styles, {
         [breakpoints.up('sm')]: _objectSpread({
-          paddingLeft: spacing.unit * 3,
-          paddingRight: spacing.unit * 3
+          paddingLeft: spacing(6),
+          paddingRight: spacing(6)
         }, styles[breakpoints.up('sm')])
       });
     },

package/es/styles/spacing.js

@@ -1,6 +1,3 @@
-const spacing = {
-  // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
-  // https://material.io/design/layout/understanding-layout.html#pixel-density
-  unit: 8
-};
+const spacing = (n = 1) => n * 4;
+
 export default spacing;

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.2.0-RC2
+/** @license HiPay-Material-UI v2.2.0-beta-core
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.2.0-RC2
+/** @license HiPay-Material-UI v2.2.0-beta-core
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.2.0-RC2",
+  "version": "2.2.0-beta-core",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@babel/runtime": "7.0.0",
-    "@material-ui/core": "3.0.3",
-    "@material-ui/icons": "^3.0.1",
+    "@material-ui/core": "4.4.3",
+    "@material-ui/icons": "4.4.3",
     "@types/jss": "^9.5.3",
     "@types/react-transition-group": "^2.0.8",
     "brcast": "^3.0.1",
@@ -39,7 +39,6 @@
     "dom-helpers": "^3.2.1",
     "hoist-non-react-statics": "^2.5.0",
     "is-plain-object": "^2.0.4",
-    "jss": "^9.8.7",
     "jss-camel-case": "^6.0.0",
     "jss-default-unit": "^8.0.2",
     "jss-global": "^3.0.0",
@@ -48,7 +47,7 @@
     "jss-vendor-prefixer": "^8.0.1",
     "keycode": "^2.1.9",
     "leaflet": "^1.5.1",
-    "mdi-material-ui": "^5.4.0",
+    "mdi-material-ui": "^6.7.0",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.23",
     "normalize-scroll-left": "^0.1.2",

package/styles/createMixins.js

@@ -18,11 +18,11 @@ function createMixins(breakpoints, spacing, mixins) {
     gutters: function gutters() {
       var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return (0, _extends3.default)({
-        paddingLeft: spacing.unit * 2,
-        paddingRight: spacing.unit * 2
+        paddingLeft: spacing(4),
+        paddingRight: spacing(4)
       }, styles, (0, _defineProperty2.default)({}, breakpoints.up('sm'), (0, _extends3.default)({
-        paddingLeft: spacing.unit * 3,
-        paddingRight: spacing.unit * 3
+        paddingLeft: spacing(6),
+        paddingRight: spacing(6)
       }, styles[breakpoints.up('sm')])));
     },
     toolbar: (_toolbar = {