@hipay/hipay-material-ui 2.3.2 → 2.3.4

package/HiButton/HiButton.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,7 +11,9 @@ exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
@@ -35,12 +39,22 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
             }
           }
         };
+      } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.disabled ? theme.palette.action.disabled : props.color,
+          "&:hover": {
+            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity),
+            "@media (hover: none)": {
+              backgroundColor: "transparent"
+            }
+          }
+        };
       }
 
       return null;
     },
     contained: function contained(props) {
-      if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
+      if (props.variant === "contained" && ['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
         return {
           color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].contrastText,
           backgroundColor: props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main,
@@ -52,18 +66,67 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
             }
           }
         };
-      }
+      } else if (props.variant === "contained" && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.disabled ? theme.palette.neutral.contrastText : theme.palette.getContrastText(props.color),
+          backgroundColor: props.disabled ? theme.palette.neutral.main : props.color,
+          "&:hover": {
+            backgroundColor: (0, _colorManipulator.darken)(props.color, theme.palette.tonalOffset * 1.5),
+            "@media (hover: none)": {
+              backgroundColor: props.color
+            }
+          }
+        };
+      } else if (props.variant === "containedLight" && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.disabled ? theme.palette.neutral.contrastText : props.color,
+          backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity),
+          "&:hover": {
+            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity + 0.1),
+            "@media (hover: none)": {
+              backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity)
+            }
+          }
+        };
+      } else if (props.variant === "containedLight" // && is a palette color
+      ) {
+          return {
+            color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].main,
+            backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity),
+            '&:hover': {
+              backgroundColor: (0, _colorManipulator.fade)(theme.palette[props.color].main, theme.palette.action.hoverOpacity + 0.1),
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity)
+              }
+            }
+          };
+        }
 
       return null;
     },
     outlined: function outlined(props) {
-      return ['neutral', 'positive', 'middle', 'negative'].includes(props.color) && {
-        color: theme.palette[props.color].main,
-        border: "1px solid ".concat((0, _colorManipulator.fade)(theme.palette[props.color].main, 0.5)),
-        '&:hover': {
-          border: "1px solid ".concat(theme.palette[props.color].main)
-        }
-      };
+      if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
+        return {
+          color: theme.palette[props.color].main,
+          border: "1px solid ".concat((0, _colorManipulator.fade)(theme.palette[props.color].main, 0.5)),
+          '&:hover': {
+            border: "1px solid ".concat(theme.palette[props.color].main),
+            backgroundColor: (0, _colorManipulator.fade)(theme.palette[props.color].main, theme.palette.action.hoverOpacity)
+          }
+        };
+      } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.color,
+          border: "1px solid ".concat((0, _colorManipulator.fade)(props.color, 0.5)),
+          "&:hover": {
+            border: "1px solid ".concat(props.color),
+            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity)
+          }
+        };
+      }
+
+      return null;
     }
   };
 });
@@ -75,16 +138,48 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 exports.useStyles = useStyles;
 
 function HiButton(props) {
+  var disableElevation = props.disableElevation,
+      variant = props.variant,
+      color = props.color,
+      otherProps = (0, _objectWithoutProperties2.default)(props, ["disableElevation", "variant", "color"]);
   var classes = useStyles(props);
-  var color = ['neutral', 'positive', 'middle', 'negative'].includes(props.color) ? 'inherit' : props.color;
+  var style = (0, _react.useMemo)(function () {
+    var style = {};
+
+    if (disableElevation) {
+      style.boxShadow = "none";
+    }
+
+    return style;
+  }, [disableElevation]);
+
+  var _color = (0, _react.useMemo)(function () {
+    if (['neutral', 'positive', 'middle', 'negative'].includes(color) || /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color) // isHexColor
+    ) {
+        return "inherit";
+      }
+
+    return color;
+  }, [color]);
+
+  var _variant = (0, _react.useMemo)(function () {
+    if (variant === "containedLight") {
+      return "contained";
+    }
+
+    return variant;
+  }, [variant]);
+
   return _react.default.createElement(_Button.default, (0, _extends2.default)({
-    classes: classes
-  }, props, {
-    color: color
-  }));
+    style: style,
+    classes: classes,
+    color: _color,
+    variant: _variant
+  }, otherProps));
 }
 
 HiButton.defaultProps = {
+  disableElevation: false,
   variant: 'text',
   color: 'neutral'
 };

