@atlaskit/tabs - npm Package Compare versions

Comparing version 2.4.2 to 4.0.0

CHANGELOG.md

@@ -1,6 +0,39 @@
-<a name="2.4.2"></a>
-## 2.4.2 (2017-07-27)
+<a name="4.0.0"></a>
+# 4.0.0 (2017-08-11)
 
 
 
+<a name="3.0.0"></a>
+# 3.0.0 (2017-08-11)
+
+
+### Bug Fixes
+
+* **package:** fix the theme-dependency ([db90333](https://bitbucket.org/atlassian/atlaskit/commits/db90333))
+
+
+
+<a name="3.0.0"></a>
+# 3.0.0 (2017-08-11)
+
+
+### Bug Fixes
+
+* **component:** fix prop types ([8abfd3c](https://bitbucket.org/atlassian/atlaskit/commits/8abfd3c))
+* **component:** make tab types clearer ([3071418](https://bitbucket.org/atlassian/atlaskit/commits/3071418))
+* **component:** move babel-plugin-react-flow-props-to-prop-types to devDep ([e1cd3aa](https://bitbucket.org/atlassian/atlaskit/commits/e1cd3aa))
+
+
+### Features
+
+* **component:** dark mode for Tabs, plus a bunch of cleanup for the component and its docs ([a111cf2](https://bitbucket.org/atlassian/atlaskit/commits/a111cf2))
+* **component:** implement dark mode theme ([d14522a](https://bitbucket.org/atlassian/atlaskit/commits/d14522a))
+
+
+### BREAKING CHANGES
+
+* **component:** affects internal styled-components implementation
+
+
+
 <a name="2.4.2"></a>
@@ -7,0 +40,0 @@ ## 2.4.2 (2017-07-27)

dist/bundle-cjs.js

@@ -80,5 +80,17 @@ module.exports = /******/
         value: !0
-    }), exports.TabsStateless = void 0;
-    var _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), _Tabs = __webpack_require__(17), _Tabs2 = _interopRequireDefault(_Tabs);
-    exports.default = _Tabs2.default, exports.TabsStateless = _TabsStateless2.default;
+    });
+    var _Tabs = __webpack_require__(2);
+    Object.defineProperty(exports, "default", {
+        enumerable: !0,
+        get: function() {
+            return _interopRequireDefault(_Tabs).default;
+        }
+    });
+    var _TabsStateless = __webpack_require__(9);
+    Object.defineProperty(exports, "TabsStateless", {
+        enumerable: !0,
+        get: function() {
+            return _interopRequireDefault(_TabsStateless).default;
+        }
+    });
 }, /* 2 */
@@ -96,29 +108,56 @@ /***/
     });
-    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, _PureComponent.apply(this, arguments));
+    var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _TabsStateless = __webpack_require__(9), _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, _PureComponent.call(this, props));
+            _this.getTabs = function() {
+                return _this.props.tabs.map(function(tab, index) {
+                    return (0, _extends3.default)({}, tab, {
+                        isSelected: index === _this.state.selectedTab,
+                        onKeyboardNav: _this.tabKeyboardNavHandler,
+                        onSelect: function() {
+                            return _this.tabSelectHandler(index);
+                        }
+                    });
+                });
+            }, _this.tabSelectHandler = function(selectedTabIndex) {
+                _this.props.onSelect(selectedTabIndex), _this.setState({
+                    selectedTab: selectedTabIndex
+                });
+            }, _this.tabKeyboardNavHandler = function(key) {
+                // Handle left and right arrow key presses by selecting the previous or next tab
+                var selectedIndex = _this.state.selectedTab;
+                if (null !== selectedIndex) {
+                    var nextIndex = selectedIndex;
+                    "ArrowLeft" === key ? nextIndex = selectedIndex - 1 < 0 ? 0 : selectedIndex - 1 : "ArrowRight" === key && (nextIndex = selectedIndex + 1 > _this.props.tabs.length - 1 ? _this.props.tabs.length - 1 : selectedIndex + 1), 
+                    nextIndex !== selectedIndex && _this.tabSelectHandler(nextIndex);
+                }
+            };
+            var defaultSelectedIndex = null;
+            if (props) for (var i = 0; i < props.tabs.length; i++) if (props.tabs[i].defaultSelected) {
+                defaultSelectedIndex = i;
+                break;
+            }
+            return _this.state = {
+                selectedTab: defaultSelectedIndex
+            }, _this;
         }
         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);
+            return _react2.default.createElement(_TabsStateless2.default, {
+                onKeyboardNav: this.tabKeyboardNavHandler,
+                tabs: this.getTabs()
+            });
         }, Tabs;
     }(_react.PureComponent);
     Tabs.propTypes = {
-        /** Handler for navigation using the keyboard buttons. */
-        onKeyboardNav: _propTypes2.default.func.isRequired,
-        /** The tabs to display, with content being hidden unless the tab is selected. */
+        /** Handler for selecting a new tab. Called with the number of the tab, zero-indexed */
+        onSelect: _propTypes2.default.func,
         tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-            content: _propTypes2.default.node,
-            isSelected: _propTypes2.default.bool,
-            label: _propTypes2.default.node.isRequired,
-            onSelect: _propTypes2.default.func.isRequired
+            content: _propTypes2.default.any,
+            defaultSelected: _propTypes2.default.bool,
+            label: _propTypes2.default.any.isRequired
         }))
     }, Tabs.defaultProps = {
+        onSelect: function() {},
         tabs: []
@@ -129,15 +168,15 @@ }, exports.default = Tabs;
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/classCallCheck");
+    module.exports = require("babel-runtime/helpers/extends");
 }, /* 4 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
+    module.exports = require("babel-runtime/helpers/classCallCheck");
 }, /* 5 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/inherits");
+    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
 }, /* 6 */
 /***/
 function(module, exports) {
-    module.exports = require("react");
+    module.exports = require("babel-runtime/helpers/inherits");
 }, /* 7 */
@@ -149,25 +188,6 @@ /***/
 /***/
-function(module, exports, __webpack_require__) {
-    "use strict";
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            default: obj
-        };
-    }
-    Object.defineProperty(exports, "__esModule", {
-        value: !0
-    });
-    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;
+function(module, exports) {
+    module.exports = require("react");
 }, /* 9 */
 /***/
-function(module, exports) {
-    module.exports = require("babel-runtime/helpers/taggedTemplateLiteral");
-}, /* 10 */
-/***/
-function(module, exports) {
-    module.exports = require("styled-components");
-}, /* 11 */
-/***/
 function(module, exports, __webpack_require__) {
@@ -183,21 +203,32 @@ "use strict";
     });
-    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, _PureComponent.apply(this, arguments));
+    var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _TabsNav = __webpack_require__(10), _TabsNav2 = _interopRequireDefault(_TabsNav), _styled = __webpack_require__(11), TabsStateless = function(_PureComponent) {
+        function TabsStateless() {
+            return (0, _classCallCheck3.default)(this, TabsStateless), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
         }
-        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",
+        return (0, _inherits3.default)(TabsStateless, _PureComponent), TabsStateless.prototype.render = function() {
+            var _props = this.props, onKeyboardNav = _props.onKeyboardNav, tabs = _props.tabs, selectedTabs = tabs.filter(function(tab) {
+                return tab.isSelected;
+            }), selectedTab = selectedTabs.length ? _react2.default.createElement(_styled.TabPane, {
                 role: "tabpanel"
-            }, this.props.children);
-        }, TabPane;
+            }, selectedTabs[0].content) : null;
+            return _react2.default.createElement(_styled.Tabs, null, _react2.default.createElement(_TabsNav2.default, {
+                onKeyboardNav: onKeyboardNav,
+                tabs: tabs
+            }), selectedTab);
+        }, TabsStateless;
     }(_react.PureComponent);
