@atlaskit/tabs - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

CHANGELOG.md

@@ -1,6 +0,16 @@
-<a name="2.4.0"></a>
-# 2.4.0 (2017-07-17)
+<a name="2.4.1"></a>
+## 2.4.1 (2017-07-25)
 
 
 
+<a name="2.4.1"></a>
+## 2.4.1 (2017-07-25)
+
+
+### Bug Fixes
+
+* **build:** use class transform in loose mode in babel to improve load performance in apps ([fde719a](https://bitbucket.org/atlassian/atlaskit/commits/fde719a))
+
+
+
 <a name="2.1.0"></a>
@@ -7,0 +17,0 @@ # 2.1.0 (2017-07-17)

dist/bundle-cjs.js

@@ -81,3 +81,3 @@ module.exports = /******/
     }), exports.TabsStateless = void 0;
-    var _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), _Tabs = __webpack_require__(19), _Tabs2 = _interopRequireDefault(_Tabs);
+    var _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), _Tabs = __webpack_require__(17), _Tabs2 = _interopRequireDefault(_Tabs);
     exports.default = _Tabs2.default, exports.TabsStateless = _TabsStateless2.default;
@@ -96,21 +96,17 @@ }, /* 2 */
     });
-    var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _Tabs = __webpack_require__(10), _Tabs2 = _interopRequireDefault(_Tabs), _TabPane = __webpack_require__(13), _TabPane2 = _interopRequireDefault(_TabPane), _TabsNav = __webpack_require__(17), _TabsNav2 = _interopRequireDefault(_TabsNav), Tabs = function(_PureComponent) {
+    var _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _Tabs = __webpack_require__(8), _Tabs2 = _interopRequireDefault(_Tabs), _TabPane = __webpack_require__(11), _TabPane2 = _interopRequireDefault(_TabPane), _TabsNav = __webpack_require__(15), _TabsNav2 = _interopRequireDefault(_TabsNav), Tabs = function(_PureComponent) {
         function Tabs() {
-            return (0, _classCallCheck3.default)(this, Tabs), (0, _possibleConstructorReturn3.default)(this, (Tabs.__proto__ || (0, 
-            _getPrototypeOf2.default)(Tabs)).apply(this, arguments));
+            return (0, _classCallCheck3.default)(this, Tabs), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
         }
-        return (0, _inherits3.default)(Tabs, _PureComponent), (0, _createClass3.default)(Tabs, [ {
-            key: "render",
-            value: function() {
-                var selectedTabs = this.props.tabs.filter(function(tab) {
-                    return tab.isSelected;
-                }), selectedTab = selectedTabs.length ? _react2.default.createElement(_TabPane2.default, {
-                    isSelected: selectedTabs[0].isSelected
-                }, selectedTabs[0].content) : null;
-                return _react2.default.createElement(_Tabs2.default, null, _react2.default.createElement(_TabsNav2.default, {
-                    onKeyboardNav: this.props.onKeyboardNav,
-                    tabs: this.props.tabs
-                }), selectedTab);
-            }
-        } ]), Tabs;
+        return (0, _inherits3.default)(Tabs, _PureComponent), Tabs.prototype.render = function() {
+            var selectedTabs = this.props.tabs.filter(function(tab) {
+                return tab.isSelected;
+            }), selectedTab = selectedTabs.length ? _react2.default.createElement(_TabPane2.default, {
+                isSelected: selectedTabs[0].isSelected
+            }, selectedTabs[0].content) : null;
+            return _react2.default.createElement(_Tabs2.default, null, _react2.default.createElement(_TabsNav2.default, {
+                onKeyboardNav: this.props.onKeyboardNav,
+                tabs: this.props.tabs
+            }), selectedTab);
+        }, Tabs;
     }(_react.PureComponent);
@@ -133,29 +129,21 @@ Tabs.propTypes = {
 function(module, exports) {
-    module.exports = require("babel-runtime/core-js/object/get-prototype-of");
+    module.exports = require("babel-runtime/helpers/classCallCheck");
 }, /* 4 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/classCallCheck");
+    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
 }, /* 5 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/createClass");
+    module.exports = require("babel-runtime/helpers/inherits");
 }, /* 6 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
+    module.exports = require("react");
 }, /* 7 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/inherits");
+    module.exports = require("prop-types");
 }, /* 8 */
 /***/
-function(module, exports) {
-    module.exports = require("react");
-}, /* 9 */
-/***/
-function(module, exports) {
-    module.exports = require("prop-types");
-}, /* 10 */
-/***/
 function(module, exports, __webpack_require__) {
@@ -171,14 +159,14 @@ "use strict";
     });
-    var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ], [ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), Tabs = _styledComponents2.default.div(_templateObject);
+    var _taggedTemplateLiteral2 = __webpack_require__(9), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ], [ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), Tabs = _styledComponents2.default.div(_templateObject);
     exports.default = Tabs;
-}, /* 11 */
+}, /* 9 */
 /***/
 function(module, exports) {
     module.exports = require("babel-runtime/helpers/taggedTemplateLiteral");
-}, /* 12 */
+}, /* 10 */
 /***/
 function(module, exports) {
     module.exports = require("styled-components");
-}, /* 13 */
+}, /* 11 */
 /***/
@@ -195,17 +183,13 @@ function(module, exports, __webpack_require__) {
     });
-    var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _TabPane = __webpack_require__(14), _TabPane2 = _interopRequireDefault(_TabPane), TabPane = function(_PureComponent) {
+    var _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _TabPane = __webpack_require__(12), _TabPane2 = _interopRequireDefault(_TabPane), TabPane = function(_PureComponent) {
         function TabPane() {
-            return (0, _classCallCheck3.default)(this, TabPane), (0, _possibleConstructorReturn3.default)(this, (TabPane.__proto__ || (0, 
-            _getPrototypeOf2.default)(TabPane)).apply(this, arguments));
+            return (0, _classCallCheck3.default)(this, TabPane), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
         }
-        return (0, _inherits3.default)(TabPane, _PureComponent), (0, _createClass3.default)(TabPane, [ {
-            key: "render",
-            value: function() {
-                return _react2.default.createElement(_TabPane2.default, {
-                    selected: this.props.isSelected,
-                    "aria-hidden": this.props.isSelected ? "false" : "true",
-                    role: "tabpanel"
-                }, this.props.children);
-            }
-        } ]), TabPane;
+        return (0, _inherits3.default)(TabPane, _PureComponent), TabPane.prototype.render = function() {
+            return _react2.default.createElement(_TabPane2.default, {
+                selected: this.props.isSelected,
+                "aria-hidden": this.props.isSelected ? "false" : "true",
+                role: "tabpanel"
+            }, this.props.children);
+        }, TabPane;
     }(_react.PureComponent);
@@ -218,3 +202,3 @@ TabPane.propTypes = {
     }, exports.default = TabPane;
-}, /* 14 */
+}, /* 12 */
 /***/
@@ -231,4 +215,4 @@ function(module, exports, __webpack_require__) {
     });
-    var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _constants = __webpack_require__(15), TabPaneDiv = _styledComponents2.default.div(_templateObject, 2 * _constants.margin, function(_ref) {
+    var _taggedTemplateLiteral2 = __webpack_require__(9), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _constants = __webpack_require__(13), TabPaneDiv = _styledComponents2.default.div(_templateObject, 2 * _constants.margin, function(_ref) {
         var selected = _ref.selected;
@@ -238,3 +222,3 @@ return selected ? "" : "display: none";
     exports.default = TabPaneDiv;
-}, /* 15 */
+}, /* 13 */
 /***/
@@ -246,3 +230,3 @@ function(module, exports, __webpack_require__) {
     }), exports.paddingVertical = exports.paddingHorizontal = exports.margin = exports.lineHeight = exports.fontSize = exports.focusWidth = exports.colorSelected = exports.colorLineDefault = exports.colorLabelDefault = exports.colorHover = exports.colorFocus = exports.colorActive = void 0;
-    var _utilSharedStyles = __webpack_require__(16), paddingVertical = 5, paddingHorizontal = 10, margin = paddingHorizontal / 2, colorLabelDefault = _utilSharedStyles.akColorN500, colorLineDefault = _utilSharedStyles.akColorN30, colorSelected = _utilSharedStyles.akColorB400, colorActive = _utilSharedStyles.akColorB500, colorHover = colorSelected, colorFocus = _utilSharedStyles.akColorB100, focusWidth = 2, lineHeight = 25, fontSize = 14;
+    var _utilSharedStyles = __webpack_require__(14), paddingVertical = 5, paddingHorizontal = 10, margin = paddingHorizontal / 2, colorLabelDefault = _utilSharedStyles.akColorN500, colorLineDefault = _utilSharedStyles.akColorN30, colorSelected = _utilSharedStyles.akColorB400, colorActive = _utilSharedStyles.akColorB500, colorHover = colorSelected, colorFocus = _utilSharedStyles.akColorB100, focusWidth = 2, lineHeight = 25, fontSize = 14;
     exports.colorActive = colorActive, exports.colorFocus = colorFocus, exports.colorHover = colorHover, 
@@ -253,7 +237,7 @@ exports.colorLabelDefault = colorLabelDefault, exports.colorLineDefault = colorLineDefault,
     exports.paddingVertical = paddingVertical;
-}, /* 16 */
+}, /* 14 */
 /***/
 function(module, exports) {
     module.exports = require("@atlaskit/util-shared-styles");
-}, /* 17 */
+}, /* 15 */
 /***/
@@ -270,9 +254,9 @@ function(module, exports, __webpack_require__) {
     });
