@hipay/hipay-material-ui 3.2.2 → 3.3.0

package/HiAlertModal/HiAlertModal.js

@@ -1,29 +1,23 @@
 "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;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+exports.default = void 0;
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 
@@ -44,7 +38,7 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 var _helpers = require("../utils/helpers");
 
 // @inheritedComponent Dialog
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     classContent: {
       fontSize: 14,
@@ -85,147 +79,137 @@ var styles = function styles(theme) {
       transform: 'translate(-50%, -50%)',
       color: theme.palette.background2,
       flex: '1'
+    },
+    backgroundIcon: function backgroundIcon(props) {
+      return {
+        fontSize: "".concat(props.iconSize, "px !important")
+      };
     }
   };
-};
+});
 /**
  * Pop up d'alert
  */
 
+var HiAlertModal = function HiAlertModal(props) {
+  var backgroundIcon = props.backgroundIcon,
+      iconSize = props.iconSize,
+      content = props.content,
+      labelCancelButton = props.labelCancelButton,
+      labelSubmitButton = props.labelSubmitButton,
+      onCancelClick = props.onCancelClick,
+      onSubmitClick = props.onSubmitClick,
+      open = props.open,
+      cancelColor = props.cancelColor,
+      submitColor = props.submitColor,
+      title = props.title,
+      theme = props.theme,
+      onClose = props.onClose,
+      submitActionsRef = props.submitActionsRef,
+      cancelActionsRef = props.cancelActionsRef,
+      others = (0, _objectWithoutProperties2.default)(props, ["backgroundIcon", "iconSize", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title", "theme", "onClose", "submitActionsRef", "cancelActionsRef"]);
+  var classes = useStyles(props);
+  var submitButtonRef = (0, _react.useRef)(null);
+  var cancelButtonRef = (0, _react.useRef)(null);
+  var thisCancelActionsRef = (0, _objectSpread2.default)({}, cancelActionsRef);
+  var thisSubmitActionsRef = (0, _objectSpread2.default)({}, submitActionsRef); // Appelé si clic en dehors de la pop up
+
+  var handleOnClose = function handleOnClose() {
+    if (onClose) {
+      onClose();
+    }
+  };
 
-exports.styles = styles;
-
-var HiAlertModal =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  (0, _inherits2.default)(HiAlertModal, _React$PureComponent);
+  var handleOnEntered = function handleOnEntered() {
+    if (labelSubmitButton) {
+      submitButtonRef.current.focus();
+      thisSubmitActionsRef.focusVisible();
+    } else if (props.labelCancelButton) {
+      cancelButtonRef.current.focus();
+      thisCancelActionsRef.focusVisible();
+    }
+  }; // Render
 
-  function HiAlertModal(props) {
-    var _this;
 
-    (0, _classCallCheck2.default)(this, HiAlertModal);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiAlertModal).call(this, props));
+  var dialogContent = content;
 
-    _this.handleOnClose = function () {
-      if (_this.props.onClose) {
-        _this.props.onClose();
+  if (typeof content === 'string') {
+    dialogContent = _react.default.createElement("span", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: (0, _helpers.escapeHTML)(content)
       }
-    };
+    });
+  }
 
-    _this.submitButtonRef = _react.default.createRef();
-    _this.cancelButtonRef = _react.default.createRef();
-    _this.handleOnClose = _this.handleOnClose.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleOnEntered = _this.handleOnEntered.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  } // Appelé si clic en dehors de la pop up
-
-
-  (0, _createClass2.default)(HiAlertModal, [{
-    key: "handleOnEntered",
-    value: function handleOnEntered() {
-      if (this.props.labelSubmitButton) {
-        this.submitButtonRef.current.focus();
-        this.submitActionsRef.focusVisible();
-      } else if (this.props.labelCancelButton) {
-        this.cancelButtonRef.current.focus();
-        this.cancelActionsRef.focusVisible();
-      }
-    } // Render
-
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          backgroundIcon = _this$props.backgroundIcon,
-          iconSize = _this$props.iconSize,
-          classes = _this$props.classes,
-          content = _this$props.content,
-          labelCancelButton = _this$props.labelCancelButton,
-          labelSubmitButton = _this$props.labelSubmitButton,
-          onCancelClick = _this$props.onCancelClick,
-          onSubmitClick = _this$props.onSubmitClick,
-          open = _this$props.open,
-          cancelColor = _this$props.cancelColor,
-          submitColor = _this$props.submitColor,
-          title = _this$props.title,
-          theme = _this$props.theme,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title", "theme"]);
-      var dialogContent = content;
-
-      if (typeof content === 'string') {
-        dialogContent = _react.default.createElement("span", {
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: (0, _helpers.escapeHTML)(content)
-          }
-        });
-      }
+  var bgIcon;
+
+  if (backgroundIcon) {
+    var iconProps = {
+      color: "inherit",
+      className: classes.backgroundIcon
+    };
 
-      return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
-        open: open,
-        onClose: this.handleOnClose,
-        onEntered: this.handleOnEntered,
-        classes: {
-          root: classes.classDialogRoot,
-          paper: classes.classDialogPaper
-        }
-      }, props), backgroundIcon && _react.default.createElement("div", {
-        className: classes.classBackgroundIcon
-      }, _react.default.createElement(_HiIcon.default, {
-        color: "inherit",
-        icon: backgroundIcon,
-        size: iconSize
-      })), title && _react.default.createElement(_DialogTitle.default, {
-        disableTypography: true,
-        classes: {
-          root: classes.classTitle
-        }
-      }, title), _react.default.createElement(_DialogContent.default, null, _react.default.createElement(_DialogContentText.default, {
-        classes: {
-          root: classes.classContent
-        }
-      }, dialogContent)), _react.default.createElement(_DialogActions.default, {
-        classes: {
-          root: classes.classAction
-        }
-      }, labelCancelButton && _react.default.createElement(_HiButton.default, {
-        classes: {
-          root: classes.classCancelButton
-        },
-        onClick: onCancelClick,
-        color: cancelColor,
-        innerRef: this.cancelButtonRef,
-        action: function action(actions) {
-          _this2.cancelActionsRef = actions;
-        }
-      }, labelCancelButton), labelSubmitButton && _react.default.createElement(_HiButton.default, {
-        classes: {
-          root: classes.classSubmitButton
-        },
-        onClick: onSubmitClick,
-        color: submitColor,
-        innerRef: this.submitButtonRef,
-        action: function action(actions) {
-          _this2.submitActionsRef = actions;
-        }
-      }, labelSubmitButton)));
+    if (typeof backgroundIcon === 'string') {
+      bgIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: backgroundIcon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(backgroundIcon) === 'object') {
+      bgIcon = (0, _objectSpread2.default)({}, backgroundIcon);
+      bgIcon.props = (0, _objectSpread2.default)({}, iconProps);
+    }
+  }
+
+  return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
+    open: open,
+    onClose: handleOnClose,
+    onEntered: handleOnEntered,
+    classes: {
+      root: classes.classDialogRoot,
+      paper: classes.classDialogPaper
+    }
+  }, others), bgIcon && _react.default.createElement("div", {
+    className: classes.classBackgroundIcon
+  }, bgIcon), title && _react.default.createElement(_DialogTitle.default, {
+    disableTypography: true,
+    classes: {
+      root: classes.classTitle
+    }
+  }, title), _react.default.createElement(_DialogContent.default, null, _react.default.createElement(_DialogContentText.default, {
+    classes: {
+      root: classes.classContent
     }
-  }]);
-  return HiAlertModal;
-}(_react.default.PureComponent);
+  }, dialogContent)), _react.default.createElement(_DialogActions.default, {
+    classes: {
+      root: classes.classAction
+    }
+  }, labelCancelButton && _react.default.createElement(_HiButton.default, {
+    classes: {
+      root: classes.classCancelButton
+    },
+    onClick: onCancelClick,
+    color: cancelColor,
+    innerRef: cancelButtonRef,
+    action: function action(actions) {
+      thisCancelActionsRef = actions;
+    }
+  }, labelCancelButton), labelSubmitButton && _react.default.createElement(_HiButton.default, {
+    classes: {
+      root: classes.classSubmitButton
+    },
+    onClick: onSubmitClick,
+    color: submitColor,
+    innerRef: submitButtonRef,
+    action: function action(actions) {
+      thisSubmitActionsRef = actions;
+    }
+  }, labelSubmitButton)));
+};
 
 HiAlertModal.defaultProps = {
   content: '',
   cancelColor: 'neutral',
   submitColor: 'primary'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiAlertModal',
-  withTheme: true
-})(HiAlertModal);
-
+var _default = HiAlertModal;
 exports.default = _default;

