@atlaskit/side-navigation 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/side-navigation
 
+## 2.0.1
+
+### Patch Changes
+
+- [`cac6bbb702d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cac6bbb702d) - The internal composition of this component has changed. There is no expected change in behavior.
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/components/Footer/index.js

@@ -7,16 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
-var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
 var _Header = require("../Header");
 var _Item = require("../Item");
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 
+var iconContainerStyles = (0, _primitives.xcss)({
+  display: 'inline-block',
+  width: 'size.200',
+  height: 'size.200'
+});
 /**
  * __Footer__
  *
@@ -92,18 +96,15 @@ var Footer = function Footer(_ref2) {
     children = _ref2.children,
     iconBefore = _ref2.iconBefore,
     testId = _ref2.testId;
-  return /*#__PURE__*/_react.default.createElement(_box.default, {
-    display: "block",
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     padding: "space.100",
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_stack.default, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.100",
     alignInline: "center"
-  }, /*#__PURE__*/_react.default.createElement(_box.default, {
-    display: "inlineBlock",
-    width: "size.200",
-    height: "size.200"
-  }, iconBefore), /*#__PURE__*/_react.default.createElement(_stack.default, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: iconContainerStyles
+  }, iconBefore), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.075"
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
     fontSize: "size.075",

package/dist/cjs/components/Header/index.js

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _styles = require("../../common/styles");
@@ -19,6 +19,11 @@ var _excluded = ["children"],
   _excluded2 = ["children"];
 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; }
+var containerStyles = (0, _primitives.xcss)({
+  display: 'block',
+  position: 'relative'
+});
+
 /**
  * __Container__
  *
@@ -50,9 +55,8 @@ var Container = function Container(_ref) {
       disabled: disabled
     };
   }(props);
-  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
-    as: "div",
-    display: "block"
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+    xcss: containerStyles
   }, safeProps), children);
 };
 exports.Container = Container;

package/dist/cjs/components/NavigationFooter/index.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _primitives = require("@atlaskit/primitives");
 /** @jsx jsx */
 
+var navigationFooterStyles = (0, _primitives.xcss)({
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -19,13 +21,10 @@ var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
  */
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)(_box.default, {
-    display: "block",
-    position: "relative",
+  return (0, _react.jsx)(_primitives.Box, {
     padding: "space.100",
-    UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 16px)"
-    }
+    paddingBlockEnd: "space.200",
+    xcss: navigationFooterStyles
   }, children);
 };
 var _default = NavigationFooter;

package/dist/cjs/components/NavigationHeader/index.js

@@ -1,14 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _primitives = require("@atlaskit/primitives");
 /** @jsx jsx */
 
+var navigationFooterStyles = (0, _primitives.xcss)({
+  display: 'block',
+  padding: 'space.100',
+  paddingTop: 'space.300'
+});
 /**
  * __Navigation header__
  *
@@ -19,13 +23,9 @@ var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
  */
 var NavigationHeader = function NavigationHeader(props) {
   var children = props.children;
-  return (0, _react.jsx)(_box.default, {
-    display: "block",
-    "data-navheader": true,
-    padding: "space.100",
-    UNSAFE_style: {
-      paddingTop: "var(--ds-space-300, 24px)"
-    }
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: navigationFooterStyles,
+    "data-navheader": true
   }, children);
 };
 var _default = NavigationHeader;

package/dist/cjs/components/NestingItem/index.js

@@ -13,8 +13,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
 var _index = require("../index");
@@ -28,6 +28,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 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; }
+var iconContainerStyles = (0, _primitives.xcss)({
+  display: 'inline'
+});
+
 // Doesn't extend from ButtonItemProps because it blows ERT up.
 
 /**
@@ -101,9 +105,7 @@ var NestingItem = function NestingItem(props) {
   if (currentStackId === id) {
     return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && (0, _react2.jsx)(_box.default, {
-      as: "div",
-      display: "block",
+    }, stack.length >= 1 && (0, _react2.jsx)(_primitives.Box, {
       paddingBlock: "space.075",
       paddingInline: "space.100"
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
@@ -115,13 +117,13 @@ var NestingItem = function NestingItem(props) {
     return children;
   }
   var componentProps = _objectSpread(_objectSpread({
-    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)(_box.default, {
+    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)(_primitives.Box, {
+      xcss: iconContainerStyles,
       "data-custom-icon": true,
-      display: "inline",
       as: "span"
-    }, iconAfter) : null, (0, _react2.jsx)(_box.default, {
+    }, iconAfter) : null, (0, _react2.jsx)(_primitives.Box, {
       "data-right-arrow": true,
-      display: "inline",
+      xcss: iconContainerStyles,
       as: "span"
     }, (0, _react2.jsx)(_arrowRightCircle.default, {
       testId: testId && "".concat(testId, "--item--right-arrow"),

package/dist/es2019/components/Footer/index.js

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
-import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
+const iconContainerStyles = xcss({
+  display: 'inline-block',
+  width: 'size.200',
+  height: 'size.200'
+});
 /**
  * __Footer__
  *
@@ -83,16 +87,13 @@ const Footer = ({
   testId
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    display: "block",
     padding: "space.100",
     testId: testId
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
     alignInline: "center"
   }, /*#__PURE__*/React.createElement(Box, {
-    display: "inlineBlock",
-    width: "size.200",
-    height: "size.200"
+    xcss: iconContainerStyles
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
     space: "space.075"
   }, /*#__PURE__*/React.createElement(Text, {

package/dist/es2019/components/Header/index.js

@@ -1,10 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import Box from '@atlaskit/ds-explorations/box';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+const containerStyles = xcss({
+  display: 'block',
+  position: 'relative'
+});
 
 /**
  * __Container__
@@ -38,8 +42,7 @@ export const Container = ({
     disabled
   }))(props);
   return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "div",
-    display: "block"
+    xcss: containerStyles
   }, safeProps), children);
 };
 /**

package/dist/es2019/components/NavigationFooter/index.js

@@ -1,7 +1,10 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
+import { Box, xcss } from '@atlaskit/primitives';
+const navigationFooterStyles = xcss({
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -14,12 +17,9 @@ const NavigationFooter = ({
   children
 }) => {
   return jsx(Box, {
-    display: "block",
-    position: "relative",
     padding: "space.100",
-    UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 16px)"
-    }
+    paddingBlockEnd: "space.200",
+    xcss: navigationFooterStyles
   }, children);
 };
 export default NavigationFooter;

package/dist/es2019/components/NavigationHeader/index.js

@@ -1,6 +1,11 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
+import { Box, xcss } from '@atlaskit/primitives';
+const navigationFooterStyles = xcss({
+  display: 'block',
+  padding: 'space.100',
+  paddingTop: 'space.300'
+});
 /**
  * __Navigation header__
  *
@@ -14,12 +19,8 @@ const NavigationHeader = props => {
     children
   } = props;
   return jsx(Box, {
-    display: "block",
-    "data-navheader": true,
-    padding: "space.100",
-    UNSAFE_style: {
-      paddingTop: "var(--ds-space-300, 24px)"
-    }
+    xcss: navigationFooterStyles,
+    "data-navheader": true
   }, children);
 };
 export default NavigationHeader;

package/dist/es2019/components/NestingItem/index.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
@@ -11,6 +11,9 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
+const iconContainerStyles = xcss({
+  display: 'inline'
+});
 
 // Doesn't extend from ButtonItemProps because it blows ERT up.
 
@@ -82,8 +85,6 @@ const NestingItem = props => {
     return jsx(NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && jsx(Box, {
-      as: "div",
-      display: "block",
       paddingBlock: "space.075",
       paddingInline: "space.100"
     }, backButton), jsx(NavigationContent, {
@@ -96,12 +97,12 @@ const NestingItem = props => {
   }
   const componentProps = {
     iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
+      xcss: iconContainerStyles,
       "data-custom-icon": true,
-      display: "inline",
       as: "span"
     }, iconAfter) : null, jsx(Box, {
       "data-right-arrow": true,
-      display: "inline",
+      xcss: iconContainerStyles,
       as: "span"
     }, jsx(RightArrow, {
       testId: testId && `${testId}--item--right-arrow`,

package/dist/esm/components/Footer/index.js

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
-import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
+var iconContainerStyles = xcss({
+  display: 'inline-block',
+  width: 'size.200',
+  height: 'size.200'
+});
 /**
  * __Footer__
  *
@@ -85,16 +89,13 @@ var Footer = function Footer(_ref2) {
     iconBefore = _ref2.iconBefore,
     testId = _ref2.testId;
   return /*#__PURE__*/React.createElement(Box, {
-    display: "block",
     padding: "space.100",
     testId: testId
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
     alignInline: "center"
   }, /*#__PURE__*/React.createElement(Box, {
-    display: "inlineBlock",
-    width: "size.200",
-    height: "size.200"
+    xcss: iconContainerStyles
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
     space: "space.075"
   }, /*#__PURE__*/React.createElement(Text, {

package/dist/esm/components/Header/index.js

@@ -4,11 +4,15 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children"],
   _excluded2 = ["children"];
 import React, { forwardRef } from 'react';
-import Box from '@atlaskit/ds-explorations/box';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+var containerStyles = xcss({
+  display: 'block',
+  position: 'relative'
+});
 
 /**
  * __Container__
@@ -42,8 +46,7 @@ export var Container = function Container(_ref) {
     };
   }(props);
   return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "div",
-    display: "block"
+    xcss: containerStyles
   }, safeProps), children);
 };
 /**

package/dist/esm/components/NavigationFooter/index.js

@@ -1,7 +1,10 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
+import { Box, xcss } from '@atlaskit/primitives';
+var navigationFooterStyles = xcss({
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -13,12 +16,9 @@ import Box from '@atlaskit/ds-explorations/box';
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
   return jsx(Box, {
-    display: "block",
-    position: "relative",
     padding: "space.100",
-    UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 16px)"
-    }
+    paddingBlockEnd: "space.200",
+    xcss: navigationFooterStyles
   }, children);
 };
 export default NavigationFooter;

package/dist/esm/components/NavigationHeader/index.js

@@ -1,6 +1,11 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
+import { Box, xcss } from '@atlaskit/primitives';
+var navigationFooterStyles = xcss({
+  display: 'block',
+  padding: 'space.100',
+  paddingTop: 'space.300'
+});
 /**
  * __Navigation header__
  *
@@ -12,12 +17,8 @@ import Box from '@atlaskit/ds-explorations/box';
 var NavigationHeader = function NavigationHeader(props) {
   var children = props.children;
   return jsx(Box, {
-    display: "block",
-    "data-navheader": true,
-    padding: "space.100",
-    UNSAFE_style: {
-      paddingTop: "var(--ds-space-300, 24px)"
-    }
+    xcss: navigationFooterStyles,
+    "data-navheader": true
   }, children);
 };
 export default NavigationHeader;

package/dist/esm/components/NestingItem/index.js

@@ -9,8 +9,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
@@ -18,6 +18,9 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
+var iconContainerStyles = xcss({
+  display: 'inline'
+});
 
 // Doesn't extend from ButtonItemProps because it blows ERT up.
 
@@ -93,8 +96,6 @@ var NestingItem = function NestingItem(props) {
     return jsx(NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && jsx(Box, {
-      as: "div",
-      display: "block",
       paddingBlock: "space.075",
       paddingInline: "space.100"
     }, backButton), jsx(NavigationContent, {
@@ -107,12 +108,12 @@ var NestingItem = function NestingItem(props) {
   }
   var componentProps = _objectSpread(_objectSpread({
     iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
+      xcss: iconContainerStyles,
       "data-custom-icon": true,
-      display: "inline",
       as: "span"
     }, iconAfter) : null, jsx(Box, {
       "data-right-arrow": true,
-      display: "inline",
+      xcss: iconContainerStyles,
       as: "span"
     }, jsx(RightArrow, {
       testId: testId && "".concat(testId, "--item--right-arrow"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.15.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },