@atlaskit/tabs 13.2.2 → 13.2.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/tabs
 
+## 13.2.6
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 13.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.4
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 13.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.2.2
 
 ### Patch Changes

package/dist/cjs/components/tabs.js

@@ -29,14 +29,14 @@ var _styles = require("../internal/styles");
 
 var _utils = require("../internal/utils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.2"
+  packageVersion: "13.2.6"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/cjs/index.js

@@ -5,28 +5,28 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Tab", {
   enumerable: true,
   get: function get() {
-    return _tabs.default;
+    return _tab.default;
   }
 });
-Object.defineProperty(exports, "TabPanel", {
+Object.defineProperty(exports, "TabList", {
   enumerable: true,
   get: function get() {
-    return _tabPanel.default;
+    return _tabList.default;
   }
 });
-Object.defineProperty(exports, "Tab", {
+Object.defineProperty(exports, "TabPanel", {
   enumerable: true,
   get: function get() {
-    return _tab.default;
+    return _tabPanel.default;
   }
 });
-Object.defineProperty(exports, "TabList", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _tabList.default;
+    return _tabs.default;
   }
 });
 Object.defineProperty(exports, "useTab", {

package/dist/cjs/internal/colors.js

@@ -7,22 +7,20 @@ exports.getTabPanelFocusColor = exports.getTabLineColor = exports.getTabColors =
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var tabColorMap = {
   light: {
-    labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
-    activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B500),
-    hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400),
-    focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B100)
+    labelColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+    activeLabelColor: "var(--ds-text, ".concat(_colors.B500, ")"),
+    hoverLabelColor: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
+    selectedColor: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
+    focusBorderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
   },
   dark: {
-    labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.DN400),
-    activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B200),
-    hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B75),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75),
-    focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B75)
+    labelColor: "var(--ds-text-subtle, ".concat(_colors.DN400, ")"),
+    activeLabelColor: "var(--ds-text, ".concat(_colors.B200, ")"),
+    hoverLabelColor: "var(--ds-text-subtle, ".concat(_colors.B75, ")"),
+    selectedColor: "var(--ds-text-brand, ".concat(_colors.B75, ")"),
+    focusBorderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
   }
 };
 
@@ -33,16 +31,16 @@ var getTabColors = function getTabColors(mode) {
 exports.getTabColors = getTabColors;
 var tabLineColorMap = {
   light: {
-    lineColor: (0, _tokens.token)('color.border.neutral', _colors.N30),
-    hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400)
+    lineColor: "var(--ds-border, ".concat(_colors.N30, ")"),
+    hoveredColor: "var(--ds-border, transparent)",
+    activeColor: "var(--ds-border, transparent)",
+    selectedColor: "var(--ds-text-brand, ".concat(_colors.B400, ")")
   },
   dark: {
-    lineColor: (0, _tokens.token)('color.border.neutral', _colors.DN0),
-    hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
-    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75)
+    lineColor: "var(--ds-border, ".concat(_colors.DN0, ")"),
+    hoveredColor: "var(--ds-border, transparent)",
+    activeColor: "var(--ds-border, transparent)",
+    selectedColor: "var(--ds-text-brand, ".concat(_colors.B75, ")")
   }
 };
 
