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

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 { makeStyles } from '@material-ui/core/styles';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import Button from '@material-ui/core/Button';
-export const styles = theme => ({
+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',

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

package/es/HiColoredLabel/HiColoredLabel.js

@@ -4,9 +4,9 @@ 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';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 export const styles = theme => ({
   root: {
     display: 'inline-block',

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';
@@ -152,7 +152,6 @@ export function buildDateRangeOptionByKey(key, t, format, timezoneName) {
 export const styles = () => ({
   root: {
     maxWidth: 500,
-    marginLeft: -4,
     alignItems: 'flex-start'
   },
   dateSelect: {
@@ -163,7 +162,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/HiDatePicker/stylesheet.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
-import { fade } from '../styles/colorManipulator';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 export default (theme => ({
   root: {
     position: 'relative',

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';