@atlaskit/side-navigation 1.1.2 → 1.2.3

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

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -12,35 +10,37 @@ var Container = function Container(props) {
 
 var Footer = function Footer(props) {
   var cssFn = overrideStyleFunction(function () {
-    var _ref;
-
-    return _ref = {
+    return {
       userSelect: 'auto',
-      div: {
-        display: 'block',
+      display: 'block',
+      textAlign: 'center',
+      minHeight: '24px',
+      alignItems: 'center',
+      width: '100%',
+      '[data-item-elem-before]': {
+        marginRight: 0,
+        marginBottom: '8px',
+        display: 'inline-block'
+      },
+      '[data-item-title]': {
+        textAlign: 'center',
+        fontSize: 12
+      },
+      '[data-item-description]': {
         textAlign: 'center',
-        minHeight: '24px',
-        alignItems: 'center',
-        width: '100%'
+        display: 'inline-block',
+        margin: '6px'
+      },
+      // Will look interactive if the `component` is anything other than a div.
+      'div&:hover': {
+        backgroundColor: 'transparent',
+        cursor: 'default'
+      },
+      'div&:active': {
+        backgroundColor: 'transparent',
+        color: "var(--ds-text-subtle, ".concat(N500, ")")
       }
-    }, _defineProperty(_ref, '[data-item-elem-before]', {
-      marginRight: 0,
-      marginBottom: '8px',
-      display: 'inline-block'
-    }), _defineProperty(_ref, '[data-item-title]', {
-      textAlign: 'center',
-      fontSize: 12
-    }), _defineProperty(_ref, '[data-item-description]', {
-      textAlign: 'center',
-      display: 'inline-block',
-      margin: '6px'
-    }), _defineProperty(_ref, 'div&:hover', {
-      backgroundColor: 'transparent',
-      cursor: 'default'
-    }), _defineProperty(_ref, 'div&:active', {
-      backgroundColor: 'transparent',
-      color: token('color.text.mediumEmphasis', N500)
-    }), _ref;
+    };
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
     component: props.component || Container,

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

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children"];
 import React, { forwardRef } from 'react';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -22,13 +22,13 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: token('color.text.highEmphasis', N500)
+      color: "var(--ds-text, ".concat(N500, ")")
     }), _defineProperty(_ref, 'div&:hover', {
       backgroundColor: 'transparent',
       cursor: 'default'
     }), _defineProperty(_ref, 'div&:active', {
       backgroundColor: 'transparent',
-      color: token('color.text.highEmphasis', N500)
+      color: "var(--ds-text, ".concat(N500, ")")
     }), _ref;
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
@@ -39,7 +39,7 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
       Title: {
         render: function render(_, _ref2) {
           var children = _ref2.children,
-              props = _objectWithoutProperties(_ref2, ["children"]);
+              props = _objectWithoutProperties(_ref2, _excluded);
 
           return /*#__PURE__*/React.createElement("h2", props, children);
         }

package/dist/esm/components/Item/button-item.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn"];
 import React, { forwardRef } from 'react';
 import { ButtonItem as Button } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
@@ -7,7 +8,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 var ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;

package/dist/esm/components/Item/custom-item.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn"];
 import React, { forwardRef } from 'react';
 import { CustomItem as Custom } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
@@ -12,7 +13,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 var CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;

package/dist/esm/components/Item/go-back-item.js

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn", "iconBefore", "onClick", "isSelected"];
 import React, { forwardRef, useCallback, useState } from 'react';
 import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
 import { N10 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import ButtonItem from './button-item';
 var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cssFn = _ref.cssFn,
       _ref$iconBefore = _ref.iconBefore,
       iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: token('color.background.default', N10),
+    secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
     label: ""
   }) : _ref$iconBefore,
       onClick = _ref.onClick,
       isSelected = _ref.isSelected,
-      rest = _objectWithoutProperties(_ref, ["cssFn", "iconBefore", "onClick", "isSelected"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/components/Item/link-item.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn"];
 import React, { forwardRef } from 'react';
 import { LinkItem as Link } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
@@ -7,7 +8,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 var LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;

package/dist/esm/components/NavigationContent/styles.js

@@ -1,13 +1,12 @@
 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 { N10, N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
@@ -46,7 +45,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")"),
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -61,7 +60,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")")
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")")
     }
   };
 };
@@ -86,7 +85,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")"),
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -104,7 +103,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")")
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")")
     }
   });
 };

package/dist/esm/components/NestableNavigationContent/nesting-motion.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; }
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';

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

@@ -3,10 +3,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
 
-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 React, { Fragment, useCallback, useMemo, useState } from 'react';
@@ -14,7 +15,6 @@ import { jsx } from '@emotion/core';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
@@ -36,7 +36,7 @@ var NestingItem = function NestingItem(props) {
       id = props.id,
       component = props.component,
       testId = props.testId,
-      rest = _objectWithoutProperties(props, ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var _useNestedContext = useNestedContext(),
       currentStackId = _useNestedContext.currentStackId,
@@ -120,7 +120,7 @@ var NestingItem = function NestingItem(props) {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
-      secondaryColor: token('color.background.default', N10),
+      secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _enabledCSS, _disabledCSS;
 
-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; }
 
 // exposed for testing purposes
 export var enabledCSS = (_enabledCSS = {}, _defineProperty(_enabledCSS, '&:hover [data-custom-icon]', {

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

@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       testId = props.testId,
@@ -15,9 +14,9 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     css: {
       width: '100%',
       height: '100%',
-      color: token('color.text.mediumEmphasis', N500),
+      color: "var(--ds-text-subtle, ".concat(N500, ")"),
       minWidth: gridSize() * 30,
-      backgroundColor: token('color.background.default', N10),
+      backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.1.2",
+	"version": "1.2.3",
 	"sideEffects": false
 }

package/dist/types/components/Footer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HeaderProps } from '../Header';
 export type { HeaderProps as FooterProps } from '../Header';
 declare const Footer: (props: HeaderProps) => JSX.Element;

package/dist/types/components/Item/custom-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
 export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
 interface CustomItemType {

package/dist/types/components/Item/skeleton-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SkeletonItemProps } from '@atlaskit/menu';
 export type { SkeletonItemProps } from '@atlaskit/menu';
 declare const SkeletonItem: (props: SkeletonItemProps) => JSX.Element | null;

package/dist/types/components/NavigationHeader/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface NavigationHeaderProps {
     children: JSX.Element | JSX.Element[];
 }

package/dist/types/components/Section/heading-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HeadingItemProps } from '@atlaskit/menu';
 export type { HeadingItemProps } from '@atlaskit/menu';
 declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;

package/dist/types/components/Section/skeleton-heading-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SkeletonHeadingItemProps } from '@atlaskit/menu';
 export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
 declare const SkeletonHeadingItem: (props: SkeletonHeadingItemProps) => JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.1.2",
+  "version": "1.2.3",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,11 +24,11 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^1.1.0",
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/menu": "^1.1.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/menu": "^1.2.0",
     "@atlaskit/motion": "^1.0.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"
   },
@@ -36,11 +36,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^1.1.0",
+    "@atlaskit/atlassian-navigation": "^2.0.0",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/logo": "^13.5.0",
-    "@atlaskit/onboarding": "^10.1.0",
+    "@atlaskit/onboarding": "^10.3.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/visual-regression": "*",