@@ -52,8 +50,8 @@ var getTabLineColor = function getTabLineColor(mode) {
 
 exports.getTabLineColor = getTabLineColor;
 var tabPanelFocusColorMap = {
-  light: (0, _tokens.token)('color.border.focus', _colors.B100),
-  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
+  light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+  dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
 };
 
 var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {

package/dist/cjs/internal/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTabStyles = exports.getTabListStyles = exports.getTabsStyles = void 0;
+exports.getTabsStyles = exports.getTabStyles = exports.getTabListStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,9 +13,9 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("./colors");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.2.2",
+	"version": "13.2.6",
 	"sideEffects": false
 }

package/dist/es2019/components/tabs.js

@@ -11,7 +11,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.2"
+  packageVersion: "13.2.6"
 };
 
 const getTabPanelWithContext = ({

package/dist/es2019/internal/colors.js

@@ -1,19 +1,18 @@
 import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const tabColorMap = {
   light: {
-    labelColor: token('color.text.mediumEmphasis', N500),
-    activeLabelColor: token('color.text.highEmphasis', B500),
-    hoverLabelColor: token('color.text.mediumEmphasis', B400),
-    selectedColor: token('color.text.selected', B400),
-    focusBorderColor: token('color.border.focus', B100)
+    labelColor: `var(--ds-text-subtle, ${N500})`,
+    activeLabelColor: `var(--ds-text, ${B500})`,
+    hoverLabelColor: `var(--ds-text-subtle, ${B400})`,
+    selectedColor: `var(--ds-text-brand, ${B400})`,
+    focusBorderColor: `var(--ds-border-focused, ${B100})`
   },
   dark: {
-    labelColor: token('color.text.mediumEmphasis', DN400),
-    activeLabelColor: token('color.text.highEmphasis', B200),
-    hoverLabelColor: token('color.text.mediumEmphasis', B75),
-    selectedColor: token('color.text.selected', B75),
-    focusBorderColor: token('color.border.focus', B75)
+    labelColor: `var(--ds-text-subtle, ${DN400})`,
+    activeLabelColor: `var(--ds-text, ${B200})`,
+    hoverLabelColor: `var(--ds-text-subtle, ${B75})`,
+    selectedColor: `var(--ds-text-brand, ${B75})`,
+    focusBorderColor: `var(--ds-border-focused, ${B75})`
   }
 };
 export const getTabColors = mode => {
@@ -21,21 +20,21 @@ export const getTabColors = mode => {
 };
 const tabLineColorMap = {
   light: {
-    lineColor: token('color.border.neutral', N30),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B400)
+    lineColor: `var(--ds-border, ${N30})`,
+    hoveredColor: "var(--ds-border, transparent)",
+    activeColor: "var(--ds-border, transparent)",
+    selectedColor: `var(--ds-text-brand, ${B400})`
   },
   dark: {
-    lineColor: token('color.border.neutral', DN0),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B75)
+    lineColor: `var(--ds-border, ${DN0})`,
+    hoveredColor: "var(--ds-border, transparent)",
+    activeColor: "var(--ds-border, transparent)",
+    selectedColor: `var(--ds-text-brand, ${B75})`
   }
 };
 export const getTabLineColor = mode => tabLineColorMap[mode];
 const tabPanelFocusColorMap = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: `var(--ds-border-focused, ${B100})`,
+  dark: `var(--ds-border-focused, ${B75})`
 };
 export const getTabPanelFocusColor = mode => tabPanelFocusColorMap[mode];

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.2.2",
+	"version": "13.2.6",
 	"sideEffects": false
 }

package/dist/esm/components/tabs.js

@@ -3,9 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toArray from "@babel/runtime/helpers/toArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import { Children, useCallback, useMemo, useRef, useState } from 'react';
@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.2"
+  packageVersion: "13.2.6"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/esm/internal/colors.js

