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

package/HiSelect/HiSelectContent.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -33,7 +33,7 @@ var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
 
 var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
 
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var _helpers = require("../utils/helpers");
 
@@ -179,7 +179,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -209,13 +209,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
+          })] : []), (0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -251,22 +251,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = (0, _toConsumableArray2.default)(loading ? [{
+      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return item.label && _this.props.filterFunc(item, search);
-      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []).concat((0, _toConsumableArray2.default)(options))));
+      })] : []), (0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList
       };
@@ -286,10 +286,10 @@ function (_React$PureComponent) {
       searchValue: props.searchValue ? undefined : '',
       suggestions: props.options
     };
-    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleSearch = _this.handleSearch.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSearchReset = _this.handleSearchReset.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -521,7 +521,7 @@ HiSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectContent'
 })(HiSelectContent);

package/HiSelect/HiSelectInput.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -37,7 +37,7 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
@@ -234,11 +234,11 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
+    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -416,7 +416,7 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node])
 } : {};
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectInput'
 })(HiSelectInput);

package/HiSelect/HiSelectMobile.js

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

package/HiSelectableList/HiSelectableList.js

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

package/HiSelectableList/HiSelectableListItem.js

@@ -17,10 +17,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -41,7 +41,7 @@ var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
 
 var _HiLoader = _interopRequireDefault(require("../HiLoader"));
 
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var _helpers = require("../utils/helpers");
 
@@ -243,8 +243,8 @@ function (_React$PureComponent) {
     _this.state = {
       hover: false
     };
-    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
+    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -558,7 +558,7 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   type: _propTypes.default.string
 } : {};
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(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 _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var styles = function styles(theme) {
   return {
@@ -229,7 +229,7 @@ HiSwitch.defaultProps = {
   color: 'inherit'
 };
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(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 _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var _helpers = require("../utils/helpers");
 
@@ -211,7 +211,7 @@ HiSwitchState.defaultProps = {
   disabled: false
 };
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiSwitchState'
 })(HiSwitchState);

package/HiTable/HiTable.js

@@ -15,15 +15,15 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
 
@@ -57,7 +57,7 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -147,7 +147,7 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
   sortable: _propTypes.default.bool
 } : {};
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(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 _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
 
@@ -170,7 +170,7 @@ HiTableHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   sortable: _propTypes.default.bool
 } : {};
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiTableHeader'
 })(HiTableHeader);

package/HiTable/HiTableRow.js

@@ -19,10 +19,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -31,7 +31,7 @@ var _keycode = _interopRequireDefault(require("keycode"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+var _styles = require("@material-ui/core/styles");
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
 
@@ -74,7 +74,7 @@ function (_React$PureComponent) {
 
     (0, _classCallCheck2.default)(this, HiTableRow);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTableRow).call(this, props));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
@@ -166,7 +166,7 @@ HiTableRow.propTypes = process.env.NODE_ENV !== "production" ? {
   rowdata: _propTypes.default.object.isRequired
 } : {};
 
-var _default = (0, _withStyles.default)(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiTableRow'
 })(HiTableRow);

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 '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = theme => ({
   // Usefull for style overriding
   root: {},

package/es/HiBreadcrumb/HiStepConnector.js

@@ -11,14 +11,14 @@ export const styles = theme => ({
     flex: '1 1 auto',
     marginLeft: 13,
     // half icon
-    padding: `0 0 ${theme.spacing.unit}px`
+    padding: `0 0 ${theme.spacing(2)}px`
   },
   line: {
     display: 'block',
     borderColor: theme.palette.grey[600],
     borderLeftStyle: 'solid',
     borderLeftWidth: 2,
-    minHeight: theme.spacing.unit * 3,
+    minHeight: theme.spacing(6),
     height: 40
   },
   greenLine: {

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 { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
-export const styles = theme => ({
+import { makeStyles } from '@material-ui/core/styles';
+const useStyles = makeStyles(theme => ({
   root: {
-    '&$raisedDisabled': {
+    '&$containedDisabled': {
       color: theme.palette.neutral.contrastText,
       backgroundColor: theme.palette.neutral.main
     }
   },
-  raisedDisabled: {},
-  flatNeutral: {
+  containedDisabled: {},
+  textNeutral: {
     color: theme.palette.neutral.main,
     '&$disabled': {
       color: theme.palette.action.disabled
     }
   },
-  flatPositive: {
+  textPositive: {
     color: theme.palette.positive.main,
     '&:hover': {
       backgroundColor: fade(theme.palette.positive.main, theme.palette.action.hoverOpacity),
@@ -34,7 +34,7 @@ export const styles = theme => ({
       color: theme.palette.action.disabled
     }
   },
-  flatNegative: {
+  textNegative: {
     color: theme.palette.negative.main,
     '&:hover': {
       backgroundColor: fade(theme.palette.negative.main, theme.palette.action.hoverOpacity),
@@ -47,7 +47,7 @@ export const styles = theme => ({
       color: theme.palette.action.disabled
     }
   },
-  flatMiddle: {
+  textMiddle: {
     color: theme.palette.middle.main,
     '&:hover': {
       backgroundColor: fade(theme.palette.middle.main, theme.palette.action.hoverOpacity),
@@ -61,7 +61,7 @@ export const styles = theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
+  /* Styles applied to the root element if `variant="[contained ]"` and `color="positive"`. */
   containedPrimary: {
     '&$disabled': {
       color: theme.palette.neutral.contrastText,
@@ -84,7 +84,7 @@ export const styles = theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="negative"`. */
+  /* Styles applied to the root element if `variant="[contained]"` and `color="negative"`. */
   containedNegative: {
     color: theme.palette.negative.contrastText,
     backgroundColor: theme.palette.negative.main,
@@ -101,7 +101,7 @@ export const styles = theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="middle"`. */
+  /* Styles applied to the root element if `variant="[contained]"` and `color="middle"`. */
   containedMiddle: {
     color: theme.palette.middle.contrastText,
     backgroundColor: theme.palette.middle.main,
@@ -118,7 +118,7 @@ export const styles = theme => ({
     }
   },
 
-  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="neutral"`. */
+  /* Styles applied to the root element if `variant="[contained]"` and `color="neutral"`. */
   containedNeutral: {
     color: theme.palette.neutral.contrastText,
     backgroundColor: theme.palette.neutral.main,
@@ -167,62 +167,49 @@ export const styles = 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
    */
@@ -236,23 +223,10 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
+  variant: PropTypes.oneOf(['text', 'outlined', 'contained'])
 } : {};
 HiButton.defaultProps = {
   color: 'neutral',
   variant: 'text'
 };
-
-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);
+export default HiButton;

package/es/HiCell/CellAddress.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';
 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 '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 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 '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 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 '../styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 export const styles = () => ({
   img: {
     height: 'auto',