@hipay/hipay-material-ui 2.3.3 → 2.3.5

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/HiExpansionPanel/HiExpansionPanel.js

@@ -1,31 +1,25 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
 
@@ -39,7 +33,7 @@ var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     summaryContent: {
       display: 'flex',
@@ -114,105 +108,76 @@ var styles = function styles(theme) {
       right: 0
     }
   };
-};
+});
 /**
  * HiExpansionPanel
  */
 
-
-exports.styles = styles;
-
 var _ref = _react.default.createElement(_HiIcon.default, {
   icon: "mdi_menu_up",
   size: 24
 });
 
-var HiExpansionPanel =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  (0, _inherits2.default)(HiExpansionPanel, _React$PureComponent);
-
-  function HiExpansionPanel(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, HiExpansionPanel);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiExpansionPanel).call(this, props));
-    _this.state = {
-      panelDetailsExited: !(props.collapseDisable || props.expanded)
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(HiExpansionPanel, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          disabled = _this$props.disabled,
-          heading = _this$props.heading,
-          secondaryHeading = _this$props.secondaryHeading,
-          secondaryHeadingDisabled = _this$props.secondaryHeadingDisabled,
-          secondaryHeadingIcon = _this$props.secondaryHeadingIcon,
-          collapseDisable = _this$props.collapseDisable,
-          children = _this$props.children,
-          classes = _this$props.classes,
-          expanded = _this$props.expanded,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "collapseDisable", "children", "classes", "expanded"]);
-      var effectiveDisabled = disabled || !children;
-      return _react.default.createElement(_ExpansionPanel.default, (0, _extends2.default)({
-        disabled: effectiveDisabled,
-        classes: {
-          root: classes.panel,
-          disabled: classes.disabledPanel
-        },
-        expanded: collapseDisable || expanded
-      }, props, {
-        TransitionProps: {
-          onExited: function onExited() {
-            _this2.setState({
-              panelDetailsExited: true
-            });
-          },
-          onEnter: function onEnter() {
-            _this2.setState({
-              panelDetailsExited: false
-            });
-          }
-        }
-      }), _react.default.createElement(_ExpansionPanelSummary.default, {
-        classes: {
-          root: classes.summaryRoot,
-          content: classes.summaryContent,
-          expanded: classes.expanded,
-          expandIcon: classes.expandIcon
-        },
-        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseDisable, collapseDisable)),
-        expandIcon: !collapseDisable && _ref
-      }, _react.default.createElement("div", {
-        className: classes.heading
-      }, heading), _react.default.createElement("div", {
-        className: classes.secondaryHeading
-      }, _react.default.createElement("span", {
-        className: classes.secondaryHeadingSpan
-      }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && _react.default.createElement(_ExpansionPanelDetails.default, {
-        className: (0, _classnames.default)(classes.panelDetails, (0, _defineProperty2.default)({}, classes.panelDetailsExited, this.state.panelDetailsExited))
-      }, children));
+function HiExpansionPanel(props) {
+  var disabled = props.disabled,
+      heading = props.heading,
+      secondaryHeading = props.secondaryHeading,
+      secondaryHeadingDisabled = props.secondaryHeadingDisabled,
+      secondaryHeadingIcon = props.secondaryHeadingIcon,
+      collapseDisable = props.collapseDisable,
+      children = props.children,
+      expanded = props.expanded,
+      TransitionProps = props.TransitionProps,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "collapseDisable", "children", "expanded", "TransitionProps"]);
+  var classes = useStyles(props);
+
+  var _useState = (0, _react.useState)(!collapseDisable && !expanded),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      panelDetailsExited = _useState2[0],
+      setPanelDetailsExited = _useState2[1];
+
+  var effectiveDisabled = disabled || !children;
+  return _react.default.createElement(_ExpansionPanel.default, (0, _extends2.default)({
+    disabled: effectiveDisabled,
+    expanded: collapseDisable || expanded,
+    TransitionProps: (0, _objectSpread2.default)({
+      onExited: function onExited() {
+        return setPanelDetailsExited(true);
+      },
+      onEnter: function onEnter() {
+        return setPanelDetailsExited(false);
+      }
+    }, TransitionProps)
+  }, others, {
+    classes: {
+      root: classes.panel,
+      disabled: classes.disabledPanel
     }
-  }]);
-  return HiExpansionPanel;
-}(_react.default.PureComponent);
+  }), _react.default.createElement(_ExpansionPanelSummary.default, {
+    classes: {
+      root: classes.summaryRoot,
+      content: classes.summaryContent,
+      expanded: classes.expanded,
+      expandIcon: classes.expandIcon
+    },
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseDisable, collapseDisable)),
+    expandIcon: !collapseDisable && _ref
+  }, _react.default.createElement("div", {
+    className: classes.heading
+  }, heading), _react.default.createElement("div", {
+    className: classes.secondaryHeading
+  }, _react.default.createElement("span", {
+    className: classes.secondaryHeadingSpan
+  }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && _react.default.createElement(_ExpansionPanelDetails.default, {
+    className: (0, _classnames.default)(classes.panelDetails, (0, _defineProperty2.default)({}, classes.panelDetailsExited, panelDetailsExited))
+  }, children));
+}
 
 HiExpansionPanel.defaultProps = {
   disabled: false,
   secondaryHeading: '',
   secondaryHeadingIcon: '',
-  secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
+  secondaryHeadingDisabled: ''
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiExpansionPanel'
-})(HiExpansionPanel);
-
+var _default = HiExpansionPanel;
 exports.default = _default;

package/HiPaymentMeans/HiPaymentMeans.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
@@ -226,7 +228,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 +391,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 +416,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 +453,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 +479,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 +524,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", {
@@ -537,12 +548,13 @@ function (_React$Component) {
       return cardNumber;
     };
 
-    _this.formatIBANNumber = function (cardNumber) {
-      if (cardNumber.search(' ') < 0) {
-        cardNumber = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), "\n             ").concat(cardNumber.substring(12, 16), " ").concat(cardNumber.substring(16, 20), " ").concat(cardNumber.substring(20, 26));
-      }
+    _this.formatIBANNumber = function (iban) {
+      // 1) remove spaces
+      var res = iban.replace(/\s/g, ''); // 2) add space each 4 chars
 
-      return cardNumber;
+      return (0, _toConsumableArray2.default)(res).map(function (char, index) {
+        return index > 0 && index % 4 === 0 ? ' ' + char : char;
+      }).join('');
     };
 
     return _this;

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