-    var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _TabsNav = __webpack_require__(18), TabsNav = function(_PureComponent) {
+    var _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _TabsNav = __webpack_require__(16), TabsNav = function(_PureComponent) {
         function TabsNav() {
-            var _ref, _temp, _this, _ret;
+            var _temp, _this, _ret;
             (0, _classCallCheck3.default)(this, TabsNav);
             for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-            return _temp = _this = (0, _possibleConstructorReturn3.default)(this, (_ref = TabsNav.__proto__ || (0, 
-            _getPrototypeOf2.default)(TabsNav)).call.apply(_ref, [ this ].concat(args))), _this.state = {
+            return _temp = _this = (0, _possibleConstructorReturn3.default)(this, _PureComponent.call.apply(_PureComponent, [ this ].concat(args))), 
+            _this.state = {
                 wasKeyboardNav: !1
@@ -287,51 +271,42 @@ }, _this.tabKeyDownHandler = function(e) {
         }
-        return (0, _inherits3.default)(TabsNav, _PureComponent), (0, _createClass3.default)(TabsNav, [ {
-            key: "shouldComponentUpdate",
-            value: function(nextProps, nextState) {
-                // Don't re-render when we are resetting the `wasKeyboardNav` state
-                return !(nextState.wasKeyboardNav !== this.state.wasKeyboardNav && !nextState.wasKeyboardNav);
-            }
-        }, {
-            key: "componentDidUpdate",
-            value: function() {
-                var _this2 = this;
-                // Focus the selected tab if it was selected via keyboard nav
-                this.tabs.forEach(function(tab) {
-                    tab.el && (_this2.state.wasKeyboardNav && tab.isSelected ? (tab.el.focus(), _this2.setState({
-                        wasKeyboardNav: !1
-                    })) : // Ensure that focus does not stay on an unselected tab
-                    tab.el.blur());
-                });
-            }
-        }, {
-            key: "render",
-            value: function() {
-                var _this3 = this;
-                this.tabs = [];
-                var tabs = this.props.tabs;
-                /* eslint-disable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
-                return _react2.default.createElement("div", null, _react2.default.createElement(_TabsNav.TabLabels, {
-                    role: "tablist"
-                }, tabs.map(function(tab, index) {
-                    return _react2.default.createElement(_TabsNav.TabLabel, {
-                        "aria-posinset": index + 1,
-                        "aria-selected": tab.isSelected,
-                        "aria-setsize": tabs.length,
-                        isSelected: tab.isSelected,
-                        key: index,
-                        onClick: tab.onSelect,
-                        onKeyDown: _this3.tabKeyDownHandler,
-                        onMouseDown: _this3.tabMouseDownHandler,
-                        innerRef: function(ref) {
-                            _this3.tabs.push({
-                                el: ref,
-                                isSelected: tab.isSelected
-                            });
-                        },
-                        role: "tab",
-                        tabIndex: tab.isSelected ? 0 : -1
-                    }, tab.label);
-                })));
-            }
-        } ]), TabsNav;
+        return (0, _inherits3.default)(TabsNav, _PureComponent), TabsNav.prototype.shouldComponentUpdate = function(nextProps, nextState) {
+            // Don't re-render when we are resetting the `wasKeyboardNav` state
+            return !(nextState.wasKeyboardNav !== this.state.wasKeyboardNav && !nextState.wasKeyboardNav);
+        }, TabsNav.prototype.componentDidUpdate = function() {
+            var _this2 = this;
+            // Focus the selected tab if it was selected via keyboard nav
+            this.tabs.forEach(function(tab) {
+                tab.el && (_this2.state.wasKeyboardNav && tab.isSelected ? (tab.el.focus(), _this2.setState({
+                    wasKeyboardNav: !1
+                })) : // Ensure that focus does not stay on an unselected tab
+                tab.el.blur());
+            });
+        }, TabsNav.prototype.render = function() {
+            var _this3 = this;
+            this.tabs = [];
+            var tabs = this.props.tabs;
+            /* eslint-disable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
+            return _react2.default.createElement("div", null, _react2.default.createElement(_TabsNav.TabLabels, {
+                role: "tablist"
+            }, tabs.map(function(tab, index) {
+                return _react2.default.createElement(_TabsNav.TabLabel, {
+                    "aria-posinset": index + 1,
+                    "aria-selected": tab.isSelected,
+                    "aria-setsize": tabs.length,
+                    isSelected: tab.isSelected,
+                    key: index,
+                    onClick: tab.onSelect,
+                    onKeyDown: _this3.tabKeyDownHandler,
+                    onMouseDown: _this3.tabMouseDownHandler,
+                    innerRef: function(ref) {
+                        _this3.tabs.push({
+                            el: ref,
+                            isSelected: tab.isSelected
+                        });
+                    },
+                    role: "tab",
+                    tabIndex: tab.isSelected ? 0 : -1
+                }, tab.label);
+            })));
+        }, TabsNav;
     }(_react.PureComponent);
@@ -349,3 +324,3 @@ TabsNav.propTypes = {
     }, exports.default = TabsNav;
-}, /* 18 */
+}, /* 16 */
 /***/
@@ -362,7 +337,7 @@ function(module, exports, __webpack_require__) {
     }), exports.TabLabels = exports.TabLabel = void 0;
-    var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    var _taggedTemplateLiteral2 = __webpack_require__(9), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
     _taggedTemplateLiteral3.default)([ "\n  background-color: ", ";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ], [ "\n  background-color: ", ";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ]), _templateObject2 = (0, 
     _taggedTemplateLiteral3.default)([ "\n  &::after {\n    ", "\n  }\n  color: ", ";\n\n  &::after {\n    background-color: currentcolor;\n  }\n" ], [ "\n  &::after {\n    ", "\n  }\n  color: ", ";\n\n  &::after {\n    background-color: currentcolor;\n  }\n" ]), _templateObject3 = (0, 
     _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ", "\n  }\n" ], [ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ", "\n  }\n" ]), _templateObject4 = (0, 
-    _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ], [ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(16), _constants = __webpack_require__(15), labelsLine = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ], [ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), _constants = __webpack_require__(13), labelsLine = (0, 
     _styledComponents.css)(_templateObject, _constants.colorLineDefault, _constants.paddingHorizontal, _constants.paddingHorizontal), selectedStyles = (0, 
@@ -374,3 +349,3 @@ _styledComponents.css)(_templateObject2, labelsLine, _constants.colorSelected), TabLabels = _styledComponents2.default.ul(_templateObject3, labelsLine), TabLabel = _styledComponents2.default.li(_templateObject4, _constants.colorLabelDefault, _constants.fontSize, _constants.lineHeight, _constants.paddingVertical, _constants.paddingHorizontal, _constants.colorActive, _utilSharedStyles.akBorderRadius, _constants.focusWidth, _constants.colorFocus, function(_ref) {
     exports.TabLabel = TabLabel, exports.TabLabels = TabLabels;
-}, /* 19 */
+}, /* 17 */
 /***/
@@ -387,8 +362,7 @@ function(module, exports, __webpack_require__) {
     });
-    var _extends2 = __webpack_require__(20), _extends3 = _interopRequireDefault(_extends2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), Tabs = function(_PureComponent) {
+    var _extends2 = __webpack_require__(18), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), Tabs = function(_PureComponent) {
         function Tabs(props) {
             (0, _classCallCheck3.default)(this, Tabs);
             // Set the selected tab to the first tab with defaultSelected provided
-            var _this = (0, _possibleConstructorReturn3.default)(this, (Tabs.__proto__ || (0, 
-            _getPrototypeOf2.default)(Tabs)).call(this, props));
+            var _this = (0, _possibleConstructorReturn3.default)(this, _PureComponent.call(this, props));
             _this.getTabs = function() {
@@ -426,11 +400,8 @@ return _this.props.tabs.map(function(tab, index) {
         }
-        return (0, _inherits3.default)(Tabs, _PureComponent), (0, _createClass3.default)(Tabs, [ {
-            key: "render",
-            value: function() {
-                return _react2.default.createElement(_TabsStateless2.default, {
-                    onKeyboardNav: this.tabKeyboardNavHandler,
-                    tabs: this.getTabs()
-                });
-            }
-        } ]), Tabs;
+        return (0, _inherits3.default)(Tabs, _PureComponent), Tabs.prototype.render = function() {
+            return _react2.default.createElement(_TabsStateless2.default, {
+                onKeyboardNav: this.tabKeyboardNavHandler,
+                tabs: this.getTabs()
+            });
+        }, Tabs;
     }(_react.PureComponent);
@@ -450,3 +421,3 @@ Tabs.propTypes = {
     }, exports.default = Tabs;
-}, /* 20 */
+}, /* 18 */
 /***/
@@ -453,0 +424,0 @@ function(module, exports) {

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=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.TabsStateless=void 0;var r=n(2),a=o(r),l=n(19),i=o(l);t.default=i.default,t.TabsStateless=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),s=o(u),d=n(6),f=o(d),c=n(7),p=o(c),b=n(8),h=o(b),v=n(9),x=o(v),y=n(10),g=o(y),m=n(13),_=o(m),w=n(17),S=o(w),k=function(e){function t(){return(0,i.default)(this,t),(0,f.default)(this,(t.__proto__||(0,a.default)(t)).apply(this,arguments))}return(0,p.default)(t,e),(0,s.default)(t,[{key:"render",value:function(){var e=this.props.tabs.filter(function(e){return e.isSelected}),t=e.length?h.default.createElement(_.default,{isSelected:e[0].isSelected},e[0].content):null;return h.default.createElement(g.default,null,h.default.createElement(S.default,{onKeyboardNav:this.props.onKeyboardNav,tabs:this.props.tabs}),t)}}]),t}(b.PureComponent);k.propTypes={onKeyboardNav:x.default.func.isRequired,tabs:x.default.arrayOf(x.default.shape({content:x.default.node,isSelected:x.default.bool,label:x.default.node.isRequired,onSelect:x.default.func.isRequired}))},k.defaultProps={tabs:[]},t.default=k},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("prop-types")},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  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"],["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"]),i=n(12),u=o(i),s=u.default.div(l);t.default=s},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("styled-components")},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),s=o(u),d=n(6),f=o(d),c=n(7),p=o(c),b=n(8),h=o(b),v=n(9),x=o(v),y=n(14),g=o(y),m=function(e){function t(){return(0,i.default)(this,t),(0,f.default)(this,(t.__proto__||(0,a.default)(t)).apply(this,arguments))}return(0,p.default)(t,e),(0,s.default)(t,[{key:"render",value:function(){return h.default.createElement(g.default,{selected:this.props.isSelected,"aria-hidden":this.props.isSelected?"false":"true",role:"tabpanel"},this.props.children)}}]),t}(b.PureComponent);m.propTypes={children:x.default.node,isSelected:x.default.bool},m.defaultProps={isSelected:!1},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  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"],["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"]),i=n(12),u=o(i),s=n(15),d=u.default.div(l,2*s.margin,function(e){var t=e.selected;return t?"":"display: none"});t.default=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.paddingVertical=t.paddingHorizontal=t.margin=t.lineHeight=t.fontSize=t.focusWidth=t.colorSelected=t.colorLineDefault=t.colorLabelDefault=t.colorHover=t.colorFocus=t.colorActive=void 0;var o=n(16),r=5,a=10,l=a/2,i=o.akColorN500,u=o.akColorN30,s=o.akColorB400,d=o.akColorB500,f=s,c=o.akColorB100,p=2,b=25,h=14;t.colorActive=d,t.colorFocus=c,t.colorHover=f,t.colorLabelDefault=i,t.colorLineDefault=u,t.colorSelected=s,t.focusWidth=p,t.fontSize=h,t.lineHeight=b,t.margin=l,t.paddingHorizontal=a,t.paddingVertical=r},function(e,t){e.exports=require("@atlaskit/util-shared-styles")},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),s=o(u),d=n(6),f=o(d),c=n(7),p=o(c),b=n(8),h=o(b),v=n(9),x=o(v),y=n(18),g=function(e){function t(){var e,n,o,r;(0,i.default)(this,t);for(var l=arguments.length,u=Array(l),s=0;s<l;s++)u[s]=arguments[s];return n=o=(0,f.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(u))),o.state={wasKeyboardNav:!1},o.tabKeyDownHandler=function(e){o.setState({wasKeyboardNav:!0}),o.props.onKeyboardNav(e.key)},o.tabMouseDownHandler=function(e){return e.preventDefault()},r=n,(0,f.default)(o,r)}return(0,p.default)(t,e),(0,s.default)(t,[{key:"shouldComponentUpdate",value:function(e,t){return!(t.wasKeyboardNav!==this.state.wasKeyboardNav&&!t.wasKeyboardNav)}},{key:"componentDidUpdate",value:function(){var e=this;this.tabs.forEach(function(t){t.el&&(e.state.wasKeyboardNav&&t.isSelected?(t.el.focus(),e.setState({wasKeyboardNav:!1})):t.el.blur())})}},{key:"render",value:function(){var e=this;this.tabs=[];var t=this.props.tabs;return h.default.createElement("div",null,h.default.createElement(y.TabLabels,{role:"tablist"},t.map(function(n,o){return h.default.createElement(y.TabLabel,{"aria-posinset":o+1,"aria-selected":n.isSelected,"aria-setsize":t.length,isSelected:n.isSelected,key:o,onClick:n.onSelect,onKeyDown:e.tabKeyDownHandler,onMouseDown:e.tabMouseDownHandler,innerRef:function(t){e.tabs.push({el:t,isSelected:n.isSelected})},role:"tab",tabIndex:n.isSelected?0:-1},n.label)})))}}]),t}(b.PureComponent);g.propTypes={onKeyboardNav:x.default.func.isRequired,tabs:x.default.arrayOf(x.default.shape({content:x.default.node,label:x.default.string.isRequired,onSelect:x.default.func.isRequired,isSelected:x.default.bool}))},g.defaultProps={tabs:[]},t.default=g},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabLabels=t.TabLabel=void 0;var r=n(11),a=o(r),l=(0,a.default)(["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"],["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"]),i=(0,a.default)(["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"],["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"]),u=(0,a.default)(["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"],["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"]),s=(0,a.default)(["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"],["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"]),d=n(12),f=o(d),c=n(16),p=n(15),b=(0,d.css)(l,p.colorLineDefault,p.paddingHorizontal,p.paddingHorizontal),h=(0,d.css)(i,b,p.colorSelected),v=f.default.ul(u,b),x=f.default.li(s,p.colorLabelDefault,p.fontSize,p.lineHeight,p.paddingVertical,p.paddingHorizontal,p.colorActive,c.akBorderRadius,p.focusWidth,p.colorFocus,function(e){var t=e.isSelected;return t?h:""});t.TabLabel=x,t.TabLabels=v},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(20),a=o(r),l=n(3),i=o(l),u=n(4),s=o(u),d=n(5),f=o(d),c=n(6),p=o(c),b=n(7),h=o(b),v=n(8),x=o(v),y=n(9),g=o(y),m=n(2),_=o(m),w=function(e){function t(e){(0,s.default)(this,t);var n=(0,p.default)(this,(t.__proto__||(0,i.default)(t)).call(this,e));n.getTabs=function(){return n.props.tabs.map(function(e,t){return(0,a.default)({},e,{isSelected:t===n.state.selectedTab,onKeyboardNav:n.tabKeyboardNavHandler,onSelect:function(){return n.tabSelectHandler(t)}})})},n.tabSelectHandler=function(e){n.props.onSelect(e),n.setState({selectedTab:e})},n.tabKeyboardNavHandler=function(e){var t=n.state.selectedTab;if(null!==t){var o=t;"ArrowLeft"===e?o=t-1<0?0:t-1:"ArrowRight"===e&&(o=t+1>n.props.tabs.length-1?n.props.tabs.length-1:t+1),o!==t&&n.tabSelectHandler(o)}};var o=null;if(e)for(var r=0;r<e.tabs.length;r++)if(e.tabs[r].defaultSelected){o=r;break}return n.state={selectedTab:o},n}return(0,h.default)(t,e),(0,f.default)(t,[{key:"render",value:function(){return x.default.createElement(_.default,{onKeyboardNav:this.tabKeyboardNavHandler,tabs:this.getTabs()})}}]),t}(v.PureComponent);w.propTypes={onSelect:g.default.func,tabs:g.default.arrayOf(g.default.shape({content:g.default.node,defaultSelected:g.default.bool,label:g.default.node.isRequired}))},w.defaultProps={onSelect:function(){},tabs:[]},t.default=w},function(e,t){e.exports=require("babel-runtime/helpers/extends")}]);
+module.exports=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.TabsStateless=void 0;var r=n(2),a=o(r),l=n(17),i=o(l);t.default=i.default,t.TabsStateless=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),s=o(u),d=n(6),f=o(d),c=n(7),p=o(c),b=n(8),h=o(b),v=n(11),x=o(v),y=n(15),g=o(y),m=function(e){function t(){return(0,a.default)(this,t),(0,i.default)(this,e.apply(this,arguments))}return(0,s.default)(t,e),t.prototype.render=function(){var e=this.props.tabs.filter(function(e){return e.isSelected}),t=e.length?f.default.createElement(x.default,{isSelected:e[0].isSelected},e[0].content):null;return f.default.createElement(h.default,null,f.default.createElement(g.default,{onKeyboardNav:this.props.onKeyboardNav,tabs:this.props.tabs}),t)},t}(d.PureComponent);m.propTypes={onKeyboardNav:p.default.func.isRequired,tabs:p.default.arrayOf(p.default.shape({content:p.default.node,isSelected:p.default.bool,label:p.default.node.isRequired,onSelect:p.default.func.isRequired}))},m.defaultProps={tabs:[]},t.default=m},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("prop-types")},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(9),a=o(r),l=(0,a.default)(["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"],["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"]),i=n(10),u=o(i),s=u.default.div(l);t.default=s},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("styled-components")},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),s=o(u),d=n(6),f=o(d),c=n(7),p=o(c),b=n(12),h=o(b),v=function(e){function t(){return(0,a.default)(this,t),(0,i.default)(this,e.apply(this,arguments))}return(0,s.default)(t,e),t.prototype.render=function(){return f.default.createElement(h.default,{selected:this.props.isSelected,"aria-hidden":this.props.isSelected?"false":"true",role:"tabpanel"},this.props.children)},t}(d.PureComponent);v.propTypes={children:p.default.node,isSelected:p.default.bool},v.defaultProps={isSelected:!1},t.default=v},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(9),a=o(r),l=(0,a.default)(["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"],["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"]),i=n(10),u=o(i),s=n(13),d=u.default.div(l,2*s.margin,function(e){var t=e.selected;return t?"":"display: none"});t.default=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.paddingVertical=t.paddingHorizontal=t.margin=t.lineHeight=t.fontSize=t.focusWidth=t.colorSelected=t.colorLineDefault=t.colorLabelDefault=t.colorHover=t.colorFocus=t.colorActive=void 0;var o=n(14),r=5,a=10,l=a/2,i=o.akColorN500,u=o.akColorN30,s=o.akColorB400,d=o.akColorB500,f=s,c=o.akColorB100,p=2,b=25,h=14;t.colorActive=d,t.colorFocus=c,t.colorHover=f,t.colorLabelDefault=i,t.colorLineDefault=u,t.colorSelected=s,t.focusWidth=p,t.fontSize=h,t.lineHeight=b,t.margin=l,t.paddingHorizontal=a,t.paddingVertical=r},function(e,t){e.exports=require("@atlaskit/util-shared-styles")},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),s=o(u),d=n(6),f=o(d),c=n(7),p=o(c),b=n(16),h=function(e){function t(){var n,o,r;(0,a.default)(this,t);for(var l=arguments.length,u=Array(l),s=0;s<l;s++)u[s]=arguments[s];return n=o=(0,i.default)(this,e.call.apply(e,[this].concat(u))),o.state={wasKeyboardNav:!1},o.tabKeyDownHandler=function(e){o.setState({wasKeyboardNav:!0}),o.props.onKeyboardNav(e.key)},o.tabMouseDownHandler=function(e){return e.preventDefault()},r=n,(0,i.default)(o,r)}return(0,s.default)(t,e),t.prototype.shouldComponentUpdate=function(e,t){return!(t.wasKeyboardNav!==this.state.wasKeyboardNav&&!t.wasKeyboardNav)},t.prototype.componentDidUpdate=function(){var e=this;this.tabs.forEach(function(t){t.el&&(e.state.wasKeyboardNav&&t.isSelected?(t.el.focus(),e.setState({wasKeyboardNav:!1})):t.el.blur())})},t.prototype.render=function(){var e=this;this.tabs=[];var t=this.props.tabs;return f.default.createElement("div",null,f.default.createElement(b.TabLabels,{role:"tablist"},t.map(function(n,o){return f.default.createElement(b.TabLabel,{"aria-posinset":o+1,"aria-selected":n.isSelected,"aria-setsize":t.length,isSelected:n.isSelected,key:o,onClick:n.onSelect,onKeyDown:e.tabKeyDownHandler,onMouseDown:e.tabMouseDownHandler,innerRef:function(t){e.tabs.push({el:t,isSelected:n.isSelected})},role:"tab",tabIndex:n.isSelected?0:-1},n.label)})))},t}(d.PureComponent);h.propTypes={onKeyboardNav:p.default.func.isRequired,tabs:p.default.arrayOf(p.default.shape({content:p.default.node,label:p.default.string.isRequired,onSelect:p.default.func.isRequired,isSelected:p.default.bool}))},h.defaultProps={tabs:[]},t.default=h},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabLabels=t.TabLabel=void 0;var r=n(9),a=o(r),l=(0,a.default)(["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"],["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"]),i=(0,a.default)(["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"],["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"]),u=(0,a.default)(["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"],["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"]),s=(0,a.default)(["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"],["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"]),d=n(10),f=o(d),c=n(14),p=n(13),b=(0,d.css)(l,p.colorLineDefault,p.paddingHorizontal,p.paddingHorizontal),h=(0,d.css)(i,b,p.colorSelected),v=f.default.ul(u,b),x=f.default.li(s,p.colorLabelDefault,p.fontSize,p.lineHeight,p.paddingVertical,p.paddingHorizontal,p.colorActive,c.akBorderRadius,p.focusWidth,p.colorFocus,function(e){var t=e.isSelected;return t?h:""});t.TabLabel=x,t.TabLabels=v},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(18),a=o(r),l=n(3),i=o(l),u=n(4),s=o(u),d=n(5),f=o(d),c=n(6),p=o(c),b=n(7),h=o(b),v=n(2),x=o(v),y=function(e){function t(n){(0,i.default)(this,t);var o=(0,s.default)(this,e.call(this,n));o.getTabs=function(){return o.props.tabs.map(function(e,t){return(0,a.default)({},e,{isSelected:t===o.state.selectedTab,onKeyboardNav:o.tabKeyboardNavHandler,onSelect:function(){return o.tabSelectHandler(t)}})})},o.tabSelectHandler=function(e){o.props.onSelect(e),o.setState({selectedTab:e})},o.tabKeyboardNavHandler=function(e){var t=o.state.selectedTab;if(null!==t){var n=t;"ArrowLeft"===e?n=t-1<0?0:t-1:"ArrowRight"===e&&(n=t+1>o.props.tabs.length-1?o.props.tabs.length-1:t+1),n!==t&&o.tabSelectHandler(n)}};var r=null;if(n)for(var l=0;l<n.tabs.length;l++)if(n.tabs[l].defaultSelected){r=l;break}return o.state={selectedTab:r},o}return(0,f.default)(t,e),t.prototype.render=function(){return p.default.createElement(x.default,{onKeyboardNav:this.tabKeyboardNavHandler,tabs:this.getTabs()})},t}(c.PureComponent);y.propTypes={onSelect:h.default.func,tabs:h.default.arrayOf(h.default.shape({content:h.default.node,defaultSelected:h.default.bool,label:h.default.node.isRequired}))},y.defaultProps={onSelect:function(){},tabs:[]},t.default=y},function(e,t){e.exports=require("babel-runtime/helpers/extends")}]);

