@atlaskit/tabs 13.4.4 → 13.4.6

package/CHANGELOG.md

@@ -1,34 +1,47 @@
 # @atlaskit/tabs
 
+## 13.4.6
+
+### Patch Changes
+
+- [#39749](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39749) [`e6b69f455c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6b69f455c3) - Connect yarn changeset to packages, upgrade adf-schema
+
+## 13.4.5
+
+### Patch Changes
+
+- [#38753](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38753) [`e7f99a81404`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7f99a81404) - Update to use `xcss` where possible. There should be no difference in behaviour.
+- Updated dependencies
+
 ## 13.4.4
 
 ### Patch Changes
 
-- [`56b444b56a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56b444b56a8) - Fix a bug where text descenders were cut off at high zoom levels on Windows
+- [#38209](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38209) [`56b444b56a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56b444b56a8) - Fix a bug where text descenders were cut off at high zoom levels on Windows
 
 ## 13.4.3
 
 ### Patch Changes
 
-- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+- [#35441](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35441) [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
 
 ## 13.4.2
 
 ### Patch Changes
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
 ## 13.4.1
 
 ### Patch Changes
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
 ## 13.4.0
 
 ### Minor Changes
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
 ### Patch Changes
 
@@ -38,7 +51,7 @@
 
 ### Patch Changes
 
-- [`7156bd737b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7156bd737b4) - Internal changes to some tokens. Should be a no-op.
+- [#30849](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/30849) [`7156bd737b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7156bd737b4) - Internal changes to some tokens. Should be a no-op.
 
 ## 13.3.12
 
@@ -56,14 +69,14 @@
 
 ### Patch Changes
 
-- [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
+- [#27891](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27891) [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
 - Updated dependencies
 
 ## 13.3.9
 
 ### Patch Changes
 
-- [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
+- [#28064](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28064) [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
 
 ## 13.3.8
 
@@ -87,38 +100,38 @@
 
 ### Patch Changes
 
-- [`0637c50e226`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0637c50e226) - Updated Tabs compnent to prefer to use focus-visible over focus css selectors.
+- [#25984](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25984) [`0637c50e226`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0637c50e226) - Updated Tabs compnent to prefer to use focus-visible over focus css selectors.
 
 ## 13.3.4
 
 ### Patch Changes
 
-- [`e35fc41dc33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e35fc41dc33) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
+- [#25860](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25860) [`e35fc41dc33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e35fc41dc33) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
 - Updated dependencies
 
 ## 13.3.3
 
 ### Patch Changes
 
-- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
 
 ## 13.3.2
 
 ### Patch Changes
 
-- [`0d42cd1c926`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d42cd1c926) - Internal changes to the way styles are applied. There should be no noticeable changes to consumers.
+- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710) [`0d42cd1c926`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d42cd1c926) - Internal changes to the way styles are applied. There should be no noticeable changes to consumers.
 
 ## 13.3.1
 
 ### Patch Changes
 
-- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
 
 ## 13.3.0
 
 ### Minor Changes
 
-- [`7ec1c1a023f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7ec1c1a023f) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004) [`7ec1c1a023f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7ec1c1a023f) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 
 ### Patch Changes
 
@@ -128,13 +141,13 @@
 
 ### Patch Changes
 
-- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
 
 ## 13.2.12
 
 ### Patch Changes
 
-- [`f0056770cce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0056770cce) - Internal code change turning on new linting rules.
+- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`f0056770cce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0056770cce) - Internal code change turning on new linting rules.
 
 ## 13.2.11
 
@@ -146,7 +159,7 @@
 
 ### Patch Changes
 
-- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
 
 ## 13.2.9
 
@@ -158,7 +171,7 @@
 
 ### Patch Changes
 
-- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- [#19618](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/19618) [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
 - Updated dependencies
 
 ## 13.2.7
@@ -171,7 +184,7 @@
 
 ### 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.
+- [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`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
@@ -184,7 +197,7 @@
 
 ### 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.
+- [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`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
@@ -209,7 +222,7 @@
 
 ### Minor Changes
 
-- [`cc54bf994d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc54bf994d6) - Instrumented Tabs with the new theming package, `@atlaskit/tokens`.
+- [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`cc54bf994d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc54bf994d6) - Instrumented Tabs with the new theming package, `@atlaskit/tokens`.
 
   New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
   These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
@@ -223,33 +236,33 @@
 
 ### Patch Changes
 
-- [`9a84a3ceb82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9a84a3ceb82) - Internal code changes.
+- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837) [`9a84a3ceb82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9a84a3ceb82) - Internal code changes.
 - Updated dependencies
 
 ## 13.1.3
 
 ### Patch Changes
 
-- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+- [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
 
 ## 13.1.2
 
 ### Patch Changes
 
-- [`ecbf4a3267f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ecbf4a3267f) - [ux] Fix tabs focus ring in the windows high contrast mode
+- [#12328](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12328) [`ecbf4a3267f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ecbf4a3267f) - [ux] Fix tabs focus ring in the windows high contrast mode
 - Updated dependencies
 
 ## 13.1.1
 
 ### Patch Changes
 
-- [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
+- [#12167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12167) [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
 
 ## 13.1.0
 
 ### Minor Changes
 
-- [`4f40ecb4471`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f40ecb4471) - [ux] Added `Home` and `End` keys handlers for tablist. Changed arrow keys handlers to make tabs cycled. Now when you press the left arrow key on the first tab the last tab will be selected and when you press right arrow key on the last tab the first tab will be selected
+- [#10569](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/10569) [`4f40ecb4471`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f40ecb4471) - [ux] Added `Home` and `End` keys handlers for tablist. Changed arrow keys handlers to make tabs cycled. Now when you press the left arrow key on the first tab the last tab will be selected and when you press right arrow key on the last tab the first tab will be selected
 
 ### Patch Changes
 
@@ -265,7 +278,7 @@
 
 ### Major Changes
 
-- [`c17fe6144f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c17fe6144f8) - ### Major Changes
+- [#9756](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/9756) [`c17fe6144f8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c17fe6144f8) - ### Major Changes
 
   In this version, `Tabs` has had a pretty substantial rewrite. As well as now being dramatically faster and more lightweight, it has a brand new flexible composable API and a bunch of accessibility improvements.
 
@@ -450,7 +463,7 @@
 
   Run `npx @atlaskit/codemod-cli -h` for more details on usage.
   For Atlassians,
-  refer to the [documentation](https://developer.atlassian.com/cloud/framework/atlassian-frontend/codemods/01-atlassian-codemods/) for more details on the codemod CLI.
+  refer to the [documentation](https://hello.atlassian.net/wiki/spaces/AF/pages/2627171992/Codemods) for more details on the codemod CLI.
 
 ### Patch Changes
 
@@ -462,31 +475,31 @@
 
 ### Patch Changes
 
-- [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
+- [#8644](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8644) [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
 
 ## 12.1.2
 
 ### Patch Changes
 
-- [`e795d0a849`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e795d0a849) - The `Tabs` component now uses emotion instead of styled-components for it's internal styling.
+- [#6930](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/6930) [`e795d0a849`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e795d0a849) - The `Tabs` component now uses emotion instead of styled-components for it's internal styling.
 
 ## 12.1.1
 
 ### Patch Changes
 
-- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
 
 ## 12.1.0
 
 ### Minor Changes
 
-- [`98c957d889`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98c957d889) - [ux] Content of tabs will be preserved on the DOM while switching between tabs
+- [#6228](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/6228) [`98c957d889`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98c957d889) - [ux] Content of tabs will be preserved on the DOM while switching between tabs
 
 ## 12.0.6
 
 ### Patch Changes
 
-- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
   This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
   Also add `typescript` to `devDependencies` to denote version that the package was built with.
 
@@ -500,13 +513,13 @@
 
 ### Patch Changes
 
-- [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
+- [#4707](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4707) [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
 
 ## 12.0.3
 
 ### Patch Changes
 
-- [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
+- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
 
   Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
   to prevent duplicates of tslib being bundled.
@@ -515,19 +528,19 @@
 
 ### Patch Changes
 
-- [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
+- [#3293](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3293) [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
 
 ## 12.0.1
 
 ### Patch Changes
 
-- [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
+- [#3428](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3428) [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
 
 ## 12.0.0
 
 ### Major Changes
 
-- [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
+- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
   For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
 
 ### Patch Changes
@@ -538,13 +551,13 @@
 
 ### Patch Changes
 
-- [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
+- [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
 
 ## 11.2.10
 
 ### Patch Changes
 
-- [`54d82b49f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54d82b49f0) - Remove unused dependencies
+- [#2137](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2137) [`54d82b49f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54d82b49f0) - Remove unused dependencies
 
 ## 11.2.9
 

package/dist/cjs/components/tab-list.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _components = require("@atlaskit/theme/components");
 var _hooks = require("../hooks");
 var _context = require("../internal/context");
@@ -14,6 +13,12 @@ var _styles = require("../internal/styles");
 var _utils = require("../internal/utils");
 /** @jsx jsx */
 
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  padding: "var(--ds-space-0, 0px)",
+  position: 'relative'
+});
+
 /**
  * __TabList__
  *
@@ -23,8 +28,8 @@ var _utils = require("../internal/utils");
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-var TabList = function TabList(props) {
-  var children = props.children;
+var TabList = function TabList(_ref) {
+  var children = _ref.children;
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
     mode = _useGlobalTheme.mode;
   var _useTabList = (0, _hooks.useTabList)(),
@@ -75,10 +80,10 @@ var TabList = function TabList(props) {
   }, [length, selectTabByIndex]);
 
   // Memoized so the function isn't recreated each time
-  var getTabWithContext = (0, _react.useCallback)(function (_ref) {
-    var tab = _ref.tab,
-      isSelected = _ref.isSelected,
-      index = _ref.index;
+  var getTabWithContext = (0, _react.useCallback)(function (_ref2) {
+    var tab = _ref2.tab,
+      isSelected = _ref2.isSelected,
+      index = _ref2.index;
     return (0, _react2.jsx)(_context.TabContext.Provider, {
       value: {
         onClick: function onClick() {
@@ -102,16 +107,12 @@ var TabList = function TabList(props) {
     // The other styles applied through the CSS prop are there for styling children
     // through inheritance. This is important for custom cases that use the useTab(),
     // which applies accessibility atributes that we use as a styling hook.
-    (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
-      as: "div",
+    (0, _react2.jsx)("div", {
       role: "tablist",
-      display: "flex",
-      position: "relative",
-      padding: "space.0",
       ref: ref
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabListStyles
+      css: [baseStyles, tabListStyles]
     }, childrenArray.map(function (child, index) {
       return getTabWithContext({
         tab: child,

package/dist/cjs/components/tab-panel.js

@@ -1,14 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
+var _primitives = require("@atlaskit/primitives");
 var _hooks = require("../hooks");
 /** @jsx jsx */
 
@@ -25,11 +23,22 @@ var _hooks = require("../hooks");
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabPanelAttributes = (0, _hooks.useTabPanel)();
-  return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+  var _useTabPanel = (0, _hooks.useTabPanel)(),
+    role = _useTabPanel.role,
+    id = _useTabPanel.id,
+    hidden = _useTabPanel.hidden,
+    ariaLabelledBy = _useTabPanel['aria-labelledby'],
+    onMouseDown = _useTabPanel.onMouseDown,
+    tabIndex = _useTabPanel.tabIndex;
+  return (0, _react2.jsx)(_primitives.Box, {
     testId: testId,
-    as: "div"
-  }, tabPanelAttributes), (0, _react2.jsx)(_react.Fragment, null, children));
+    role: role,
+    id: id,
+    hidden: hidden,
+    "aria-labelledby": ariaLabelledBy,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+  }, (0, _react2.jsx)(_react.Fragment, null, children));
 };
 var _default = TabPanel;
 exports.default = _default;

package/dist/cjs/components/tab.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Tab;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
+var _primitives = require("@atlaskit/primitives");
 var _hooks = require("../hooks");
 /** @jsx jsx */
 
@@ -23,11 +22,30 @@ var _hooks = require("../hooks");
 function Tab(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabAttributes = (0, _hooks.useTab)();
-  return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
-    as: "div",
-    testId: testId
-  }, tabAttributes), (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+  var _useTab = (0, _hooks.useTab)(),
+    onClick = _useTab.onClick,
+    id = _useTab.id,
+    ariaControls = _useTab['aria-controls'],
+    ariaPosinset = _useTab['aria-posinset'],
+    ariaSelected = _useTab['aria-selected'],
+    ariaSetsize = _useTab['aria-setsize'],
+    onMouseDown = _useTab.onMouseDown,
+    onKeyDown = _useTab.onKeyDown,
+    role = _useTab.role,
+    tabIndex = _useTab.tabIndex;
+  return (0, _react.jsx)(_primitives.Box, {
+    testId: testId,
+    onClick: onClick,
+    id: id,
+    "aria-controls": ariaControls,
+    "aria-posinset": ariaPosinset,
+    "aria-selected": ariaSelected,
+    "aria-setsize": ariaSetsize,
+    onMouseDown: onMouseDown,
+    onKeyDown: onKeyDown,
+    role: role,
+    tabIndex: tabIndex
+  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
     shouldTruncate: true,
     UNSAFE_style: {
       color: 'inherit'

package/dist/cjs/components/tabs.js

@@ -11,17 +11,24 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _components = require("@atlaskit/theme/components");
 var _context = require("../internal/context");
 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); 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 = 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; } /** @jsx jsx */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: '0%',
+  flexBasis: '100%',
+  flexDirection: 'column',
+  flexGrow: 1
+});
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.4"
+  packageVersion: "13.4.6"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -118,21 +125,12 @@ var Tabs = function Tabs(props) {
     // Only styles that affect the Tabs container itself have been applied via primitives.
     // The other styles applied through the CSS prop are there for styling children
     // through inheritance. This is important for custom cases that use the useTabPanel(),
-    // which applies accessibility atributes that we use as a styling hook.
-    (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
-      as: "div",
-      testId: testId,
-      display: "flex",
-      flexDirection: "column",
-      UNSAFE_style: {
-        maxWidth: '100%',
-        minHeight: '0%',
-        flexBasis: '100%',
-        flexGrow: 1
-      }
+    // which applies accessibility attributes that we use as a styling hook.
+    (0, _react2.jsx)("div", {
+      "data-testid": testId
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabsStyles
+      css: [baseStyles, tabsStyles]
     }, (0, _react2.jsx)(_context.TabListContext.Provider, {
       value: {
         selected: selected,

package/dist/cjs/internal/styles.js

@@ -8,8 +8,8 @@ exports.getTabsStyles = exports.getTabStyles = exports.getTabListStyles = void 0
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("./colors");
-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 = 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";
 var tabTopBottomPadding = "var(--ds-space-050, 4px)";
 // TODO this should probably be `border.width.indicator`

package/dist/es2019/components/tab-list.js

@@ -1,12 +1,17 @@
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
+const baseStyles = css({
+  display: 'flex',
+  padding: "var(--ds-space-0, 0px)",
+  position: 'relative'
+});
+
 /**
  * __TabList__
  *
@@ -16,10 +21,9 @@ import { onMouseDownBlur } from '../internal/utils';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-const TabList = props => {
-  const {
-    children
-  } = props;
+const TabList = ({
+  children
+}) => {
   const {
     mode
   } = useGlobalTheme();
@@ -94,16 +98,12 @@ const TabList = props => {
     // The other styles applied through the CSS prop are there for styling children
     // through inheritance. This is important for custom cases that use the useTab(),
     // which applies accessibility atributes that we use as a styling hook.
-    jsx(Box, {
-      as: "div",
+    jsx("div", {
       role: "tablist",
-      display: "flex",
-      position: "relative",
-      padding: "space.0",
       ref: ref
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabListStyles
+      css: [baseStyles, tabListStyles]
     }, childrenArray.map((child, index) => getTabWithContext({
       tab: child,
       index,

package/dist/es2019/components/tab-panel.js

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { Box } from '@atlaskit/primitives';
 import { useTabPanel } from '../hooks';
 // Note this is not being memoized as children is an unstable reference
 /**
@@ -18,10 +17,22 @@ const TabPanel = ({
   children,
   testId
 }) => {
-  const tabPanelAttributes = useTabPanel();
-  return jsx(Box, _extends({
+  const {
+    role,
+    id,
+    hidden,
+    'aria-labelledby': ariaLabelledBy,
+    onMouseDown,
+    tabIndex
+  } = useTabPanel();
+  return jsx(Box, {
     testId: testId,
-    as: "div"
-  }, tabPanelAttributes), jsx(Fragment, null, children));
+    role: role,
+    id: id,
+    hidden: hidden,
+    "aria-labelledby": ariaLabelledBy,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+  }, jsx(Fragment, null, children));
 };
 export default TabPanel;

package/dist/es2019/components/tab.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { Box } from '@atlaskit/primitives';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -16,11 +16,31 @@ export default function Tab({
   children,
   testId
 }) {
-  const tabAttributes = useTab();
-  return jsx(Box, _extends({
-    as: "div",
-    testId: testId
-  }, tabAttributes), jsx(Text, {
+  const {
+    onClick,
+    id,
+    'aria-controls': ariaControls,
+    'aria-posinset': ariaPosinset,
+    'aria-selected': ariaSelected,
+    'aria-setsize': ariaSetsize,
+    onMouseDown,
+    onKeyDown,
+    role,
+    tabIndex
+  } = useTab();
+  return jsx(Box, {
+    testId: testId,
+    onClick: onClick,
+    id: id,
+    "aria-controls": ariaControls,
+    "aria-posinset": ariaPosinset,
+    "aria-selected": ariaSelected,
+    "aria-setsize": ariaSetsize,
+    onMouseDown: onMouseDown,
+    onKeyDown: onKeyDown,
+    role: role,
+    tabIndex: tabIndex
+  }, jsx(Text, {
     shouldTruncate: true,
     UNSAFE_style: {
       color: 'inherit'

package/dist/es2019/components/tabs.js

@@ -1,16 +1,23 @@
 /** @jsx jsx */
 import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
 import { getTabsStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
+const baseStyles = css({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: '0%',
+  flexBasis: '100%',
+  flexDirection: 'column',
+  flexGrow: 1
+});
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.4"
+  packageVersion: "13.4.6"
 };
 const getTabPanelWithContext = ({
   tabPanel,
@@ -97,21 +104,12 @@ const Tabs = props => {
     // Only styles that affect the Tabs container itself have been applied via primitives.
     // The other styles applied through the CSS prop are there for styling children
     // through inheritance. This is important for custom cases that use the useTabPanel(),
-    // which applies accessibility atributes that we use as a styling hook.
-    jsx(Box, {
-      as: "div",
-      testId: testId,
-      display: "flex",
-      flexDirection: "column",
-      UNSAFE_style: {
-        maxWidth: '100%',
-        minHeight: '0%',
-        flexBasis: '100%',
-        flexGrow: 1
-      }
+    // which applies accessibility attributes that we use as a styling hook.
+    jsx("div", {
+      "data-testid": testId
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabsStyles
+      css: [baseStyles, tabsStyles]
     }, jsx(TabListContext.Provider, {
       value: {
         selected,

package/dist/esm/components/tab-list.js

@@ -1,12 +1,17 @@
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
+var baseStyles = css({
+  display: 'flex',
+  padding: "var(--ds-space-0, 0px)",
+  position: 'relative'
+});
+
 /**
  * __TabList__
  *
@@ -16,8 +21,8 @@ import { onMouseDownBlur } from '../internal/utils';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-var TabList = function TabList(props) {
-  var children = props.children;
+var TabList = function TabList(_ref) {
+  var children = _ref.children;
   var _useGlobalTheme = useGlobalTheme(),
     mode = _useGlobalTheme.mode;
   var _useTabList = useTabList(),
@@ -68,10 +73,10 @@ var TabList = function TabList(props) {
   }, [length, selectTabByIndex]);
 
   // Memoized so the function isn't recreated each time
-  var getTabWithContext = useCallback(function (_ref) {
-    var tab = _ref.tab,
-      isSelected = _ref.isSelected,
-      index = _ref.index;
+  var getTabWithContext = useCallback(function (_ref2) {
+    var tab = _ref2.tab,
+      isSelected = _ref2.isSelected,
+      index = _ref2.index;
     return jsx(TabContext.Provider, {
       value: {
         onClick: function onClick() {
@@ -95,16 +100,12 @@ var TabList = function TabList(props) {
     // The other styles applied through the CSS prop are there for styling children
     // through inheritance. This is important for custom cases that use the useTab(),
     // which applies accessibility atributes that we use as a styling hook.
-    jsx(Box, {
-      as: "div",
+    jsx("div", {
       role: "tablist",
-      display: "flex",
-      position: "relative",
-      padding: "space.0",
       ref: ref
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabListStyles
+      css: [baseStyles, tabListStyles]
     }, childrenArray.map(function (child, index) {
       return getTabWithContext({
         tab: child,

package/dist/esm/components/tab-panel.js

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { Box } from '@atlaskit/primitives';
 import { useTabPanel } from '../hooks';
 // Note this is not being memoized as children is an unstable reference
 /**
@@ -17,10 +16,21 @@ import { useTabPanel } from '../hooks';
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabPanelAttributes = useTabPanel();
-  return jsx(Box, _extends({
+  var _useTabPanel = useTabPanel(),
+    role = _useTabPanel.role,
+    id = _useTabPanel.id,
+    hidden = _useTabPanel.hidden,
+    ariaLabelledBy = _useTabPanel['aria-labelledby'],
+    onMouseDown = _useTabPanel.onMouseDown,
+    tabIndex = _useTabPanel.tabIndex;
+  return jsx(Box, {
     testId: testId,
-    as: "div"
-  }, tabPanelAttributes), jsx(Fragment, null, children));
+    role: role,
+    id: id,
+    hidden: hidden,
+    "aria-labelledby": ariaLabelledBy,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+  }, jsx(Fragment, null, children));
 };
 export default TabPanel;

package/dist/esm/components/tab.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { Box } from '@atlaskit/primitives';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -15,11 +15,30 @@ import { useTab } from '../hooks';
 export default function Tab(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabAttributes = useTab();
-  return jsx(Box, _extends({
-    as: "div",
-    testId: testId
-  }, tabAttributes), jsx(Text, {
+  var _useTab = useTab(),
+    onClick = _useTab.onClick,
+    id = _useTab.id,
+    ariaControls = _useTab['aria-controls'],
+    ariaPosinset = _useTab['aria-posinset'],
+    ariaSelected = _useTab['aria-selected'],
+    ariaSetsize = _useTab['aria-setsize'],
+    onMouseDown = _useTab.onMouseDown,
+    onKeyDown = _useTab.onKeyDown,
+    role = _useTab.role,
+    tabIndex = _useTab.tabIndex;
+  return jsx(Box, {
+    testId: testId,
+    onClick: onClick,
+    id: id,
+    "aria-controls": ariaControls,
+    "aria-posinset": ariaPosinset,
+    "aria-selected": ariaSelected,
+    "aria-setsize": ariaSetsize,
+    onMouseDown: onMouseDown,
+    onKeyDown: onKeyDown,
+    role: role,
+    tabIndex: tabIndex
+  }, jsx(Text, {
     shouldTruncate: true,
     UNSAFE_style: {
       color: 'inherit'

package/dist/esm/components/tabs.js

@@ -1,21 +1,28 @@
 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); 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 = 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
 import { getTabsStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
+var baseStyles = css({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: '0%',
+  flexBasis: '100%',
+  flexDirection: 'column',
+  flexGrow: 1
+});
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.4"
+  packageVersion: "13.4.6"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -112,21 +119,12 @@ var Tabs = function Tabs(props) {
     // Only styles that affect the Tabs container itself have been applied via primitives.
     // The other styles applied through the CSS prop are there for styling children
     // through inheritance. This is important for custom cases that use the useTabPanel(),
-    // which applies accessibility atributes that we use as a styling hook.
-    jsx(Box, {
-      as: "div",
-      testId: testId,
-      display: "flex",
-      flexDirection: "column",
-      UNSAFE_style: {
-        maxWidth: '100%',
-        minHeight: '0%',
-        flexBasis: '100%',
-        flexGrow: 1
-      }
+    // which applies accessibility attributes that we use as a styling hook.
+    jsx("div", {
+      "data-testid": testId
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabsStyles
+      css: [baseStyles, tabsStyles]
     }, jsx(TabListContext.Provider, {
       value: {
         selected: selected,

package/dist/esm/internal/styles.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 = 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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { css } from '@emotion/react';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";

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

@@ -9,5 +9,5 @@ import { TabListProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 export default TabList;

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

@@ -9,5 +9,5 @@ import { TabListProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 export default TabList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.4.4",
+  "version": "13.4.6",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,9 +33,10 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-explorations": "^2.2.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/ds-explorations": "^2.3.0",
+    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -57,7 +57,7 @@ export interface TabData {
 }
 
 // @public
-export const TabList: (props: TabListProps) => jsx.JSX.Element;
+export const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 export type TabListAttributesType = {

package/tmp/api-report-tmp.d.ts

@@ -43,7 +43,7 @@ export interface TabData {
 }
 
 // @public
-export const TabList: (props: TabListProps) => jsx.JSX.Element;
+export const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 export type TabListAttributesType = {

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

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import type { PublicInteractionTask } from 'storybook-addon-performance';
-export declare const performance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};
-export declare const heavyPerformance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};

package/dist/types-ts4.5/performance/examples.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import type { PublicInteractionTask } from 'storybook-addon-performance';
-export declare const performance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};
-export declare const heavyPerformance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};