@@ -1,19 +1,18 @@
 import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var tabColorMap = {
   light: {
-    labelColor: token('color.text.mediumEmphasis', N500),
-    activeLabelColor: token('color.text.highEmphasis', B500),
-    hoverLabelColor: token('color.text.mediumEmphasis', B400),
-    selectedColor: token('color.text.selected', B400),
-    focusBorderColor: token('color.border.focus', B100)
+    labelColor: "var(--ds-text-subtle, ".concat(N500, ")"),
+    activeLabelColor: "var(--ds-text, ".concat(B500, ")"),
+    hoverLabelColor: "var(--ds-text-subtle, ".concat(B400, ")"),
+    selectedColor: "var(--ds-text-brand, ".concat(B400, ")"),
+    focusBorderColor: "var(--ds-border-focused, ".concat(B100, ")")
   },
   dark: {
-    labelColor: token('color.text.mediumEmphasis', DN400),
-    activeLabelColor: token('color.text.highEmphasis', B200),
-    hoverLabelColor: token('color.text.mediumEmphasis', B75),
-    selectedColor: token('color.text.selected', B75),
-    focusBorderColor: token('color.border.focus', B75)
+    labelColor: "var(--ds-text-subtle, ".concat(DN400, ")"),
+    activeLabelColor: "var(--ds-text, ".concat(B200, ")"),
+    hoverLabelColor: "var(--ds-text-subtle, ".concat(B75, ")"),
+    selectedColor: "var(--ds-text-brand, ".concat(B75, ")"),
+    focusBorderColor: "var(--ds-border-focused, ".concat(B75, ")")
   }
 };
 export var getTabColors = function getTabColors(mode) {
@@ -21,24 +20,24 @@ export var getTabColors = function getTabColors(mode) {
 };
 var tabLineColorMap = {
   light: {
-    lineColor: token('color.border.neutral', N30),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B400)
+    lineColor: "var(--ds-border, ".concat(N30, ")"),
+    hoveredColor: "var(--ds-border, transparent)",
+    activeColor: "var(--ds-border, transparent)",
+    selectedColor: "var(--ds-text-brand, ".concat(B400, ")")
   },
   dark: {
-    lineColor: token('color.border.neutral', DN0),
-    hoveredColor: token('color.border.neutral', 'transparent'),
-    activeColor: token('color.border.neutral', 'transparent'),
-    selectedColor: token('color.text.selected', B75)
+    lineColor: "var(--ds-border, ".concat(DN0, ")"),
+    hoveredColor: "var(--ds-border, transparent)",
+    activeColor: "var(--ds-border, transparent)",
+    selectedColor: "var(--ds-text-brand, ".concat(B75, ")")
   }
 };
 export var getTabLineColor = function getTabLineColor(mode) {
   return tabLineColorMap[mode];
 };
 var tabPanelFocusColorMap = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: "var(--ds-border-focused, ".concat(B100, ")"),
+  dark: "var(--ds-border-focused, ".concat(B75, ")")
 };
 export var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
   return tabPanelFocusColorMap[mode];

package/dist/esm/internal/styles.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.2.2",
+	"version": "13.2.6",
 	"sideEffects": false
 }

package/dist/types/components/tab-list.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TabListProps } from '../types';
 export declare const TabList: (props: TabListProps) => JSX.Element;
 export default TabList;

package/dist/types/components/tab-panel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TabPanelProps } from '../types';
 declare const TabPanel: ({ children, testId }: TabPanelProps) => JSX.Element;
 export default TabPanel;

package/dist/types/components/tab.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { TabProps } from '../types';
 export default function Tab({ children, testId }: TabProps): JSX.Element;

package/dist/types/components/tabs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TabsProps } from '../types';
 export declare const Tabs: (props: TabsProps) => JSX.Element;
 export default Tabs;

package/dist/types/performance/examples.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PublicInteractionTask } from 'storybook-addon-performance';
 export declare const performance: {
     (): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.2.2",
+  "version": "13.2.6",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Tabs"
@@ -25,8 +24,8 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/codemod-utils": "^3.4.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -34,7 +33,6 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.1.0",
@@ -61,7 +59,10 @@
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },

package/dist/cjs/performance/examples.js