dist/bundle.js

 !function(root, factory) {
-    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("prop-types"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles"), require("babel-runtime/helpers/extends")) : "function" == typeof define && define.amd ? define([ "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "prop-types", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/util-shared-styles", "babel-runtime/helpers/extends" ], factory) : "object" == typeof exports ? exports["@atlaskit/tabs"] = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("prop-types"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles"), require("babel-runtime/helpers/extends")) : root["@atlaskit/tabs"] = factory(root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.react, root["prop-types"], root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/util-shared-styles"], root["babel-runtime/helpers/extends"]);
-}(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_9__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_16__, __WEBPACK_EXTERNAL_MODULE_20__) {
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("prop-types"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles"), require("babel-runtime/helpers/extends")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "prop-types", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/util-shared-styles", "babel-runtime/helpers/extends" ], factory) : "object" == typeof exports ? exports["@atlaskit/tabs"] = factory(require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("prop-types"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/util-shared-styles"), require("babel-runtime/helpers/extends")) : root["@atlaskit/tabs"] = factory(root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.react, root["prop-types"], root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/util-shared-styles"], root["babel-runtime/helpers/extends"]);
+}(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_9__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_18__) {
     /******/
@@ -84,3 +84,3 @@ return function(modules) {
         }), exports.TabsStateless = void 0;
