@atlaskit/tag - npm Package Compare versions

Comparing version 2.5.2 to 2.6.0

CHANGELOG.md

@@ -1,6 +0,16 @@
-<a name="2.5.2"></a>
-## 2.5.2 (2017-07-27)
+<a name="2.6.0"></a>
+# 2.6.0 (2017-08-03)
 
 
 
+<a name="2.6.0"></a>
+# 2.6.0 (2017-08-03)
+
+
+### Features
+
+* **component:** add color options for tag ([76831b4](https://bitbucket.org/atlassian/atlaskit/commits/76831b4))
+
+
+
 <a name="2.5.2"></a>
@@ -7,0 +17,0 @@ ## 2.5.2 (2017-07-27)

dist/bundle-cjs.js

@@ -95,3 +95,4 @@ module.exports = /******/
     });
-    var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(9), _Chrome2 = _interopRequireDefault(_Chrome), _Content = __webpack_require__(15), _Content2 = _interopRequireDefault(_Content), _Remove = __webpack_require__(17), _Remove2 = _interopRequireDefault(_Remove), _Before = __webpack_require__(20), _Before2 = _interopRequireDefault(_Before), _Container = __webpack_require__(21), _Container2 = _interopRequireDefault(_Container), Tag = function(_PureComponent) {
+    var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(9), _Chrome2 = _interopRequireDefault(_Chrome), _Content = __webpack_require__(17), _Content2 = _interopRequireDefault(_Content), _Remove = __webpack_require__(19), _Remove2 = _interopRequireDefault(_Remove), _Before = __webpack_require__(22), _Before2 = _interopRequireDefault(_Before), _Container = __webpack_require__(23), _Container2 = _interopRequireDefault(_Container), colorList = [ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ], Tag = function(_PureComponent) {
+        // eslint-disable-line react/sort-comp
         function Tag(props) {
@@ -124,4 +125,5 @@ (0, _classCallCheck3.default)(this, Tag);
         }
+        // eslint-disable-line react/sort-comp
         return (0, _inherits3.default)(Tag, _PureComponent), Tag.prototype.render = function() {
-            var _this2 = this, _state = this.state, isFocused = _state.isFocused, isRemoved = _state.isRemoved, isRemoving = _state.isRemoving, markedForRemoval = _state.markedForRemoval, _props = this.props, appearance = _props.appearance, elemBefore = _props.elemBefore, href = _props.href, removeButtonText = _props.removeButtonText, text = _props.text, isRemovable = Boolean(removeButtonText), isRounded = "rounded" === appearance, styled = {
+            var _this2 = this, _state = this.state, isFocused = _state.isFocused, isRemoved = _state.isRemoved, isRemoving = _state.isRemoving, markedForRemoval = _state.markedForRemoval, _props = this.props, appearance = _props.appearance, elemBefore = _props.elemBefore, href = _props.href, removeButtonText = _props.removeButtonText, text = _props.text, color = _props.color, safeColor = colorList.includes(color) ? color : "standard", isRemovable = Boolean(removeButtonText), isRounded = "rounded" === appearance, styled = {
                 isFocused: isFocused,
@@ -132,3 +134,4 @@ isRemovable: isRemovable,
                 isRounded: isRounded,
-                markedForRemoval: markedForRemoval
+                markedForRemoval: markedForRemoval,
+                color: safeColor
             }, onAnimationEnd = function(e) {
@@ -155,18 +158,11 @@ return isRemoving && _this2.handleRemoveComplete(e);
         appearance: _propTypes2.default.oneOf([ "default", "rounded" ]),
-        /** Component to be rendered before the Tag. */
-        elemBefore: _propTypes2.default.node,
-        /** Text to be displayed in the tag. */
+        color: _propTypes2.default.oneOf([ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ]),
+        elemBefore: _propTypes2.default.any,
         text: _propTypes2.default.string.isRequired,
-        /** uri or path. If provided, the tag will be a link.  */
         href: _propTypes2.default.string,
-        /** Text display as the aria-label for remove text. Setting this makes the
-	  tag removable. */
         removeButtonText: _propTypes2.default.string,
-        /** Handler to be called before the tag is removed. If it does not return a
-	  truthy value, the tag will not be removed. */
         onBeforeRemoveAction: _propTypes2.default.func,
-        /** Handler to be called after tag is removed. Called with the string 'Post
-	  Removal Hook'. */
         onAfterRemoveAction: _propTypes2.default.func
     }, Tag.defaultProps = {
+        color: "standard",
         appearance: "default",
@@ -215,3 +211,4 @@ elemBefore: null,
     });
-    var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(10), _Chrome2 = _interopRequireDefault(_Chrome), Chrome = function(_PureComponent) {
+    var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(10), _Chrome2 = _interopRequireDefault(_Chrome), Chrome = (__webpack_require__(16), 
+    function(_PureComponent) {
         function Chrome() {
@@ -232,3 +229,3 @@ var _temp, _this, _ret;
         return (0, _inherits3.default)(Chrome, _PureComponent), Chrome.prototype.render = function() {
-            var _this2 = this, _props = this.props, children = _props.children, isLink = _props.isLink, isRemovable = _props.isRemovable, isRemoved = _props.isRemoved, isRemoving = _props.isRemoving, isRounded = _props.isRounded, markedForRemoval = _props.markedForRemoval, props = {
+            var _this2 = this, _props = this.props, children = _props.children, isLink = _props.isLink, isRemovable = _props.isRemovable, isRemoved = _props.isRemoved, isRemoving = _props.isRemoving, isRounded = _props.isRounded, markedForRemoval = _props.markedForRemoval, color = _props.color, props = {
                 innerRef: function(r) {
@@ -245,9 +242,10 @@ return _this2.chromeRef = r;
                 onKeyPress: this.handleKeyPress,
-                tabIndex: -1
+                tabIndex: -1,
+                color: color
             };
             return isLink && (props.role = "link", props.tabIndex = 0), _react2.default.createElement(_Chrome2.default, props, children);
         }, Chrome;
-    }(_react.PureComponent);
+    }(_react.PureComponent));
     Chrome.propTypes = {
-        children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired,
+        children: _propTypes2.default.arrayOf(_propTypes2.default.any).isRequired,
         isLink: _propTypes2.default.bool.isRequired,
@@ -259,3 +257,4 @@ isRemovable: _propTypes2.default.bool.isRequired,
         markedForRemoval: _propTypes2.default.bool.isRequired,
-        onFocusChange: _propTypes2.default.func.isRequired
+        onFocusChange: _propTypes2.default.func.isRequired,
+        color: _propTypes2.default.oneOf([ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ]).isRequired
     }, exports.default = Chrome;
@@ -275,15 +274,21 @@ }, /* 10 */
     var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n  }\n" ], [ "\n  ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14);
-    exports.default = _styledComponents2.default.span(_templateObject, _utilSharedStyles.akHelperMixins.focusRing.default, function(_ref) {
-        var markedForRemoval = _ref.markedForRemoval;
-        return markedForRemoval ? _utilSharedStyles.akColorR50 : _utilSharedStyles.akColorN20;
-    }, function(_ref2) {
-        var isRounded = _ref2.isRounded;
+    _taggedTemplateLiteral3.default)([ "\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n" ], [ "\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14), _theme = __webpack_require__(15), _theme2 = _interopRequireDefault(_theme), getColor = function(_ref) {
+        var markedForRemoval = _ref.markedForRemoval, color = _ref.color;
+        return markedForRemoval ? _utilSharedStyles.akColorR500 : _theme2.default.tag[color].normal.text;
+    };
+    exports.default = _styledComponents2.default.span(_templateObject, _utilSharedStyles.akHelperMixins.focusRing.default, function(_ref2) {
+        var markedForRemoval = _ref2.markedForRemoval, color = _ref2.color;
+        return markedForRemoval ? _utilSharedStyles.akColorR50 : _theme2.default.tag[color].normal.background;
+    }, getColor, function(_ref3) {
+        var isRounded = _ref3.isRounded;
         return isRounded ? _constants.buttonWidthUnitless / 2 + "px" : _constants.borderRadius;
-    }, _constants.tagHeight, _utilSharedStyles.akGridSizeUnitless / 2, function(_ref3) {
-        var isRemoved = _ref3.isRemoved, isRemoving = _ref3.isRemoving;
+    }, _constants.tagHeight, _utilSharedStyles.akGridSizeUnitless / 2, function(_ref4) {
+        var isRemoved = _ref4.isRemoved, isRemoving = _ref4.isRemoving;
         return isRemoved || isRemoving ? "hidden" : "initial";
-    }, _utilSharedStyles.akHelperMixins.focusRing.none, function(_ref4) {
-        var markedForRemoval = _ref4.markedForRemoval;
-        return markedForRemoval ? _utilSharedStyles.akColorR50 : _utilSharedStyles.akColorN30;
+    }, _utilSharedStyles.akHelperMixins.focusRing.none, function(_ref5) {
+        var markedForRemoval = _ref5.markedForRemoval, color = _ref5.color;
+        return markedForRemoval ? _utilSharedStyles.akColorR50 : _theme2.default.tag[color].hover.background;
+    }, function(_ref6) {
+        var color = _ref6.color;
+        return _theme2.default.tag[color].hover.text;
     });
@@ -318,2 +323,168 @@ }, /* 11 */
     "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    });
+    var _utilSharedStyles = __webpack_require__(13), theme = {
+        tag: {
+            standard: {
+                normal: {
+                    text: _utilSharedStyles.akColorN700,
+                    background: _utilSharedStyles.akColorN20
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorN700,
+                    background: _utilSharedStyles.akColorN30
+                }
+            },
+            green: {
+                normal: {
+                    text: _utilSharedStyles.akColorN800,
+                    background: _utilSharedStyles.akColorG200
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorG100
+                }
+            },
+            purple: {
+                normal: {
+                    text: _utilSharedStyles.akColorN800,
+                    background: _utilSharedStyles.akColorP100
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorP75
+                }
+            },
+            red: {
+                normal: {
+                    text: _utilSharedStyles.akColorN800,
+                    background: _utilSharedStyles.akColorR100
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorR75
+                }
+            },
+            yellow: {
+                normal: {
+                    text: _utilSharedStyles.akColorN800,
+                    background: _utilSharedStyles.akColorY200
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorY100
+                }
+            },
+            grey: {
+                normal: {
+                    text: _utilSharedStyles.akColorN0,
+                    background: _utilSharedStyles.akColorN500
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorN50
+                }
+            },
+            teal: {
+                normal: {
+                    text: _utilSharedStyles.akColorN800,
+                    background: _utilSharedStyles.akColorT200
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorT100
+                }
+            },
+            blue: {
+                normal: {
+                    text: _utilSharedStyles.akColorN800,
+                    background: _utilSharedStyles.akColorB100
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorB75
+                }
+            },
+            tealLight: {
+                normal: {
+                    text: _utilSharedStyles.akColorN500,
+                    background: _utilSharedStyles.akColorT100
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorT75
+                }
+            },
+            blueLight: {
+                normal: {
+                    text: _utilSharedStyles.akColorB500,
+                    background: _utilSharedStyles.akColorB75
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorB50
+                }
+            },
+            greenLight: {
+                normal: {
+                    text: _utilSharedStyles.akColorG500,
+                    background: _utilSharedStyles.akColorG100
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorG75
+                }
+            },
+            purpleLight: {
+                normal: {
+                    text: _utilSharedStyles.akColorP500,
+                    background: _utilSharedStyles.akColorP75
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorP50
+                }
+            },
+            redLight: {
+                normal: {
+                    text: _utilSharedStyles.akColorN500,
+                    background: _utilSharedStyles.akColorR75
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorR50
+                }
+            },
+            yellowLight: {
+                normal: {
+                    text: _utilSharedStyles.akColorN500,
+                    background: _utilSharedStyles.akColorY100
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorY75
+                }
+            },
+            greyLight: {
+                normal: {
+                    text: _utilSharedStyles.akColorN500,
+                    background: _utilSharedStyles.akColorN30
+                },
+                hover: {
+                    text: _utilSharedStyles.akColorB400,
+                    background: _utilSharedStyles.akColorN20
+                }
+            }
+        }
+    };
+    exports.default = theme;
+}, /* 16 */
+/***/
+function(module, exports) {
+    "use strict";
+}, /* 17 */
+/***/
+function(module, exports, __webpack_require__) {
+    "use strict";
     function _interopRequireDefault(obj) {
@@ -327,3 +498,4 @@ return obj && obj.__esModule ? obj : {
     });
-    var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Content = __webpack_require__(16), Content = function(_PureComponent) {
+    var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Content = __webpack_require__(18), Content = (__webpack_require__(16), 
+    function(_PureComponent) {
         function Content() {
@@ -333,6 +505,7 @@ return (0, _classCallCheck3.default)(this, Content), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
         return (0, _inherits3.default)(Content, _PureComponent), Content.prototype.render = function() {
-            var _props = this.props, children = _props.children, href = _props.href, isFocused = _props.isFocused, isRemovable = _props.isRemovable, markedForRemoval = _props.markedForRemoval, styledProps = {
+            var _props = this.props, children = _props.children, href = _props.href, isFocused = _props.isFocused, isRemovable = _props.isRemovable, markedForRemoval = _props.markedForRemoval, color = _props.color, styledProps = {
                 isFocused: isFocused,
                 isRemovable: isRemovable,
-                markedForRemoval: markedForRemoval
+                markedForRemoval: markedForRemoval,
+                color: color
             };
@@ -344,11 +517,12 @@ return href ? _react2.default.createElement(_Content.Link, (0, _extends3.default)({}, styledProps, {
         }, Content;
-    }(_react.PureComponent);
+    }(_react.PureComponent));
     Content.propTypes = {
-        children: _propTypes2.default.node.isRequired,
+        children: _propTypes2.default.any.isRequired,
         href: _propTypes2.default.string,
         isFocused: _propTypes2.default.bool,
         isRemovable: _propTypes2.default.bool,
-        markedForRemoval: _propTypes2.default.bool
+        markedForRemoval: _propTypes2.default.bool,
+        color: _propTypes2.default.oneOf([ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ]).isRequired
     }, exports.default = Content;
-}, /* 16 */
+}, /* 18 */
 /***/
@@ -366,17 +540,14 @@ function(module, exports, __webpack_require__) {
     var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ], [ "\n  color: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ], [ "\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ]), _templateObject2 = (0, 
     _taggedTemplateLiteral3.default)([ "\n  ", "\n" ], [ "\n  ", "\n" ]), _templateObject3 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ], [ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14), getColor = function(_ref) {
-        var markedForRemoval = _ref.markedForRemoval;
-        return markedForRemoval ? _utilSharedStyles.akColorR500 : _utilSharedStyles.akColorN700;
-    }, getTruncate = _utilSharedStyles.akHelperMixins.text.truncate(function(_ref2) {
-        var isRemovable = _ref2.isRemovable;
+    _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ], [ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14), getTruncate = _utilSharedStyles.akHelperMixins.text.truncate(function(_ref) {
+        var isRemovable = _ref.isRemovable;
         return isRemovable ? _constants.maxTextWidthUnitless - _constants.buttonWidthUnitless + "px" : _constants.maxTextWidth;
-    }), COMMON_STYLES = (0, _styledComponents.css)(_templateObject, getColor, _constants.fontSize, _utilSharedStyles.akGridSizeUnitless / 2, _utilSharedStyles.akGridSizeUnitless / 2, getTruncate), getFocusedStyles = (exports.Text = _styledComponents2.default.span(_templateObject2, COMMON_STYLES), 
-    function(_ref3) {
-        var isFocused = _ref3.isFocused;
+    }), COMMON_STYLES = (0, _styledComponents.css)(_templateObject, _constants.fontSize, _utilSharedStyles.akGridSizeUnitless / 2, _utilSharedStyles.akGridSizeUnitless / 2, getTruncate), getFocusedStyles = (exports.Text = _styledComponents2.default.span(_templateObject2, COMMON_STYLES), 
+    function(_ref2) {
+        var isFocused = _ref2.isFocused;
         return isFocused ? "color: " + _utilSharedStyles.akColorB400 : null;
     });
     exports.Link = _styledComponents2.default.a(_templateObject3, COMMON_STYLES, getFocusedStyles, _utilSharedStyles.akColorB400);
-}, /* 17 */
+}, /* 19 */
 /***/
@@ -393,3 +564,3 @@ function(module, exports, __webpack_require__) {
     });
-    var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _cross = __webpack_require__(18), _cross2 = _interopRequireDefault(_cross), _Remove = __webpack_require__(19), _Remove2 = _interopRequireDefault(_Remove), Remove = function(_PureComponent) {
+    var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _cross = __webpack_require__(20), _cross2 = _interopRequireDefault(_cross), _Remove = __webpack_require__(21), _Remove2 = _interopRequireDefault(_Remove), Remove = function(_PureComponent) {
         function Remove() {
@@ -409,2 +580,3 @@ var _temp, _this, _ret;
         }
+        // eslint-disable-line react/sort-comp
         return (0, _inherits3.default)(Remove, _PureComponent), Remove.prototype.render = function() {
@@ -432,7 +604,7 @@ var _props = this.props, isRounded = _props.isRounded, onRemoveAction = _props.onRemoveAction, removeText = _props.removeText;
     }, exports.default = Remove;
-}, /* 18 */
+}, /* 20 */
 /***/
 function(module, exports) {
     module.exports = require("@atlaskit/icon/glyph/cross");
-}, /* 19 */
+}, /* 21 */
 /***/
@@ -458,3 +630,3 @@ function(module, exports, __webpack_require__) {
     }, _utilSharedStyles.akColorN500, _utilSharedStyles.akHelperMixins.focusRing.generate(_utilSharedStyles.akColorR300), _utilSharedStyles.akColorR500, _utilSharedStyles.akHelperMixins.focusRing.default);
-}, /* 20 */
+}, /* 22 */
 /***/
