(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'react', 'classnames', 'styled-components'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('react'), require('classnames'), require('styled-components'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.classnames, global.styledComponents);
    global.index = mod.exports;
  }
})(this, function (exports, _react, _classnames, _styledComponents) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  var _react2 = _interopRequireDefault(_react);

  var _classnames2 = _interopRequireDefault(_classnames);

  var _styledComponents2 = _interopRequireDefault(_styledComponents);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }

  var _templateObject = _taggedTemplateLiteral(['\n  display         : inline-block;\n  align-items     : center;\n  height          : 20px;\n  padding-left    : 10px;\n  padding-right   : 10px;\n  background-color: var(--px-chip-background-color, white);\n  border          : 1px solid var(--px-chip-border-color, gray);\n\n  &:hover {\n    cursor          : pointer;\n    background-color: var(--px-chip-background-color--hover, rgba(gray, 0.2));\n    border          : 1px solid var(--px-chip-border-color--hover, gray);\n  }\n  \n  ', '\n    \n'], ['\n  display         : inline-block;\n  align-items     : center;\n  height          : 20px;\n  padding-left    : 10px;\n  padding-right   : 10px;\n  background-color: var(--px-chip-background-color, white);\n  border          : 1px solid var(--px-chip-border-color, gray);\n\n  &:hover {\n    cursor          : pointer;\n    background-color: var(--px-chip-background-color--hover, rgba(gray, 0.2));\n    border          : 1px solid var(--px-chip-border-color--hover, gray);\n  }\n  \n  ', '\n    \n']),
      _templateObject2 = _taggedTemplateLiteral(['\n  background-color: var(--px-chip-background-color--selected, white);\n    border          : 1px solid var(--px-chip-border-color--selected, blue);\n  '], ['\n  background-color: var(--px-chip-background-color--selected, white);\n    border          : 1px solid var(--px-chip-border-color--selected, blue);\n  ']),
      _templateObject3 = _taggedTemplateLiteral(['\n line-height: 18px;\n  display    : inline-block;\n  min-width  : 0;\n  max-width  : var(--px-chip-max-width, 120px);\n  color      : var(--px-chip-text-color, gray);\n'], ['\n line-height: 18px;\n  display    : inline-block;\n  min-width  : 0;\n  max-width  : var(--px-chip-max-width, 120px);\n  color      : var(--px-chip-text-color, gray);\n']),
      _templateObject4 = _taggedTemplateLiteral(['\n  height: 12px;\n  width : 12px;\n  &:hover{\n    color: var(--px-chip-icon-color--hover, blue);\n  }\n'], ['\n  height: 12px;\n  width : 12px;\n  &:hover{\n    color: var(--px-chip-icon-color--hover, blue);\n  }\n']);

  function _taggedTemplateLiteral(strings, raw) {
    return Object.freeze(Object.defineProperties(strings, {
      raw: {
        value: Object.freeze(raw)
      }
    }));
  }

  var Chip = _styledComponents2.default.div(_templateObject, function (props) {
    return props.selected && (0, _styledComponents.css)(_templateObject2);
  });

  var ChipContent = _styledComponents2.default.div(_templateObject3);

  var ChipIcon = _styledComponents2.default.div(_templateObject4);

  exports.default = function (_ref) {
    var style = _ref.style,
        _ref$label = _ref.label,
        label = _ref$label === undefined ? 'Chip' : _ref$label,
        icon = _ref.icon,
        selected = _ref.selected,
        showIcon = _ref.showIcon,
        children = _ref.children;

    return _react2.default.createElement(
      Chip,
      { selected: selected },
      _react2.default.createElement(
        ChipContent,
        null,
        children
      )
    );
  };
});