-    TabPane.propTypes = {
-        children: _propTypes2.default.node,
-        isSelected: _propTypes2.default.bool
-    }, TabPane.defaultProps = {
-        isSelected: !1
-    }, exports.default = TabPane;
-}, /* 12 */
+    /* eslint-disable react/sort-comp */
+    TabsStateless.propTypes = {
+        /** Handler for navigation using the keyboard buttons. */
+        onKeyboardNav: _propTypes2.default.func.isRequired,
+        tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+            content: _propTypes2.default.any,
+            isSelected: _propTypes2.default.bool,
+            label: _propTypes2.default.string.isRequired,
+            onSelect: _propTypes2.default.func.isRequired
+        }))
+    }, TabsStateless.defaultProps = {
+        tabs: []
+    }, exports.default = TabsStateless;
+}, /* 10 */
 /***/
@@ -214,38 +245,3 @@ function(module, exports, __webpack_require__) {
     });
-    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;
-        return selected ? "" : "display: none";
-    });
-    exports.default = TabPaneDiv;
-}, /* 13 */
-/***/
-function(module, exports, __webpack_require__) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", {
-        value: !0
-    }), 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__(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, 
-    exports.colorLabelDefault = colorLabelDefault, exports.colorLineDefault = colorLineDefault, 
-    exports.colorSelected = colorSelected, exports.focusWidth = focusWidth, exports.fontSize = fontSize, 
-    exports.lineHeight = lineHeight, exports.margin = margin, exports.paddingHorizontal = paddingHorizontal, 
-    exports.paddingVertical = paddingVertical;
-}, /* 14 */
-/***/
-function(module, exports) {
-    module.exports = require("@atlaskit/util-shared-styles");
-}, /* 15 */
-/***/
-function(module, exports, __webpack_require__) {
-    "use strict";
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            default: obj
-        };
-    }
-    Object.defineProperty(exports, "__esModule", {
-        value: !0
-    });
-    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) {
+    var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _styled = __webpack_require__(11), TabsNav = function(_PureComponent) {
         function TabsNav() {
@@ -258,3 +254,3 @@ var _temp, _this, _ret;
                 wasKeyboardNav: !1
-            }, _this.tabKeyDownHandler = function(e) {
+            }, _this.tabs = [], _this.tabKeyDownHandler = function(e) {
                 _this.setState({
@@ -280,18 +276,12 @@ wasKeyboardNav: !0
         }, 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, {
+            var _this3 = this, tabs = this.props.tabs;
+            return _react2.default.createElement(_styled.NavWrapper, null, _react2.default.createElement(_styled.NavLine, {
+                status: "normal"
+            }), _react2.default.createElement(_styled.Nav, {
                 role: "tablist"
             }, tabs.map(function(tab, index) {
-                return _react2.default.createElement(_TabsNav.TabLabel, {
+                return _react2.default.createElement(_styled.NavItem, {
                     "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) {
@@ -303,5 +293,13 @@ _this3.tabs.push({
                     },
+                    isSelected: tab.isSelected,
+                    key: index,
+                    onClick: tab.onSelect,
+                    onKeyDown: _this3.tabKeyDownHandler,
+                    onMouseDown: _this3.tabMouseDownHandler,
                     role: "tab",
+                    status: tab.isSelected ? "selected" : "normal",
                     tabIndex: tab.isSelected ? 0 : -1
-                }, tab.label);
+                }, tab.label, tab.isSelected ? _react2.default.createElement(_styled.NavLine, {
+                    status: "selected"
+                }) : null);
             })));
@@ -311,13 +309,12 @@ }, TabsNav;
     TabsNav.propTypes = {
+        /** Handler for navigation using the keyboard buttons. */
         onKeyboardNav: _propTypes2.default.func.isRequired,
         tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-            content: _propTypes2.default.node,
+            content: _propTypes2.default.any,
+            isSelected: _propTypes2.default.bool,
             label: _propTypes2.default.string.isRequired,
-            onSelect: _propTypes2.default.func.isRequired,
-            isSelected: _propTypes2.default.bool
+            onSelect: _propTypes2.default.func.isRequired
         }))
-    }, TabsNav.defaultProps = {
-        tabs: []
     }, exports.default = TabsNav;
-}, /* 16 */
+}, /* 11 */
 /***/
@@ -331,89 +328,53 @@ function(module, exports, __webpack_require__) {
     }