@@ -474,3 +646,3 @@ function(module, exports, __webpack_require__) {
     exports.default = _styledComponents2.default.span(_templateObject, _utilSharedStyles.akGridSizeUnitless / 2);
-}, /* 21 */
+}, /* 23 */
 /***/
@@ -477,0 +649,0 @@ function(module, exports, __webpack_require__) {

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function n(o){if(t[o])return t[o].exports;var r=t[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,n),r.loaded=!0,r.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=t(2),i=o(r);n.default=i.default},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(3),i=o(r),a=t(4),u=o(a),l=t(5),d=o(l),s=t(6),f=o(s),c=t(7),m=o(c),p=t(8),h=o(p),v=t(9),g=o(v),R=t(15),x=o(R),b=t(17),k=o(b),y=t(20),_=o(y),C=t(21),M=o(C),F=function(e){function n(t){(0,u.default)(this,n);var o=(0,d.default)(this,e.call(this,t));return o.handleRemoveRequest=function(){o.props.onBeforeRemoveAction()&&o.setState({isRemoving:!0,isRemoved:!1})},o.handleRemoveComplete=function(){o.props.onAfterRemoveAction(o.props.text),o.setState({isRemoving:!1,isRemoved:!0})},o.handleHoverChange=function(e){o.setState({markedForRemoval:e})},o.handleFocusChange=function(e){o.setState({isFocused:e})},o.state={isRemoving:!1,isRemoved:!1,markedForRemoval:!1},o}return(0,f.default)(n,e),n.prototype.render=function(){var e=this,n=this.state,t=n.isFocused,o=n.isRemoved,r=n.isRemoving,a=n.markedForRemoval,u=this.props,l=u.appearance,d=u.elemBefore,s=u.href,f=u.removeButtonText,c=u.text,m=Boolean(f),p="rounded"===l,v={isFocused:t,isRemovable:m,isRemoved:o,isRemoving:r,isRounded:p,markedForRemoval:a},R=function(n){return r&&e.handleRemoveComplete(n)};return h.default.createElement(M.default,(0,i.default)({},v,{onAnimationEnd:R}),h.default.createElement(g.default,(0,i.default)({},v,{isLink:!!s,onFocusChange:this.handleFocusChange}),d?h.default.createElement(_.default,null,d):null,h.default.createElement(x.default,(0,i.default)({},v,{href:s}),c),m?h.default.createElement(k.default,(0,i.default)({},v,{onHoverChange:this.handleHoverChange,onRemoveAction:this.handleRemoveRequest,removeText:f})):null))},n}(p.PureComponent);F.propTypes={appearance:m.default.oneOf(["default","rounded"]),elemBefore:m.default.node,text:m.default.string.isRequired,href:m.default.string,removeButtonText:m.default.string,onBeforeRemoveAction:m.default.func,onAfterRemoveAction:m.default.func},F.defaultProps={appearance:"default",elemBefore:null,onAfterRemoveAction:function(){},onBeforeRemoveAction:function(){return!0}},n.default=F},function(e,n){e.exports=require("babel-runtime/helpers/extends")},function(e,n){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,n){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,n){e.exports=require("babel-runtime/helpers/inherits")},function(e,n){e.exports=require("prop-types")},function(e,n){e.exports=require("react")},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(4),i=o(r),a=t(5),u=o(a),l=t(6),d=o(l),s=t(7),f=o(s),c=t(8),m=o(c),p=t(10),h=o(p),v=function(e){function n(){var t,o,r;(0,i.default)(this,n);for(var a=arguments.length,l=Array(a),d=0;d<a;d++)l[d]=arguments[d];return t=o=(0,u.default)(this,e.call.apply(e,[this].concat(l))),o.handleKeyPress=function(e){var n=" "===e.key||"Enter"===e.key;o.chromeRef&&n&&o.chromeRef.querySelector("a").click()},o.handleBlur=function(){o.props.onFocusChange(!1)},o.handleFocus=function(e){e.target===o.chromeRef&&o.props.onFocusChange(!0)},r=t,(0,u.default)(o,r)}return(0,d.default)(n,e),n.prototype.render=function(){var e=this,n=this.props,t=n.children,o=n.isLink,r=n.isRemovable,i=n.isRemoved,a=n.isRemoving,u=n.isRounded,l=n.markedForRemoval,d={innerRef:function(n){return e.chromeRef=n},isRemovable:r,isRemoved:i,isRemoving:a,isRounded:u,markedForRemoval:l,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyPress:this.handleKeyPress,tabIndex:-1};return o&&(d.role="link",d.tabIndex=0),m.default.createElement(h.default,d,t)},n}(c.PureComponent);v.propTypes={children:f.default.arrayOf(f.default.element).isRequired,isLink:f.default.bool.isRequired,isRemovable:f.default.bool.isRequired,isRemoved:f.default.bool,isRemoving:f.default.bool,isRounded:f.default.bool,markedForRemoval:f.default.bool.isRequired,onFocusChange:f.default.func.isRequired},n.default=v},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(11),i=o(r),a=(0,i.default)(["\n  ",";\n  background-color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n  }\n"],["\n  ",";\n  background-color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n  }\n"]),u=t(12),l=o(u),d=t(13),s=t(14);n.default=l.default.span(a,d.akHelperMixins.focusRing.default,function(e){var n=e.markedForRemoval;return n?d.akColorR50:d.akColorN20},function(e){var n=e.isRounded;return n?s.buttonWidthUnitless/2+"px":s.borderRadius},s.tagHeight,d.akGridSizeUnitless/2,function(e){var n=e.isRemoved,t=e.isRemoving;return n||t?"hidden":"initial"},d.akHelperMixins.focusRing.none,function(e){var n=e.markedForRemoval;return n?d.akColorR50:d.akColorN30})},function(e,n){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,n){e.exports=require("styled-components")},function(e,n){e.exports=require("@atlaskit/util-shared-styles")},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.maxTextWidth=n.maxTextWidthUnitless=n.maxWidth=n.maxWidthUnitless=n.buttonWidth=n.buttonWidthUnitless=n.tagHeight=n.tagHeightUnitless=n.fontSize=n.borderRadius=void 0;var o=t(13),r=(n.borderRadius=o.akBorderRadius,n.fontSize=o.akFontSizeDefault,n.tagHeightUnitless=2.5*o.akGridSizeUnitless),i=n.tagHeight=r+"px",a=(n.buttonWidthUnitless=r,n.buttonWidth=i,n.maxWidthUnitless=25*o.akGridSizeUnitless),u=(n.maxWidth=a+"px",n.maxTextWidthUnitless=a-r);n.maxTextWidth=u+"px"},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(3),i=o(r),a=t(4),u=o(a),l=t(5),d=o(l),s=t(6),f=o(s),c=t(7),m=o(c),p=t(8),h=o(p),v=t(16),g=function(e){function n(){return(0,u.default)(this,n),(0,d.default)(this,e.apply(this,arguments))}return(0,f.default)(n,e),n.prototype.render=function(){var e=this.props,n=e.children,t=e.href,o=e.isFocused,r=e.isRemovable,a=e.markedForRemoval,u={isFocused:o,isRemovable:r,markedForRemoval:a};return t?h.default.createElement(v.Link,(0,i.default)({},u,{href:t,tabIndex:"-1"}),n):h.default.createElement(v.Text,u,n)},n}(p.PureComponent);g.propTypes={children:m.default.node.isRequired,href:m.default.string,isFocused:m.default.bool,isRemovable:m.default.bool,markedForRemoval:m.default.bool},n.default=g},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Link=n.Text=void 0;var r=t(11),i=o(r),a=(0,i.default)(["\n  color: ",";\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"],["\n  color: ",";\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"]),u=(0,i.default)(["\n  ","\n"],["\n  ","\n"]),l=(0,i.default)(["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"],["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"]),d=t(12),s=o(d),f=t(13),c=t(14),m=function(e){var n=e.markedForRemoval;return n?f.akColorR500:f.akColorN700},p=f.akHelperMixins.text.truncate(function(e){var n=e.isRemovable;return n?c.maxTextWidthUnitless-c.buttonWidthUnitless+"px":c.maxTextWidth}),h=(0,d.css)(a,m,c.fontSize,f.akGridSizeUnitless/2,f.akGridSizeUnitless/2,p),v=(n.Text=s.default.span(u,h),function(e){var n=e.isFocused;return n?"color: "+f.akColorB400:null});n.Link=s.default.a(l,h,v,f.akColorB400)},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(4),i=o(r),a=t(5),u=o(a),l=t(6),d=o(l),s=t(7),f=o(s),c=t(8),m=o(c),p=t(18),h=o(p),v=t(19),g=o(v),R=function(e){function n(){var t,o,r;(0,i.default)(this,n);for(var a=arguments.length,l=Array(a),d=0;d<a;d++)l[d]=arguments[d];return t=o=(0,u.default)(this,e.call.apply(e,[this].concat(l))),o.onKeyPress=function(e){var n=" "===e.key||"Enter"===e.key;n&&(e.stopPropagation(),o.props.onRemoveAction())},o.onMouseOver=function(){o.props.onHoverChange(!0)},o.onMouseOut=function(){o.props.onHoverChange(!1)},r=t,(0,u.default)(o,r)}return(0,d.default)(n,e),n.prototype.render=function(){var e=this.props,n=e.isRounded,t=e.onRemoveAction,o=e.removeText;return m.default.createElement(g.default,{"aria-label":o,isRounded:n,onClick:t,onKeyPress:this.onKeyPress,onMouseOut:this.onMouseOut,onMouseOver:this.onMouseOver,type:"button"},m.default.createElement(h.default,{label:o,size:"small"}))},n}(c.PureComponent);R.propTypes={removeText:f.default.string.isRequired,isRounded:f.default.bool,onHoverChange:f.default.func,onRemoveAction:f.default.func},n.default=R},function(e,n){e.exports=require("@atlaskit/icon/glyph/cross")},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(11),i=o(r),a=(0,i.default)(["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"],["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"]),u=t(12),l=o(u),d=t(13),s=t(14);n.default=l.default.button(a,function(e){var n=e.isRounded;return n?s.buttonWidthUnitless/2+"px":s.borderRadius},d.akColorN500,d.akHelperMixins.focusRing.generate(d.akColorR300),d.akColorR500,d.akHelperMixins.focusRing.default)},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=t(11),i=o(r),a=(0,i.default)(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"],["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"]),u=t(12),l=o(u),d=t(13);n.default=l.default.span(a,d.akGridSizeUnitless/2)},function(e,n,t){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e){var n=e.isRemoved,t=void 0;return n&&(t="width: 0; visibility: hidden;"),t}function i(e){var n=e.isRemoving,t=void 0;return n&&(t="animation: "+m+" 250ms forwards; will-change: width;"),t}Object.defineProperty(n,"__esModule",{value:!0});var a=t(11),u=o(a),l=(0,u.default)(["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"],["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"]),d=(0,u.default)(["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"],["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"]),s=t(12),f=o(s),c=t(14),m=(0,s.keyframes)(l,c.maxWidth,.8*c.maxWidthUnitless);n.default=f.default.div(d,i,r)}]);
+module.exports=function(e){function n(t){if(o[t])return o[t].exports;var r=o[t]={exports:{},id:t,loaded:!1};return e[t].call(r.exports,r,r.exports,n),r.loaded=!0,r.exports}var o={};return n.m=e,n.c=o,n.p="",n(0)}([function(e,n,o){e.exports=o(1)},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var r=o(2),a=t(r);n.default=a.default},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=o(3),a=t(r),i=o(4),l=t(i),u=o(5),d=t(u),s=o(6),c=t(s),f=o(7),g=t(f),h=o(8),p=t(h),m=o(9),k=t(m),v=o(17),b=t(v),x=o(19),R=t(x),C=o(22),y=t(C),_=o(23),L=t(_),B=["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"],M=function(e){function n(o){(0,l.default)(this,n);var t=(0,d.default)(this,e.call(this,o));return t.handleRemoveRequest=function(){t.props.onBeforeRemoveAction()&&t.setState({isRemoving:!0,isRemoved:!1})},t.handleRemoveComplete=function(){t.props.onAfterRemoveAction(t.props.text),t.setState({isRemoving:!1,isRemoved:!0})},t.handleHoverChange=function(e){t.setState({markedForRemoval:e})},t.handleFocusChange=function(e){t.setState({isFocused:e})},t.state={isRemoving:!1,isRemoved:!1,markedForRemoval:!1},t}return(0,c.default)(n,e),n.prototype.render=function(){var e=this,n=this.state,o=n.isFocused,t=n.isRemoved,r=n.isRemoving,i=n.markedForRemoval,l=this.props,u=l.appearance,d=l.elemBefore,s=l.href,c=l.removeButtonText,f=l.text,g=l.color,h=B.includes(g)?g:"standard",m=Boolean(c),v="rounded"===u,x={isFocused:o,isRemovable:m,isRemoved:t,isRemoving:r,isRounded:v,markedForRemoval:i,color:h},C=function(n){return r&&e.handleRemoveComplete(n)};return p.default.createElement(L.default,(0,a.default)({},x,{onAnimationEnd:C}),p.default.createElement(k.default,(0,a.default)({},x,{isLink:!!s,onFocusChange:this.handleFocusChange}),d?p.default.createElement(y.default,null,d):null,p.default.createElement(b.default,(0,a.default)({},x,{href:s}),f),m?p.default.createElement(R.default,(0,a.default)({},x,{onHoverChange:this.handleHoverChange,onRemoveAction:this.handleRemoveRequest,removeText:c})):null))},n}(h.PureComponent);M.propTypes={appearance:g.default.oneOf(["default","rounded"]),color:g.default.oneOf(["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"]),elemBefore:g.default.any,text:g.default.string.isRequired,href:g.default.string,removeButtonText:g.default.string,onBeforeRemoveAction:g.default.func,onAfterRemoveAction:g.default.func},M.defaultProps={color:"standard",appearance:"default",elemBefore:null,onAfterRemoveAction:function(){},onBeforeRemoveAction:function(){return!0}},n.default=M},function(e,n){e.exports=require("babel-runtime/helpers/extends")},function(e,n){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,n){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,n){e.exports=require("babel-runtime/helpers/inherits")},function(e,n){e.exports=require("prop-types")},function(e,n){e.exports=require("react")},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=o(4),a=t(r),i=o(5),l=t(i),u=o(6),d=t(u),s=o(7),c=t(s),f=o(8),g=t(f),h=o(10),p=t(h),m=(o(16),function(e){function n(){var o,t,r;(0,a.default)(this,n);for(var i=arguments.length,u=Array(i),d=0;d<i;d++)u[d]=arguments[d];return o=t=(0,l.default)(this,e.call.apply(e,[this].concat(u))),t.handleKeyPress=function(e){var n=" "===e.key||"Enter"===e.key;t.chromeRef&&n&&t.chromeRef.querySelector("a").click()},t.handleBlur=function(){t.props.onFocusChange(!1)},t.handleFocus=function(e){e.target===t.chromeRef&&t.props.onFocusChange(!0)},r=o,(0,l.default)(t,r)}return(0,d.default)(n,e),n.prototype.render=function(){var e=this,n=this.props,o=n.children,t=n.isLink,r=n.isRemovable,a=n.isRemoved,i=n.isRemoving,l=n.isRounded,u=n.markedForRemoval,d=n.color,s={innerRef:function(n){return e.chromeRef=n},isRemovable:r,isRemoved:a,isRemoving:i,isRounded:l,markedForRemoval:u,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyPress:this.handleKeyPress,tabIndex:-1,color:d};return t&&(s.role="link",s.tabIndex=0),g.default.createElement(p.default,s,o)},n}(f.PureComponent));m.propTypes={children:c.default.arrayOf(c.default.any).isRequired,isLink:c.default.bool.isRequired,isRemovable:c.default.bool.isRequired,isRemoved:c.default.bool,isRemoving:c.default.bool,isRounded:c.default.bool,markedForRemoval:c.default.bool.isRequired,onFocusChange:c.default.func.isRequired,color:c.default.oneOf(["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"]).isRequired},n.default=m},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=o(11),a=t(r),i=(0,a.default)(["\n  ",";\n  background-color: ",";\n  color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n    color: ",";\n  }\n"],["\n  ",";\n  background-color: ",";\n  color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n    color: ",";\n  }\n"]),l=o(12),u=t(l),d=o(13),s=o(14),c=o(15),f=t(c),g=function(e){var n=e.markedForRemoval,o=e.color;return n?d.akColorR500:f.default.tag[o].normal.text};n.default=u.default.span(i,d.akHelperMixins.focusRing.default,function(e){var n=e.markedForRemoval,o=e.color;return n?d.akColorR50:f.default.tag[o].normal.background},g,function(e){var n=e.isRounded;return n?s.buttonWidthUnitless/2+"px":s.borderRadius},s.tagHeight,d.akGridSizeUnitless/2,function(e){var n=e.isRemoved,o=e.isRemoving;return n||o?"hidden":"initial"},d.akHelperMixins.focusRing.none,function(e){var n=e.markedForRemoval,o=e.color;return n?d.akColorR50:f.default.tag[o].hover.background},function(e){var n=e.color;return f.default.tag[n].hover.text})},function(e,n){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,n){e.exports=require("styled-components")},function(e,n){e.exports=require("@atlaskit/util-shared-styles")},function(e,n,o){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.maxTextWidth=n.maxTextWidthUnitless=n.maxWidth=n.maxWidthUnitless=n.buttonWidth=n.buttonWidthUnitless=n.tagHeight=n.tagHeightUnitless=n.fontSize=n.borderRadius=void 0;var t=o(13),r=(n.borderRadius=t.akBorderRadius,n.fontSize=t.akFontSizeDefault,n.tagHeightUnitless=2.5*t.akGridSizeUnitless),a=n.tagHeight=r+"px",i=(n.buttonWidthUnitless=r,n.buttonWidth=a,n.maxWidthUnitless=25*t.akGridSizeUnitless),l=(n.maxWidth=i+"px",n.maxTextWidthUnitless=i-r);n.maxTextWidth=l+"px"},function(e,n,o){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=o(13),r={tag:{standard:{normal:{text:t.akColorN700,background:t.akColorN20},hover:{text:t.akColorN700,background:t.akColorN30}},green:{normal:{text:t.akColorN800,background:t.akColorG200},hover:{text:t.akColorB400,background:t.akColorG100}},purple:{normal:{text:t.akColorN800,background:t.akColorP100},hover:{text:t.akColorB400,background:t.akColorP75}},red:{normal:{text:t.akColorN800,background:t.akColorR100},hover:{text:t.akColorB400,background:t.akColorR75}},yellow:{normal:{text:t.akColorN800,background:t.akColorY200},hover:{text:t.akColorB400,background:t.akColorY100}},grey:{normal:{text:t.akColorN0,background:t.akColorN500},hover:{text:t.akColorB400,background:t.akColorN50}},teal:{normal:{text:t.akColorN800,background:t.akColorT200},hover:{text:t.akColorB400,background:t.akColorT100}},blue:{normal:{text:t.akColorN800,background:t.akColorB100},hover:{text:t.akColorB400,background:t.akColorB75}},tealLight:{normal:{text:t.akColorN500,background:t.akColorT100},hover:{text:t.akColorB400,background:t.akColorT75}},blueLight:{normal:{text:t.akColorB500,background:t.akColorB75},hover:{text:t.akColorB400,background:t.akColorB50}},greenLight:{normal:{text:t.akColorG500,background:t.akColorG100},hover:{text:t.akColorB400,background:t.akColorG75}},purpleLight:{normal:{text:t.akColorP500,background:t.akColorP75},hover:{text:t.akColorB400,background:t.akColorP50}},redLight:{normal:{text:t.akColorN500,background:t.akColorR75},hover:{text:t.akColorB400,background:t.akColorR50}},yellowLight:{normal:{text:t.akColorN500,background:t.akColorY100},hover:{text:t.akColorB400,background:t.akColorY75}},greyLight:{normal:{text:t.akColorN500,background:t.akColorN30},hover:{text:t.akColorB400,background:t.akColorN20}}}};n.default=r},function(e,n){"use strict"},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=o(3),a=t(r),i=o(4),l=t(i),u=o(5),d=t(u),s=o(6),c=t(s),f=o(7),g=t(f),h=o(8),p=t(h),m=o(18),k=(o(16),function(e){function n(){return(0,l.default)(this,n),(0,d.default)(this,e.apply(this,arguments))}return(0,c.default)(n,e),n.prototype.render=function(){var e=this.props,n=e.children,o=e.href,t=e.isFocused,r=e.isRemovable,i=e.markedForRemoval,l=e.color,u={isFocused:t,isRemovable:r,markedForRemoval:i,color:l};return o?p.default.createElement(m.Link,(0,a.default)({},u,{href:o,tabIndex:"-1"}),n):p.default.createElement(m.Text,u,n)},n}(h.PureComponent));k.propTypes={children:g.default.any.isRequired,href:g.default.string,isFocused:g.default.bool,isRemovable:g.default.bool,markedForRemoval:g.default.bool,color:g.default.oneOf(["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"]).isRequired},n.default=k},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Link=n.Text=void 0;var r=o(11),a=t(r),i=(0,a.default)(["\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"],["\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"]),l=(0,a.default)(["\n  ","\n"],["\n  ","\n"]),u=(0,a.default)(["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"],["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"]),d=o(12),s=t(d),c=o(13),f=o(14),g=c.akHelperMixins.text.truncate(function(e){var n=e.isRemovable;return n?f.maxTextWidthUnitless-f.buttonWidthUnitless+"px":f.maxTextWidth}),h=(0,d.css)(i,f.fontSize,c.akGridSizeUnitless/2,c.akGridSizeUnitless/2,g),p=(n.Text=s.default.span(l,h),function(e){var n=e.isFocused;return n?"color: "+c.akColorB400:null});n.Link=s.default.a(u,h,p,c.akColorB400)},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=o(4),a=t(r),i=o(5),l=t(i),u=o(6),d=t(u),s=o(7),c=t(s),f=o(8),g=t(f),h=o(20),p=t(h),m=o(21),k=t(m),v=function(e){function n(){var o,t,r;(0,a.default)(this,n);for(var i=arguments.length,u=Array(i),d=0;d<i;d++)u[d]=arguments[d];return o=t=(0,l.default)(this,e.call.apply(e,[this].concat(u))),t.onKeyPress=function(e){var n=" "===e.key||"Enter"===e.key;n&&(e.stopPropagation(),t.props.onRemoveAction())},t.onMouseOver=function(){t.props.onHoverChange(!0)},t.onMouseOut=function(){t.props.onHoverChange(!1)},r=o,(0,l.default)(t,r)}return(0,d.default)(n,e),n.prototype.render=function(){var e=this.props,n=e.isRounded,o=e.onRemoveAction,t=e.removeText;return g.default.createElement(k.default,{"aria-label":t,isRounded:n,onClick:o,onKeyPress:this.onKeyPress,onMouseOut:this.onMouseOut,onMouseOver:this.onMouseOver,type:"button"},g.default.createElement(p.default,{label:t,size:"small"}))},n}(f.PureComponent);v.propTypes={removeText:c.default.string.isRequired,isRounded:c.default.bool,onHoverChange:c.default.func,onRemoveAction:c.default.func},n.default=v},function(e,n){e.exports=require("@atlaskit/icon/glyph/cross")},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=o(11),a=t(r),i=(0,a.default)(["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"],["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"]),l=o(12),u=t(l),d=o(13),s=o(14);n.default=u.default.button(i,function(e){var n=e.isRounded;return n?s.buttonWidthUnitless/2+"px":s.borderRadius},d.akColorN500,d.akHelperMixins.focusRing.generate(d.akColorR300),d.akColorR500,d.akHelperMixins.focusRing.default)},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var r=o(11),a=t(r),i=(0,a.default)(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"],["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"]),l=o(12),u=t(l),d=o(13);n.default=u.default.span(i,d.akGridSizeUnitless/2)},function(e,n,o){"use strict";function t(e){return e&&e.__esModule?e:{default:e}}function r(e){var n=e.isRemoved,o=void 0;return n&&(o="width: 0; visibility: hidden;"),o}function a(e){var n=e.isRemoving,o=void 0;return n&&(o="animation: "+g+" 250ms forwards; will-change: width;"),o}Object.defineProperty(n,"__esModule",{value:!0});var i=o(11),l=t(i),u=(0,l.default)(["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"],["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"]),d=(0,l.default)(["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"],["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"]),s=o(12),c=t(s),f=o(14),g=(0,s.keyframes)(u,f.maxWidth,.8*f.maxWidthUnitless);n.default=c.default.div(d,a,r)}]);

dist/bundle.js

 !function(root, factory) {
     "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles"), require("@atlaskit/icon/glyph/cross")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/extends", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "prop-types", "react", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/util-shared-styles", "@atlaskit/icon/glyph/cross" ], factory) : "object" == typeof exports ? exports["@atlaskit/tag"] = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles"), require("@atlaskit/icon/glyph/cross")) : root["@atlaskit/tag"] = factory(root["babel-runtime/helpers/extends"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root["prop-types"], root.react, root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/util-shared-styles"], root["@atlaskit/icon/glyph/cross"]);