-        var _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), _Tabs = __webpack_require__(19), _Tabs2 = _interopRequireDefault(_Tabs);
+        var _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), _Tabs = __webpack_require__(17), _Tabs2 = _interopRequireDefault(_Tabs);
         exports.default = _Tabs2.default, exports.TabsStateless = _TabsStateless2.default;
@@ -99,21 +99,17 @@ }, /* 2 */
         });
-        var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _Tabs = __webpack_require__(10), _Tabs2 = _interopRequireDefault(_Tabs), _TabPane = __webpack_require__(13), _TabPane2 = _interopRequireDefault(_TabPane), _TabsNav = __webpack_require__(17), _TabsNav2 = _interopRequireDefault(_TabsNav), Tabs = function(_PureComponent) {
+        var _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _Tabs = __webpack_require__(8), _Tabs2 = _interopRequireDefault(_Tabs), _TabPane = __webpack_require__(11), _TabPane2 = _interopRequireDefault(_TabPane), _TabsNav = __webpack_require__(15), _TabsNav2 = _interopRequireDefault(_TabsNav), Tabs = function(_PureComponent) {
             function Tabs() {
-                return (0, _classCallCheck3.default)(this, Tabs), (0, _possibleConstructorReturn3.default)(this, (Tabs.__proto__ || (0, 
-                _getPrototypeOf2.default)(Tabs)).apply(this, arguments));
+                return (0, _classCallCheck3.default)(this, Tabs), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
             }
-            return (0, _inherits3.default)(Tabs, _PureComponent), (0, _createClass3.default)(Tabs, [ {
-                key: "render",
-                value: function() {
-                    var selectedTabs = this.props.tabs.filter(function(tab) {
-                        return tab.isSelected;
-                    }), selectedTab = selectedTabs.length ? _react2.default.createElement(_TabPane2.default, {
-                        isSelected: selectedTabs[0].isSelected
-                    }, selectedTabs[0].content) : null;
-                    return _react2.default.createElement(_Tabs2.default, null, _react2.default.createElement(_TabsNav2.default, {
-                        onKeyboardNav: this.props.onKeyboardNav,
-                        tabs: this.props.tabs
-                    }), selectedTab);
-                }
-            } ]), Tabs;
+            return (0, _inherits3.default)(Tabs, _PureComponent), Tabs.prototype.render = function() {
+                var selectedTabs = this.props.tabs.filter(function(tab) {
+                    return tab.isSelected;
+                }), selectedTab = selectedTabs.length ? _react2.default.createElement(_TabPane2.default, {
+                    isSelected: selectedTabs[0].isSelected
+                }, selectedTabs[0].content) : null;
+                return _react2.default.createElement(_Tabs2.default, null, _react2.default.createElement(_TabsNav2.default, {
+                    onKeyboardNav: this.props.onKeyboardNav,
+                    tabs: this.props.tabs
+                }), selectedTab);
+            }, Tabs;
         }(_react.PureComponent);
@@ -155,10 +151,2 @@ Tabs.propTypes = {
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
-    }, /* 9 */
-    /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
-    }, /* 10 */
-    /***/
     function(module, exports, __webpack_require__) {
@@ -174,14 +162,14 @@ "use strict";
         });
-        var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ], [ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), Tabs = _styledComponents2.default.div(_templateObject);
+        var _taggedTemplateLiteral2 = __webpack_require__(9), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ], [ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), Tabs = _styledComponents2.default.div(_templateObject);
         exports.default = Tabs;
-    }, /* 11 */
+    }, /* 9 */
     /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
-    }, /* 12 */
+        module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
+    }, /* 10 */
     /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_12__;
-    }, /* 13 */
+        module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+    }, /* 11 */
     /***/
@@ -198,17 +186,13 @@ function(module, exports, __webpack_require__) {
         });