package/HiPaymentMeans/HiPaymentMeans.js

@@ -226,7 +226,10 @@ var styles = function styles(theme) {
       display: 'block',
       fontFamily: theme.typography.fontFamily,
       fontSize: 13,
-      color: '#FFFFFF'
+      color: '#FFFFFF',
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     },
     userNameCard: {
       position: 'absolute',
@@ -386,7 +389,8 @@ function (_React$Component) {
             },
             className: classes.wallet
           }, _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet),
+            title: username
           }, username), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
           }, imgComponent), _react.default.createElement("span", {
@@ -410,7 +414,8 @@ function (_React$Component) {
           }, formatNumber), cardNumber && _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
           }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
+            title: username
           }, username), _react.default.createElement("div", {
             className: classes.dateValid
           }, cardValidity), cardValidity && _react.default.createElement("div", {
@@ -446,9 +451,11 @@ function (_React$Component) {
           }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
           }, "Valid Thru"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate),
+            title: cardUser
           }, cardUser), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.businessName)
+            className: (0, _classnames.default)(classes.labelLarge, classes.businessName),
+            title: businessName
           }, businessName));
           break;
 
@@ -470,7 +477,8 @@ function (_React$Component) {
           }, "IBAN"), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.number, classes.ibanNumber)
           }, formatNumber), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
+            title: username
           }, username), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
           }, creditDebit));
@@ -514,7 +522,8 @@ function (_React$Component) {
           }, cardNumber), cardNumber && _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
           }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
+            title: username
           }, username), _react.default.createElement("div", {
             className: classes.dateValid
           }, cardValidity), cardValidity && _react.default.createElement("div", {

package/es/HiButton/HiButton.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,7 +11,9 @@ exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
@@ -35,12 +39,22 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
             }
           }
         };
+      } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.disabled ? theme.palette.action.disabled : props.color,
+          "&:hover": {
+            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity),
+            "@media (hover: none)": {
+              backgroundColor: "transparent"
+            }
+          }
+        };
       }
 
       return null;
     },
     contained: function contained(props) {
-      if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
+      if (props.variant === "contained" && ['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
         return {
           color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].contrastText,
           backgroundColor: props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main,
@@ -52,18 +66,67 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
             }
           }
         };
-      }
+      } else if (props.variant === "contained" && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.disabled ? theme.palette.neutral.contrastText : theme.palette.getContrastText(props.color),
+          backgroundColor: props.disabled ? theme.palette.neutral.main : props.color,
+          "&:hover": {
+            backgroundColor: (0, _colorManipulator.darken)(props.color, theme.palette.tonalOffset * 1.5),
+            "@media (hover: none)": {
+              backgroundColor: props.color
+            }
+          }
+        };
+      } else if (props.variant === "containedLight" && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.disabled ? theme.palette.neutral.contrastText : props.color,
+          backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity),
+          "&:hover": {
+            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity + 0.1),
+            "@media (hover: none)": {
+              backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : props.color, theme.palette.action.hoverOpacity)
+            }
+          }
+        };
+      } else if (props.variant === "containedLight" // && is a palette color
+      ) {
+          return {
+            color: props.disabled ? theme.palette.neutral.contrastText : theme.palette[props.color].main,
+            backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity),
+            '&:hover': {
+              backgroundColor: (0, _colorManipulator.fade)(theme.palette[props.color].main, theme.palette.action.hoverOpacity + 0.1),
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: (0, _colorManipulator.fade)(props.disabled ? theme.palette.neutral.main : theme.palette[props.color].main, theme.palette.action.hoverOpacity)
+              }
+            }
+          };
+        }
 
       return null;
     },
     outlined: function outlined(props) {
-      return ['neutral', 'positive', 'middle', 'negative'].includes(props.color) && {
-        color: theme.palette[props.color].main,
-        border: "1px solid ".concat((0, _colorManipulator.fade)(theme.palette[props.color].main, 0.5)),
-        '&:hover': {
-          border: "1px solid ".concat(theme.palette[props.color].main)
-        }
-      };
+      if (['neutral', 'positive', 'middle', 'negative'].includes(props.color)) {
+        return {
+          color: theme.palette[props.color].main,
+          border: "1px solid ".concat((0, _colorManipulator.fade)(theme.palette[props.color].main, 0.5)),
+          '&:hover': {
+            border: "1px solid ".concat(theme.palette[props.color].main),
+            backgroundColor: (0, _colorManipulator.fade)(theme.palette[props.color].main, theme.palette.action.hoverOpacity)
+          }
+        };
+      } else if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(props.color)) {
+        return {
+          color: props.color,
+          border: "1px solid ".concat((0, _colorManipulator.fade)(props.color, 0.5)),
+          "&:hover": {
+            border: "1px solid ".concat(props.color),
+            backgroundColor: (0, _colorManipulator.fade)(props.color, theme.palette.action.hoverOpacity)
+          }
+        };
+      }
+
+      return null;
     }
   };
 });