-}(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_18__) {
+}(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_20__) {
     /******/
@@ -98,3 +98,4 @@ return function(modules) {
         });
-        var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(9), _Chrome2 = _interopRequireDefault(_Chrome), _Content = __webpack_require__(15), _Content2 = _interopRequireDefault(_Content), _Remove = __webpack_require__(17), _Remove2 = _interopRequireDefault(_Remove), _Before = __webpack_require__(20), _Before2 = _interopRequireDefault(_Before), _Container = __webpack_require__(21), _Container2 = _interopRequireDefault(_Container), Tag = function(_PureComponent) {
+        var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(9), _Chrome2 = _interopRequireDefault(_Chrome), _Content = __webpack_require__(17), _Content2 = _interopRequireDefault(_Content), _Remove = __webpack_require__(19), _Remove2 = _interopRequireDefault(_Remove), _Before = __webpack_require__(22), _Before2 = _interopRequireDefault(_Before), _Container = __webpack_require__(23), _Container2 = _interopRequireDefault(_Container), colorList = [ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ], Tag = function(_PureComponent) {
+            // eslint-disable-line react/sort-comp
             function Tag(props) {
@@ -127,4 +128,5 @@ (0, _classCallCheck3.default)(this, Tag);
             }
+            // eslint-disable-line react/sort-comp
             return (0, _inherits3.default)(Tag, _PureComponent), Tag.prototype.render = function() {
-                var _this2 = this, _state = this.state, isFocused = _state.isFocused, isRemoved = _state.isRemoved, isRemoving = _state.isRemoving, markedForRemoval = _state.markedForRemoval, _props = this.props, appearance = _props.appearance, elemBefore = _props.elemBefore, href = _props.href, removeButtonText = _props.removeButtonText, text = _props.text, isRemovable = Boolean(removeButtonText), isRounded = "rounded" === appearance, styled = {
+                var _this2 = this, _state = this.state, isFocused = _state.isFocused, isRemoved = _state.isRemoved, isRemoving = _state.isRemoving, markedForRemoval = _state.markedForRemoval, _props = this.props, appearance = _props.appearance, elemBefore = _props.elemBefore, href = _props.href, removeButtonText = _props.removeButtonText, text = _props.text, color = _props.color, safeColor = colorList.includes(color) ? color : "standard", isRemovable = Boolean(removeButtonText), isRounded = "rounded" === appearance, styled = {
                     isFocused: isFocused,
@@ -135,3 +137,4 @@ isRemovable: isRemovable,
                     isRounded: isRounded,
-                    markedForRemoval: markedForRemoval
+                    markedForRemoval: markedForRemoval,
+                    color: safeColor
                 }, onAnimationEnd = function(e) {
@@ -158,18 +161,11 @@ return isRemoving && _this2.handleRemoveComplete(e);
             appearance: _propTypes2.default.oneOf([ "default", "rounded" ]),
-            /** Component to be rendered before the Tag. */
-            elemBefore: _propTypes2.default.node,
-            /** Text to be displayed in the tag. */
+            color: _propTypes2.default.oneOf([ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ]),
+            elemBefore: _propTypes2.default.any,
             text: _propTypes2.default.string.isRequired,
-            /** uri or path. If provided, the tag will be a link.  */
             href: _propTypes2.default.string,
-            /** Text display as the aria-label for remove text. Setting this makes the
-	  tag removable. */
             removeButtonText: _propTypes2.default.string,
-            /** Handler to be called before the tag is removed. If it does not return a
-	  truthy value, the tag will not be removed. */
             onBeforeRemoveAction: _propTypes2.default.func,
-            /** Handler to be called after tag is removed. Called with the string 'Post
-	  Removal Hook'. */
             onAfterRemoveAction: _propTypes2.default.func
         }, Tag.defaultProps = {
+            color: "standard",
             appearance: "default",
@@ -218,3 +214,4 @@ elemBefore: null,
         });
-        var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(10), _Chrome2 = _interopRequireDefault(_Chrome), Chrome = function(_PureComponent) {
+        var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Chrome = __webpack_require__(10), _Chrome2 = _interopRequireDefault(_Chrome), Chrome = (__webpack_require__(16), 
+        function(_PureComponent) {
             function Chrome() {
@@ -235,3 +232,3 @@ var _temp, _this, _ret;
             return (0, _inherits3.default)(Chrome, _PureComponent), Chrome.prototype.render = function() {
-                var _this2 = this, _props = this.props, children = _props.children, isLink = _props.isLink, isRemovable = _props.isRemovable, isRemoved = _props.isRemoved, isRemoving = _props.isRemoving, isRounded = _props.isRounded, markedForRemoval = _props.markedForRemoval, props = {
+                var _this2 = this, _props = this.props, children = _props.children, isLink = _props.isLink, isRemovable = _props.isRemovable, isRemoved = _props.isRemoved, isRemoving = _props.isRemoving, isRounded = _props.isRounded, markedForRemoval = _props.markedForRemoval, color = _props.color, props = {
                     innerRef: function(r) {
@@ -248,9 +245,10 @@ return _this2.chromeRef = r;
                     onKeyPress: this.handleKeyPress,
-                    tabIndex: -1
+                    tabIndex: -1,
+                    color: color
                 };
                 return isLink && (props.role = "link", props.tabIndex = 0), _react2.default.createElement(_Chrome2.default, props, children);
             }, Chrome;
-        }(_react.PureComponent);
+        }(_react.PureComponent));
         Chrome.propTypes = {
-            children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired,
+            children: _propTypes2.default.arrayOf(_propTypes2.default.any).isRequired,
             isLink: _propTypes2.default.bool.isRequired,
@@ -262,3 +260,4 @@ isRemovable: _propTypes2.default.bool.isRequired,
             markedForRemoval: _propTypes2.default.bool.isRequired,
-            onFocusChange: _propTypes2.default.func.isRequired
+            onFocusChange: _propTypes2.default.func.isRequired,
+            color: _propTypes2.default.oneOf([ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ]).isRequired
         }, exports.default = Chrome;
@@ -278,15 +277,21 @@ }, /* 10 */
         var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n  }\n" ], [ "\n  ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14);
-        exports.default = _styledComponents2.default.span(_templateObject, _utilSharedStyles.akHelperMixins.focusRing.default, function(_ref) {
-            var markedForRemoval = _ref.markedForRemoval;
-            return markedForRemoval ? _utilSharedStyles.akColorR50 : _utilSharedStyles.akColorN20;
-        }, function(_ref2) {
-            var isRounded = _ref2.isRounded;
+        _taggedTemplateLiteral3.default)([ "\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n" ], [ "\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border-radius: ", ";\n  cursor: default;\n  display: flex;\n  height: ", ";\n  line-height: 1;\n  margin: ", "px;\n  padding: 0;\n  overflow: ", ";\n\n  &:hover {\n    ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14), _theme = __webpack_require__(15), _theme2 = _interopRequireDefault(_theme), getColor = function(_ref) {
+            var markedForRemoval = _ref.markedForRemoval, color = _ref.color;
+            return markedForRemoval ? _utilSharedStyles.akColorR500 : _theme2.default.tag[color].normal.text;
+        };
+        exports.default = _styledComponents2.default.span(_templateObject, _utilSharedStyles.akHelperMixins.focusRing.default, function(_ref2) {
+            var markedForRemoval = _ref2.markedForRemoval, color = _ref2.color;
+            return markedForRemoval ? _utilSharedStyles.akColorR50 : _theme2.default.tag[color].normal.background;
+        }, getColor, function(_ref3) {
+            var isRounded = _ref3.isRounded;
             return isRounded ? _constants.buttonWidthUnitless / 2 + "px" : _constants.borderRadius;
-        }, _constants.tagHeight, _utilSharedStyles.akGridSizeUnitless / 2, function(_ref3) {
-            var isRemoved = _ref3.isRemoved, isRemoving = _ref3.isRemoving;
+        }, _constants.tagHeight, _utilSharedStyles.akGridSizeUnitless / 2, function(_ref4) {
+            var isRemoved = _ref4.isRemoved, isRemoving = _ref4.isRemoving;
             return isRemoved || isRemoving ? "hidden" : "initial";
-        }, _utilSharedStyles.akHelperMixins.focusRing.none, function(_ref4) {
-            var markedForRemoval = _ref4.markedForRemoval;
-            return markedForRemoval ? _utilSharedStyles.akColorR50 : _utilSharedStyles.akColorN30;
+        }, _utilSharedStyles.akHelperMixins.focusRing.none, function(_ref5) {
+            var markedForRemoval = _ref5.markedForRemoval, color = _ref5.color;
+            return markedForRemoval ? _utilSharedStyles.akColorR50 : _theme2.default.tag[color].hover.background;
+        }, function(_ref6) {
+            var color = _ref6.color;
+            return _theme2.default.tag[color].hover.text;
         });
@@ -321,2 +326,168 @@ }, /* 11 */
         "use strict";
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var _utilSharedStyles = __webpack_require__(13), theme = {
+            tag: {
+                standard: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN700,
+                        background: _utilSharedStyles.akColorN20
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorN700,
+                        background: _utilSharedStyles.akColorN30
+                    }
+                },
+                green: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN800,
+                        background: _utilSharedStyles.akColorG200
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorG100
+                    }
+                },
+                purple: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN800,
+                        background: _utilSharedStyles.akColorP100
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorP75
+                    }
+                },
+                red: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN800,
+                        background: _utilSharedStyles.akColorR100
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorR75
+                    }
+                },
+                yellow: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN800,
+                        background: _utilSharedStyles.akColorY200
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorY100
+                    }
+                },
+                grey: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN0,
+                        background: _utilSharedStyles.akColorN500
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorN50
+                    }
+                },
+                teal: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN800,
+                        background: _utilSharedStyles.akColorT200
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorT100
+                    }
+                },
+                blue: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN800,
+                        background: _utilSharedStyles.akColorB100
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorB75
+                    }
+                },
+                tealLight: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN500,
+                        background: _utilSharedStyles.akColorT100
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorT75
+                    }
+                },
+                blueLight: {
+                    normal: {
+                        text: _utilSharedStyles.akColorB500,
+                        background: _utilSharedStyles.akColorB75
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorB50
+                    }
+                },
+                greenLight: {
+                    normal: {
+                        text: _utilSharedStyles.akColorG500,
+                        background: _utilSharedStyles.akColorG100
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorG75
+                    }
+                },
+                purpleLight: {
+                    normal: {
+                        text: _utilSharedStyles.akColorP500,
+                        background: _utilSharedStyles.akColorP75
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorP50
+                    }
+                },
+                redLight: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN500,
+                        background: _utilSharedStyles.akColorR75
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorR50
+                    }
+                },
+                yellowLight: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN500,
+                        background: _utilSharedStyles.akColorY100
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorY75
+                    }
+                },
+                greyLight: {
+                    normal: {
+                        text: _utilSharedStyles.akColorN500,
+                        background: _utilSharedStyles.akColorN30
+                    },
+                    hover: {
+                        text: _utilSharedStyles.akColorB400,
+                        background: _utilSharedStyles.akColorN20
+                    }
+                }
+            }
+        };
+        exports.default = theme;
+    }, /* 16 */
+    /***/
+    function(module, exports) {
+        "use strict";
+    }, /* 17 */
+    /***/
+    function(module, exports, __webpack_require__) {
+        "use strict";
         function _interopRequireDefault(obj) {
@@ -330,3 +501,4 @@ return obj && obj.__esModule ? obj : {
         });
-        var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Content = __webpack_require__(16), Content = function(_PureComponent) {
+        var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Content = __webpack_require__(18), Content = (__webpack_require__(16), 
+        function(_PureComponent) {
             function Content() {
@@ -336,6 +508,7 @@ return (0, _classCallCheck3.default)(this, Content), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
             return (0, _inherits3.default)(Content, _PureComponent), Content.prototype.render = function() {
-                var _props = this.props, children = _props.children, href = _props.href, isFocused = _props.isFocused, isRemovable = _props.isRemovable, markedForRemoval = _props.markedForRemoval, styledProps = {
+                var _props = this.props, children = _props.children, href = _props.href, isFocused = _props.isFocused, isRemovable = _props.isRemovable, markedForRemoval = _props.markedForRemoval, color = _props.color, styledProps = {
                     isFocused: isFocused,
                     isRemovable: isRemovable,
-                    markedForRemoval: markedForRemoval
+                    markedForRemoval: markedForRemoval,
+                    color: color
                 };
@@ -347,11 +520,12 @@ return href ? _react2.default.createElement(_Content.Link, (0, _extends3.default)({}, styledProps, {
             }, Content;
-        }(_react.PureComponent);
+        }(_react.PureComponent));
         Content.propTypes = {
-            children: _propTypes2.default.node.isRequired,
+            children: _propTypes2.default.any.isRequired,
             href: _propTypes2.default.string,
             isFocused: _propTypes2.default.bool,
             isRemovable: _propTypes2.default.bool,
-            markedForRemoval: _propTypes2.default.bool
+            markedForRemoval: _propTypes2.default.bool,
+            color: _propTypes2.default.oneOf([ "standard", "green", "blue", "red", "purple", "grey", "teal", "yellow", "greenLight", "blueLight", "redLight", "purpleLight", "greyLight", "tealLight", "yellowLight" ]).isRequired
         }, exports.default = Content;
-    }, /* 16 */
+    }, /* 18 */
     /***/
@@ -369,17 +543,14 @@ function(module, exports, __webpack_require__) {
         var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ], [ "\n  color: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ], [ "\n  font-size: ", ";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding: 2px 0;\n  ", "\n" ]), _templateObject2 = (0, 
         _taggedTemplateLiteral3.default)([ "\n  ", "\n" ], [ "\n  ", "\n" ]), _templateObject3 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ], [ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14), getColor = function(_ref) {
-            var markedForRemoval = _ref.markedForRemoval;
-            return markedForRemoval ? _utilSharedStyles.akColorR500 : _utilSharedStyles.akColorN700;
-        }, getTruncate = _utilSharedStyles.akHelperMixins.text.truncate(function(_ref2) {
-            var isRemovable = _ref2.isRemovable;
+        _taggedTemplateLiteral3.default)([ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ], [ "\n  ", "\n  ", "\n  text-decoration: none;\n\n  &:hover {\n    color: ", ";\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(13), _constants = __webpack_require__(14), getTruncate = _utilSharedStyles.akHelperMixins.text.truncate(function(_ref) {
+            var isRemovable = _ref.isRemovable;
             return isRemovable ? _constants.maxTextWidthUnitless - _constants.buttonWidthUnitless + "px" : _constants.maxTextWidth;
-        }), COMMON_STYLES = (0, _styledComponents.css)(_templateObject, getColor, _constants.fontSize, _utilSharedStyles.akGridSizeUnitless / 2, _utilSharedStyles.akGridSizeUnitless / 2, getTruncate), getFocusedStyles = (exports.Text = _styledComponents2.default.span(_templateObject2, COMMON_STYLES), 
-        function(_ref3) {
-            var isFocused = _ref3.isFocused;
+        }), COMMON_STYLES = (0, _styledComponents.css)(_templateObject, _constants.fontSize, _utilSharedStyles.akGridSizeUnitless / 2, _utilSharedStyles.akGridSizeUnitless / 2, getTruncate), getFocusedStyles = (exports.Text = _styledComponents2.default.span(_templateObject2, COMMON_STYLES), 
+        function(_ref2) {
+            var isFocused = _ref2.isFocused;
             return isFocused ? "color: " + _utilSharedStyles.akColorB400 : null;
         });
         exports.Link = _styledComponents2.default.a(_templateObject3, COMMON_STYLES, getFocusedStyles, _utilSharedStyles.akColorB400);
-    }, /* 17 */
+    }, /* 19 */
     /***/
@@ -396,3 +567,3 @@ function(module, exports, __webpack_require__) {
         });
-        var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _cross = __webpack_require__(18), _cross2 = _interopRequireDefault(_cross), _Remove = __webpack_require__(19), _Remove2 = _interopRequireDefault(_Remove), Remove = function(_PureComponent) {
+        var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _cross = __webpack_require__(20), _cross2 = _interopRequireDefault(_cross), _Remove = __webpack_require__(21), _Remove2 = _interopRequireDefault(_Remove), Remove = function(_PureComponent) {
             function Remove() {
@@ -412,2 +583,3 @@ var _temp, _this, _ret;
             }
+            // eslint-disable-line react/sort-comp
             return (0, _inherits3.default)(Remove, _PureComponent), Remove.prototype.render = function() {
@@ -435,7 +607,7 @@ var _props = this.props, isRounded = _props.isRounded, onRemoveAction = _props.onRemoveAction, removeText = _props.removeText;
         }, exports.default = Remove;
-    }, /* 18 */
+    }, /* 20 */
     /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_18__;
-    }, /* 19 */
+        module.exports = __WEBPACK_EXTERNAL_MODULE_20__;
+    }, /* 21 */
     /***/