-        var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _TabPane = __webpack_require__(14), _TabPane2 = _interopRequireDefault(_TabPane), TabPane = function(_PureComponent) {
+        var _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _TabPane = __webpack_require__(12), _TabPane2 = _interopRequireDefault(_TabPane), TabPane = function(_PureComponent) {
             function TabPane() {
-                return (0, _classCallCheck3.default)(this, TabPane), (0, _possibleConstructorReturn3.default)(this, (TabPane.__proto__ || (0, 
-                _getPrototypeOf2.default)(TabPane)).apply(this, arguments));
+                return (0, _classCallCheck3.default)(this, TabPane), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
             }
-            return (0, _inherits3.default)(TabPane, _PureComponent), (0, _createClass3.default)(TabPane, [ {
-                key: "render",
-                value: function() {
-                    return _react2.default.createElement(_TabPane2.default, {
-                        selected: this.props.isSelected,
-                        "aria-hidden": this.props.isSelected ? "false" : "true",
-                        role: "tabpanel"
-                    }, this.props.children);
-                }
-            } ]), TabPane;
+            return (0, _inherits3.default)(TabPane, _PureComponent), TabPane.prototype.render = function() {
+                return _react2.default.createElement(_TabPane2.default, {
+                    selected: this.props.isSelected,
+                    "aria-hidden": this.props.isSelected ? "false" : "true",
+                    role: "tabpanel"
+                }, this.props.children);
+            }, TabPane;
         }(_react.PureComponent);
@@ -221,3 +205,3 @@ TabPane.propTypes = {
         }, exports.default = TabPane;
-    }, /* 14 */
+    }, /* 12 */
     /***/
@@ -234,4 +218,4 @@ function(module, exports, __webpack_require__) {
         });
-        var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _constants = __webpack_require__(15), TabPaneDiv = _styledComponents2.default.div(_templateObject, 2 * _constants.margin, function(_ref) {
+        var _taggedTemplateLiteral2 = __webpack_require__(9), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ", "px;\n  ", "\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _constants = __webpack_require__(13), TabPaneDiv = _styledComponents2.default.div(_templateObject, 2 * _constants.margin, function(_ref) {
             var selected = _ref.selected;
@@ -241,3 +225,3 @@ return selected ? "" : "display: none";
         exports.default = TabPaneDiv;
-    }, /* 15 */
+    }, /* 13 */
     /***/
@@ -249,3 +233,3 @@ function(module, exports, __webpack_require__) {
         }), exports.paddingVertical = exports.paddingHorizontal = exports.margin = exports.lineHeight = exports.fontSize = exports.focusWidth = exports.colorSelected = exports.colorLineDefault = exports.colorLabelDefault = exports.colorHover = exports.colorFocus = exports.colorActive = void 0;
-        var _utilSharedStyles = __webpack_require__(16), paddingVertical = 5, paddingHorizontal = 10, margin = paddingHorizontal / 2, colorLabelDefault = _utilSharedStyles.akColorN500, colorLineDefault = _utilSharedStyles.akColorN30, colorSelected = _utilSharedStyles.akColorB400, colorActive = _utilSharedStyles.akColorB500, colorHover = colorSelected, colorFocus = _utilSharedStyles.akColorB100, focusWidth = 2, lineHeight = 25, fontSize = 14;
+        var _utilSharedStyles = __webpack_require__(14), paddingVertical = 5, paddingHorizontal = 10, margin = paddingHorizontal / 2, colorLabelDefault = _utilSharedStyles.akColorN500, colorLineDefault = _utilSharedStyles.akColorN30, colorSelected = _utilSharedStyles.akColorB400, colorActive = _utilSharedStyles.akColorB500, colorHover = colorSelected, colorFocus = _utilSharedStyles.akColorB100, focusWidth = 2, lineHeight = 25, fontSize = 14;
         exports.colorActive = colorActive, exports.colorFocus = colorFocus, exports.colorHover = colorHover, 
@@ -256,7 +240,7 @@ exports.colorLabelDefault = colorLabelDefault, exports.colorLineDefault = colorLineDefault,
         exports.paddingVertical = paddingVertical;
-    }, /* 16 */
+    }, /* 14 */
     /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_16__;
-    }, /* 17 */
+        module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
+    }, /* 15 */
     /***/
@@ -273,9 +257,9 @@ function(module, exports, __webpack_require__) {
         });
