@hipay/hipay-material-ui 3.0.0 → 3.2.0-PSYCHE-2816

package/es/HiSelectableList/HiSelectableListItem.js

@@ -1,31 +1,19 @@
 "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"));
+exports.default = exports.useStyles = exports.useItemLabelStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -49,10 +37,64 @@ var _pure = _interopRequireDefault(require("recompose/pure"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
-var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
-var PureListItem = (0, _pure.default)(_ListItem.default);
+var _reactUse = require("react-use");
 
-var styles = function styles(theme) {
+var useItemLabelStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    label: {
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: 'inline-block',
+      margin: '1px 0'
+    }
+  };
+});
+exports.useItemLabelStyles = useItemLabelStyles;
+
+function ItemLabel(props) {
+  var color = props.color,
+      label = props.label,
+      labelHighlight = props.labelHighlight,
+      selected = props.selected;
+  var classes = useItemLabelStyles(props);
+
+  if (labelHighlight) {
+    var spanHighlight = _react.default.createElement("span", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: (0, _helpers.escapeHTML)(labelHighlight)
+      }
+    });
+
+    if (color && selected) {
+      return _react.default.createElement(_HiColoredLabel.default, {
+        color: color,
+        label: spanHighlight
+      });
+    }
+
+    return _react.default.createElement("span", {
+      className: classes.label
+    }, spanHighlight);
+  }
+
+  if (color && selected) {
+    return _react.default.createElement(_HiColoredLabel.default, {
+      className: classes.coloredLabel,
+      color: color,
+      label: label
+    });
+  }
+
+  return _react.default.createElement("div", {
+    className: classes.label,
+    title: label
+  }, label);
+}
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
       paddingLeft: theme.spacing(1)
@@ -137,14 +179,6 @@ var styles = function styles(theme) {
       display: 'contents'
     }),
     listItemContentSelected: {},
-    label: {
-      maxWidth: '100%',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      display: 'inline-block',
-      margin: '1px 0'
-    },
     highlight: {
       fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.neutral.main,
@@ -177,6 +211,7 @@ var styles = function styles(theme) {
       verticalAlign: 'middle'
     },
     icon: {
+      marginLeft: theme.spacing(1),
       marginRight: theme.spacing(1),
       verticalAlign: 'middle'
     },
@@ -204,227 +239,137 @@ var styles = function styles(theme) {
     infosWithSecondaryInline: {},
     infosWithoutSecondaryInline: {}
   };
-};
+});
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
  * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
-
-exports.styles = styles;
-
-var HiSelectableListItem =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
-
-  function HiSelectableListItem(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, HiSelectableListItem);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectableListItem).call(this, props));
-
-    _this.setHover = function (hover) {
-      return function () {
-        _this.setState({
-          hover: hover
-        });
-      };
-    };
-
-    _this.handleKeyDown = function (item) {
-      return function (event) {
-        var key = (0, _keycode.default)(event);
-
-        if (key === 'space' || key === 'enter') {
-          event.preventDefault();
-          event.stopPropagation();
-
-          if (item) {
-            _this.props.onSelect(null, item);
-          }
-        }
-      };
-    };
-
-    _this.state = {
-      hover: false
-    };
-    _this.buildItemLabel = _this.buildItemLabel.bind((0, _assertThisInitialized2.default)(_this));
-    _this.setHover = _this.setHover.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
+exports.useStyles = useStyles;
+
+function HiSelectableListItem(props) {
+  var _classNames, _classNames3, _classNames4;
+
+  var centered = props.centered,
+      selected = props.selected,
+      disabled = props.disabled,
+      fallbackImage = props.fallbackImage,
+      hideCheckbox = props.hideCheckbox,
+      onSelect = props.onSelect,
+      indeterminate = props.indeterminate,
+      indeterminateIcon = props.indeterminateIcon,
+      icon = props.icon,
+      id = props.id,
+      img = props.img,
+      info = props.info,
+      hoverIcon = props.hoverIcon,
+      checkedIcon = props.checkedIcon,
+      level = props.level,
+      label = props.label,
+      labelHighlight = props.labelHighlight,
+      paddingLeft = props.paddingLeft,
+      pinned = props.pinned,
+      secondaryInline = props.secondaryInline,
+      secondaryLabel = props.secondaryLabel,
+      thin = props.thin,
+      type = props.type,
+      color = props.color,
+      item = props.item;
+  var classes = useStyles(props);
+  var ref = (0, _react.useRef)(null);
+  var isHovering = (0, _reactUse.useHoverDirty)(ref);
+  var onKeyDown = (0, _react.useCallback)(function (_ref) {
+    var key = _ref.key;
+
+    if (key === 'space' || key === 'enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      if (item) onSelect(null, item);
+    }
+  }, [item]);
+  (0, _reactUse.useEvent)('keydown', onKeyDown); // Return simple loader list item
+
+  if (type === 'loader') {
+    return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
+      className: classes.loader,
+      loading: true,
+      size: 8
+    }));
   }
 