@@ -461,3 +633,3 @@ function(module, exports, __webpack_require__) {
         }, _utilSharedStyles.akColorN500, _utilSharedStyles.akHelperMixins.focusRing.generate(_utilSharedStyles.akColorR300), _utilSharedStyles.akColorR500, _utilSharedStyles.akHelperMixins.focusRing.default);
-    }, /* 20 */
+    }, /* 22 */
     /***/
@@ -477,3 +649,3 @@ function(module, exports, __webpack_require__) {
         exports.default = _styledComponents2.default.span(_templateObject, _utilSharedStyles.akGridSizeUnitless / 2);
-    }, /* 21 */
+    }, /* 23 */
     /***/
@@ -480,0 +652,0 @@ function(module, exports, __webpack_require__) {

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("@atlaskit/icon/glyph/cross")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","prop-types","react","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles","@atlaskit/icon/glyph/cross"],n):"object"==typeof exports?exports["@atlaskit/tag"]=n(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("@atlaskit/icon/glyph/cross")):e["@atlaskit/tag"]=n(e["babel-runtime/helpers/extends"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e["prop-types"],e.react,e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"],e["@atlaskit/icon/glyph/cross"])}(this,function(e,n,t,r,o,i,a,u,l,s){return function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){e.exports=t(1)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var o=t(2),i=r(o);n.default=i.default},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(3),i=r(o),a=t(4),u=r(a),l=t(5),s=r(l),d=t(6),f=r(d),c=t(7),p=r(c),m=t(8),h=r(m),v=t(9),b=r(v),g=t(15),x=r(g),R=t(17),k=r(R),y=t(20),C=r(y),_=t(21),M=r(_),q=function(e){function n(t){(0,u.default)(this,n);var r=(0,s.default)(this,e.call(this,t));return r.handleRemoveRequest=function(){r.props.onBeforeRemoveAction()&&r.setState({isRemoving:!0,isRemoved:!1})},r.handleRemoveComplete=function(){r.props.onAfterRemoveAction(r.props.text),r.setState({isRemoving:!1,isRemoved:!0})},r.handleHoverChange=function(e){r.setState({markedForRemoval:e})},r.handleFocusChange=function(e){r.setState({isFocused:e})},r.state={isRemoving:!1,isRemoved:!1,markedForRemoval:!1},r}return(0,f.default)(n,e),n.prototype.render=function(){var e=this,n=this.state,t=n.isFocused,r=n.isRemoved,o=n.isRemoving,a=n.markedForRemoval,u=this.props,l=u.appearance,s=u.elemBefore,d=u.href,f=u.removeButtonText,c=u.text,p=Boolean(f),m="rounded"===l,v={isFocused:t,isRemovable:p,isRemoved:r,isRemoving:o,isRounded:m,markedForRemoval:a},g=function(n){return o&&e.handleRemoveComplete(n)};return h.default.createElement(M.default,(0,i.default)({},v,{onAnimationEnd:g}),h.default.createElement(b.default,(0,i.default)({},v,{isLink:!!d,onFocusChange:this.handleFocusChange}),s?h.default.createElement(C.default,null,s):null,h.default.createElement(x.default,(0,i.default)({},v,{href:d}),c),p?h.default.createElement(k.default,(0,i.default)({},v,{onHoverChange:this.handleHoverChange,onRemoveAction:this.handleRemoveRequest,removeText:f})):null))},n}(m.PureComponent);q.propTypes={appearance:p.default.oneOf(["default","rounded"]),elemBefore:p.default.node,text:p.default.string.isRequired,href:p.default.string,removeButtonText:p.default.string,onBeforeRemoveAction:p.default.func,onAfterRemoveAction:p.default.func},q.defaultProps={appearance:"default",elemBefore:null,onAfterRemoveAction:function(){},onBeforeRemoveAction:function(){return!0}},n.default=q},function(n,t){n.exports=e},function(e,t){e.exports=n},function(e,n){e.exports=t},function(e,n){e.exports=r},function(e,n){e.exports=o},function(e,n){e.exports=i},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(4),i=r(o),a=t(5),u=r(a),l=t(6),s=r(l),d=t(7),f=r(d),c=t(8),p=r(c),m=t(10),h=r(m),v=function(e){function n(){var t,r,o;(0,i.default)(this,n);for(var a=arguments.length,l=Array(a),s=0;s<a;s++)l[s]=arguments[s];return t=r=(0,u.default)(this,e.call.apply(e,[this].concat(l))),r.handleKeyPress=function(e){var n=" "===e.key||"Enter"===e.key;r.chromeRef&&n&&r.chromeRef.querySelector("a").click()},r.handleBlur=function(){r.props.onFocusChange(!1)},r.handleFocus=function(e){e.target===r.chromeRef&&r.props.onFocusChange(!0)},o=t,(0,u.default)(r,o)}return(0,s.default)(n,e),n.prototype.render=function(){var e=this,n=this.props,t=n.children,r=n.isLink,o=n.isRemovable,i=n.isRemoved,a=n.isRemoving,u=n.isRounded,l=n.markedForRemoval,s={innerRef:function(n){return e.chromeRef=n},isRemovable:o,isRemoved:i,isRemoving:a,isRounded:u,markedForRemoval:l,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyPress:this.handleKeyPress,tabIndex:-1};return r&&(s.role="link",s.tabIndex=0),p.default.createElement(h.default,s,t)},n}(c.PureComponent);v.propTypes={children:f.default.arrayOf(f.default.element).isRequired,isLink:f.default.bool.isRequired,isRemovable:f.default.bool.isRequired,isRemoved:f.default.bool,isRemoving:f.default.bool,isRounded:f.default.bool,markedForRemoval:f.default.bool.isRequired,onFocusChange:f.default.func.isRequired},n.default=v},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(11),i=r(o),a=(0,i.default)(["\n  ",";\n  background-color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n  }\n"],["\n  ",";\n  background-color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n  }\n"]),u=t(12),l=r(u),s=t(13),d=t(14);n.default=l.default.span(a,s.akHelperMixins.focusRing.default,function(e){var n=e.markedForRemoval;return n?s.akColorR50:s.akColorN20},function(e){var n=e.isRounded;return n?d.buttonWidthUnitless/2+"px":d.borderRadius},d.tagHeight,s.akGridSizeUnitless/2,function(e){var n=e.isRemoved,t=e.isRemoving;return n||t?"hidden":"initial"},s.akHelperMixins.focusRing.none,function(e){var n=e.markedForRemoval;return n?s.akColorR50:s.akColorN30})},function(e,n){e.exports=a},function(e,n){e.exports=u},function(e,n){e.exports=l},function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.maxTextWidth=n.maxTextWidthUnitless=n.maxWidth=n.maxWidthUnitless=n.buttonWidth=n.buttonWidthUnitless=n.tagHeight=n.tagHeightUnitless=n.fontSize=n.borderRadius=void 0;var r=t(13),o=(n.borderRadius=r.akBorderRadius,n.fontSize=r.akFontSizeDefault,n.tagHeightUnitless=2.5*r.akGridSizeUnitless),i=n.tagHeight=o+"px",a=(n.buttonWidthUnitless=o,n.buttonWidth=i,n.maxWidthUnitless=25*r.akGridSizeUnitless),u=(n.maxWidth=a+"px",n.maxTextWidthUnitless=a-o);n.maxTextWidth=u+"px"},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(3),i=r(o),a=t(4),u=r(a),l=t(5),s=r(l),d=t(6),f=r(d),c=t(7),p=r(c),m=t(8),h=r(m),v=t(16),b=function(e){function n(){return(0,u.default)(this,n),(0,s.default)(this,e.apply(this,arguments))}return(0,f.default)(n,e),n.prototype.render=function(){var e=this.props,n=e.children,t=e.href,r=e.isFocused,o=e.isRemovable,a=e.markedForRemoval,u={isFocused:r,isRemovable:o,markedForRemoval:a};return t?h.default.createElement(v.Link,(0,i.default)({},u,{href:t,tabIndex:"-1"}),n):h.default.createElement(v.Text,u,n)},n}(m.PureComponent);b.propTypes={children:p.default.node.isRequired,href:p.default.string,isFocused:p.default.bool,isRemovable:p.default.bool,markedForRemoval:p.default.bool},n.default=b},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Link=n.Text=void 0;var o=t(11),i=r(o),a=(0,i.default)(["\n  color: ",";\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"],["\n  color: ",";\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"]),u=(0,i.default)(["\n  ","\n"],["\n  ","\n"]),l=(0,i.default)(["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"],["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"]),s=t(12),d=r(s),f=t(13),c=t(14),p=function(e){var n=e.markedForRemoval;return n?f.akColorR500:f.akColorN700},m=f.akHelperMixins.text.truncate(function(e){var n=e.isRemovable;return n?c.maxTextWidthUnitless-c.buttonWidthUnitless+"px":c.maxTextWidth}),h=(0,s.css)(a,p,c.fontSize,f.akGridSizeUnitless/2,f.akGridSizeUnitless/2,m),v=(n.Text=d.default.span(u,h),function(e){var n=e.isFocused;return n?"color: "+f.akColorB400:null});n.Link=d.default.a(l,h,v,f.akColorB400)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(4),i=r(o),a=t(5),u=r(a),l=t(6),s=r(l),d=t(7),f=r(d),c=t(8),p=r(c),m=t(18),h=r(m),v=t(19),b=r(v),g=function(e){function n(){var t,r,o;(0,i.default)(this,n);for(var a=arguments.length,l=Array(a),s=0;s<a;s++)l[s]=arguments[s];return t=r=(0,u.default)(this,e.call.apply(e,[this].concat(l))),r.onKeyPress=function(e){var n=" "===e.key||"Enter"===e.key;n&&(e.stopPropagation(),r.props.onRemoveAction())},r.onMouseOver=function(){r.props.onHoverChange(!0)},r.onMouseOut=function(){r.props.onHoverChange(!1)},o=t,(0,u.default)(r,o)}return(0,s.default)(n,e),n.prototype.render=function(){var e=this.props,n=e.isRounded,t=e.onRemoveAction,r=e.removeText;return p.default.createElement(b.default,{"aria-label":r,isRounded:n,onClick:t,onKeyPress:this.onKeyPress,onMouseOut:this.onMouseOut,onMouseOver:this.onMouseOver,type:"button"},p.default.createElement(h.default,{label:r,size:"small"}))},n}(c.PureComponent);g.propTypes={removeText:f.default.string.isRequired,isRounded:f.default.bool,onHoverChange:f.default.func,onRemoveAction:f.default.func},n.default=g},function(e,n){e.exports=s},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(11),i=r(o),a=(0,i.default)(["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"],["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"]),u=t(12),l=r(u),s=t(13),d=t(14);n.default=l.default.button(a,function(e){var n=e.isRounded;return n?d.buttonWidthUnitless/2+"px":d.borderRadius},s.akColorN500,s.akHelperMixins.focusRing.generate(s.akColorR300),s.akColorR500,s.akHelperMixins.focusRing.default)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0});var o=t(11),i=r(o),a=(0,i.default)(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"],["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"]),u=t(12),l=r(u),s=t(13);n.default=l.default.span(a,s.akGridSizeUnitless/2)},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var n=e.isRemoved,t=void 0;return n&&(t="width: 0; visibility: hidden;"),t}function i(e){var n=e.isRemoving,t=void 0;return n&&(t="animation: "+p+" 250ms forwards; will-change: width;"),t}Object.defineProperty(n,"__esModule",{value:!0});var a=t(11),u=r(a),l=(0,u.default)(["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"],["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"]),s=(0,u.default)(["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"],["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"]),d=t(12),f=r(d),c=t(14),p=(0,d.keyframes)(l,c.maxWidth,.8*c.maxWidthUnitless);n.default=f.default.div(s,i,o)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("@atlaskit/icon/glyph/cross")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","prop-types","react","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles","@atlaskit/icon/glyph/cross"],t):"object"==typeof exports?exports["@atlaskit/tag"]=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("@atlaskit/icon/glyph/cross")):e["@atlaskit/tag"]=t(e["babel-runtime/helpers/extends"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e["prop-types"],e.react,e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"],e["@atlaskit/icon/glyph/cross"])}(this,function(e,t,n,o,r,a,l,i,u,d){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=n(2),a=o(r);t.default=a.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),a=o(r),l=n(4),i=o(l),u=n(5),d=o(u),s=n(6),c=o(s),f=n(7),p=o(f),h=n(8),g=o(h),m=n(9),b=o(m),k=n(17),v=o(k),x=n(19),R=o(x),C=n(22),y=o(C),L=n(23),_=o(L),B=["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"],q=function(e){function t(n){(0,i.default)(this,t);var o=(0,d.default)(this,e.call(this,n));return o.handleRemoveRequest=function(){o.props.onBeforeRemoveAction()&&o.setState({isRemoving:!0,isRemoved:!1})},o.handleRemoveComplete=function(){o.props.onAfterRemoveAction(o.props.text),o.setState({isRemoving:!1,isRemoved:!0})},o.handleHoverChange=function(e){o.setState({markedForRemoval:e})},o.handleFocusChange=function(e){o.setState({isFocused:e})},o.state={isRemoving:!1,isRemoved:!1,markedForRemoval:!1},o}return(0,c.default)(t,e),t.prototype.render=function(){var e=this,t=this.state,n=t.isFocused,o=t.isRemoved,r=t.isRemoving,l=t.markedForRemoval,i=this.props,u=i.appearance,d=i.elemBefore,s=i.href,c=i.removeButtonText,f=i.text,p=i.color,h=B.includes(p)?p:"standard",m=Boolean(c),k="rounded"===u,x={isFocused:n,isRemovable:m,isRemoved:o,isRemoving:r,isRounded:k,markedForRemoval:l,color:h},C=function(t){return r&&e.handleRemoveComplete(t)};return g.default.createElement(_.default,(0,a.default)({},x,{onAnimationEnd:C}),g.default.createElement(b.default,(0,a.default)({},x,{isLink:!!s,onFocusChange:this.handleFocusChange}),d?g.default.createElement(y.default,null,d):null,g.default.createElement(v.default,(0,a.default)({},x,{href:s}),f),m?g.default.createElement(R.default,(0,a.default)({},x,{onHoverChange:this.handleHoverChange,onRemoveAction:this.handleRemoveRequest,removeText:c})):null))},t}(h.PureComponent);q.propTypes={appearance:p.default.oneOf(["default","rounded"]),color:p.default.oneOf(["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"]),elemBefore:p.default.any,text:p.default.string.isRequired,href:p.default.string,removeButtonText:p.default.string,onBeforeRemoveAction:p.default.func,onAfterRemoveAction:p.default.func},q.defaultProps={color:"standard",appearance:"default",elemBefore:null,onAfterRemoveAction:function(){},onBeforeRemoveAction:function(){return!0}},t.default=q},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=r},function(e,t){e.exports=a},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(4),a=o(r),l=n(5),i=o(l),u=n(6),d=o(u),s=n(7),c=o(s),f=n(8),p=o(f),h=n(10),g=o(h),m=(n(16),function(e){function t(){var n,o,r;(0,a.default)(this,t);for(var l=arguments.length,u=Array(l),d=0;d<l;d++)u[d]=arguments[d];return n=o=(0,i.default)(this,e.call.apply(e,[this].concat(u))),o.handleKeyPress=function(e){var t=" "===e.key||"Enter"===e.key;o.chromeRef&&t&&o.chromeRef.querySelector("a").click()},o.handleBlur=function(){o.props.onFocusChange(!1)},o.handleFocus=function(e){e.target===o.chromeRef&&o.props.onFocusChange(!0)},r=n,(0,i.default)(o,r)}return(0,d.default)(t,e),t.prototype.render=function(){var e=this,t=this.props,n=t.children,o=t.isLink,r=t.isRemovable,a=t.isRemoved,l=t.isRemoving,i=t.isRounded,u=t.markedForRemoval,d=t.color,s={innerRef:function(t){return e.chromeRef=t},isRemovable:r,isRemoved:a,isRemoving:l,isRounded:i,markedForRemoval:u,onBlur:this.handleBlur,onFocus:this.handleFocus,onKeyPress:this.handleKeyPress,tabIndex:-1,color:d};return o&&(s.role="link",s.tabIndex=0),p.default.createElement(g.default,s,n)},t}(f.PureComponent));m.propTypes={children:c.default.arrayOf(c.default.any).isRequired,isLink:c.default.bool.isRequired,isRemovable:c.default.bool.isRequired,isRemoved:c.default.bool,isRemoving:c.default.bool,isRounded:c.default.bool,markedForRemoval:c.default.bool.isRequired,onFocusChange:c.default.func.isRequired,color:c.default.oneOf(["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"]).isRequired},t.default=m},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(11),a=o(r),l=(0,a.default)(["\n  ",";\n  background-color: ",";\n  color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n    color: ",";\n  }\n"],["\n  ",";\n  background-color: ",";\n  color: ",";\n  border-radius: ",";\n  cursor: default;\n  display: flex;\n  height: ",";\n  line-height: 1;\n  margin: ","px;\n  padding: 0;\n  overflow: ",";\n\n  &:hover {\n    ",";\n    background-color: ",";\n    color: ",";\n  }\n"]),i=n(12),u=o(i),d=n(13),s=n(14),c=n(15),f=o(c),p=function(e){var t=e.markedForRemoval,n=e.color;return t?d.akColorR500:f.default.tag[n].normal.text};t.default=u.default.span(l,d.akHelperMixins.focusRing.default,function(e){var t=e.markedForRemoval,n=e.color;return t?d.akColorR50:f.default.tag[n].normal.background},p,function(e){var t=e.isRounded;return t?s.buttonWidthUnitless/2+"px":s.borderRadius},s.tagHeight,d.akGridSizeUnitless/2,function(e){var t=e.isRemoved,n=e.isRemoving;return t||n?"hidden":"initial"},d.akHelperMixins.focusRing.none,function(e){var t=e.markedForRemoval,n=e.color;return t?d.akColorR50:f.default.tag[n].hover.background},function(e){var t=e.color;return f.default.tag[t].hover.text})},function(e,t){e.exports=l},function(e,t){e.exports=i},function(e,t){e.exports=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.maxTextWidth=t.maxTextWidthUnitless=t.maxWidth=t.maxWidthUnitless=t.buttonWidth=t.buttonWidthUnitless=t.tagHeight=t.tagHeightUnitless=t.fontSize=t.borderRadius=void 0;var o=n(13),r=(t.borderRadius=o.akBorderRadius,t.fontSize=o.akFontSizeDefault,t.tagHeightUnitless=2.5*o.akGridSizeUnitless),a=t.tagHeight=r+"px",l=(t.buttonWidthUnitless=r,t.buttonWidth=a,t.maxWidthUnitless=25*o.akGridSizeUnitless),i=(t.maxWidth=l+"px",t.maxTextWidthUnitless=l-r);t.maxTextWidth=i+"px"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(13),r={tag:{standard:{normal:{text:o.akColorN700,background:o.akColorN20},hover:{text:o.akColorN700,background:o.akColorN30}},green:{normal:{text:o.akColorN800,background:o.akColorG200},hover:{text:o.akColorB400,background:o.akColorG100}},purple:{normal:{text:o.akColorN800,background:o.akColorP100},hover:{text:o.akColorB400,background:o.akColorP75}},red:{normal:{text:o.akColorN800,background:o.akColorR100},hover:{text:o.akColorB400,background:o.akColorR75}},yellow:{normal:{text:o.akColorN800,background:o.akColorY200},hover:{text:o.akColorB400,background:o.akColorY100}},grey:{normal:{text:o.akColorN0,background:o.akColorN500},hover:{text:o.akColorB400,background:o.akColorN50}},teal:{normal:{text:o.akColorN800,background:o.akColorT200},hover:{text:o.akColorB400,background:o.akColorT100}},blue:{normal:{text:o.akColorN800,background:o.akColorB100},hover:{text:o.akColorB400,background:o.akColorB75}},tealLight:{normal:{text:o.akColorN500,background:o.akColorT100},hover:{text:o.akColorB400,background:o.akColorT75}},blueLight:{normal:{text:o.akColorB500,background:o.akColorB75},hover:{text:o.akColorB400,background:o.akColorB50}},greenLight:{normal:{text:o.akColorG500,background:o.akColorG100},hover:{text:o.akColorB400,background:o.akColorG75}},purpleLight:{normal:{text:o.akColorP500,background:o.akColorP75},hover:{text:o.akColorB400,background:o.akColorP50}},redLight:{normal:{text:o.akColorN500,background:o.akColorR75},hover:{text:o.akColorB400,background:o.akColorR50}},yellowLight:{normal:{text:o.akColorN500,background:o.akColorY100},hover:{text:o.akColorB400,background:o.akColorY75}},greyLight:{normal:{text:o.akColorN500,background:o.akColorN30},hover:{text:o.akColorB400,background:o.akColorN20}}}};t.default=r},function(e,t){"use strict"},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),a=o(r),l=n(4),i=o(l),u=n(5),d=o(u),s=n(6),c=o(s),f=n(7),p=o(f),h=n(8),g=o(h),m=n(18),b=(n(16),function(e){function t(){return(0,i.default)(this,t),(0,d.default)(this,e.apply(this,arguments))}return(0,c.default)(t,e),t.prototype.render=function(){var e=this.props,t=e.children,n=e.href,o=e.isFocused,r=e.isRemovable,l=e.markedForRemoval,i=e.color,u={isFocused:o,isRemovable:r,markedForRemoval:l,color:i};return n?g.default.createElement(m.Link,(0,a.default)({},u,{href:n,tabIndex:"-1"}),t):g.default.createElement(m.Text,u,t)},t}(h.PureComponent));b.propTypes={children:p.default.any.isRequired,href:p.default.string,isFocused:p.default.bool,isRemovable:p.default.bool,markedForRemoval:p.default.bool,color:p.default.oneOf(["standard","green","blue","red","purple","grey","teal","yellow","greenLight","blueLight","redLight","purpleLight","greyLight","tealLight","yellowLight"]).isRequired},t.default=b},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Link=t.Text=void 0;var r=n(11),a=o(r),l=(0,a.default)(["\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"],["\n  font-size: ",";\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ","px;\n  margin-right: ","px;\n  padding: 2px 0;\n  ","\n"]),i=(0,a.default)(["\n  ","\n"],["\n  ","\n"]),u=(0,a.default)(["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"],["\n  ","\n  ","\n  text-decoration: none;\n\n  &:hover {\n    color: ",";\n  }\n"]),d=n(12),s=o(d),c=n(13),f=n(14),p=c.akHelperMixins.text.truncate(function(e){var t=e.isRemovable;return t?f.maxTextWidthUnitless-f.buttonWidthUnitless+"px":f.maxTextWidth}),h=(0,d.css)(l,f.fontSize,c.akGridSizeUnitless/2,c.akGridSizeUnitless/2,p),g=(t.Text=s.default.span(i,h),function(e){var t=e.isFocused;return t?"color: "+c.akColorB400:null});t.Link=s.default.a(u,h,g,c.akColorB400)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(4),a=o(r),l=n(5),i=o(l),u=n(6),d=o(u),s=n(7),c=o(s),f=n(8),p=o(f),h=n(20),g=o(h),m=n(21),b=o(m),k=function(e){function t(){var n,o,r;(0,a.default)(this,t);for(var l=arguments.length,u=Array(l),d=0;d<l;d++)u[d]=arguments[d];return n=o=(0,i.default)(this,e.call.apply(e,[this].concat(u))),o.onKeyPress=function(e){var t=" "===e.key||"Enter"===e.key;t&&(e.stopPropagation(),o.props.onRemoveAction())},o.onMouseOver=function(){o.props.onHoverChange(!0)},o.onMouseOut=function(){o.props.onHoverChange(!1)},r=n,(0,i.default)(o,r)}return(0,d.default)(t,e),t.prototype.render=function(){var e=this.props,t=e.isRounded,n=e.onRemoveAction,o=e.removeText;return p.default.createElement(b.default,{"aria-label":o,isRounded:t,onClick:n,onKeyPress:this.onKeyPress,onMouseOut:this.onMouseOut,onMouseOver:this.onMouseOver,type:"button"},p.default.createElement(g.default,{label:o,size:"small"}))},t}(f.PureComponent);k.propTypes={removeText:c.default.string.isRequired,isRounded:c.default.bool,onHoverChange:c.default.func,onRemoveAction:c.default.func},t.default=k},function(e,t){e.exports=d},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(11),a=o(r),l=(0,a.default)(["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"],["\n  align-items: center;\n  appearance: none;\n  background: none;\n  border: none;\n  border-radius: ",";\n  color: ",";\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n\n  ","\n\n  &:hover {\n    color: ",";\n    ","\n  }\n\n  &::-moz-focus-inner { border: 0; margin: 0; padding: 0; }\n"]),i=n(12),u=o(i),d=n(13),s=n(14);t.default=u.default.button(l,function(e){var t=e.isRounded;return t?s.buttonWidthUnitless/2+"px":s.borderRadius},d.akColorN500,d.akHelperMixins.focusRing.generate(d.akColorR300),d.akColorR500,d.akHelperMixins.focusRing.default)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(11),a=o(r),l=(0,a.default)(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"],["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding-left: ","px;\n"]),i=n(12),u=o(i),d=n(13);t.default=u.default.span(l,d.akGridSizeUnitless/2)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e){var t=e.isRemoved,n=void 0;return t&&(n="width: 0; visibility: hidden;"),n}function a(e){var t=e.isRemoving,n=void 0;return t&&(n="animation: "+p+" 250ms forwards; will-change: width;"),n}Object.defineProperty(t,"__esModule",{value:!0});var l=n(11),i=o(l),u=(0,i.default)(["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"],["\n  0% {\n    animation-timing-function: cubic-bezier(0.23830050393398, 0, 0.25586732616931, 0.79011192334632);\n    max-width: ",";\n  }\n  20% {\n    animation-timing-function: cubic-bezier(0.21787238302442, 0.98324004924648, 0.58694150667646, 1);\n    max-width: ","px;\n  }\n  100% { max-width: 0; }\n"]),d=(0,i.default)(["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"],["\n  box-sizing: border-box;\n  display: inline-block;\n\n  ","\n  ","\n"]),s=n(12),c=o(s),f=n(14),p=(0,s.keyframes)(u,f.maxWidth,.8*f.maxWidthUnitless);t.default=c.default.div(d,a,r)}])});

dist/es/components/Chrome.js

 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
-import PropTypes from 'prop-types';
+import _PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import Span from '../styled/Chrome';
+import { tagColor, ReactElement } from '../types';
 
@@ -43,3 +44,4 @@ var Chrome = function (_PureComponent) {
         isRounded = _props.isRounded,
-        markedForRemoval = _props.markedForRemoval;
+        markedForRemoval = _props.markedForRemoval,
+        color = _props.color;
 
@@ -59,3 +61,4 @@
       onKeyPress: this.handleKeyPress,
-      tabIndex: -1
+      tabIndex: -1,
+      color: color
     };
@@ -79,11 +82,12 @@
 Chrome.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-  isLink: PropTypes.bool.isRequired,
-  isRemovable: PropTypes.bool.isRequired,
-  isRemoved: PropTypes.bool,
-  isRemoving: PropTypes.bool,
-  isRounded: PropTypes.bool,
-  markedForRemoval: PropTypes.bool.isRequired,
-  onFocusChange: PropTypes.func.isRequired
+  children: _PropTypes.arrayOf(_PropTypes.any).isRequired,
+  isLink: _PropTypes.bool.isRequired,
+  isRemovable: _PropTypes.bool.isRequired,
+  isRemoved: _PropTypes.bool,
+  isRemoving: _PropTypes.bool,
+  isRounded: _PropTypes.bool,
+  markedForRemoval: _PropTypes.bool.isRequired,
+  onFocusChange: _PropTypes.func.isRequired,
+  color: _PropTypes.oneOf(['standard', 'green', 'blue', 'red', 'purple', 'grey', 'teal', 'yellow', 'greenLight', 'blueLight', 'redLight', 'purpleLight', 'greyLight', 'tealLight', 'yellowLight']).isRequired
 };
 export default Chrome;