-        var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _TabsNav = __webpack_require__(18), TabsNav = function(_PureComponent) {
+        var _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _TabsNav = __webpack_require__(16), TabsNav = function(_PureComponent) {
             function TabsNav() {
-                var _ref, _temp, _this, _ret;
+                var _temp, _this, _ret;
                 (0, _classCallCheck3.default)(this, TabsNav);
                 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-                return _temp = _this = (0, _possibleConstructorReturn3.default)(this, (_ref = TabsNav.__proto__ || (0, 
-                _getPrototypeOf2.default)(TabsNav)).call.apply(_ref, [ this ].concat(args))), _this.state = {
+                return _temp = _this = (0, _possibleConstructorReturn3.default)(this, _PureComponent.call.apply(_PureComponent, [ this ].concat(args))), 
+                _this.state = {
                     wasKeyboardNav: !1
@@ -290,51 +274,42 @@ }, _this.tabKeyDownHandler = function(e) {
             }
-            return (0, _inherits3.default)(TabsNav, _PureComponent), (0, _createClass3.default)(TabsNav, [ {
-                key: "shouldComponentUpdate",
-                value: function(nextProps, nextState) {
-                    // Don't re-render when we are resetting the `wasKeyboardNav` state
-                    return !(nextState.wasKeyboardNav !== this.state.wasKeyboardNav && !nextState.wasKeyboardNav);
-                }
-            }, {
-                key: "componentDidUpdate",
-                value: function() {
-                    var _this2 = this;
-                    // Focus the selected tab if it was selected via keyboard nav
-                    this.tabs.forEach(function(tab) {
-                        tab.el && (_this2.state.wasKeyboardNav && tab.isSelected ? (tab.el.focus(), _this2.setState({
-                            wasKeyboardNav: !1
-                        })) : // Ensure that focus does not stay on an unselected tab
-                        tab.el.blur());
-                    });
-                }
-            }, {
-                key: "render",
-                value: function() {
-                    var _this3 = this;
-                    this.tabs = [];
-                    var tabs = this.props.tabs;
-                    /* eslint-disable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
-                    return _react2.default.createElement("div", null, _react2.default.createElement(_TabsNav.TabLabels, {
-                        role: "tablist"
-                    }, tabs.map(function(tab, index) {
-                        return _react2.default.createElement(_TabsNav.TabLabel, {
-                            "aria-posinset": index + 1,
-                            "aria-selected": tab.isSelected,
-                            "aria-setsize": tabs.length,
-                            isSelected: tab.isSelected,
-                            key: index,
-                            onClick: tab.onSelect,
-                            onKeyDown: _this3.tabKeyDownHandler,
-                            onMouseDown: _this3.tabMouseDownHandler,
-                            innerRef: function(ref) {
-                                _this3.tabs.push({
-                                    el: ref,
-                                    isSelected: tab.isSelected
-                                });
-                            },
-                            role: "tab",
-                            tabIndex: tab.isSelected ? 0 : -1
-                        }, tab.label);
-                    })));
-                }
-            } ]), TabsNav;
+            return (0, _inherits3.default)(TabsNav, _PureComponent), TabsNav.prototype.shouldComponentUpdate = function(nextProps, nextState) {
+                // Don't re-render when we are resetting the `wasKeyboardNav` state
+                return !(nextState.wasKeyboardNav !== this.state.wasKeyboardNav && !nextState.wasKeyboardNav);
+            }, TabsNav.prototype.componentDidUpdate = function() {
+                var _this2 = this;
+                // Focus the selected tab if it was selected via keyboard nav
+                this.tabs.forEach(function(tab) {
+                    tab.el && (_this2.state.wasKeyboardNav && tab.isSelected ? (tab.el.focus(), _this2.setState({
+                        wasKeyboardNav: !1
+                    })) : // Ensure that focus does not stay on an unselected tab
+                    tab.el.blur());
+                });
+            }, TabsNav.prototype.render = function() {
+                var _this3 = this;
+                this.tabs = [];
+                var tabs = this.props.tabs;
+                /* eslint-disable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
+                return _react2.default.createElement("div", null, _react2.default.createElement(_TabsNav.TabLabels, {
+                    role: "tablist"
+                }, tabs.map(function(tab, index) {
+                    return _react2.default.createElement(_TabsNav.TabLabel, {
+                        "aria-posinset": index + 1,
+                        "aria-selected": tab.isSelected,
+                        "aria-setsize": tabs.length,
+                        isSelected: tab.isSelected,
+                        key: index,
+                        onClick: tab.onSelect,
+                        onKeyDown: _this3.tabKeyDownHandler,
+                        onMouseDown: _this3.tabMouseDownHandler,
+                        innerRef: function(ref) {
+                            _this3.tabs.push({
+                                el: ref,
+                                isSelected: tab.isSelected
+                            });
+                        },
+                        role: "tab",
+                        tabIndex: tab.isSelected ? 0 : -1
+                    }, tab.label);
+                })));
+            }, TabsNav;
         }(_react.PureComponent);
@@ -352,3 +327,3 @@ TabsNav.propTypes = {
         }, exports.default = TabsNav;
-    }, /* 18 */
+    }, /* 16 */
     /***/
@@ -365,7 +340,7 @@ function(module, exports, __webpack_require__) {
         }), exports.TabLabels = exports.TabLabel = void 0;
-        var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        var _taggedTemplateLiteral2 = __webpack_require__(9), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
         _taggedTemplateLiteral3.default)([ "\n  background-color: ", ";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ], [ "\n  background-color: ", ";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ]), _templateObject2 = (0, 
         _taggedTemplateLiteral3.default)([ "\n  &::after {\n    ", "\n  }\n  color: ", ";\n\n  &::after {\n    background-color: currentcolor;\n  }\n" ], [ "\n  &::after {\n    ", "\n  }\n  color: ", ";\n\n  &::after {\n    background-color: currentcolor;\n  }\n" ]), _templateObject3 = (0, 
         _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ", "\n  }\n" ], [ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ", "\n  }\n" ]), _templateObject4 = (0, 
-        _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ], [ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(16), _constants = __webpack_require__(15), labelsLine = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ], [ "\n  color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  line-height: ", "px;\n  margin: 0;\n  padding: ", "px ", "px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", ";\n    box-shadow: 0 0 0 ", "px ", " inset;\n    outline: none;\n  }\n\n  position: relative;\n  ", "\n" ]), _styledComponents = __webpack_require__(10), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(14), _constants = __webpack_require__(13), labelsLine = (0, 
         _styledComponents.css)(_templateObject, _constants.colorLineDefault, _constants.paddingHorizontal, _constants.paddingHorizontal), selectedStyles = (0, 
@@ -377,3 +352,3 @@ _styledComponents.css)(_templateObject2, labelsLine, _constants.colorSelected), TabLabels = _styledComponents2.default.ul(_templateObject3, labelsLine), TabLabel = _styledComponents2.default.li(_templateObject4, _constants.colorLabelDefault, _constants.fontSize, _constants.lineHeight, _constants.paddingVertical, _constants.paddingHorizontal, _constants.colorActive, _utilSharedStyles.akBorderRadius, _constants.focusWidth, _constants.colorFocus, function(_ref) {
         exports.TabLabel = TabLabel, exports.TabLabels = TabLabels;
-    }, /* 19 */
+    }, /* 17 */
     /***/
@@ -390,8 +365,7 @@ function(module, exports, __webpack_require__) {
         });
-        var _extends2 = __webpack_require__(20), _extends3 = _interopRequireDefault(_extends2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(9), _propTypes2 = _interopRequireDefault(_propTypes), _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), Tabs = function(_PureComponent) {
+        var _extends2 = __webpack_require__(18), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(3), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(4), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(5), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(6), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), Tabs = function(_PureComponent) {
             function Tabs(props) {
                 (0, _classCallCheck3.default)(this, Tabs);
                 // Set the selected tab to the first tab with defaultSelected provided
-                var _this = (0, _possibleConstructorReturn3.default)(this, (Tabs.__proto__ || (0, 
-                _getPrototypeOf2.default)(Tabs)).call(this, props));
+                var _this = (0, _possibleConstructorReturn3.default)(this, _PureComponent.call(this, props));
                 _this.getTabs = function() {
@@ -429,11 +403,8 @@ return _this.props.tabs.map(function(tab, index) {
             }
-            return (0, _inherits3.default)(Tabs, _PureComponent), (0, _createClass3.default)(Tabs, [ {
-                key: "render",
-                value: function() {
-                    return _react2.default.createElement(_TabsStateless2.default, {
-                        onKeyboardNav: this.tabKeyboardNavHandler,
-                        tabs: this.getTabs()
-                    });
-                }
-            } ]), Tabs;
+            return (0, _inherits3.default)(Tabs, _PureComponent), Tabs.prototype.render = function() {
+                return _react2.default.createElement(_TabsStateless2.default, {
+                    onKeyboardNav: this.tabKeyboardNavHandler,
+                    tabs: this.getTabs()
+                });
+            }, Tabs;
         }(_react.PureComponent);
@@ -453,7 +424,7 @@ Tabs.propTypes = {
         }, exports.default = Tabs;
-    }, /* 20 */
+    }, /* 18 */
     /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_20__;
+        module.exports = __WEBPACK_EXTERNAL_MODULE_18__;
     } ]);
 });

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("prop-types"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("babel-runtime/helpers/extends")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","prop-types","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles","babel-runtime/helpers/extends"],t):"object"==typeof exports?exports["@atlaskit/tabs"]=t(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("prop-types"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("babel-runtime/helpers/extends")):e["@atlaskit/tabs"]=t(e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["prop-types"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"],e["babel-runtime/helpers/extends"])}(this,function(e,t,n,r,o,a,l,i,s,u,d){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.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 r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabsStateless=void 0;var o=n(2),a=r(o),l=n(19),i=r(l);t.default=i.default,t.TabsStateless=a.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),a=r(o),l=n(4),i=r(l),s=n(5),u=r(s),d=n(6),c=r(d),f=n(7),p=r(f),b=n(8),h=r(b),v=n(9),y=r(v),m=n(10),x=r(m),g=n(13),_=r(g),w=n(17),S=r(w),k=function(e){function t(){return(0,i.default)(this,t),(0,c.default)(this,(t.__proto__||(0,a.default)(t)).apply(this,arguments))}return(0,p.default)(t,e),(0,u.default)(t,[{key:"render",value:function(){var e=this.props.tabs.filter(function(e){return e.isSelected}),t=e.length?h.default.createElement(_.default,{isSelected:e[0].isSelected},e[0].content):null;return h.default.createElement(x.default,null,h.default.createElement(S.default,{onKeyboardNav:this.props.onKeyboardNav,tabs:this.props.tabs}),t)}}]),t}(b.PureComponent);k.propTypes={onKeyboardNav:y.default.func.isRequired,tabs:y.default.arrayOf(y.default.shape({content:y.default.node,isSelected:y.default.bool,label:y.default.node.isRequired,onSelect:y.default.func.isRequired}))},k.defaultProps={tabs:[]},t.default=k},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t){e.exports=a},function(e,t){e.exports=l},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(11),a=r(o),l=(0,a.default)(["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"],["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"]),i=n(12),s=r(i),u=s.default.div(l);t.default=u},function(e,t){e.exports=i},function(e,t){e.exports=s},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),a=r(o),l=n(4),i=r(l),s=n(5),u=r(s),d=n(6),c=r(d),f=n(7),p=r(f),b=n(8),h=r(b),v=n(9),y=r(v),m=n(14),x=r(m),g=function(e){function t(){return(0,i.default)(this,t),(0,c.default)(this,(t.__proto__||(0,a.default)(t)).apply(this,arguments))}return(0,p.default)(t,e),(0,u.default)(t,[{key:"render",value:function(){return h.default.createElement(x.default,{selected:this.props.isSelected,"aria-hidden":this.props.isSelected?"false":"true",role:"tabpanel"},this.props.children)}}]),t}(b.PureComponent);g.propTypes={children:y.default.node,isSelected:y.default.bool},g.defaultProps={isSelected:!1},t.default=g},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(11),a=r(o),l=(0,a.default)(["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"],["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"]),i=n(12),s=r(i),u=n(15),d=s.default.div(l,2*u.margin,function(e){var t=e.selected;return t?"":"display: none"});t.default=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.paddingVertical=t.paddingHorizontal=t.margin=t.lineHeight=t.fontSize=t.focusWidth=t.colorSelected=t.colorLineDefault=t.colorLabelDefault=t.colorHover=t.colorFocus=t.colorActive=void 0;var r=n(16),o=5,a=10,l=a/2,i=r.akColorN500,s=r.akColorN30,u=r.akColorB400,d=r.akColorB500,c=u,f=r.akColorB100,p=2,b=25,h=14;t.colorActive=d,t.colorFocus=f,t.colorHover=c,t.colorLabelDefault=i,t.colorLineDefault=s,t.colorSelected=u,t.focusWidth=p,t.fontSize=h,t.lineHeight=b,t.margin=l,t.paddingHorizontal=a,t.paddingVertical=o},function(e,t){e.exports=u},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),a=r(o),l=n(4),i=r(l),s=n(5),u=r(s),d=n(6),c=r(d),f=n(7),p=r(f),b=n(8),h=r(b),v=n(9),y=r(v),m=n(18),x=function(e){function t(){var e,n,r,o;(0,i.default)(this,t);for(var l=arguments.length,s=Array(l),u=0;u<l;u++)s[u]=arguments[u];return n=r=(0,c.default)(this,(e=t.__proto__||(0,a.default)(t)).call.apply(e,[this].concat(s))),r.state={wasKeyboardNav:!1},r.tabKeyDownHandler=function(e){r.setState({wasKeyboardNav:!0}),r.props.onKeyboardNav(e.key)},r.tabMouseDownHandler=function(e){return e.preventDefault()},o=n,(0,c.default)(r,o)}return(0,p.default)(t,e),(0,u.default)(t,[{key:"shouldComponentUpdate",value:function(e,t){return!(t.wasKeyboardNav!==this.state.wasKeyboardNav&&!t.wasKeyboardNav)}},{key:"componentDidUpdate",value:function(){var e=this;this.tabs.forEach(function(t){t.el&&(e.state.wasKeyboardNav&&t.isSelected?(t.el.focus(),e.setState({wasKeyboardNav:!1})):t.el.blur())})}},{key:"render",value:function(){var e=this;this.tabs=[];var t=this.props.tabs;return h.default.createElement("div",null,h.default.createElement(m.TabLabels,{role:"tablist"},t.map(function(n,r){return h.default.createElement(m.TabLabel,{"aria-posinset":r+1,"aria-selected":n.isSelected,"aria-setsize":t.length,isSelected:n.isSelected,key:r,onClick:n.onSelect,onKeyDown:e.tabKeyDownHandler,onMouseDown:e.tabMouseDownHandler,innerRef:function(t){e.tabs.push({el:t,isSelected:n.isSelected})},role:"tab",tabIndex:n.isSelected?0:-1},n.label)})))}}]),t}(b.PureComponent);x.propTypes={onKeyboardNav:y.default.func.isRequired,tabs:y.default.arrayOf(y.default.shape({content:y.default.node,label:y.default.string.isRequired,onSelect:y.default.func.isRequired,isSelected:y.default.bool}))},x.defaultProps={tabs:[]},t.default=x},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabLabels=t.TabLabel=void 0;var o=n(11),a=r(o),l=(0,a.default)(["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"],["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"]),i=(0,a.default)(["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"],["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"]),s=(0,a.default)(["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"],["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"]),u=(0,a.default)(["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"],["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"]),d=n(12),c=r(d),f=n(16),p=n(15),b=(0,d.css)(l,p.colorLineDefault,p.paddingHorizontal,p.paddingHorizontal),h=(0,d.css)(i,b,p.colorSelected),v=c.default.ul(s,b),y=c.default.li(u,p.colorLabelDefault,p.fontSize,p.lineHeight,p.paddingVertical,p.paddingHorizontal,p.colorActive,f.akBorderRadius,p.focusWidth,p.colorFocus,function(e){var t=e.isSelected;return t?h:""});t.TabLabel=y,t.TabLabels=v},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(20),a=r(o),l=n(3),i=r(l),s=n(4),u=r(s),d=n(5),c=r(d),f=n(6),p=r(f),b=n(7),h=r(b),v=n(8),y=r(v),m=n(9),x=r(m),g=n(2),_=r(g),w=function(e){function t(e){(0,u.default)(this,t);var n=(0,p.default)(this,(t.__proto__||(0,i.default)(t)).call(this,e));n.getTabs=function(){return n.props.tabs.map(function(e,t){return(0,a.default)({},e,{isSelected:t===n.state.selectedTab,onKeyboardNav:n.tabKeyboardNavHandler,onSelect:function(){return n.tabSelectHandler(t)}})})},n.tabSelectHandler=function(e){n.props.onSelect(e),n.setState({selectedTab:e})},n.tabKeyboardNavHandler=function(e){var t=n.state.selectedTab;if(null!==t){var r=t;"ArrowLeft"===e?r=t-1<0?0:t-1:"ArrowRight"===e&&(r=t+1>n.props.tabs.length-1?n.props.tabs.length-1:t+1),r!==t&&n.tabSelectHandler(r)}};var r=null;if(e)for(var o=0;o<e.tabs.length;o++)if(e.tabs[o].defaultSelected){r=o;break}return n.state={selectedTab:r},n}return(0,h.default)(t,e),(0,c.default)(t,[{key:"render",value:function(){return y.default.createElement(_.default,{onKeyboardNav:this.tabKeyboardNavHandler,tabs:this.getTabs()})}}]),t}(v.PureComponent);w.propTypes={onSelect:x.default.func,tabs:x.default.arrayOf(x.default.shape({content:x.default.node,defaultSelected:x.default.bool,label:x.default.node.isRequired}))},w.defaultProps={onSelect:function(){},tabs:[]},t.default=w},function(e,t){e.exports=d}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("prop-types"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("babel-runtime/helpers/extends")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/classCallCheck","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","prop-types","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/util-shared-styles","babel-runtime/helpers/extends"],t):"object"==typeof exports?exports["@atlaskit/tabs"]=t(require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("prop-types"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/util-shared-styles"),require("babel-runtime/helpers/extends")):e["@atlaskit/tabs"]=t(e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["prop-types"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/util-shared-styles"],e["babel-runtime/helpers/extends"])}(this,function(e,t,n,r,o,a,l,i,s){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.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 r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabsStateless=void 0;var o=n(2),a=r(o),l=n(17),i=r(l);t.default=i.default,t.TabsStateless=a.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),a=r(o),l=n(4),i=r(l),s=n(5),u=r(s),d=n(6),c=r(d),f=n(7),p=r(f),b=n(8),h=r(b),y=n(11),v=r(y),x=n(15),m=r(x),g=function(e){function t(){return(0,a.default)(this,t),(0,i.default)(this,e.apply(this,arguments))}return(0,u.default)(t,e),t.prototype.render=function(){var e=this.props.tabs.filter(function(e){return e.isSelected}),t=e.length?c.default.createElement(v.default,{isSelected:e[0].isSelected},e[0].content):null;return c.default.createElement(h.default,null,c.default.createElement(m.default,{onKeyboardNav:this.props.onKeyboardNav,tabs:this.props.tabs}),t)},t}(d.PureComponent);g.propTypes={onKeyboardNav:p.default.func.isRequired,tabs:p.default.arrayOf(p.default.shape({content:p.default.node,isSelected:p.default.bool,label:p.default.node.isRequired,onSelect:p.default.func.isRequired}))},g.defaultProps={tabs:[]},t.default=g},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),a=r(o),l=(0,a.default)(["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"],["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n"]),i=n(10),s=r(i),u=s.default.div(l);t.default=u},function(e,t){e.exports=a},function(e,t){e.exports=l},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),a=r(o),l=n(4),i=r(l),s=n(5),u=r(s),d=n(6),c=r(d),f=n(7),p=r(f),b=n(12),h=r(b),y=function(e){function t(){return(0,a.default)(this,t),(0,i.default)(this,e.apply(this,arguments))}return(0,u.default)(t,e),t.prototype.render=function(){return c.default.createElement(h.default,{selected:this.props.isSelected,"aria-hidden":this.props.isSelected?"false":"true",role:"tabpanel"},this.props.children)},t}(d.PureComponent);y.propTypes={children:p.default.node,isSelected:p.default.bool},y.defaultProps={isSelected:!1},t.default=y},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(9),a=r(o),l=(0,a.default)(["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"],["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */\n  padding-left: ","px;\n  ","\n"]),i=n(10),s=r(i),u=n(13),d=s.default.div(l,2*u.margin,function(e){var t=e.selected;return t?"":"display: none"});t.default=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.paddingVertical=t.paddingHorizontal=t.margin=t.lineHeight=t.fontSize=t.focusWidth=t.colorSelected=t.colorLineDefault=t.colorLabelDefault=t.colorHover=t.colorFocus=t.colorActive=void 0;var r=n(14),o=5,a=10,l=a/2,i=r.akColorN500,s=r.akColorN30,u=r.akColorB400,d=r.akColorB500,c=u,f=r.akColorB100,p=2,b=25,h=14;t.colorActive=d,t.colorFocus=f,t.colorHover=c,t.colorLabelDefault=i,t.colorLineDefault=s,t.colorSelected=u,t.focusWidth=p,t.fontSize=h,t.lineHeight=b,t.margin=l,t.paddingHorizontal=a,t.paddingVertical=o},function(e,t){e.exports=i},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),a=r(o),l=n(4),i=r(l),s=n(5),u=r(s),d=n(6),c=r(d),f=n(7),p=r(f),b=n(16),h=function(e){function t(){var n,r,o;(0,a.default)(this,t);for(var l=arguments.length,s=Array(l),u=0;u<l;u++)s[u]=arguments[u];return n=r=(0,i.default)(this,e.call.apply(e,[this].concat(s))),r.state={wasKeyboardNav:!1},r.tabKeyDownHandler=function(e){r.setState({wasKeyboardNav:!0}),r.props.onKeyboardNav(e.key)},r.tabMouseDownHandler=function(e){return e.preventDefault()},o=n,(0,i.default)(r,o)}return(0,u.default)(t,e),t.prototype.shouldComponentUpdate=function(e,t){return!(t.wasKeyboardNav!==this.state.wasKeyboardNav&&!t.wasKeyboardNav)},t.prototype.componentDidUpdate=function(){var e=this;this.tabs.forEach(function(t){t.el&&(e.state.wasKeyboardNav&&t.isSelected?(t.el.focus(),e.setState({wasKeyboardNav:!1})):t.el.blur())})},t.prototype.render=function(){var e=this;this.tabs=[];var t=this.props.tabs;return c.default.createElement("div",null,c.default.createElement(b.TabLabels,{role:"tablist"},t.map(function(n,r){return c.default.createElement(b.TabLabel,{"aria-posinset":r+1,"aria-selected":n.isSelected,"aria-setsize":t.length,isSelected:n.isSelected,key:r,onClick:n.onSelect,onKeyDown:e.tabKeyDownHandler,onMouseDown:e.tabMouseDownHandler,innerRef:function(t){e.tabs.push({el:t,isSelected:n.isSelected})},role:"tab",tabIndex:n.isSelected?0:-1},n.label)})))},t}(d.PureComponent);h.propTypes={onKeyboardNav:p.default.func.isRequired,tabs:p.default.arrayOf(p.default.shape({content:p.default.node,label:p.default.string.isRequired,onSelect:p.default.func.isRequired,isSelected:p.default.bool}))},h.defaultProps={tabs:[]},t.default=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TabLabels=t.TabLabel=void 0;var o=n(9),a=r(o),l=(0,a.default)(["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"],["\n  background-color: ",";\n  border-radius: 2px;\n  bottom: 0;\n  content: '';\n  height: 2px;\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"]),i=(0,a.default)(["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"],["\n  &::after {\n    ","\n  }\n  color: ",";\n\n  &::after {\n    background-color: currentcolor;\n  }\n"]),s=(0,a.default)(["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"],["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n  &:not(:empty)::before {\n    ","\n  }\n"]),u=(0,a.default)(["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"],["\n  color: ",";\n  cursor: pointer;\n  font-size: ","px;\n  line-height: ","px;\n  margin: 0;\n  padding: ","px ","px;\n  white-space: nowrap;\n\n  &:hover,\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ",";\n    box-shadow: 0 0 0 ","px "," inset;\n    outline: none;\n  }\n\n  position: relative;\n  ","\n"]),d=n(10),c=r(d),f=n(14),p=n(13),b=(0,d.css)(l,p.colorLineDefault,p.paddingHorizontal,p.paddingHorizontal),h=(0,d.css)(i,b,p.colorSelected),y=c.default.ul(s,b),v=c.default.li(u,p.colorLabelDefault,p.fontSize,p.lineHeight,p.paddingVertical,p.paddingHorizontal,p.colorActive,f.akBorderRadius,p.focusWidth,p.colorFocus,function(e){var t=e.isSelected;return t?h:""});t.TabLabel=v,t.TabLabels=y},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(18),a=r(o),l=n(3),i=r(l),s=n(4),u=r(s),d=n(5),c=r(d),f=n(6),p=r(f),b=n(7),h=r(b),y=n(2),v=r(y),x=function(e){function t(n){(0,i.default)(this,t);var r=(0,u.default)(this,e.call(this,n));r.getTabs=function(){return r.props.tabs.map(function(e,t){return(0,a.default)({},e,{isSelected:t===r.state.selectedTab,onKeyboardNav:r.tabKeyboardNavHandler,onSelect:function(){return r.tabSelectHandler(t)}})})},r.tabSelectHandler=function(e){r.props.onSelect(e),r.setState({selectedTab:e})},r.tabKeyboardNavHandler=function(e){var t=r.state.selectedTab;if(null!==t){var n=t;"ArrowLeft"===e?n=t-1<0?0:t-1:"ArrowRight"===e&&(n=t+1>r.props.tabs.length-1?r.props.tabs.length-1:t+1),n!==t&&r.tabSelectHandler(n)}};var o=null;if(n)for(var l=0;l<n.tabs.length;l++)if(n.tabs[l].defaultSelected){o=l;break}return r.state={selectedTab:o},r}return(0,c.default)(t,e),t.prototype.render=function(){return p.default.createElement(v.default,{onKeyboardNav:this.tabKeyboardNavHandler,tabs:this.getTabs()})},t}(f.PureComponent);x.propTypes={onSelect:h.default.func,tabs:h.default.arrayOf(h.default.shape({content:h.default.node,defaultSelected:h.default.bool,label:h.default.node.isRequired}))},x.defaultProps={onSelect:function(){},tabs:[]},t.default=x},function(e,t){e.exports=s}])});

dist/es/components/TabPane.js

@@ -1,4 +0,2 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -16,19 +14,16 @@ import _inherits from 'babel-runtime/helpers/inherits';
 
-    return _possibleConstructorReturn(this, (TabPane.__proto__ || _Object$getPrototypeOf(TabPane)).apply(this, arguments));
+    return _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
   }
 
-  _createClass(TabPane, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        TabPaneDiv,
-        {
-          selected: this.props.isSelected,
-          'aria-hidden': this.props.isSelected ? 'false' : 'true',
-          role: 'tabpanel'
-        },
-        this.props.children
-      );
-    }
-  }]);
+  TabPane.prototype.render = function render() {
+    return React.createElement(
+      TabPaneDiv,
+      {
+        selected: this.props.isSelected,
+        'aria-hidden': this.props.isSelected ? 'false' : 'true',
+        role: 'tabpanel'
+      },
+      this.props.children
+    );
+  };
 
@@ -35,0 +30,0 @@ return TabPane;

dist/es/components/Tabs.js

 import _extends from 'babel-runtime/helpers/extends';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -18,3 +16,3 @@ import _inherits from 'babel-runtime/helpers/inherits';
     // Set the selected tab to the first tab with defaultSelected provided
-    var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || _Object$getPrototypeOf(Tabs)).call(this, props));
+    var _this = _possibleConstructorReturn(this, _PureComponent.call(this, props));
 
@@ -72,11 +70,8 @@ _this.getTabs = function () {
 
-  _createClass(Tabs, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(TabsStateless, {
-        onKeyboardNav: this.tabKeyboardNavHandler,
-        tabs: this.getTabs()
-      });
-    }
-  }]);
+  Tabs.prototype.render = function render() {
+    return React.createElement(TabsStateless, {
+      onKeyboardNav: this.tabKeyboardNavHandler,
+      tabs: this.getTabs()
+    });
+  };
 
