@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta3 → 2.3.0-rcstyleguide-beta4

package/old_components/HiChip/HiChip.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
+  return {
+    root: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      display: 'inline-flex',
+      marginRight: 4,
+      width: 'fit-content',
+      height: 24,
+      borderRadius: 12,
+      fontSize: 13,
+      backgroundColor: theme.palette.grey[300],
+      color: theme.palette.neutral.main,
+      padding: 8,
+      alignItems: 'center',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      '&$rightNavigation': {
+        paddingRight: 2
+      },
+      '&$leftNavigation': {
+        paddingLeft: 2
+      },
+      '&$deletable': {
+        paddingRight: 2
+      },
+      '&$leftIcon': {
+        paddingLeft: 2
+      }
+    }),
+    leftNavigation: {},
+    rightNavigation: {},
+    deletable: {},
+    leftIcon: {},
+    icon: {
+      marginRight: 4
+    },
+    iconClickable: {
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        color: theme.palette.primary.main
+      }
+    },
+    eraseIcon: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      marginLeft: 4,
+      position: 'relative',
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        color: theme.palette.neutral.dark
+      }
+    },
+    label: {
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      color: theme.palette.neutral.dark,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    prefix: {
+      whiteSpace: 'nowrap',
+      color: theme.palette.neutral.dark,
+      paddingRight: 4
+    },
+    navigate: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      backgroundColor: theme.palette.grey[300],
+      color: theme.palette.neutral.normal,
+      marginRight: 2,
+      marginLeft: 2,
+      borderRadius: 10,
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.grey[300]
+      },
+      position: 'relative'
+    },
+    badge: {
+      height: 16,
+      paddingLeft: '2px',
+      paddingRight: '8px'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var handleKeyDown = function handleKeyDown(e, fn) {
+  if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
+    e.preventDefault();
+    fn();
+  }
+};
+
+function HiChip(props) {
+  var _classNames;
+
+  var className = props.className,
+      classes = props.classes,
+      fallbackImage = props.fallbackImage,
+      icon = props.icon,
+      _props$iconSize = props.iconSize,
+      iconSize = _props$iconSize === void 0 ? 20 : _props$iconSize,
+      id = props.id,
+      img = props.img,
+      label = props.label,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      onPrevious = props.onPrevious,
+      onNext = props.onNext,
+      onDelete = props.onDelete,
+      prefix = props.prefix,
+      onIconClick = props.onIconClick,
+      title = props.title,
+      titleDelete = props.titleDelete,
+      titleIcon = props.titleIcon,
+      titleImg = props.titleImg,
+      titleNext = props.titleNext,
+      titlePrevious = props.titlePrevious,
+      style = props.style;
+  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)),
+    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", {
+    id: "".concat(id, "-prefix"),
+    className: classes.prefix
+  }, prefix), img && _react.default.createElement("img", {
+    className: classes.badge,
+    id: "".concat(id, "-badge"),
+    src: img,
+    alt: img,
+    onError: function onError(e) {
+      if (fallbackImage) {
+        e.target.src = "".concat(fallbackImage);
+      } else {
+        e.target.style.display = 'none';
+      }
+    },
+    title: titleImg
+  }), onPrevious && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.navigate),
+    id: "".concat(id, "-previous"),
+    icon: "arrow_left",
+    onClick: onPrevious,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onPrevious);
+    },
+    size: iconSize,
+    title: titlePrevious,
+    tabIndex: 0
+  }), _react.default.createElement("span", {
+    id: "".concat(id, "-label"),
+    className: classes.label
+  }, label), onNext && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.navigate),
+    id: "".concat(id, "-next"),
+    icon: "arrow_right",
+    onClick: onNext,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onNext);
+    },
+    size: iconSize,
+    title: titleNext,
+    tabIndex: 0
+  }), onDelete && _react.default.createElement(_HiIcon.default, {
+    classes: {
+      root: classes.eraseIcon
+    },
+    id: "".concat(id, "-delete"),
+    icon: "cancel",
+    onClick: onDelete,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onDelete);
+    },
+    size: iconSize,
+    title: titleDelete,
+    tabIndex: 0
+  }));
+}
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiChip'
+})(HiChip);
+
+exports.default = _default;

package/old_components/HiChip/HiChipSwitch.js