@@ -75,16 +138,48 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 exports.useStyles = useStyles;
 
 function HiButton(props) {
+  var disableElevation = props.disableElevation,
+      variant = props.variant,
+      color = props.color,
+      otherProps = (0, _objectWithoutProperties2.default)(props, ["disableElevation", "variant", "color"]);
   var classes = useStyles(props);
-  var color = ['neutral', 'positive', 'middle', 'negative'].includes(props.color) ? 'inherit' : props.color;
+  var style = (0, _react.useMemo)(function () {
+    var style = {};
+
+    if (disableElevation) {
+      style.boxShadow = "none";
+    }
+
+    return style;
+  }, [disableElevation]);
+
+  var _color = (0, _react.useMemo)(function () {
+    if (['neutral', 'positive', 'middle', 'negative'].includes(color) || /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color) // isHexColor
+    ) {
+        return "inherit";
+      }
+
+    return color;
+  }, [color]);
+
+  var _variant = (0, _react.useMemo)(function () {
+    if (variant === "containedLight") {
+      return "contained";
+    }
+
+    return variant;
+  }, [variant]);
+
   return _react.default.createElement(_Button.default, (0, _extends2.default)({
-    classes: classes
-  }, props, {
-    color: color
-  }));
+    style: style,
+    classes: classes,
+    color: _color,
+    variant: _variant
+  }, otherProps));
 }
 
 HiButton.defaultProps = {
+  disableElevation: false,
   variant: 'text',
   color: 'neutral'
 };

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -226,7 +226,10 @@ var styles = function styles(theme) {
       display: 'block',
       fontFamily: theme.typography.fontFamily,
       fontSize: 13,
-      color: '#FFFFFF'
+      color: '#FFFFFF',
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis"
     },
     userNameCard: {
       position: 'absolute',
@@ -386,7 +389,8 @@ function (_React$Component) {
             },
             className: classes.wallet
           }, _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet),
+            title: username
           }, username), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
           }, imgComponent), _react.default.createElement("span", {
@@ -410,7 +414,8 @@ function (_React$Component) {
           }, formatNumber), cardNumber && _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
           }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
+            title: username
           }, username), _react.default.createElement("div", {
             className: classes.dateValid
           }, cardValidity), cardValidity && _react.default.createElement("div", {
@@ -446,9 +451,11 @@ function (_React$Component) {
           }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
           }, "Valid Thru"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate),
+            title: cardUser
           }, cardUser), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.businessName)
+            className: (0, _classnames.default)(classes.labelLarge, classes.businessName),
+            title: businessName
           }, businessName));
           break;
 
@@ -470,7 +477,8 @@ function (_React$Component) {
           }, "IBAN"), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.number, classes.ibanNumber)
           }, formatNumber), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
+            title: username
           }, username), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
           }, creditDebit));