-    Object.defineProperty(exports, "__esModule", {
-        value: !0
-    }), exports.TabLabels = exports.TabLabel = void 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__(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, 
-    _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) {
-        var isSelected = _ref.isSelected;
-        return isSelected ? selectedStyles : "";
-    });
-    exports.TabLabel = TabLabel, exports.TabLabels = TabLabels;
-}, /* 17 */
-/***/
-function(module, exports, __webpack_require__) {
-    "use strict";
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            default: obj
+    function lockSelectedColor(normal) {
+        var selected = {
+            light: _theme.colors.B400,
+            dark: _theme.colors.B100
         };
+        return (0, _theme.themed)("status", {
+            normal: normal,
+            selected: selected
+        });
     }
     Object.defineProperty(exports, "__esModule", {
         value: !0
-    });
-    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, _PureComponent.call(this, props));
-            _this.getTabs = function() {
-                return _this.props.tabs.map(function(tab, index) {
-                    return (0, _extends3.default)({}, tab, {
-                        isSelected: index === _this.state.selectedTab,
-                        onKeyboardNav: _this.tabKeyboardNavHandler,
-                        onSelect: function() {
-                            return _this.tabSelectHandler(index);
-                        }
-                    });
-                });
-            }, _this.tabSelectHandler = function(selectedTabIndex) {
-                _this.props.onSelect(selectedTabIndex), _this.setState({
-                    selectedTab: selectedTabIndex
-                });
-            }, _this.tabKeyboardNavHandler = function(key) {
-                // Handle left and right arrow key presses by selecting the previous or next tab
-                var selectedIndex = _this.state.selectedTab;
-                if (null !== selectedIndex) {
-                    var nextIndex = selectedIndex;
-                    "ArrowLeft" === key ? nextIndex = selectedIndex - 1 < 0 ? 0 : selectedIndex - 1 : "ArrowRight" === key && (nextIndex = selectedIndex + 1 > _this.props.tabs.length - 1 ? _this.props.tabs.length - 1 : selectedIndex + 1), 
-                    nextIndex !== selectedIndex && _this.tabSelectHandler(nextIndex);
-                }
-            };
-            var defaultSelectedIndex = null;
-            if (props) for (var i = 0; i < props.tabs.length; i++) if (props.tabs[i].defaultSelected) {
-                defaultSelectedIndex = i;
-                break;
-            }
-            return _this.state = {
-                selectedTab: defaultSelectedIndex
-            }, _this;
-        }
-        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);
-    Tabs.propTypes = {
-        /** Handler for selecting a new tab. Called with the number of the tab, zero-indexed */
-        onSelect: _propTypes2.default.func,
-        /** The tabs to display, with content being hidden unless the tab is selected. */
-        tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-            content: _propTypes2.default.node,
-            defaultSelected: _propTypes2.default.bool,
-            label: _propTypes2.default.node.isRequired
-        }))
-    }, Tabs.defaultProps = {
-        onSelect: function() {},
-        tabs: []
-    }, exports.default = Tabs;
-}, /* 18 */
+    }), exports.NavItem = exports.NavLine = exports.Nav = exports.NavWrapper = exports.TabPane = exports.Tabs = void 0;
+    var _taggedTemplateLiteral2 = __webpack_require__(12), _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%; /* See min-height note */\n" ], [ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* See min-height note */\n" ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ", "px;\n  padding-right: ", "px;\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ", "px;\n  padding-right: ", "px;\n" ]), _templateObject3 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  position: relative;\n" ], [ "\n  position: relative;\n" ]), _templateObject4 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n" ], [ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n" ]), _templateObject5 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  background-color: ", ";\n  border-radius: ", ";\n  bottom: 0;\n  content: '';\n  height: ", ";\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ], [ "\n  background-color: ", ";\n  border-radius: ", ";\n  bottom: 0;\n  content: '';\n  height: ", ";\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ]), _templateObject6 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ", "px ", "px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ", ";\n  }\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", "px;\n    box-shadow: 0 0 0 2px ", " inset;\n    outline: none;\n  }\n" ], [ "\n  color: ", ";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ", "px ", "px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ", ";\n  }\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", "px;\n    box-shadow: 0 0 0 2px ", " inset;\n    outline: none;\n  }\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _theme = __webpack_require__(14), labelColor = lockSelectedColor({
+        light: _theme.colors.N500,
+        dark: _theme.colors.DN400
+    }), activeLabelColor = lockSelectedColor({
+        light: _theme.colors.B500,
+        dark: _theme.colors.B200
+    }), focusLabelColor = lockSelectedColor({
+        light: _theme.colors.B100,
+        dark: _theme.colors.B100
+    }), hoverLabelColor = lockSelectedColor({
+        light: _theme.colors.B400,
+        dark: _theme.colors.B75
+    }), underlineColor = lockSelectedColor({
+        light: _theme.colors.N30,
+        dark: _theme.colors.DN0
+    }), underlineHeight = "2px";
+    exports.Tabs = _styledComponents2.default.div(_templateObject), exports.TabPane = _styledComponents2.default.div(_templateObject2, _theme.gridSize, _theme.gridSize), 
+    exports.NavWrapper = _styledComponents2.default.div(_templateObject3), exports.Nav = _styledComponents2.default.ul(_templateObject4), 
+    exports.NavLine = _styledComponents2.default.span(_templateObject5, underlineColor, underlineHeight, underlineHeight, _theme.gridSize, _theme.gridSize), 
+    exports.NavItem = _styledComponents2.default.li(_templateObject6, labelColor, _theme.math.divide(_theme.gridSize, 2), _theme.gridSize, hoverLabelColor, activeLabelColor, _theme.borderRadius, focusLabelColor);
+}, /* 12 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/extends");
+    module.exports = require("babel-runtime/helpers/taggedTemplateLiteral");
+}, /* 13 */
+/***/
+function(module, exports) {
+    module.exports = require("styled-components");
+}, /* 14 */
+/***/
+function(module, exports) {
+    module.exports = require("@atlaskit/theme");
 } ]);

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(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")}]);
+module.exports=function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].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 a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(2);Object.defineProperty(t,"default",{enumerable:!0,get:function(){return a(r).default}});var o=n(9);Object.defineProperty(t,"TabsStateless",{enumerable:!0,get:function(){return a(o).default}})},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),o=a(r),l=n(4),i=a(l),u=n(5),s=a(u),d=n(6),f=a(d),c=n(7),p=a(c),b=n(8),h=a(b),v=n(9),g=a(v),y=function(e){function t(n){(0,i.default)(this,t);var a=(0,s.default)(this,e.call(this,n));a.getTabs=function(){return a.props.tabs.map(function(e,t){return(0,o.default)({},e,{isSelected:t===a.state.selectedTab,onKeyboardNav:a.tabKeyboardNavHandler,onSelect:function(){return a.tabSelectHandler(t)}})})},a.tabSelectHandler=function(e){a.props.onSelect(e),a.setState({selectedTab:e})},a.tabKeyboardNavHandler=function(e){var t=a.state.selectedTab;if(null!==t){var n=t;"ArrowLeft"===e?n=t-1<0?0:t-1:"ArrowRight"===e&&(n=t+1>a.props.tabs.length-1?a.props.tabs.length-1:t+1),n!==t&&a.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 a.state={selectedTab:r},a}return(0,f.default)(t,e),t.prototype.render=function(){return h.default.createElement(g.default,{onKeyboardNav:this.tabKeyboardNavHandler,tabs:this.getTabs()})},t}(b.PureComponent);y.propTypes={onSelect:p.default.func,tabs:p.default.arrayOf(p.default.shape({content:p.default.any,defaultSelected:p.default.bool,label:p.default.any.isRequired}))},y.defaultProps={onSelect:function(){},tabs:[]},t.default=y},function(e,t){e.exports=require("babel-runtime/helpers/extends")},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("prop-types")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(4),o=a(r),l=n(5),i=a(l),u=n(6),s=a(u),d=n(7),f=a(d),c=n(8),p=a(c),b=n(10),h=a(b),v=n(11),g=function(e){function t(){return(0,o.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,t=e.onKeyboardNav,n=e.tabs,a=n.filter(function(e){return e.isSelected}),r=a.length?p.default.createElement(v.TabPane,{role:"tabpanel"},a[0].content):null;return p.default.createElement(v.Tabs,null,p.default.createElement(h.default,{onKeyboardNav:t,tabs:n}),r)},t}(c.PureComponent);g.propTypes={onKeyboardNav:f.default.func.isRequired,tabs:f.default.arrayOf(f.default.shape({content:f.default.any,isSelected:f.default.bool,label:f.default.string.isRequired,onSelect:f.default.func.isRequired}))},g.defaultProps={tabs:[]},t.default=g},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(4),o=a(r),l=n(5),i=a(l),u=n(6),s=a(u),d=n(7),f=a(d),c=n(8),p=a(c),b=n(11),h=function(e){function t(){var n,a,r;(0,o.default)(this,t);for(var l=arguments.length,u=Array(l),s=0;s<l;s++)u[s]=arguments[s];return n=a=(0,i.default)(this,e.call.apply(e,[this].concat(u))),a.state={wasKeyboardNav:!1},a.tabs=[],a.tabKeyDownHandler=function(e){a.setState({wasKeyboardNav:!0}),a.props.onKeyboardNav(e.key)},a.tabMouseDownHandler=function(e){return e.preventDefault()},r=n,(0,i.default)(a,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,t=this.props.tabs;return p.default.createElement(b.NavWrapper,null,p.default.createElement(b.NavLine,{status:"normal"}),p.default.createElement(b.Nav,{role:"tablist"},t.map(function(n,a){return p.default.createElement(b.NavItem,{"aria-posinset":a+1,"aria-selected":n.isSelected,"aria-setsize":t.length,innerRef:function(t){e.tabs.push({el:t,isSelected:n.isSelected})},isSelected:n.isSelected,key:a,onClick:n.onSelect,onKeyDown:e.tabKeyDownHandler,onMouseDown:e.tabMouseDownHandler,role:"tab",status:n.isSelected?"selected":"normal",tabIndex:n.isSelected?0:-1},n.label,n.isSelected?p.default.createElement(b.NavLine,{status:"selected"}):null)})))},t}(c.PureComponent);h.propTypes={onKeyboardNav:f.default.func.isRequired,tabs:f.default.arrayOf(f.default.shape({content:f.default.any,isSelected:f.default.bool,label:f.default.string.isRequired,onSelect:f.default.func.isRequired}))},t.default=h},function(e,t,n){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}function r(e){var t={light:h.colors.B400,dark:h.colors.B100};return(0,h.themed)("status",{normal:e,selected:t})}Object.defineProperty(t,"__esModule",{value:!0}),t.NavItem=t.NavLine=t.Nav=t.NavWrapper=t.TabPane=t.Tabs=void 0;var o=n(12),l=a(o),i=(0,l.default)(["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* See min-height note */\n"],["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* See min-height note */\n"]),u=(0,l.default)(["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ","px;\n  padding-right: ","px;\n"],["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ","px;\n  padding-right: ","px;\n"]),s=(0,l.default)(["\n  position: relative;\n"],["\n  position: relative;\n"]),d=(0,l.default)(["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n"],["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n"]),f=(0,l.default)(["\n  background-color: ",";\n  border-radius: ",";\n  bottom: 0;\n  content: '';\n  height: ",";\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"],["\n  background-color: ",";\n  border-radius: ",";\n  bottom: 0;\n  content: '';\n  height: ",";\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"]),c=(0,l.default)(["\n  color: ",";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ","px ","px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ",";\n  }\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ","px;\n    box-shadow: 0 0 0 2px "," inset;\n    outline: none;\n  }\n"],["\n  color: ",";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ","px ","px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ",";\n  }\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ","px;\n    box-shadow: 0 0 0 2px "," inset;\n    outline: none;\n  }\n"]),p=n(13),b=a(p),h=n(14),v=r({light:h.colors.N500,dark:h.colors.DN400}),g=r({light:h.colors.B500,dark:h.colors.B200}),y=r({light:h.colors.B100,dark:h.colors.B100}),m=r({light:h.colors.B400,dark:h.colors.B75}),x=r({light:h.colors.N30,dark:h.colors.DN0}),S="2px";t.Tabs=b.default.div(i),t.TabPane=b.default.div(u,h.gridSize,h.gridSize),t.NavWrapper=b.default.div(s),t.Nav=b.default.ul(d),t.NavLine=b.default.span(f,x,S,S,h.gridSize,h.gridSize),t.NavItem=b.default.li(c,v,h.math.divide(h.gridSize,2),h.gridSize,m,g,h.borderRadius,y)},function(e,t){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@atlaskit/theme")}]);

dist/bundle.js

 !function(root, factory) {
-    "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__) {
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/theme")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/extends", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "prop-types", "react", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "@atlaskit/theme" ], factory) : "object" == typeof exports ? exports["@atlaskit/tabs"] = factory(require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("prop-types"), require("react"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("@atlaskit/theme")) : root["@atlaskit/tabs"] = factory(root["babel-runtime/helpers/extends"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root["prop-types"], root.react, root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["@atlaskit/theme"]);
+}(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_12__, __WEBPACK_EXTERNAL_MODULE_13__, __WEBPACK_EXTERNAL_MODULE_14__) {
     /******/
@@ -83,5 +83,17 @@ return function(modules) {
             value: !0
-        }), exports.TabsStateless = void 0;
-        var _TabsStateless = __webpack_require__(2), _TabsStateless2 = _interopRequireDefault(_TabsStateless), _Tabs = __webpack_require__(17), _Tabs2 = _interopRequireDefault(_Tabs);
-        exports.default = _Tabs2.default, exports.TabsStateless = _TabsStateless2.default;
+        });
+        var _Tabs = __webpack_require__(2);
+        Object.defineProperty(exports, "default", {
+            enumerable: !0,
+            get: function() {
+                return _interopRequireDefault(_Tabs).default;
+            }
+        });
+        var _TabsStateless = __webpack_require__(9);
+        Object.defineProperty(exports, "TabsStateless", {
+            enumerable: !0,
+            get: function() {
+                return _interopRequireDefault(_TabsStateless).default;
+            }
+        });
     }, /* 2 */