@@ -1,196 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.heavyPerformance = exports.performance = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _index = _interopRequireWildcard(require("../index"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-var interactionTasks = [{
-  name: 'Change tabs',
-  description: 'Change tabs',
-  run: function () {
-    var _run = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref) {
-      var container, controls, tab2;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              container = _ref.container, controls = _ref.controls;
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab2 == null)) {
-                _context2.next = 4;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 4:
-              _context2.next = 6;
-              return controls.time( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-                return _regenerator.default.wrap(function _callee$(_context) {
-                  while (1) {
-                    switch (_context.prev = _context.next) {
-                      case 0:
-                        _react2.fireEvent.click(tab2);
-
-                      case 1:
-                      case "end":
-                        return _context.stop();
-                    }
-                  }
-                }, _callee);
-              })));
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    function run(_x) {
-      return _run.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function PerformanceComponent() {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    id: "test"
-  }, /*#__PURE__*/_react.default.createElement(_index.TabList, null, /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 3"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 4")), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "One"), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "Two"), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "Three"), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "Four"));
-}
-
-var performance = function performance() {
-  return /*#__PURE__*/_react.default.createElement(PerformanceComponent, null);
-};
-
-exports.performance = performance;
-performance.story = {
-  name: 'Performance',
-  parameters: {
-    performance: {
-      interactions: interactionTasks
-    }
-  }
-};
-var heavyInteractionTasks = [{
-  name: 'Change tabs twice',
-  description: 'Change tabs twice',
-  run: function () {
-    var _run2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref3) {
-      var container, controls, tab1, tab2;
-      return _regenerator.default.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              container = _ref3.container, controls = _ref3.controls;
-              tab1 = container.querySelector('div[data-testid="tab1"]');
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab1 === null || tab2 === null)) {
-                _context4.next = 5;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 5:
-              _react2.fireEvent.click(tab2);
-
-              _context4.next = 8;
-              return controls.time( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-                return _regenerator.default.wrap(function _callee3$(_context3) {
-                  while (1) {
-                    switch (_context3.prev = _context3.next) {
-                      case 0:
-                        _react2.fireEvent.click(tab1);
-
-                      case 1:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }
-                }, _callee3);
-              })));
-
-            case 8:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
-
-    function run(_x2) {
-      return _run2.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function HeavyContent(_ref5) {
-  var text = _ref5.text;
-  return /*#__PURE__*/_react.default.createElement("div", null, Array(100).fill(undefined).map(function () {
-    return /*#__PURE__*/_react.default.createElement("div", null, text);
-  }));
-}
-
-function HeavyPanelPerformanceComponent() {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    id: "heavy"
-  }, /*#__PURE__*/_react.default.createElement(_index.TabList, null, /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 3"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 4")), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "One"
-  })), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "Two"
-  })), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "Three"
-  })), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "Four"
-  })));
-}
-
-var heavyPerformance = function heavyPerformance() {
-  return /*#__PURE__*/_react.default.createElement(HeavyPanelPerformanceComponent, null);
-};
-
-exports.heavyPerformance = heavyPerformance;
-heavyPerformance.story = {
-  name: 'Performance with heavy panels',
-  parameters: {
-    performance: {
-      interactions: heavyInteractionTasks
-    }
-  }
-};

package/dist/es2019/performance/examples.js

@@ -1,96 +0,0 @@
-import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { fireEvent } from '@testing-library/react';
-import Tabs, { Tab, TabList, TabPanel } from '../index';
-const interactionTasks = [{
-  name: 'Change tabs',
-  description: 'Change tabs',
-  run: async ({
-    container,
-    controls
-  }) => {
-    const tab2 = container.querySelector('div[data-testid="tab2"]');
-
-    if (tab2 == null) {
-      throw new Error('Could not find tab element');
-    }
-
-    await controls.time(async () => {
-      fireEvent.click(tab2);
-    });
-  }
-}];
-
-function PerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "test"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, "One"), /*#__PURE__*/React.createElement(TabPanel, null, "Two"), /*#__PURE__*/React.createElement(TabPanel, null, "Three"), /*#__PURE__*/React.createElement(TabPanel, null, "Four"));
-}
-
-export const performance = () => /*#__PURE__*/React.createElement(PerformanceComponent, null);
-performance.story = {
-  name: 'Performance',
-  parameters: {
-    performance: {
-      interactions: interactionTasks
-    }
-  }
-};
-const heavyInteractionTasks = [{
-  name: 'Change tabs twice',
-  description: 'Change tabs twice',
-  run: async ({
-    container,
-    controls
-  }) => {
-    const tab1 = container.querySelector('div[data-testid="tab1"]');
-    const tab2 = container.querySelector('div[data-testid="tab2"]');
-
-    if (tab1 === null || tab2 === null) {
-      throw new Error('Could not find tab element');
-    }
-
-    fireEvent.click(tab2);
-    await controls.time(async () => {
-      fireEvent.click(tab1);
-    });
-  }
-}];
-
-function HeavyContent({
-  text
-}) {
-  return /*#__PURE__*/React.createElement("div", null, Array(100).fill(undefined).map(() => /*#__PURE__*/React.createElement("div", null, text)));
-}
-
-function HeavyPanelPerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "heavy"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "One"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Two"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Three"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Four"
-  })));
-}
-
-export const heavyPerformance = () => /*#__PURE__*/React.createElement(HeavyPanelPerformanceComponent, null);
-heavyPerformance.story = {
-  name: 'Performance with heavy panels',
-  parameters: {
-    performance: {
-      interactions: heavyInteractionTasks
-    }
-  }
-};