@@ -83,0 +78,0 @@ return Tabs;

dist/es/components/TabsNav.js

@@ -1,4 +0,2 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -14,4 +12,2 @@ import _inherits from 'babel-runtime/helpers/inherits';
   function TabsNav() {
-    var _ref;
-
     var _temp, _this, _ret;
@@ -25,3 +21,3 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TabsNav.__proto__ || _Object$getPrototypeOf(TabsNav)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.state = {
       wasKeyboardNav: false
@@ -36,75 +32,70 @@ }, _this.tabKeyDownHandler = function (e) {
 
-  _createClass(TabsNav, [{
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      // Don't re-render when we are resetting the `wasKeyboardNav` state
-      if (nextState.wasKeyboardNav !== this.state.wasKeyboardNav && !nextState.wasKeyboardNav) {
-        return false;
-      }
-      return true;
+  TabsNav.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
+    // Don't re-render when we are resetting the `wasKeyboardNav` state
+    if (nextState.wasKeyboardNav !== this.state.wasKeyboardNav && !nextState.wasKeyboardNav) {
+      return false;
     }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      var _this2 = this;
+    return true;
+  };
 
-      // Focus the selected tab if it was selected via keyboard nav
-      this.tabs.forEach(function (tab) {
-        if (tab.el) {
-          if (_this2.state.wasKeyboardNav && tab.isSelected) {
-            tab.el.focus();
-            _this2.setState({ wasKeyboardNav: false });
-          } else {
-            // Ensure that focus does not stay on an unselected tab
-            tab.el.blur();
-          }
+  TabsNav.prototype.componentDidUpdate = function componentDidUpdate() {
+    var _this2 = this;
+
+    // Focus the selected tab if it was selected via keyboard nav
+    this.tabs.forEach(function (tab) {
+      if (tab.el) {
+        if (_this2.state.wasKeyboardNav && tab.isSelected) {
+          tab.el.focus();
+          _this2.setState({ wasKeyboardNav: false });
+        } else {
+          // Ensure that focus does not stay on an unselected tab
+          tab.el.blur();
         }
-      });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
+      }
+    });
+  };
 
-      this.tabs = [];
-      var tabs = this.props.tabs;
-      /* eslint-disable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
+  TabsNav.prototype.render = function render() {
+    var _this3 = this;
 
-      return React.createElement(
-        'div',
-        null,
-        React.createElement(
-          TabLabels,
-          {
-            role: 'tablist'
-          },
-          tabs.map(function (tab, index) {
-            return React.createElement(
-              TabLabel,
-              {
-                'aria-posinset': index + 1,
-                'aria-selected': tab.isSelected,
-                'aria-setsize': tabs.length,
-                isSelected: tab.isSelected,
-                key: index,
-                onClick: tab.onSelect,
-                onKeyDown: _this3.tabKeyDownHandler,
-                onMouseDown: _this3.tabMouseDownHandler,
-                innerRef: function innerRef(ref) {
-                  _this3.tabs.push({
-                    el: ref,
-                    isSelected: tab.isSelected
-                  });
-                },
-                role: 'tab',
-                tabIndex: tab.isSelected ? 0 : -1
+    this.tabs = [];
+    var tabs = this.props.tabs;
+    /* eslint-disable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
+
+    return React.createElement(
+      'div',
+      null,
+      React.createElement(
+        TabLabels,
+        {
+          role: 'tablist'
+        },
+        tabs.map(function (tab, index) {
+          return React.createElement(
+            TabLabel,
+            {
+              'aria-posinset': index + 1,
+              'aria-selected': tab.isSelected,
+              'aria-setsize': tabs.length,
+              isSelected: tab.isSelected,
+              key: index,
+              onClick: tab.onSelect,
+              onKeyDown: _this3.tabKeyDownHandler,
+              onMouseDown: _this3.tabMouseDownHandler,
+              innerRef: function innerRef(ref) {
+                _this3.tabs.push({
+                  el: ref,
+                  isSelected: tab.isSelected
+                });
               },
-              tab.label
-            );
-          })
-        )
-      );
-      /* eslint-enable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
-    }
-  }]);
+              role: 'tab',
+              tabIndex: tab.isSelected ? 0 : -1
+            },
+            tab.label
+          );
+        })
+      )
+    );
+    /* eslint-enable jsx-a11y/role-supports-aria-props, jsx-a11y/no-static-element-interactions */
+  };
 
@@ -111,0 +102,0 @@ return TabsNav;

dist/es/components/TabsStateless.js

@@ -1,4 +0,2 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -19,28 +17,25 @@ import _inherits from 'babel-runtime/helpers/inherits';
 
-    return _possibleConstructorReturn(this, (Tabs.__proto__ || _Object$getPrototypeOf(Tabs)).apply(this, arguments));
+    return _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
   }
 
-  _createClass(Tabs, [{
-    key: 'render',
-    value: function render() {
-      var selectedTabs = this.props.tabs.filter(function (tab) {
-        return tab.isSelected;
-      });
-      var selectedTab = selectedTabs.length ? React.createElement(
-        TabPane,
-        { isSelected: selectedTabs[0].isSelected },
-        selectedTabs[0].content
-      ) : null;
+  Tabs.prototype.render = function render() {
+    var selectedTabs = this.props.tabs.filter(function (tab) {
+      return tab.isSelected;
+    });
+    var selectedTab = selectedTabs.length ? React.createElement(
+      TabPane,
+      { isSelected: selectedTabs[0].isSelected },
+      selectedTabs[0].content
+    ) : null;
 
-      return React.createElement(
-        TabsDiv,
-        null,
-        React.createElement(TabsNav, {
-          onKeyboardNav: this.props.onKeyboardNav,
-          tabs: this.props.tabs
-        }),
-        selectedTab
-      );
-    }
-  }]);
+    return React.createElement(
+      TabsDiv,
+      null,
+      React.createElement(TabsNav, {
+        onKeyboardNav: this.props.onKeyboardNav,
+        tabs: this.props.tabs
+      }),
+      selectedTab
+    );
+  };
 
@@ -47,0 +42,0 @@ return Tabs;

package.json

 {
   "name": "@atlaskit/tabs",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "config": {
@@ -17,3 +17,5 @@ "access": "public"
     "prepublish": "../../node_modules/.bin/in-publish && { cd ../.. && npm run prepublish-with-babel/single @atlaskit/tabs; } || ../../node_modules/.bin/not-in-publish",
-    "jest": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js"
+    "jest": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js",
+    "storybook": "../../build/bin/storybook.single.sh",
+    "eslint": "../../build/bin/lint.eslint.sh"
   },
@@ -20,0 +22,0 @@ "files": [

README.md

@@ -14,3 +14,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://atlaskit.atlassian.com)
 
-Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/tabs/2.4.0/).
+Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/tabs/2.4.1/).
 
@@ -17,0 +17,0 @@ ## Installation

No alert changes

Worsened metrics

Total package byte prevSize

92705

decreased by-6.27%

Lines of code

1174

decreased by-7.05%

No dependency changes