dist/es/components/Content.js

@@ -5,5 +5,6 @@ import _extends from 'babel-runtime/helpers/extends';
 import _inherits from 'babel-runtime/helpers/inherits';
-import PropTypes from 'prop-types';
+import _PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { Link, Text } from '../styled/Content';
+import { ReactElement, tagColor } from '../types';
 
@@ -25,5 +26,6 @@ var Content = function (_PureComponent) {
         isRemovable = _props.isRemovable,
-        markedForRemoval = _props.markedForRemoval;
+        markedForRemoval = _props.markedForRemoval,
+        color = _props.color;
 
-    var styledProps = { isFocused: isFocused, isRemovable: isRemovable, markedForRemoval: markedForRemoval };
+    var styledProps = { isFocused: isFocused, isRemovable: isRemovable, markedForRemoval: markedForRemoval, color: color };
 
@@ -45,8 +47,9 @@ return href ? React.createElement(
 Content.propTypes = {
-  children: PropTypes.node.isRequired,
-  href: PropTypes.string,
-  isFocused: PropTypes.bool,
-  isRemovable: PropTypes.bool,
-  markedForRemoval: PropTypes.bool
+  children: _PropTypes.any.isRequired,
+  href: _PropTypes.string,
+  isFocused: _PropTypes.bool,
+  isRemovable: _PropTypes.bool,
+  markedForRemoval: _PropTypes.bool,
+  color: _PropTypes.oneOf(['standard', 'green', 'blue', 'red', 'purple', 'grey', 'teal', 'yellow', 'greenLight', 'blueLight', 'redLight', 'purpleLight', 'greyLight', 'tealLight', 'yellowLight']).isRequired
 };
 export default Content;

dist/es/components/Remove.js

 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
-import PropTypes from 'prop-types';
+import _PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
@@ -33,3 +33,3 @@ import RemoveIcon from '@atlaskit/icon/glyph/cross';
     }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
+  } // eslint-disable-line react/sort-comp
 