package/dist/esm/performance/examples.js

@@ -1,171 +0,0 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { fireEvent } from '@testing-library/react';
-import Tabs, { Tab, TabList, TabPanel } from '../index';
-var interactionTasks = [{
-  name: 'Change tabs',
-  description: 'Change tabs',
-  run: function () {
-    var _run = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref) {
-      var container, controls, tab2;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              container = _ref.container, controls = _ref.controls;
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab2 == null)) {
-                _context2.next = 4;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 4:
-              _context2.next = 6;
-              return controls.time( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-                return _regeneratorRuntime.wrap(function _callee$(_context) {
-                  while (1) {
-                    switch (_context.prev = _context.next) {
-                      case 0:
-                        fireEvent.click(tab2);
-
-                      case 1:
-                      case "end":
-                        return _context.stop();
-                    }
-                  }
-                }, _callee);
-              })));
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    function run(_x) {
-      return _run.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function PerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "test"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, "One"), /*#__PURE__*/React.createElement(TabPanel, null, "Two"), /*#__PURE__*/React.createElement(TabPanel, null, "Three"), /*#__PURE__*/React.createElement(TabPanel, null, "Four"));
-}
-
-export var performance = function performance() {
-  return /*#__PURE__*/React.createElement(PerformanceComponent, null);
-};
-performance.story = {
-  name: 'Performance',
-  parameters: {
-    performance: {
-      interactions: interactionTasks
-    }
-  }
-};
-var heavyInteractionTasks = [{
-  name: 'Change tabs twice',
-  description: 'Change tabs twice',
-  run: function () {
-    var _run2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref3) {
-      var container, controls, tab1, tab2;
-      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              container = _ref3.container, controls = _ref3.controls;
-              tab1 = container.querySelector('div[data-testid="tab1"]');
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab1 === null || tab2 === null)) {
-                _context4.next = 5;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 5:
-              fireEvent.click(tab2);
-              _context4.next = 8;
-              return controls.time( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                  while (1) {
-                    switch (_context3.prev = _context3.next) {
-                      case 0:
-                        fireEvent.click(tab1);
-
-                      case 1:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }
-                }, _callee3);
-              })));
-
-            case 8:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
-
-    function run(_x2) {
-      return _run2.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function HeavyContent(_ref5) {
-  var text = _ref5.text;
-  return /*#__PURE__*/React.createElement("div", null, Array(100).fill(undefined).map(function () {
-    return /*#__PURE__*/React.createElement("div", null, text);
-  }));
-}
-
-function HeavyPanelPerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "heavy"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "One"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Two"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Three"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Four"
-  })));
-}
-
-export var heavyPerformance = function heavyPerformance() {
-  return /*#__PURE__*/React.createElement(HeavyPanelPerformanceComponent, null);
-};
-heavyPerformance.story = {
-  name: 'Performance with heavy panels',
-  parameters: {
-    performance: {
-      interactions: heavyInteractionTasks
-    }
-  }
-};