@@ -99,29 +111,56 @@ /***/
         });
-        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, _PureComponent.apply(this, arguments));
+        var _extends2 = __webpack_require__(3), _extends3 = _interopRequireDefault(_extends2), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _TabsStateless = __webpack_require__(9), _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, _PureComponent.call(this, props));
+                _this.getTabs = function() {
+                    return _this.props.tabs.map(function(tab, index) {
+                        return (0, _extends3.default)({}, tab, {
+                            isSelected: index === _this.state.selectedTab,
+                            onKeyboardNav: _this.tabKeyboardNavHandler,
+                            onSelect: function() {
+                                return _this.tabSelectHandler(index);
+                            }
+                        });
+                    });
+                }, _this.tabSelectHandler = function(selectedTabIndex) {
+                    _this.props.onSelect(selectedTabIndex), _this.setState({
+                        selectedTab: selectedTabIndex
+                    });
+                }, _this.tabKeyboardNavHandler = function(key) {
+                    // Handle left and right arrow key presses by selecting the previous or next tab
+                    var selectedIndex = _this.state.selectedTab;
+                    if (null !== selectedIndex) {
+                        var nextIndex = selectedIndex;
+                        "ArrowLeft" === key ? nextIndex = selectedIndex - 1 < 0 ? 0 : selectedIndex - 1 : "ArrowRight" === key && (nextIndex = selectedIndex + 1 > _this.props.tabs.length - 1 ? _this.props.tabs.length - 1 : selectedIndex + 1), 
+                        nextIndex !== selectedIndex && _this.tabSelectHandler(nextIndex);
+                    }
+                };
+                var defaultSelectedIndex = null;
+                if (props) for (var i = 0; i < props.tabs.length; i++) if (props.tabs[i].defaultSelected) {
+                    defaultSelectedIndex = i;
+                    break;
+                }
+                return _this.state = {
+                    selectedTab: defaultSelectedIndex
+                }, _this;
             }
             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);
+                return _react2.default.createElement(_TabsStateless2.default, {
+                    onKeyboardNav: this.tabKeyboardNavHandler,
+                    tabs: this.getTabs()
+                });
             }, Tabs;
         }(_react.PureComponent);
         Tabs.propTypes = {
-            /** Handler for navigation using the keyboard buttons. */
-            onKeyboardNav: _propTypes2.default.func.isRequired,
-            /** The tabs to display, with content being hidden unless the tab is selected. */
+            /** Handler for selecting a new tab. Called with the number of the tab, zero-indexed */
+            onSelect: _propTypes2.default.func,
             tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-                content: _propTypes2.default.node,
-                isSelected: _propTypes2.default.bool,
-                label: _propTypes2.default.node.isRequired,
-                onSelect: _propTypes2.default.func.isRequired
+                content: _propTypes2.default.any,
+                defaultSelected: _propTypes2.default.bool,
+                label: _propTypes2.default.any.isRequired
             }))
         }, Tabs.defaultProps = {
+            onSelect: function() {},
             tabs: []
@@ -151,25 +190,6 @@ }, exports.default = Tabs;
     /***/