-  (0, _createClass2.default)(HiSelectableListItem, [{
-    key: "buildItemLabel",
-
-    /**
-     * Build item label with highlight and/or colored label
-     *
-     * @returns {*}
-     */
-    value: function buildItemLabel() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          color = _this$props.color,
-          label = _this$props.label,
-          labelHighlight = _this$props.labelHighlight,
-          selected = _this$props.selected;
-
-      if (labelHighlight) {
-        var spanHighlight = _react.default.createElement("span", {
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: (0, _helpers.escapeHTML)(labelHighlight)
-          }
-        });
-
-        if (color && selected) {
-          return _react.default.createElement(_HiColoredLabel.default, {
-            color: color,
-            label: spanHighlight
-          });
-        }
+  var displayedIcon;
 
-        return _react.default.createElement("span", {
-          className: classes.label
-        }, spanHighlight);
-      }
-
-      if (color && selected) {
-        return _react.default.createElement(_HiColoredLabel.default, {
-          className: classes.coloredLabel,
-          color: color,
-          label: label
-        });
-      }
+  if (!disabled && isHovering && hoverIcon) {
+    displayedIcon = hoverIcon;
+  } else if (icon) {
+    displayedIcon = icon;
+  }
 
-      return _react.default.createElement("div", {
-        className: classes.label,
-        title: label
-      }, label);
+  var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  return _react.default.createElement(ListItemComponentName, {
+    ref: ref,
+    id: id,
+    tabIndex: disabled || pinned ? '-1' : 0,
+    key: "li-".concat(id),
+    classes: {
+      root: classes.root
+    },
+    className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+    disabled: disabled,
+    onClick: onSelect,
+    style: {
+      paddingLeft: "".concat(paddingLeft + level * 32, "px")
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _classNames, _classNames3, _classNames4;
-
-      var _this$props2 = this.props,
-          centered = _this$props2.centered,
-          classes = _this$props2.classes,
-          selected = _this$props2.selected,
-          disabled = _this$props2.disabled,
-          fallbackImage = _this$props2.fallbackImage,
-          hideCheckbox = _this$props2.hideCheckbox,
-          onSelect = _this$props2.onSelect,
-          indeterminate = _this$props2.indeterminate,
-          indeterminateIcon = _this$props2.indeterminateIcon,
-          icon = _this$props2.icon,
-          id = _this$props2.id,
-          img = _this$props2.img,
-          info = _this$props2.info,
-          hoverIcon = _this$props2.hoverIcon,
-          checkedIcon = _this$props2.checkedIcon,
-          level = _this$props2.level,
-          paddingLeft = _this$props2.paddingLeft,
-          pinned = _this$props2.pinned,
-          secondaryInline = _this$props2.secondaryInline,
-          secondaryLabel = _this$props2.secondaryLabel,
-          thin = _this$props2.thin,
-          type = _this$props2.type,
-          color = _this$props2.color,
-          item = _this$props2.item; // Return simple loader list item
-
-      if (type === 'loader') {
-        return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
-          loading: true,
-          className: classes.loader,
-          size: 8
-        }));
-      }
-
-      var displayedIcon;
-
-      if (!disabled && this.state.hover) {
-        displayedIcon = hoverIcon;
-      } else if (icon) {
-        displayedIcon = icon;
-      }
-
-      var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
-      var listItemListenerProps = {};
-
-      if (!disabled && !pinned) {
-        listItemListenerProps = {
-          onClick: onSelect,
-          onMouseEnter: this.setHover(true),
-          onMouseLeave: this.setHover(false),
-          onKeyDown: this.handleKeyDown(item)
-        };
+  }, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+  }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+    tabIndex: 0,
+    classes: {
+      root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
+    },
+    checked: selected,
+    checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
+    ,
+    disabled: disabled,
+    icon: displayedIcon,
+    indeterminate: indeterminate,
+    indeterminateIcon: indeterminateIcon
+  }), type === 'image' && img && _react.default.createElement("img", {
+    src: img,
+    alt: '',
+    onError: function onError(e) {
+      if (fallbackImage) {
+        e.target.src = "".concat(fallbackImage);
+      } else {
+        e.target.style.display = 'none';
       }
-
-      return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
-        id: id,
-        tabIndex: disabled || pinned ? '-1' : 0,
-        key: "li-".concat(id),
-        classes: {
-          root: classes.root
-        },
-        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
-        disabled: disabled
-      }, listItemListenerProps, {
-        style: {
-          paddingLeft: "".concat(paddingLeft + level * 32, "px")
-        }
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
-      }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
-        tabIndex: 0,
-        classes: {
-          root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
-        },
-        checked: selected,
-        checkedIcon: checkedIcon,
-        color: disabled ? 'inherit' : 'primary',
-        disabled: disabled,
-        icon: displayedIcon,
-        indeterminate: indeterminate,
-        indeterminateIcon: indeterminateIcon
-      }), type === 'image' && img && _react.default.createElement("img", {
-        src: img,
-        alt: '',
-        onError: function onError(e) {
-          if (fallbackImage) {
-            e.target.src = "".concat(fallbackImage);
-          } else {
-            e.target.style.display = 'none';
-          }
-        },
-        className: classes.img
-      }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
-        "data-id": id
-      }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
-        icon: icon,
-        className: classes.icon,
-        color: "inherit"
-      }), this.buildItemLabel())), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
-      }, !!secondaryLabel && _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-      }, secondaryLabel), !!info && _react.default.createElement("span", {
-        className: (0, _classnames.default)(classes.info)
-      }, info)));
-    }
-  }]);
-  return HiSelectableListItem;
-}(_react.default.PureComponent);
+    },
+    className: classes.img
+  }), _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
+    "data-id": id
+  }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
+    icon: icon,
+    className: classes.icon,
+    color: selected && color ? color : 'inherit'
+  }), _react.default.createElement(ItemLabel, {
+    color: color,
+    label: label,
+    labelHighlight: labelHighlight,
+    selected: selected
+  }))), _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
+  }, !!secondaryLabel && _react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
+  }, secondaryLabel), !!info && _react.default.createElement("span", {
+    className: (0, _classnames.default)(classes.info)
+  }, info)));
+}
 
 HiSelectableListItem.defaultProps = {
   centered: false,
   disabled: false,
   hideCheckbox: false,
-  hoverIcon: 'check_box_outline_blank',
   checkedIcon: 'check_box',
   indeterminateIcon: 'indeterminate_check_box',
   indeterminate: false,
@@ -435,10 +380,5 @@ HiSelectableListItem.defaultProps = {
   selected: false,
   thin: false
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiSelectableListItem'
-})(HiSelectableListItem);
-
+var _default = HiSelectableListItem;
 exports.default = _default;

