@hipay/hipay-material-ui 2.2.0-beta-core4 → 2.2.0

package/HiSelect/HiSelectMobile.js

@@ -25,7 +25,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var styles = function styles(theme) {
   return {
@@ -193,6 +193,6 @@ HiSelectMobile.propTypes = process.env.NODE_ENV !== "production" ? {
   width: _propTypes.default.number
 } : {};
 
-var _default = (0, _styles.withStyles)(styles)(HiSelectMobile);
+var _default = (0, _withStyles.default)(styles)(HiSelectMobile);
 
 exports.default = _default;

package/HiSelect/HiSuggestSelect.js

@@ -39,7 +39,7 @@ var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
 
 var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("../styles");
 
 var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 

package/HiSelectableList/HiSelectableList.js

@@ -31,7 +31,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
 
@@ -381,7 +381,7 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectableList',
   index: 51

package/HiSelectableList/HiSelectableListHierarchic.js

@@ -27,7 +27,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
 
@@ -225,7 +225,7 @@ HiSelectableListHierarchic.propTypes = process.env.NODE_ENV !== "production" ? {
   selectedItemIdList: _propTypes.default.array
 } : {};
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectableListHierarchic'
 })(HiSelectableListHierarchic);

package/HiSelectableList/HiSelectableListItem.js

@@ -41,7 +41,7 @@ var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
 
 var _HiLoader = _interopRequireDefault(require("../HiLoader"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _helpers = require("../utils/helpers");
 
@@ -558,7 +558,7 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.string
 } : {};
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectableListItem'
 })(HiSelectableListItem);

package/HiSwitch/HiSwitch.js

@@ -25,7 +25,7 @@ var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
 var _helpers = require("../utils/helpers");
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var styles = function styles(theme) {
   return {
@@ -229,7 +229,7 @@ HiSwitch.defaultProps = {
   color: 'inherit'
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSwitch'
 })(HiSwitch);

package/HiSwitch/HiSwitchState.js

@@ -17,7 +17,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _HiButton = _interopRequireDefault(require("../HiButton"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _helpers = require("../utils/helpers");
 
@@ -211,7 +211,7 @@ HiSwitchState.defaultProps = {
   disabled: false
 };
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiSwitchState'
 })(HiSwitchState);

package/HiTable/HiTable.js

@@ -23,7 +23,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
 
@@ -147,7 +147,7 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
   sortable: _propTypes.default.bool
 } : {};
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiTable'
 })(HiTable);

package/HiTable/HiTableHeader.js

@@ -23,7 +23,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
 
@@ -116,7 +116,7 @@ function (_React$PureComponent) {
           key: colId,
           className: classes.cell,
           sortDirection: orderBy === colId ? order : false,
-          align: cst.ALIGN_RIGHT_TYPES.includes(type) || align === 'right' ? 'right' : 'inherit',
+          numeric: cst.ALIGN_RIGHT_TYPES.includes(type) || align === 'right',
           title: headerTooltip
         }, sortable ? _react.default.createElement(_TableSortLabel.default, {
           active: orderBy === colId,
@@ -170,7 +170,7 @@ HiTableHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   sortable: _propTypes.default.bool
 } : {};
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiTableHeader'
 })(HiTableHeader);

package/HiTable/HiTableRow.js

@@ -31,7 +31,7 @@ var _keycode = _interopRequireDefault(require("keycode"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _styles = require("@material-ui/core/styles");
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
 
@@ -57,8 +57,7 @@ var styles = function styles(theme) {
       border: 'none',
       padding: '0px 13px',
       minHeight: '32px',
-      maxHeight: '40px',
-      fontWeight: theme.typography.fontWeightRegular
+      maxHeight: '40px'
     }
   };
 };
@@ -167,7 +166,7 @@ HiTableRow.propTypes = process.env.NODE_ENV !== "production" ? {
   rowdata: _propTypes.default.object.isRequired
 } : {};
 
-var _default = (0, _styles.withStyles)(styles, {
+var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
   name: 'HmuiHiTableRow'
 })(HiTableRow);

package/es/HiAlertModal/HiAlertModal.js

@@ -8,7 +8,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, withTheme } from '../styles';
 import HiButton from '../HiButton';
 import HiIcon from '../HiIcon';
 import { escapeHTML } from '../utils/helpers';