-    function(module, exports, __webpack_require__) {
-        "use strict";
-        function _interopRequireDefault(obj) {
-            return obj && obj.__esModule ? obj : {
-                default: obj
-            };
-        }
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        });
-        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;
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
     }, /* 9 */
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
-    }, /* 10 */
-    /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
-    }, /* 11 */
-    /***/
     function(module, exports, __webpack_require__) {
@@ -185,21 +205,32 @@ "use strict";
         });
-        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, _PureComponent.apply(this, arguments));
+        var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _TabsNav = __webpack_require__(10), _TabsNav2 = _interopRequireDefault(_TabsNav), _styled = __webpack_require__(11), TabsStateless = function(_PureComponent) {
+            function TabsStateless() {
+                return (0, _classCallCheck3.default)(this, TabsStateless), (0, _possibleConstructorReturn3.default)(this, _PureComponent.apply(this, arguments));
             }
-            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",
+            return (0, _inherits3.default)(TabsStateless, _PureComponent), TabsStateless.prototype.render = function() {
+                var _props = this.props, onKeyboardNav = _props.onKeyboardNav, tabs = _props.tabs, selectedTabs = tabs.filter(function(tab) {
+                    return tab.isSelected;
+                }), selectedTab = selectedTabs.length ? _react2.default.createElement(_styled.TabPane, {
                     role: "tabpanel"
-                }, this.props.children);
-            }, TabPane;
+                }, selectedTabs[0].content) : null;
+                return _react2.default.createElement(_styled.Tabs, null, _react2.default.createElement(_TabsNav2.default, {
+                    onKeyboardNav: onKeyboardNav,
+                    tabs: tabs
+                }), selectedTab);
+            }, TabsStateless;
         }(_react.PureComponent);
-        TabPane.propTypes = {
-            children: _propTypes2.default.node,
-            isSelected: _propTypes2.default.bool
-        }, TabPane.defaultProps = {
-            isSelected: !1
-        }, exports.default = TabPane;
-    }, /* 12 */
+        /* eslint-disable react/sort-comp */
+        TabsStateless.propTypes = {
+            /** Handler for navigation using the keyboard buttons. */
+            onKeyboardNav: _propTypes2.default.func.isRequired,
+            tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+                content: _propTypes2.default.any,
+                isSelected: _propTypes2.default.bool,
+                label: _propTypes2.default.string.isRequired,
+                onSelect: _propTypes2.default.func.isRequired
+            }))
+        }, TabsStateless.defaultProps = {
+            tabs: []
+        }, exports.default = TabsStateless;
+    }, /* 10 */
     /***/
@@ -216,38 +247,3 @@ function(module, exports, __webpack_require__) {
         });
-        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;
-            return selected ? "" : "display: none";
-        });
-        exports.default = TabPaneDiv;
-    }, /* 13 */
-    /***/
-    function(module, exports, __webpack_require__) {
-        "use strict";
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        }), 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__(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, 
-        exports.colorLabelDefault = colorLabelDefault, exports.colorLineDefault = colorLineDefault, 
-        exports.colorSelected = colorSelected, exports.focusWidth = focusWidth, exports.fontSize = fontSize, 
-        exports.lineHeight = lineHeight, exports.margin = margin, exports.paddingHorizontal = paddingHorizontal, 
-        exports.paddingVertical = paddingVertical;
-    }, /* 14 */
-    /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
-    }, /* 15 */
-    /***/
-    function(module, exports, __webpack_require__) {
-        "use strict";
-        function _interopRequireDefault(obj) {
-            return obj && obj.__esModule ? obj : {
-                default: obj
-            };
-        }
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        });
-        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) {
+        var _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _possibleConstructorReturn2 = __webpack_require__(5), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(6), _inherits3 = _interopRequireDefault(_inherits2), _propTypes = __webpack_require__(7), _propTypes2 = _interopRequireDefault(_propTypes), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _styled = __webpack_require__(11), TabsNav = function(_PureComponent) {
             function TabsNav() {
@@ -260,3 +256,3 @@ var _temp, _this, _ret;
                     wasKeyboardNav: !1
-                }, _this.tabKeyDownHandler = function(e) {
+                }, _this.tabs = [], _this.tabKeyDownHandler = function(e) {
                     _this.setState({
@@ -282,18 +278,12 @@ wasKeyboardNav: !0
             }, 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, {
+                var _this3 = this, tabs = this.props.tabs;
+                return _react2.default.createElement(_styled.NavWrapper, null, _react2.default.createElement(_styled.NavLine, {
+                    status: "normal"
+                }), _react2.default.createElement(_styled.Nav, {
                     role: "tablist"
                 }, tabs.map(function(tab, index) {
-                    return _react2.default.createElement(_TabsNav.TabLabel, {
+                    return _react2.default.createElement(_styled.NavItem, {
                         "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) {
@@ -305,5 +295,13 @@ _this3.tabs.push({
                         },
+                        isSelected: tab.isSelected,
+                        key: index,
+                        onClick: tab.onSelect,
+                        onKeyDown: _this3.tabKeyDownHandler,
+                        onMouseDown: _this3.tabMouseDownHandler,
                         role: "tab",
+                        status: tab.isSelected ? "selected" : "normal",
                         tabIndex: tab.isSelected ? 0 : -1
-                    }, tab.label);
+                    }, tab.label, tab.isSelected ? _react2.default.createElement(_styled.NavLine, {
+                        status: "selected"
+                    }) : null);
                 })));
@@ -313,13 +311,12 @@ }, TabsNav;
         TabsNav.propTypes = {
+            /** Handler for navigation using the keyboard buttons. */
             onKeyboardNav: _propTypes2.default.func.isRequired,
             tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-                content: _propTypes2.default.node,
+                content: _propTypes2.default.any,
+                isSelected: _propTypes2.default.bool,
                 label: _propTypes2.default.string.isRequired,
-                onSelect: _propTypes2.default.func.isRequired,
-                isSelected: _propTypes2.default.bool
+                onSelect: _propTypes2.default.func.isRequired
             }))
-        }, TabsNav.defaultProps = {
-            tabs: []
         }, exports.default = TabsNav;
-    }, /* 16 */
+    }, /* 11 */
     /***/