@@ -62,7 +62,7 @@ Remove.prototype.render = function render() {
 Remove.propTypes = {
-  removeText: PropTypes.string.isRequired,
-  isRounded: PropTypes.bool,
-  onHoverChange: PropTypes.func,
-  onRemoveAction: PropTypes.func
+  removeText: _PropTypes.string.isRequired,
+  isRounded: _PropTypes.bool,
+  onHoverChange: _PropTypes.func,
+  onRemoveAction: _PropTypes.func
 };
 export default Remove;

dist/es/components/Tag.js

@@ -5,3 +5,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import _inherits from 'babel-runtime/helpers/inherits';
-import PropTypes from 'prop-types';
+import _PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
@@ -16,5 +16,9 @@
 
+
+var colorList = ['standard', 'green', 'blue', 'red', 'purple', 'grey', 'teal', 'yellow', 'greenLight', 'blueLight', 'redLight', 'purpleLight', 'greyLight', 'tealLight', 'yellowLight'];
+
 var Tag = function (_PureComponent) {
   _inherits(Tag, _PureComponent);
 
+  // eslint-disable-line react/sort-comp
   function Tag(props) {
@@ -50,3 +54,3 @@ _classCallCheck(this, Tag);
     return _this;
-  }
+  } // eslint-disable-line react/sort-comp
 
@@ -66,8 +70,19 @@ Tag.prototype.render = function render() {
         removeButtonText = _props.removeButtonText,
-        text = _props.text;
+        text = _props.text,
+        color = _props.color;
 
 
+    var safeColor = colorList.includes(color) ? color : 'standard';
+
     var isRemovable = Boolean(removeButtonText);
     var isRounded = appearance === 'rounded';
-    var styled = { isFocused: isFocused, isRemovable: isRemovable, isRemoved: isRemoved, isRemoving: isRemoving, isRounded: isRounded, markedForRemoval: markedForRemoval };
+    var styled = {
+      isFocused: isFocused,
+      isRemovable: isRemovable,
+      isRemoved: isRemoved,
+      isRemoving: isRemoving,
+      isRounded: isRounded,
+      markedForRemoval: markedForRemoval,
+      color: safeColor
+    };
     var onAnimationEnd = function onAnimationEnd(e) {
@@ -107,20 +122,23 @@ return isRemoving && _this2.handleRemoveComplete(e);
   /** Set whether tags should be rounded. */
-  appearance: PropTypes.oneOf(['default', 'rounded']),
-  /** Component to be rendered before the Tag. */
-  elemBefore: PropTypes.node,
-  /** Text to be displayed in the tag. */
-  text: PropTypes.string.isRequired,
-  /** uri or path. If provided, the tag will be a link.  */
-  href: PropTypes.string,
-  /** Text display as the aria-label for remove text. Setting this makes the
-  tag removable. */
-  removeButtonText: PropTypes.string,
-  /** Handler to be called before the tag is removed. If it does not return a
-  truthy value, the tag will not be removed. */
-  onBeforeRemoveAction: PropTypes.func,
-  /** Handler to be called after tag is removed. Called with the string 'Post
-  Removal Hook'. */
-  onAfterRemoveAction: PropTypes.func
+  appearance: _PropTypes.oneOf(['default', 'rounded']) /** The color theme to apply, setting both background and text color. */
+  ,
+  color: _PropTypes.oneOf(['standard', 'green', 'blue', 'red', 'purple', 'grey', 'teal', 'yellow', 'greenLight', 'blueLight', 'redLight', 'purpleLight', 'greyLight', 'tealLight', 'yellowLight']) /** Component to be rendered before the Tag. */
+  ,
+  elemBefore: _PropTypes.any /** Text to be displayed in the tag. */
+  ,
+  text: _PropTypes.string.isRequired /** uri or path. If provided, the tag will be a link.  */
+  ,
+  href: _PropTypes.string /** Text display as the aria-label for remove text. Setting this makes the
+                          tag removable. */
+  ,
+  removeButtonText: _PropTypes.string /** Handler to be called before the tag is removed. If it does not return a
+                                      truthy value, the tag will not be removed. */
+  ,
+  onBeforeRemoveAction: _PropTypes.func /** Handler to be called after tag is removed. Called with the string 'Post
+                                        Removal Hook'. */
+  ,
+  onAfterRemoveAction: _PropTypes.func
 };
 Tag.defaultProps = {
+  color: 'standard',
   appearance: 'default',
@@ -127,0 +145,0 @@ elemBefore: null,

dist/es/styled/Chrome.js

 import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
 
-var _templateObject = _taggedTemplateLiteral(['\n  ', ';\n  background-color: ', ';\n  border-radius: ', ';\n  cursor: default;\n  display: flex;\n  height: ', ';\n  line-height: 1;\n  margin: ', 'px;\n  padding: 0;\n  overflow: ', ';\n\n  &:hover {\n    ', ';\n    background-color: ', ';\n  }\n'], ['\n  ', ';\n  background-color: ', ';\n  border-radius: ', ';\n  cursor: default;\n  display: flex;\n  height: ', ';\n  line-height: 1;\n  margin: ', 'px;\n  padding: 0;\n  overflow: ', ';\n\n  &:hover {\n    ', ';\n    background-color: ', ';\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  ', ';\n  background-color: ', ';\n  color: ', ';\n  border-radius: ', ';\n  cursor: default;\n  display: flex;\n  height: ', ';\n  line-height: 1;\n  margin: ', 'px;\n  padding: 0;\n  overflow: ', ';\n\n  &:hover {\n    ', ';\n    background-color: ', ';\n    color: ', ';\n  }\n'], ['\n  ', ';\n  background-color: ', ';\n  color: ', ';\n  border-radius: ', ';\n  cursor: default;\n  display: flex;\n  height: ', ';\n  line-height: 1;\n  margin: ', 'px;\n  padding: 0;\n  overflow: ', ';\n\n  &:hover {\n    ', ';\n    background-color: ', ';\n    color: ', ';\n  }\n']);
 
 import styled from 'styled-components';
-import { akColorN20, akColorN30, akColorR50, akGridSizeUnitless, akHelperMixins } from '@atlaskit/util-shared-styles';
+import { akColorR50, akColorR500, akGridSizeUnitless, akHelperMixins } from '@atlaskit/util-shared-styles';
 
 import { buttonWidthUnitless, borderRadius, tagHeight } from './constants';
+import theme from './theme';
 
-export default styled.span(_templateObject, akHelperMixins.focusRing.default, function (_ref) {
-  var markedForRemoval = _ref.markedForRemoval;
-  return markedForRemoval ? akColorR50 : akColorN20;
-}, function (_ref2) {
-  var isRounded = _ref2.isRounded;
+var getColor = function getColor(_ref) {
+  var markedForRemoval = _ref.markedForRemoval,
+      color = _ref.color;
+  return markedForRemoval ? akColorR500 : theme.tag[color].normal.text;
+};
+
+export default styled.span(_templateObject, akHelperMixins.focusRing.default, function (_ref2) {
+  var markedForRemoval = _ref2.markedForRemoval,
+      color = _ref2.color;
+  return markedForRemoval ? akColorR50 : theme.tag[color].normal.background;
+}, getColor, function (_ref3) {
+  var isRounded = _ref3.isRounded;
   return isRounded ? buttonWidthUnitless / 2 + 'px' : borderRadius;
-}, tagHeight, akGridSizeUnitless / 2, function (_ref3) {
-  var isRemoved = _ref3.isRemoved,
-      isRemoving = _ref3.isRemoving;
+}, tagHeight, akGridSizeUnitless / 2, function (_ref4) {
+  var isRemoved = _ref4.isRemoved,
+      isRemoving = _ref4.isRemoving;
   return isRemoved || isRemoving ? 'hidden' : 'initial';
-}, akHelperMixins.focusRing.none, function (_ref4) {
-  var markedForRemoval = _ref4.markedForRemoval;
-  return markedForRemoval ? akColorR50 : akColorN30;
+}, akHelperMixins.focusRing.none, function (_ref5) {
+  var markedForRemoval = _ref5.markedForRemoval,
+      color = _ref5.color;
+  return markedForRemoval ? akColorR50 : theme.tag[color].hover.background;
+}, function (_ref6) {
+  var color = _ref6.color;
+  return theme.tag[color].hover.text;
 });

dist/es/styled/Content.js

 import _taggedTemplateLiteral from 'babel-runtime/helpers/taggedTemplateLiteral';
 
-var _templateObject = _taggedTemplateLiteral(['\n  color: ', ';\n  font-size: ', ';\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ', 'px;\n  margin-right: ', 'px;\n  padding: 2px 0;\n  ', '\n'], ['\n  color: ', ';\n  font-size: ', ';\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ', 'px;\n  margin-right: ', 'px;\n  padding: 2px 0;\n  ', '\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  font-size: ', ';\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ', 'px;\n  margin-right: ', 'px;\n  padding: 2px 0;\n  ', '\n'], ['\n  font-size: ', ';\n  font-weight: normal;\n  line-height: 1;\n  margin-left: ', 'px;\n  margin-right: ', 'px;\n  padding: 2px 0;\n  ', '\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  ', '\n'], ['\n  ', '\n']),
@@ -8,3 +8,3 @@ _templateObject3 = _taggedTemplateLiteral(['\n  ', '\n  ', '\n  text-decoration: none;\n\n  &:hover {\n    color: ', ';\n  }\n'], ['\n  ', '\n  ', '\n  text-decoration: none;\n\n  &:hover {\n    color: ', ';\n  }\n']);
 import styled, { css } from 'styled-components';
-import { akColorB400, akColorN700, akColorR500, akGridSizeUnitless, akHelperMixins } from '@atlaskit/util-shared-styles';
+import { akColorB400, akGridSizeUnitless, akHelperMixins } from '@atlaskit/util-shared-styles';
 import { buttonWidthUnitless, fontSize, maxTextWidth, maxTextWidthUnitless } from './constants';
@@ -14,11 +14,7 @@
 
-var getColor = function getColor(_ref) {
-  var markedForRemoval = _ref.markedForRemoval;
-  return markedForRemoval ? akColorR500 : akColorN700;
-};
-var getTruncate = akHelperMixins.text.truncate(function (_ref2) {
-  var isRemovable = _ref2.isRemovable;
+var getTruncate = akHelperMixins.text.truncate(function (_ref) {
+  var isRemovable = _ref.isRemovable;
   return isRemovable ? maxTextWidthUnitless - buttonWidthUnitless + 'px' : maxTextWidth;
 });
-var COMMON_STYLES = css(_templateObject, getColor, fontSize, akGridSizeUnitless / 2, akGridSizeUnitless / 2, getTruncate);
+var COMMON_STYLES = css(_templateObject, fontSize, akGridSizeUnitless / 2, akGridSizeUnitless / 2, getTruncate);
 export var Text = styled.span(_templateObject2, COMMON_STYLES);
@@ -28,6 +24,6 @@
 
-var getFocusedStyles = function getFocusedStyles(_ref3) {
-  var isFocused = _ref3.isFocused;
+var getFocusedStyles = function getFocusedStyles(_ref2) {
+  var isFocused = _ref2.isFocused;
   return isFocused ? 'color: ' + akColorB400 : null;
 };
 export var Link = styled.a(_templateObject3, COMMON_STYLES, getFocusedStyles, akColorB400);

package.json

 {
   "name": "@atlaskit/tag",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "config": {
@@ -16,6 +16,8 @@ "access": "public"
   "scripts": {
+    "eslint": "../../build/bin/lint.eslint.sh",
+    "jest": "echo 'yarn run jest is deprecated and removed. please run yarn run test:unit instead.'",
     "prepublish": "../../node_modules/.bin/in-publish && { cd ../.. && npm run prepublish-with-babel/single @atlaskit/tag; } || ../../node_modules/.bin/not-in-publish",
-    "jest": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js",
-    "storybook": "../../build/bin/storybook.single.sh",
-    "eslint": "../../build/bin/lint.eslint.sh"
+    "storybook": "../../build/bin/storybook/run.local.js",
+    "storybook:static": "../../build/bin/storybook/build.static.js",
+    "test:unit": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js"
   },
@@ -28,3 +30,3 @@ "files": [
     "@atlaskit/util-common": "^1.0.0",
-    "@atlaskit/util-shared-styles": "^2.0.0",
+    "@atlaskit/util-shared-styles": "^2.10.0",
     "babel-runtime": "^6.11.6",
@@ -31,0 +33,0 @@ "create-error": "^0.3.1",

README.md

@@ -16,3 +16,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://atlaskit.atlassian.com)
 
-Interact with a [live demo of the @atlaskit/tag component with code examples](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/tag/2.5.2/).
+Interact with a [live demo of the @atlaskit/tag component with code examples](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/tag/2.6.0/).
 
@@ -19,0 +19,0 @@

No alert changes

Improved metrics

Total package byte prevSize

142722

increased by18.58%

Lines of code

1914

increased by38.6%

Dependency changes

• Updated@atlaskit/util-shared-styles@^2.10.0