package/es/HiAppBar/HiAppBar.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 import AppBar from '@material-ui/core/AppBar';
 import Collapse from '@material-ui/core/Collapse';
 import Toolbar from '@material-ui/core/Toolbar';

package/es/HiBadge/HiBadge.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Badge from '@material-ui/core/Badge';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 export const styles = theme => ({
   // Usefull for style overriding
   root: {},

package/es/HiBreadcrumb/HiStep.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 import classNames from 'classnames';
 import HiStepConnector from './HiStepConnector';
 import HiStepContent from './HiStepContent';

package/es/HiBreadcrumb/HiStepConnector.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 import HiStepContent from './HiStepContent';
 export const styles = theme => ({
   root: {
@@ -11,14 +11,14 @@ export const styles = theme => ({
     flex: '1 1 auto',
     marginLeft: 13,
     // half icon
-    padding: `0 0 ${theme.spacing(2)}px`
+    padding: `0 0 ${theme.spacing.unit}px`
   },
   line: {
     display: 'block',
     borderColor: theme.palette.grey[600],
     borderLeftStyle: 'solid',
     borderLeftWidth: 2,
-    minHeight: theme.spacing(6),
+    minHeight: theme.spacing.unit * 3,
     height: 40
   },
   greenLine: {

package/es/HiBreadcrumb/HiStepContent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 export const styles = () => ({
   root: {
     display: 'flex',

package/es/HiBreadcrumb/HiStepIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '../styles';
 export const styles = theme => ({
   circle: {
     borderRadius: '50%',

package/es/HiBreadcrumb/HiStepLabel.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 '@material-ui/core/styles';
+import { withStyles } from '../styles';
 import HiStepIcon from './HiStepIcon';
 import HiPin from '../HiPin';
 export const styles = theme => ({

package/es/HiBreadcrumb/HiStepper.js

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

package/es/HiButton/HiButton.js

@@ -4,24 +4,24 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from '../styles';
+import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
-const useStyles = makeStyles(theme => ({
+export const styles = theme => ({
   root: {
-    '&$containedDisabled': {
+    '&$raisedDisabled': {
       color: theme.palette.neutral.contrastText,
       backgroundColor: theme.palette.neutral.main
     }
   },
-  containedDisabled: {},
-  textNeutral: {
+  raisedDisabled: {},
+  flatNeutral: {
     color: theme.palette.neutral.main,
     '&$disabled': {
       color: theme.palette.action.disabled
     }
   },
-  textPositive: {
+  flatPositive: {
     color: theme.palette.positive.main,
     '&:hover': {
       backgroundColor: fade(theme.palette.positive.main, theme.palette.action.hoverOpacity),
@@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({
       color: theme.palette.action.disabled
     }
   },
-  textNegative: {
+  flatNegative: {
     color: theme.palette.negative.main,
     '&:hover': {
       backgroundColor: fade(theme.palette.negative.main, theme.palette.action.hoverOpacity),
@@ -47,7 +47,7 @@ const useStyles = makeStyles(theme => ({
       color: theme.palette.action.disabled
     }
   },
-  textMiddle: {
+  flatMiddle: {
     color: theme.palette.middle.main,
     '&:hover': {
       backgroundColor: fade(theme.palette.middle.main, theme.palette.action.hoverOpacity),
@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained ]"` and `color="positive"`. */
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
   containedPrimary: {
     '&$disabled': {
       color: theme.palette.neutral.contrastText,
@@ -84,7 +84,7 @@ const useStyles = makeStyles(theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained]"` and `color="negative"`. */
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="negative"`. */
   containedNegative: {
     color: theme.palette.negative.contrastText,
     backgroundColor: theme.palette.negative.main,
@@ -101,7 +101,7 @@ const useStyles = makeStyles(theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained]"` and `color="middle"`. */
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="middle"`. */
   containedMiddle: {
     color: theme.palette.middle.contrastText,
     backgroundColor: theme.palette.middle.main,
@@ -118,7 +118,7 @@ const useStyles = makeStyles(theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained]"` and `color="neutral"`. */
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="neutral"`. */
   containedNeutral: {
     color: theme.palette.neutral.contrastText,
     backgroundColor: theme.palette.neutral.main,
@@ -167,49 +167,62 @@ const useStyles = makeStyles(theme => ({
     }
   },
   disabled: {}
-}));
-const HiButton = React.forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    color,
-    variant,
-    disabled
-  } = props,
-        other = _objectWithoutProperties(props, ["children", "className", "color", "variant", "disabled"]);
-
-  const classes = useStyles();
-  const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
-  const contained = variant === 'contained';
-  const buttonClassNames = classNames(classes.root, {
-    [classes.containedDisabled]: variant === 'contained' && disabled,
-    [classes.textPositive]: (variant === 'text' || variant === 'outlined') && color === 'positive',
-    [classes.textNegative]: (variant === 'text' || variant === 'outlined') && color === 'negative',
-    [classes.textMiddle]: (variant === 'text' || variant === 'outlined') && color === 'middle',
-    [classes.textNeutral]: (variant === 'text' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
-    [classes.containedPrimary]: contained && color === 'primary',
-    [classes.containedPositive]: contained && color === 'positive',
-    [classes.containedNegative]: contained && color === 'negative',
-    [classes.containedMiddle]: contained && color === 'middle',
-    [classes.containedNeutral]: contained && (color === 'default' || color === 'neutral'),
-    [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
-    [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
-    [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
-    [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
-    [classes.disabled]: disabled
-  });
-  return React.createElement(Button, _extends({
-    className: className,
-    classes: {
-      root: buttonClassNames
-    },
-    color: hcolor,
-    variant: variant,
-    disabled: disabled,
-    buttonRef: ref
-  }, other), children);
 });
+
+class HiButton extends React.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      classes,
+      className,
+      color,
+      variant,
+      disabled,
+      buttonRef
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["children", "classes", "className", "color", "variant", "disabled", "buttonRef"]);
+
+    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+    const fab = variant === 'fab' || variant === 'extendedFab';
+    const contained = variant === 'contained' || variant === 'raised';
+    const buttonClassNames = classNames(classes.root, {
+      [classes.raisedDisabled]: variant === 'raised' && disabled,
+      [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
+      [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
+      [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
+      [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
+      [classes.containedPrimary]: (contained || fab) && color === 'primary',
+      [classes.containedPositive]: (contained || fab) && color === 'positive',
+      [classes.containedNegative]: (contained || fab) && color === 'negative',
+      [classes.containedMiddle]: (contained || fab) && color === 'middle',
+      [classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
+      [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
+      [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
+      [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
+      [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
+      [classes.disabled]: disabled
+    });
+    return React.createElement(Button, _extends({
+      className: className,
+      classes: {
+        root: buttonClassNames
+      },
+      color: hcolor,
+      variant: variant,
+      disabled: disabled,
+      buttonRef: buttonRef
+    }, other), children);
+  }
+
+}
+
 HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des classes
+   */
+  classes: PropTypes.object,
+
   /**
    * Surcharge des classes
    */
@@ -223,10 +236,23 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['text', 'outlined', 'contained'])
+  variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
 } : {};
 HiButton.defaultProps = {
   color: 'neutral',
   variant: 'text'
 };
-export default HiButton;
+
+function forwardRef(props, ref) {
+  return React.createElement(HiButton, _extends({}, props, {
+    buttonRef: ref
+  }));
+}
+
+const name = HiButton.displayName || HiButton.name;
+forwardRef.displayName = name;
+const HiButtonForwardRef = React.forwardRef(forwardRef);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiButton'
+})(HiButtonForwardRef);

package/es/HiCell/CellAddress.js

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

package/es/HiCell/CellDate.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import 'moment/locale/fr';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 export const styles = {
   rightEllipsisSpan: {
     display: 'inline-block',

package/es/HiCell/CellIcon.js

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

package/es/HiCell/CellImage.js

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

package/es/HiCell/CellNumeric.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 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 '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 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 '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 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 '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 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 '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 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 '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 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: "contained"
+      variant: "raised"
     }, 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 '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 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 '@material-ui/core/styles';
+import withStyles from '../styles/withStyles';
 export const styles = theme => ({
   root: _objectSpread({}, theme.typography.b3, {
     display: 'inline-flex',