package/es/HiStepper/HiStep.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
+
+var _StepButton = _interopRequireDefault(require("@material-ui/core/StepButton"));
+
+var _StepContent = _interopRequireDefault(require("@material-ui/core/StepContent"));
+
+var _StepLabel = _interopRequireDefault(require("@material-ui/core/StepLabel"));
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+
+/**
+ * HiStepIcon used internally by HiStep
+ */
+var HiStepIcon = function HiStepIcon(_ref) {
+  var color = _ref.color,
+      indicator = _ref.indicator,
+      status = _ref.status;
+  // get icon style from color
+  var style = (0, _react.useMemo)(function () {
+    return {
+      backgroundColor: color,
+      color: "#fff",
+      borderRadius: "50%",
+      width: 20,
+      height: 20,
+      padding: 2,
+      lineHeight: "20px",
+      fontWeight: 600,
+      fontSize: 14
+    };
+  }, [color]); // get component from status
+
+  var StepIconComponent = (0, _react.useMemo)(function () {
+    switch (status) {
+      case "done":
+        return _Check.default;
+
+      case "error":
+        return _Close.default;
+
+      case "warning":
+        return _Remove.default;
+
+      case "in_progress":
+      default:
+        return function (props) {
+          return _react.default.createElement("div", props, indicator);
+        };
+    }
+  }, [status, indicator]);
+  return _react.default.createElement(StepIconComponent, {
+    style: style
+  });
+};
+/**
+ * Custom style for StepButton
+ */
+
+
+var useStepButtonStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      fontFamily: theme.typography.fontFamily
+    },
+    vertical: {
+      marginBottom: 'auto'
+    }
+  };
+});
+/**
+ * Custom style for StepContent
+ */
+
+var useStepContentStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      marginLeft: 11,
+      marginTop: 0,
+      textAlign: "left",
+      borderLeft: "2px solid ".concat(theme.palette.neutral.light)
+    },
+    last: {
+      borderLeft: "none"
+    }
+  };
+});
+/**
+ * Custom style for StepLabel
+ */
+
+var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
+  return {
+    label: (0, _objectSpread2.default)({}, theme.typography.button, {
+      fontWeight: '600 !important',
+      color: "inherit !important"
+    }),
+    active: {},
+    completed: {}
+  };
+});
+
+var HiStep = _react.default.forwardRef(function (props, ref) {
+  var content = props.content,
+      disabled = props.disabled,
+      _props$indicator = props.indicator,
+      indicator = _props$indicator === void 0 ? props.index + 1 : _props$indicator,
+      label = props.label,
+      onClick = props.onClick,
+      status = props.status,
+      others = (0, _objectWithoutProperties2.default)(props, ["content", "disabled", "indicator", "label", "onClick", "status"]);
+  var theme = (0, _styles.useTheme)();
+  var stepButtonClasses = useStepButtonStyle(props);
+  var stepContentClasses = useStepContentStyle(props);
+  var stepLabelClasses = useStepLabelStyle(props);
+  var color = (0, _react.useMemo)(function () {
+    switch (status) {
+      case "done":
+        return theme.palette.positive.main;
+
+      case "error":
+        return theme.palette.negative.main;
+
+      case "in_progress":
+        return theme.palette.primary.main;
+
+      case "warning":
+        return theme.palette.middle.main;
+
+      default:
+        return disabled ? theme.palette.text.disabled : theme.palette.neutral.light;
+    }
+  }, [status, disabled]); // set label color
+
+  var stepLabelStyle = (0, _react.useMemo)(function () {
+    return {
+      color: color
+    };
+  }, [color]);
+
+  var _ref2 = _react.default.createElement(HiStepIcon, {
+    color: color,
+    indicator: indicator,
+    status: status
+  });
+
+  var StepIconProps = (0, _react.useMemo)(function () {
+    return {
+      icon: _ref2
+    };
+  }, [color, indicator, status]);
+  return _react.default.createElement(_Step.default, (0, _extends2.default)({
+    ref: ref,
+    completed: status === "done",
+    disabled: disabled
+  }, others), _react.default.createElement(_StepButton.default, {
+    classes: stepButtonClasses,
+    onClick: onClick
+  }, _react.default.createElement(_StepLabel.default, {
+    classes: stepLabelClasses,
+    StepIconProps: StepIconProps,
+    style: stepLabelStyle
+  }, label)), content && _react.default.createElement(_StepContent.default, {
+    classes: stepContentClasses
+  }, content));
+});
+
+HiStep.defaultProps = {};
+var _default = HiStep;
+exports.default = _default;