@@ -514,7 +522,8 @@ function (_React$Component) {
           }, cardNumber), cardNumber && _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
           }, "Card number"), _react.default.createElement("div", {
-            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard)
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard),
+            title: username
           }, username), _react.default.createElement("div", {
             className: classes.dateValid
           }, cardValidity), cardValidity && _react.default.createElement("div", {

package/es/hi-svg-icons/HiAccount.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiAccount = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiActivity.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiActivity = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiAll.js

@@ -32,9 +32,10 @@ var _ref = _react.default.createElement("path", {
 var HiAll = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiBilling.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiBilling = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiBriefcaseRescue.js

@@ -22,9 +22,10 @@ var _index = require("@material-ui/core/styles/index");
 var HiBriefcaseRescue = function HiBriefcaseRescue(props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiCatalog.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiCatalog = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiCustomer.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiCustomer = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiDownload.js

@@ -17,11 +17,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 
+var _styles = require("@material-ui/core/styles");
+
 var HiDownload = function HiDownload(props) {
-  var color = props.color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+  var _props$color = props.color,
+      color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {
@@ -32,5 +36,9 @@ var HiDownload = function HiDownload(props) {
   })));
 };
 
-var _default = HiDownload;
+var _default = (0, _styles.withStyles)({}, {
+  hiComponent: true,
+  withTheme: true
+})(HiDownload);
+
 exports.default = _default;

package/es/hi-svg-icons/HiFinance.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiFinance = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiPermission.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiPermission = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiRoute.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiRoute = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiSettlement.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiSettlement = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiTransaction.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiTransaction = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiUser.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiUser = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/es/hi-svg-icons/HiWidget.js

@@ -32,9 +32,10 @@ var _ref = _react.default.createElement("path", {
 var HiWidget = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiAccount.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiAccount = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiActivity.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiActivity = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiAll.js

@@ -32,9 +32,10 @@ var _ref = _react.default.createElement("path", {
 var HiAll = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiBilling.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiBilling = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiBriefcaseRescue.js

@@ -22,9 +22,10 @@ var _index = require("@material-ui/core/styles/index");
 var HiBriefcaseRescue = function HiBriefcaseRescue(props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiCatalog.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiCatalog = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiCustomer.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiCustomer = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiDownload.js

@@ -17,11 +17,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 
+var _styles = require("@material-ui/core/styles");
+
 var HiDownload = function HiDownload(props) {
-  var color = props.color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+  var _props$color = props.color,
+      color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {
@@ -32,5 +36,9 @@ var HiDownload = function HiDownload(props) {
   })));
 };
 
-var _default = HiDownload;
+var _default = (0, _styles.withStyles)({}, {
+  hiComponent: true,
+  withTheme: true
+})(HiDownload);
+
 exports.default = _default;

package/hi-svg-icons/HiFinance.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiFinance = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiPermission.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiPermission = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiRoute.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiRoute = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiSettlement.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiSettlement = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiTransaction.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiTransaction = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiUser.js

@@ -27,9 +27,10 @@ var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
 var HiUser = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/hi-svg-icons/HiWidget.js

@@ -32,9 +32,10 @@ var _ref = _react.default.createElement("path", {
 var HiWidget = (0, _pure.default)(function (props) {
   var _props$color = props.color,
       color = _props$color === void 0 ? props.color || props.theme.palette.neutral.main : _props$color,
-      other = (0, _objectWithoutProperties2.default)(props, ["color"]);
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
-    style: (0, _objectSpread2.default)({}, props.style, {
+    style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24
     })
   }, other), _react.default.createElement("svg", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
   "private": false,
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",
@@ -13,13 +13,14 @@
   },
   "homepage": "http://materialui.hipay.dev.local/",
   "peerDependencies": {
-    "moment-timezone": "0.5.27"
+    "@material-ui/core": "4.4.3",
+    "moment-timezone": "0.5.27",
+    "react": "16.9.0",
+    "react-dom": "16.9.0"
   },
   "dependencies": {
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
+    "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/runtime": "7.6.3",
-    "@material-ui/core": "4.4.3",
     "@material-ui/icons": "4.4.3",
     "brcast": "3.0.1",
     "classnames": "2.2.6",
@@ -66,4 +67,4 @@
   },
   "main": "./index.js",
   "module": "./esm/index.js"
-}
+}