@@ -333,90 +330,54 @@ function(module, exports, __webpack_require__) {
         }
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        }), exports.TabLabels = exports.TabLabel = void 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__(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, 
-        _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) {
-            var isSelected = _ref.isSelected;
-            return isSelected ? selectedStyles : "";
-        });
-        exports.TabLabel = TabLabel, exports.TabLabels = TabLabels;
-    }, /* 17 */
-    /***/
-    function(module, exports, __webpack_require__) {
-        "use strict";
-        function _interopRequireDefault(obj) {
-            return obj && obj.__esModule ? obj : {
-                default: obj
+        function lockSelectedColor(normal) {
+            var selected = {
+                light: _theme.colors.B400,
+                dark: _theme.colors.B100
             };
+            return (0, _theme.themed)("status", {
+                normal: normal,
+                selected: selected
+            });
         }
         Object.defineProperty(exports, "__esModule", {
             value: !0
-        });
-        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, _PureComponent.call(this, props));
-                _this.getTabs = function() {
-                    return _this.props.tabs.map(function(tab, index) {
-                        return (0, _extends3.default)({}, tab, {
-                            isSelected: index === _this.state.selectedTab,
-                            onKeyboardNav: _this.tabKeyboardNavHandler,
-                            onSelect: function() {
-                                return _this.tabSelectHandler(index);
-                            }
-                        });
-                    });
-                }, _this.tabSelectHandler = function(selectedTabIndex) {
-                    _this.props.onSelect(selectedTabIndex), _this.setState({
-                        selectedTab: selectedTabIndex
-                    });
-                }, _this.tabKeyboardNavHandler = function(key) {
-                    // Handle left and right arrow key presses by selecting the previous or next tab
-                    var selectedIndex = _this.state.selectedTab;
-                    if (null !== selectedIndex) {
-                        var nextIndex = selectedIndex;
-                        "ArrowLeft" === key ? nextIndex = selectedIndex - 1 < 0 ? 0 : selectedIndex - 1 : "ArrowRight" === key && (nextIndex = selectedIndex + 1 > _this.props.tabs.length - 1 ? _this.props.tabs.length - 1 : selectedIndex + 1), 
-                        nextIndex !== selectedIndex && _this.tabSelectHandler(nextIndex);
-                    }
-                };
-                var defaultSelectedIndex = null;
-                if (props) for (var i = 0; i < props.tabs.length; i++) if (props.tabs[i].defaultSelected) {
-                    defaultSelectedIndex = i;
-                    break;
-                }
-                return _this.state = {
-                    selectedTab: defaultSelectedIndex
-                }, _this;
-            }
-            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);
-        Tabs.propTypes = {
-            /** Handler for selecting a new tab. Called with the number of the tab, zero-indexed */
-            onSelect: _propTypes2.default.func,
-            /** The tabs to display, with content being hidden unless the tab is selected. */
-            tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-                content: _propTypes2.default.node,
-                defaultSelected: _propTypes2.default.bool,
-                label: _propTypes2.default.node.isRequired
-            }))
-        }, Tabs.defaultProps = {
-            onSelect: function() {},
-            tabs: []
-        }, exports.default = Tabs;
-    }, /* 18 */
+        }), exports.NavItem = exports.NavLine = exports.Nav = exports.NavWrapper = exports.TabPane = exports.Tabs = void 0;
+        var _taggedTemplateLiteral2 = __webpack_require__(12), _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%; /* See min-height note */\n" ], [ "\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* See min-height note */\n" ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ", "px;\n  padding-right: ", "px;\n" ], [ "\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ", "px;\n  padding-right: ", "px;\n" ]), _templateObject3 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  position: relative;\n" ], [ "\n  position: relative;\n" ]), _templateObject4 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n" ], [ "\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n" ]), _templateObject5 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  background-color: ", ";\n  border-radius: ", ";\n  bottom: 0;\n  content: '';\n  height: ", ";\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ], [ "\n  background-color: ", ";\n  border-radius: ", ";\n  bottom: 0;\n  content: '';\n  height: ", ";\n  left: ", "px;\n  margin: 0;\n  position: absolute;\n  right: ", "px;\n  width: inherit;\n" ]), _templateObject6 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  color: ", ";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ", "px ", "px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ", ";\n  }\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", "px;\n    box-shadow: 0 0 0 2px ", " inset;\n    outline: none;\n  }\n" ], [ "\n  color: ", ";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ", "px ", "px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ", ";\n  }\n  &:active,\n  &:active::before{\n    color: ", ";\n  }\n\n  &:focus {\n    border-radius: ", "px;\n    box-shadow: 0 0 0 2px ", " inset;\n    outline: none;\n  }\n" ]), _styledComponents = __webpack_require__(13), _styledComponents2 = _interopRequireDefault(_styledComponents), _theme = __webpack_require__(14), labelColor = lockSelectedColor({
+            light: _theme.colors.N500,
+            dark: _theme.colors.DN400
+        }), activeLabelColor = lockSelectedColor({
+            light: _theme.colors.B500,
+            dark: _theme.colors.B200
+        }), focusLabelColor = lockSelectedColor({
+            light: _theme.colors.B100,
+            dark: _theme.colors.B100
+        }), hoverLabelColor = lockSelectedColor({
+            light: _theme.colors.B400,
+            dark: _theme.colors.B75
+        }), underlineColor = lockSelectedColor({
+            light: _theme.colors.N30,
+            dark: _theme.colors.DN0
+        }), underlineHeight = "2px";
+        exports.Tabs = _styledComponents2.default.div(_templateObject), exports.TabPane = _styledComponents2.default.div(_templateObject2, _theme.gridSize, _theme.gridSize), 
+        exports.NavWrapper = _styledComponents2.default.div(_templateObject3), exports.Nav = _styledComponents2.default.ul(_templateObject4), 
+        exports.NavLine = _styledComponents2.default.span(_templateObject5, underlineColor, underlineHeight, underlineHeight, _theme.gridSize, _theme.gridSize), 
+        exports.NavItem = _styledComponents2.default.li(_templateObject6, labelColor, _theme.math.divide(_theme.gridSize, 2), _theme.gridSize, hoverLabelColor, activeLabelColor, _theme.borderRadius, focusLabelColor);
+    }, /* 12 */
     /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_18__;