@@ -0,0 +1,249 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _index = _interopRequireDefault(require("keycode/index"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+
+var styles = function styles(theme) {
+  return {
+    root: (0, _objectSpread2.default)({}, theme.typography.b3, {
+      display: 'inline-flex',
+      alignItems: 'center',
+      marginRight: 4,
+      width: 'fit-content',
+      height: 24,
+      borderRadius: 12,
+      fontSize: 13,
+      cursor: 'pointer',
+      padding: '0 4px',
+      outline: 'none',
+      // No outline on focused element in Chrome (as triggered by tabIndex prop)
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      '&:hover, &:focus': {
+        backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.grey[300], 0.08)
+      }
+    }),
+    active: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.neutral.contrastText,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.dark
+      }
+    },
+    inactive: {
+      backgroundColor: theme.palette.grey[300],
+      color: theme.palette.neutral.dark
+    },
+    icon: {
+      color: theme.palette.neutral.main,
+      marginRight: 5
+    },
+    iconActive: {
+      color: theme.palette.neutral.contrastText
+    },
+    tags: {
+      fontSize: 16,
+      paddingRight: 4,
+      paddingBottom: 4,
+      paddingTop: 4,
+      marginLeft: 4,
+      float: 'left'
+    },
+    label: {
+      userSelect: 'none',
+      whiteSpace: 'nowrap'
+    },
+    noSelection: {
+      marginRight: 4
+    },
+    selection: {
+      height: 18,
+      lineHeight: '20px',
+      width: 24,
+      borderRadius: 8,
+      backgroundColor: 'white',
+      justifyContent: 'center',
+      color: theme.palette.neutral.dark,
+      textAlign: 'center',
+      marginLeft: 4,
+      outline: 'none',
+      // No outline on focused element in Chrome (as triggered by tabIndex prop)
+      cursor: 'auto'
+    },
+    selectionClickable: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.grey[300]
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiChipSwitch =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiChipSwitch, _React$PureComponent);
+
+  function HiChipSwitch(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiChipSwitch);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiChipSwitch).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "chipSwitchRef", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+      // Ignore events from children of `Chip`.
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          onKeyDown = _this$props.onKeyDown;
+      var key = (0, _index.default)(event);
+
+      if (onClick && (key === 'space' || key === 'enter')) {
+        event.preventDefault();
+        onClick(event);
+      } else if (key === 'esc') {
+        event.preventDefault();
+
+        if (_this.chipSwitchRef) {
+          _this.chipSwitchRef.blur();
+        }
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownSelection", function (event) {
+      var onSelectionClick = _this.props.onSelectionClick;
+      var key = (0, _index.default)(event);
+
+      if (onSelectionClick && (key === 'space' || key === 'enter')) {
+        event.preventDefault();
+        onSelectionClick(event);
+      }
+    });
+    _this.handleClickSelection = _this.handleClickSelection.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleKeyDownSelection = _this.handleKeyDownSelection.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiChipSwitch, [{
+    key: "handleClickSelection",
+    value: function handleClickSelection(event) {
+      if (this.props.onSelectionClick) {
+        if (event) {
+          event.stopPropagation();
+        }
+
+        this.props.onSelectionClick();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this2 = this;
+
+      var _this$props2 = this.props,
+          id = _this$props2.id,
+          label = _this$props2.label,
+          classes = _this$props2.classes,
+          activeIcon = _this$props2.activeIcon,
+          active = _this$props2.active,
+          onClick = _this$props2.onClick,
+          onSelectionClick = _this$props2.onSelectionClick,
+          selection = _this$props2.selection,
+          selectionTitle = _this$props2.selectionTitle;
+      var selectionProps = {
+        tabIndex: '-1'
+      };
+
+      if (onSelectionClick && selection !== 0) {
+        selectionProps = {
+          onClick: this.handleClickSelection,
+          role: 'button',
+          tabIndex: '0',
+          onKeyDown: this.handleKeyDownSelection,
+          title: selectionTitle
+        };
+      }
+
+      return _react.default.createElement("div", {
+        id: id,
+        className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.active, !!active), (0, _defineProperty2.default)(_classNames, classes.inactive, !active), _classNames)),
+        onClick: onClick,
+        role: "button",
+        tabIndex: "0",
+        onKeyDown: this.handleKeyDown,
+        ref: function ref(node) {
+          _this2.chipRef = node;
+        }
+      }, _react.default.createElement(_HiIcon.default, {
+        icon: active ? activeIcon : 'add',
+        size: 20,
+        className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconActive, !!active))
+      }), _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.noSelection, selection === null))
+      }, label), selection !== null && _react.default.createElement("div", (0, _extends2.default)({
+        className: (0, _classnames.default)(classes.selection, (0, _defineProperty2.default)({}, classes.selectionClickable, onSelectionClick && selection !== 0))
+      }, selectionProps), selection));
+    }
+  }]);
+  return HiChipSwitch;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiChipSwitch, "defaultProps", {
+  active: false,
+  activeIcon: 'check',
+  selection: null,
+  selectionTitle: ''
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiChipSwitch'
+})(HiChipSwitch);
+
+exports.default = _default;