package/HiCell/CellRate.js

@@ -23,7 +23,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _mdiMaterialUi = require("mdi-material-ui");
+var _ArrowBottomRight = _interopRequireDefault(require("mdi-material-ui/ArrowBottomRight"));
+
+var _ArrowTopRight = _interopRequireDefault(require("mdi-material-ui/ArrowTopRight"));
+
+var _Equal = _interopRequireDefault(require("mdi-material-ui/Equal"));
 
 var _helpers = require("../utils/helpers");
 
@@ -102,19 +106,19 @@ function (_React$PureComponent) {
 
       switch (trendchip) {
         case 'equal':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.Equal, {
+          trendIcon = _react.default.createElement(_Equal.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, classes.neutral)
           });
           break;
 
         case 'up':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowTopRight, {
+          trendIcon = _react.default.createElement(_ArrowTopRight.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, isPositive), (0, _defineProperty2.default)(_classNames, classes.negative, !isPositive), _classNames))
           });
           break;
 
         case 'down':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowBottomRight, {
+          trendIcon = _react.default.createElement(_ArrowBottomRight.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.positive, !isPositive), (0, _defineProperty2.default)(_classNames2, classes.negative, isPositive), _classNames2))
           });
           break;

package/HiCheckbox/HiCheckbox.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
@@ -43,7 +45,8 @@ var styles = function styles(theme) {
     root: {
       marginRight: 4,
       marginLeft: 4,
-      padding: 0
+      padding: 0,
+      fontSize: 20
     },
     checked: {},
     checkedPrimary: {
@@ -125,6 +128,23 @@ function (_React$PureComponent) {
         height: size
       }, style);
       var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
+      var checkboxIcon;
+
+      if (icon) {
+        var iconProps = {
+          className: classes.root
+        };
+
+        if (typeof icon === 'string') {
+          checkboxIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+            icon: icon
+          }, iconProps));
+        } else if ((0, _typeof2.default)(icon) === 'object') {
+          checkboxIcon = (0, _objectSpread2.default)({}, icon);
+          checkboxIcon.props = (0, _objectSpread2.default)({}, checkboxIcon.props, {}, iconProps);
+        }
+      }
+
       return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
         classes: {
           root: classes.root,
@@ -133,13 +153,8 @@ function (_React$PureComponent) {
         },
         style: iconStyles,
         color: hcolor,
-        onChange: this.handleChange
-      }, icon && {
-        icon: _react.default.createElement(_HiIcon.default, {
-          className: classes.root,
-          icon: icon,
-          size: 20
-        })
+        onChange: this.handleChange,
+        icon: checkboxIcon
       }, checkedIcon && {
         checkedIcon: _react.default.createElement(_HiIcon.default, {
           className: classes.root,

package/HiChip/HiChip.js

@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -21,7 +25,7 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _styles = require("@material-ui/core/styles");
 
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: (0, _objectSpread2.default)({}, theme.typography.b3, {
       display: 'inline-flex',
@@ -53,8 +57,12 @@ var styles = function styles(theme) {
     rightNavigation: {},
     deletable: {},
     leftIcon: {},
-    icon: {
-      marginRight: 4
+    icon: function icon(props) {
+      var fontSize = props.iconSize || 20;
+      return {
+        marginRight: 4,
+        fontSize: fontSize
+      };
     },
     iconClickable: {
       cursor: 'pointer',
@@ -105,9 +113,7 @@ var styles = function styles(theme) {
       paddingRight: '8px'
     }
   };
-};
-
-exports.styles = styles;
+});
 
 var handleKeyDown = function handleKeyDown(e, fn) {
   if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
@@ -116,11 +122,10 @@ var handleKeyDown = function handleKeyDown(e, fn) {
   }
 };
 
-function HiChip(props) {
-  var _classNames;
+var HiChip = function HiChip(props) {
+  var _classNames2;
 
   var className = props.className,
-      classes = props.classes,
       fallbackImage = props.fallbackImage,
       icon = props.icon,
       _props$iconSize = props.iconSize,
@@ -143,27 +148,41 @@ function HiChip(props) {
       titleNext = props.titleNext,
       titlePrevious = props.titlePrevious,
       style = props.style;
+  var classes = useStyles(props);
+  var chipIcon;
+
+  if (icon) {
+    var iconProps = {
+      className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
+      id: "".concat(id, "-icon"),
+      onClick: onIconClick,
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyDown(event, onIconClick);
+      },
+      title: titleIcon,
+      tabIndex: onIconClick ? 0 : -1
+    };
+
+    if (typeof icon === 'string') {
+      chipIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: icon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      chipIcon = (0, _objectSpread2.default)({}, icon);
+      chipIcon.props = (0, _objectSpread2.default)({}, iconProps);
+    }
+  }
+
   return _react.default.createElement("div", {
     id: id,
     role: 'button',
-    className: (0, _classnames.default)(classes.root, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
+    className: (0, _classnames.default)(classes.root, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames2, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames2, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames2, classes.leftIcon, icon), _classNames2)),
     title: title,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: onKeyDown ? '0' : '-1',
     style: style
-  }, icon && _react.default.createElement(_HiIcon.default, {
-    className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
-    id: "".concat(id, "-icon"),
-    icon: icon,
-    size: iconSize,
-    onClick: onIconClick,
-    onKeyDown: function onKeyDown(event) {
-      return handleKeyDown(event, onIconClick);
-    },
-    title: titleIcon,
-    tabIndex: onIconClick ? 0 : -1
-  }), prefix && _react.default.createElement("span", {
+  }, chipIcon, prefix && _react.default.createElement("span", {
     id: "".concat(id, "-prefix"),
     className: classes.prefix
   }, prefix), img && _react.default.createElement("img", {
@@ -225,11 +244,7 @@ function HiChip(props) {
     title: titleDelete,
     tabIndex: 0
   }));
-}
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiChip'
-})(HiChip);
+};
 
+var _default = HiChip;
 exports.default = _default;

package/HiDatePicker/HiDateRangeSelector.js

@@ -44,6 +44,10 @@ var _HiFormControl = _interopRequireDefault(require("../HiForm/HiFormControl"));
 
 var _reactDeviceDetect = require("react-device-detect");
 
+var _Calendar = _interopRequireDefault(require("mdi-material-ui/Calendar"));
+
+var _CalendarBlank = _interopRequireDefault(require("mdi-material-ui/CalendarBlank"));
+
 function findSeparator(format) {
   var str = '';
 
@@ -302,6 +306,10 @@ exports.styles = styles;
 var PRESET_PERIOD_LIST = ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'yy'];
 var CUSTOM_PERIOD_LIST = ['custom'];
 
+var _ref2 = _react.default.createElement(_Calendar.default, null);
+
+var _ref3 = _react.default.createElement(_CalendarBlank.default, null);
+
 var HiDateRangeSelector =
 /*#__PURE__*/
 function (_React$Component) {
@@ -402,7 +410,7 @@ function (_React$Component) {
           id: "preset_periods_subheader",
           type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
-          icon: "mdi_calendar",
+          icon: _ref2,
           label: translations.preset_periods
         });
         presetOptionsAvailable.forEach(function (option) {
@@ -417,7 +425,7 @@ function (_React$Component) {
           id: "custom_periods_subheader",
           type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
           pinned: true,
-          icon: "mdi_calendar_blank",
+          icon: _ref3,
           label: translations.custom_periods
         });
         customOptionsAvailable.forEach(function (option) {

package/HiExpansionPanel/HiExpansionPanel.js

@@ -27,12 +27,12 @@ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/E
 
 var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
 
-var _HiIcon = _interopRequireDefault(require("./../HiIcon"));
-
 var _styles = require("@material-ui/core/styles");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _MenuUp = _interopRequireDefault(require("mdi-material-ui/MenuUp"));
+
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     summaryContent: {
@@ -113,10 +113,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
  * HiExpansionPanel
  */
 
-var _ref = _react.default.createElement(_HiIcon.default, {
-  icon: "mdi_menu_up",
-  size: 24
-});
+var _ref = _react.default.createElement(_MenuUp.default, null);
 
 function HiExpansionPanel(props) {
   var disabled = props.disabled,

package/HiForm/HiInput.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
@@ -86,6 +90,7 @@ var styles = function styles(theme) {
       borderRadius: 2
     },
     startAdornment: {
+      fontSize: 20,
       zIndex: 1,
       marginLeft: 0,
       marginRight: 8
@@ -100,6 +105,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.light
     },
     rightIcon: {
+      fontSize: 20,
       width: 39,
       color: theme.palette.neutral.main
     },
@@ -355,16 +361,26 @@ function (_React$PureComponent) {
       });
       var leftIcon;
 
-      if (startAdornment) {
+      if (!!startAdornment) {
         var _classNames2;
 
-        leftIcon = _react.default.createElement(_HiIcon.default, {
-          icon: startAdornment,
-          size: 20,
+        var leftIconProps = {
           color: startAdornmentColor,
           onClick: this.props.onLeftIconClick,
           className: (0, _classnames.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.startAdornmentDefaultColor, !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.startAdornmentFocus, focused && !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.startAdornmentDisabled, disabled && !startAdornmentColor), (0, _defineProperty2.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
-        });
+        };
+
+        if (typeof startAdornment === 'string') {
+          leftIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+            icon: startAdornment
+          }, leftIconProps));
+        } else if ((0, _typeof2.default)(startAdornment) === 'object') {
+          // Icon component as prop
+          leftIcon = (0, _objectSpread2.default)({}, startAdornment);
+          leftIcon.props = (0, _objectSpread2.default)({}, leftIcon.props, {}, leftIconProps, {
+            className: "".concat(leftIconProps.className, " ").concat(leftIcon.props.className)
+          });
+        }
       } // Build endAdornment with eraseIcon + endAdornmentProps