+        module.exports = __WEBPACK_EXTERNAL_MODULE_12__;
+    }, /* 13 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_13__;
+    }, /* 14 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
     } ]);
 });

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!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}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/theme")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/extends","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","prop-types","react","babel-runtime/helpers/taggedTemplateLiteral","styled-components","@atlaskit/theme"],t):"object"==typeof exports?exports["@atlaskit/tabs"]=t(require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("prop-types"),require("react"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("@atlaskit/theme")):e["@atlaskit/tabs"]=t(e["babel-runtime/helpers/extends"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e["prop-types"],e.react,e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["@atlaskit/theme"])}(this,function(e,t,n,r,a,l,o,i,s){return function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.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});var a=n(2);Object.defineProperty(t,"default",{enumerable:!0,get:function(){return r(a).default}});var l=n(9);Object.defineProperty(t,"TabsStateless",{enumerable:!0,get:function(){return r(l).default}})},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var a=n(3),l=r(a),o=n(4),i=r(o),s=n(5),u=r(s),d=n(6),c=r(d),p=n(7),f=r(p),b=n(8),h=r(b),m=n(9),g=r(m),v=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,l.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 a=null;if(n)for(var o=0;o<n.tabs.length;o++)if(n.tabs[o].defaultSelected){a=o;break}return r.state={selectedTab:a},r}return(0,c.default)(t,e),t.prototype.render=function(){return h.default.createElement(g.default,{onKeyboardNav:this.tabKeyboardNavHandler,tabs:this.getTabs()})},t}(b.PureComponent);v.propTypes={onSelect:f.default.func,tabs:f.default.arrayOf(f.default.shape({content:f.default.any,defaultSelected:f.default.bool,label:f.default.any.isRequired}))},v.defaultProps={onSelect:function(){},tabs:[]},t.default=v},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=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 a=n(4),l=r(a),o=n(5),i=r(o),s=n(6),u=r(s),d=n(7),c=r(d),p=n(8),f=r(p),b=n(10),h=r(b),m=n(11),g=function(e){function t(){return(0,l.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,t=e.onKeyboardNav,n=e.tabs,r=n.filter(function(e){return e.isSelected}),a=r.length?f.default.createElement(m.TabPane,{role:"tabpanel"},r[0].content):null;return f.default.createElement(m.Tabs,null,f.default.createElement(h.default,{onKeyboardNav:t,tabs:n}),a)},t}(p.PureComponent);g.propTypes={onKeyboardNav:c.default.func.isRequired,tabs:c.default.arrayOf(c.default.shape({content:c.default.any,isSelected:c.default.bool,label:c.default.string.isRequired,onSelect:c.default.func.isRequired}))},g.defaultProps={tabs:[]},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 a=n(4),l=r(a),o=n(5),i=r(o),s=n(6),u=r(s),d=n(7),c=r(d),p=n(8),f=r(p),b=n(11),h=function(e){function t(){var n,r,a;(0,l.default)(this,t);for(var o=arguments.length,s=Array(o),u=0;u<o;u++)s[u]=arguments[u];return n=r=(0,i.default)(this,e.call.apply(e,[this].concat(s))),r.state={wasKeyboardNav:!1},r.tabs=[],r.tabKeyDownHandler=function(e){r.setState({wasKeyboardNav:!0}),r.props.onKeyboardNav(e.key)},r.tabMouseDownHandler=function(e){return e.preventDefault()},a=n,(0,i.default)(r,a)}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,t=this.props.tabs;return f.default.createElement(b.NavWrapper,null,f.default.createElement(b.NavLine,{status:"normal"}),f.default.createElement(b.Nav,{role:"tablist"},t.map(function(n,r){return f.default.createElement(b.NavItem,{"aria-posinset":r+1,"aria-selected":n.isSelected,"aria-setsize":t.length,innerRef:function(t){e.tabs.push({el:t,isSelected:n.isSelected})},isSelected:n.isSelected,key:r,onClick:n.onSelect,onKeyDown:e.tabKeyDownHandler,onMouseDown:e.tabMouseDownHandler,role:"tab",status:n.isSelected?"selected":"normal",tabIndex:n.isSelected?0:-1},n.label,n.isSelected?f.default.createElement(b.NavLine,{status:"selected"}):null)})))},t}(p.PureComponent);h.propTypes={onKeyboardNav:c.default.func.isRequired,tabs:c.default.arrayOf(c.default.shape({content:c.default.any,isSelected:c.default.bool,label:c.default.string.isRequired,onSelect:c.default.func.isRequired}))},t.default=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function a(e){var t={light:h.colors.B400,dark:h.colors.B100};return(0,h.themed)("status",{normal:e,selected:t})}Object.defineProperty(t,"__esModule",{value:!0}),t.NavItem=t.NavLine=t.Nav=t.NavWrapper=t.TabPane=t.Tabs=void 0;var l=n(12),o=r(l),i=(0,o.default)(["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* See min-height note */\n"],["\n  display: flex;\n  flex-basis: 100%;\n  flex-direction: column;\n  flex-grow: 1;\n  max-width: 100%;\n  min-height: 0%; /* See min-height note */\n"]),s=(0,o.default)(["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ","px;\n  padding-right: ","px;\n"],["\n  display: flex;\n  flex-grow: 1;\n  min-height: 0%; /* See min-height note */\n  padding-left: ","px;\n  padding-right: ","px;\n"]),u=(0,o.default)(["\n  position: relative;\n"],["\n  position: relative;\n"]),d=(0,o.default)(["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n"],["\n  display: flex;\n  font-weight: 500;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n"]),c=(0,o.default)(["\n  background-color: ",";\n  border-radius: ",";\n  bottom: 0;\n  content: '';\n  height: ",";\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"],["\n  background-color: ",";\n  border-radius: ",";\n  bottom: 0;\n  content: '';\n  height: ",";\n  left: ","px;\n  margin: 0;\n  position: absolute;\n  right: ","px;\n  width: inherit;\n"]),p=(0,o.default)(["\n  color: ",";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ","px ","px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ",";\n  }\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ","px;\n    box-shadow: 0 0 0 2px "," inset;\n    outline: none;\n  }\n"],["\n  color: ",";\n  cursor: pointer;\n  line-height: 1.8;\n  margin: 0;\n  padding: ","px ","px;\n  position: relative;\n  white-space: nowrap;\n\n  &:hover {\n    color: ",";\n  }\n  &:active,\n  &:active::before{\n    color: ",";\n  }\n\n  &:focus {\n    border-radius: ","px;\n    box-shadow: 0 0 0 2px "," inset;\n    outline: none;\n  }\n"]),f=n(13),b=r(f),h=n(14),m=a({light:h.colors.N500,dark:h.colors.DN400}),g=a({light:h.colors.B500,dark:h.colors.B200}),v=a({light:h.colors.B100,dark:h.colors.B100}),y=a({light:h.colors.B400,dark:h.colors.B75}),x=a({light:h.colors.N30,dark:h.colors.DN0}),S="2px";t.Tabs=b.default.div(i),t.TabPane=b.default.div(s,h.gridSize,h.gridSize),t.NavWrapper=b.default.div(u),t.Nav=b.default.ul(d),t.NavLine=b.default.span(c,x,S,S,h.gridSize,h.gridSize),t.NavItem=b.default.li(p,m,h.math.divide(h.gridSize,2),h.gridSize,y,g,h.borderRadius,v)},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=s}])});

dist/es/components/Tabs.js

@@ -5,4 +5,6 @@ import _extends from 'babel-runtime/helpers/extends';
 import _inherits from 'babel-runtime/helpers/inherits';
+import _PropTypes from 'prop-types';
+
+/* eslint-disable react/sort-comp */
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import TabsStateless from './TabsStateless';
@@ -82,8 +84,8 @@
   /** Handler for selecting a new tab. Called with the number of the tab, zero-indexed */
-  onSelect: PropTypes.func,
-  /** The tabs to display, with content being hidden unless the tab is selected. */
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    content: PropTypes.node,
-    defaultSelected: PropTypes.bool,
-    label: PropTypes.node.isRequired
+  onSelect: _PropTypes.func /** The tabs to display, with content being hidden unless the tab is selected. */
+  ,
+  tabs: _PropTypes.arrayOf(_PropTypes.shape({
+    content: _PropTypes.any,
+    defaultSelected: _PropTypes.bool,
+    label: _PropTypes.any.isRequired
   }))
@@ -90,0 +92,0 @@ };

dist/es/components/TabsNav.js

 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
+import _PropTypes from 'prop-types';
+
+/*
+  eslint-disable
+
+  jsx-a11y/role-supports-aria-props,
+  jsx-a11y/no-static-element-interactions,
+  react/sort-comp
+*/
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { TabLabel, TabLabels } from '../styled/TabsNav';
+import { Nav, NavItem, NavLine, NavWrapper } from '../styled';
 