package/old_components/HiChip/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiChip.default;
+  }
+});
+Object.defineProperty(exports, "HiChipSwitch", {
+  enumerable: true,
+  get: function get() {
+    return _HiChipSwitch.default;
+  }
+});
+
+var _HiChip = _interopRequireDefault(require("./HiChip"));
+
+var _HiChipSwitch = _interopRequireDefault(require("./HiChipSwitch"));

package/old_components/HiColoredLabel/HiColoredLabel.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _helpers = require("../utils/helpers");
+
+var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: 'inline-block',
+      alignItems: 'baseline',
+      maxWidth: '100%',
+      padding: '2px 8px',
+      borderRadius: 2,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      lineHeight: 1
+    },
+    body1: (0, _objectSpread2.default)({}, theme.typography.b1),
+    body2: (0, _objectSpread2.default)({}, theme.typography.b2),
+    body3: (0, _objectSpread2.default)({}, theme.typography.b3),
+    body4: (0, _objectSpread2.default)({}, theme.typography.b4),
+    body5: (0, _objectSpread2.default)({}, theme.typography.b5),
+    color: {
+      fontWeight: 400
+    },
+
+    /* Styles applied to the root element if `color="primary"`. */
+    colorPrimary: {
+      color: theme.palette.primary.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: {
+      color: theme.palette.secondary.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="positive"`. */
+    colorPositive: {
+      color: theme.palette.positive.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="negative"`. */
+    colorNegative: {
+      color: theme.palette.negative.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="middle"`. */
+    colorMiddle: {
+      color: theme.palette.middle.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, 0.08)
+    },
+
+    /* Styles applied to the root element if `color="neutral"`. */
+    colorNeutral: {
+      color: theme.palette.neutral.main,
+      backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, 0.08)
+    },
+    activeColor: {
+      fontWeight: 500
+    },
+
+    /* Styles applied to the root element if `color="primary"`. */
+    activeColorPrimary: {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main
+    },
+
+    /* Styles applied to the root element if `color="secondary"`. */
+    activeColorSecondary: {
+      color: theme.palette.secondary.contrastText,
+      backgroundColor: theme.palette.secondary.main
+    },
+
+    /* Styles applied to the root element if `color="positive"`. */
+    activeColorPositive: {
+      color: theme.palette.positive.contrastText,
+      backgroundColor: theme.palette.positive.main
+    },
+
+    /* Styles applied to the root element if `color="negative"`. */
+    activeColorNegative: {
+      color: theme.palette.negative.contrastText,
+      backgroundColor: theme.palette.negative.main
+    },
+
+    /* Styles applied to the root element if `color="middle"`. */
+    activeColorMiddle: {
+      color: theme.palette.middle.contrastText,
+      backgroundColor: theme.palette.middle.main
+    },
+
+    /* Styles applied to the root element if `color="neutral"`. */
+    activeColorNeutral: {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
+    },
+    outlined: {
+      border: '1px solid'
+    }
+  };
+};
+/**
+ * HiColoredLabel
+ *
+ * Label with background color & text color
+ */
+
+
+exports.styles = styles;
+
+function HiColoredLabel(props) {
+  var _classNames;
+
+  var classes = props.classes,
+      className = props.className,
+      fontSize = props.fontSize,
+      label = props.label,
+      propsColor = props.color,
+      active = props.active,
+      outlined = props.outlined,
+      fontWeight = props.fontWeight,
+      style = props.style,
+      theme = props.theme,
+      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
+  var color = propsColor || 'primary';
+  var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
+  var isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
+  return _react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes.outlined, outlined), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), (0, _defineProperty2.default)(_classNames, classes.body1, fontSize >= 15), (0, _defineProperty2.default)(_classNames, classes.body2, fontSize === 14), (0, _defineProperty2.default)(_classNames, classes.body3, fontSize === 13), (0, _defineProperty2.default)(_classNames, classes.body4, fontSize === 12), (0, _defineProperty2.default)(_classNames, classes.body5, fontSize <= 11), _classNames), className),
+    style: (0, _objectSpread2.default)({}, style, {}, isHexColor && {
+      backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
+      color: active ? theme.palette.getContrastText(color) : color
+    }, {}, fontWeight && {
+      fontWeight: fontWeight
+    })
+  }, other), label);
+}
+
+HiColoredLabel.defaultProps = {
+  active: false,
+  color: 'primary',
+  fontSize: 15,
+  outlined: false
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  withTheme: true,
+  name: 'HmuiHiColoredLabel'
+})(HiColoredLabel);
+
+exports.default = _default;

package/old_components/HiColoredLabel/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiColoredLabel.default;
+  }
+});
+
+var _HiColoredLabel = _interopRequireDefault(require("./HiColoredLabel"));