@@ -20,5 +28,3 @@ var TabsNav = function (_PureComponent) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.state = {
-      wasKeyboardNav: false
-    }, _this.tabKeyDownHandler = function (e) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _PureComponent.call.apply(_PureComponent, [this].concat(args))), _this), _this.state = { wasKeyboardNav: false }, _this.tabs = [], _this.tabKeyDownHandler = function (e) {
       _this.setState({ wasKeyboardNav: true });
@@ -59,17 +65,15 @@ _this.props.onKeyboardNav(e.key);
 
-    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',
+      NavWrapper,
       null,
+      React.createElement(NavLine, { status: 'normal' }),
       React.createElement(
-        TabLabels,
-        {
-          role: 'tablist'
-        },
+        Nav,
+        { role: 'tablist' },
         tabs.map(function (tab, index) {
           return React.createElement(
-            TabLabel,
+            NavItem,
             {
@@ -79,7 +83,2 @@ 'aria-posinset': index + 1,
               'aria-setsize': tabs.length,
-              isSelected: tab.isSelected,
-              key: index,
-              onClick: tab.onSelect,
-              onKeyDown: _this3.tabKeyDownHandler,
-              onMouseDown: _this3.tabMouseDownHandler,
               innerRef: function innerRef(ref) {
@@ -91,6 +90,13 @@ _this3.tabs.push({
               },
+              isSelected: tab.isSelected // used in testing
+              , key: index,
+              onClick: tab.onSelect,
+              onKeyDown: _this3.tabKeyDownHandler,
+              onMouseDown: _this3.tabMouseDownHandler,
               role: 'tab',
+              status: tab.isSelected ? 'selected' : 'normal',
               tabIndex: tab.isSelected ? 0 : -1
             },
-            tab.label
+            tab.label,
+            tab.isSelected ? React.createElement(NavLine, { status: 'selected' }) : null
           );
@@ -107,13 +113,10 @@ })
 TabsNav.propTypes = {
-  onKeyboardNav: PropTypes.func.isRequired,
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    content: PropTypes.node,
-    label: PropTypes.string.isRequired,
-    onSelect: PropTypes.func.isRequired,
-    isSelected: PropTypes.bool
+  /** Handler for navigation using the keyboard buttons. */onKeyboardNav: _PropTypes.func.isRequired /** The tabs to display, with content being hidden unless the tab is selected. */,
+  tabs: _PropTypes.arrayOf(_PropTypes.shape({
+    content: _PropTypes.any,
+    isSelected: _PropTypes.bool,
+    label: _PropTypes.string.isRequired,
+    onSelect: _PropTypes.func.isRequired
   }))
 };
-TabsNav.defaultProps = {
-  tabs: []
-};
 export default TabsNav;

dist/es/components/TabsStateless.js

 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
+import _PropTypes from 'prop-types';
+
+/* eslint-disable react/sort-comp */
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import TabsDiv from '../styled/Tabs';
 
-import TabPane from './TabPane';
 import TabsNav from './TabsNav';
+import { TabPane, Tabs } from '../styled';
 
-var Tabs = function (_PureComponent) {
-  _inherits(Tabs, _PureComponent);
+var TabsStateless = function (_PureComponent) {
+  _inherits(TabsStateless, _PureComponent);
 
-  function Tabs() {
-    _classCallCheck(this, Tabs);
+  function TabsStateless() {
+    _classCallCheck(this, TabsStateless);
 
@@ -20,4 +21,8 @@ return _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
 
-  Tabs.prototype.render = function render() {
-    var selectedTabs = this.props.tabs.filter(function (tab) {
+  TabsStateless.prototype.render = function render() {
+    var _props = this.props,
+        onKeyboardNav = _props.onKeyboardNav,
+        tabs = _props.tabs;
+
+    var selectedTabs = tabs.filter(function (tab) {
       return tab.isSelected;
@@ -27,3 +32,3 @@ });
       TabPane,
-      { isSelected: selectedTabs[0].isSelected },
+      { role: 'tabpanel' },
       selectedTabs[0].content
@@ -33,8 +38,5 @@ ) : null;
     return React.createElement(
-      TabsDiv,
+      Tabs,
       null,
-      React.createElement(TabsNav, {
-        onKeyboardNav: this.props.onKeyboardNav,
-        tabs: this.props.tabs
-      }),
+      React.createElement(TabsNav, { onKeyboardNav: onKeyboardNav, tabs: tabs }),
       selectedTab
@@ -44,19 +46,15 @@ );
 
-  return Tabs;
+  return TabsStateless;
 }(PureComponent);
 
-Tabs.propTypes = {
-  /** Handler for navigation using the keyboard buttons. */
-  onKeyboardNav: PropTypes.func.isRequired,
-  /** The tabs to display, with content being hidden unless the tab is selected. */
-  tabs: PropTypes.arrayOf(PropTypes.shape({
-    content: PropTypes.node,
-    isSelected: PropTypes.bool,
-    label: PropTypes.node.isRequired,
-    onSelect: PropTypes.func.isRequired
+TabsStateless.propTypes = {
+  /** Handler for navigation using the keyboard buttons. */onKeyboardNav: _PropTypes.func.isRequired /** The tabs to display, with content being hidden unless the tab is selected. */,
+  tabs: _PropTypes.arrayOf(_PropTypes.shape({
+    content: _PropTypes.any,
+    isSelected: _PropTypes.bool,
+    label: _PropTypes.string.isRequired,
+    onSelect: _PropTypes.func.isRequired
   }))
 };
-Tabs.defaultProps = {
-  tabs: []
-};
-export default Tabs;
+TabsStateless.defaultProps = { tabs: [] };
+export default TabsStateless;

dist/es/index.js

@@ -1,5 +0,2 @@
-import TabsStateless from './components/TabsStateless';
-import Tabs from './components/Tabs';
-
-export default Tabs;
-export { TabsStateless };
+export { default } from './components/Tabs';
+export { default as TabsStateless } from './components/TabsStateless';

package.json

 {
   "name": "@atlaskit/tabs",
-  "version": "2.4.2",
+  "version": "4.0.0",
   "config": {
@@ -13,9 +13,12 @@ "access": "public"
   "ak:component": {
-    "name": "Tabs"
+    "name": "Tabs",
+    "dark": true
   },
   "scripts": {
+    "eslint": "../../build/bin/lint.eslint.sh",
+    "jest": "echo 'yarn run jest is deprecated and removed. please run yarn run test:unit instead.'",
     "prepublish": "../../node_modules/.bin/in-publish && { cd ../.. && npm run prepublish-with-babel/single @atlaskit/tabs; } || ../../node_modules/.bin/not-in-publish",
-    "jest": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js",
-    "storybook": "../../build/bin/storybook.single.sh",
-    "eslint": "../../build/bin/lint.eslint.sh"
+    "storybook": "../../build/bin/storybook/run.local.js",
+    "storybook:static": "../../build/bin/storybook/build.static.js",
+    "test:unit": "../../node_modules/.bin/jest -c ../../build/config/jest.config.js"
   },
@@ -33,2 +36,3 @@ "files": [
   "dependencies": {
+    "@atlaskit/theme": "^2.0.0",
     "@atlaskit/util-shared-styles": "^1.0.0",
@@ -46,2 +50,3 @@ "classnames": "^2.2.5",
     "@atlaskit/util-readme": "^1.0.0",
+    "babel-plugin-react-flow-props-to-prop-types": "0.14.0",
     "react-lorem-component": "0.11.0"
@@ -48,0 +53,0 @@ },

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.2/).
+Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/tabs/4.0.0/).
 
@@ -17,0 +17,0 @@ ## Installation

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of versions

185

increased by0.54%

Published versions last two months

11

increased by10%

Published versions last week

1

increased byInfinity%

Worsened metrics

Total package byte prevSize

80250

decreased by-13.64%

Dependency count

9

increased by12.5%

Dev dependency count

5

increased by25%

Number of package files

14

decreased by-17.65%

Lines of code

1030

decreased by-12.27%

Number of medium supply chain risk alerts

1

increased byInfinity%

Published versions last months

5

decreased by-16.67%

Dependency changes

• + Added@atlaskit/theme@^2.0.0

• + Added@atlaskit/theme@2.4.1(transitive)