@atlaskit/navigation-system 10.16.1 → 10.16.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlassian/navigation-system
 
+## 10.16.3
+
+### Patch Changes
+
+- [`24a22ba9f2d72`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24a22ba9f2d72) -
+  [ux] Panel on open snaps main content when animation ends. On close the main content snaps on
+  animation start. Changes are behind the `platform-dst-motion-uplift-panel` feature gate.
+- Updated dependencies
+
+## 10.16.2
+
+### Patch Changes
+
+- Use `@atlassian/testing-library` exclusively in unit tests.
+- Updated dependencies
+
 ## 10.16.1
 
 ### Patch Changes

package/dist/cjs/components/skip-links/skip-links-popup.js

@@ -14,7 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactDom = require("react-dom");
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _popup = require("@atlaskit/popup/popup");
 var _focusElement = require("./focus-element");
@@ -134,7 +134,7 @@ function SkipLinksPopup(_ref) {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement("div", {
         className: (0, _runtime.ax)([triggerStyles.root, isOpen && triggerStyles.isOpen])
-      }, /*#__PURE__*/React.createElement(_new.default, (0, _extends2.default)({}, triggerProps, {
+      }, /*#__PURE__*/React.createElement(_button.default, (0, _extends2.default)({}, triggerProps, {
         ref: (0, _mergeRefs.default)([triggerProps.ref, triggerRef]),
         appearance: "primary",
         isSelected: isOpen,

package/dist/cjs/ui/page-layout/panel.compiled.css

@@ -2,7 +2,7 @@
 ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
 ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
 ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
-._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
 [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
@@ -17,6 +17,7 @@
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
+._kqsw1n9t{position:fixed}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
 @media (min-width:64rem){._1w6eia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}

package/dist/cjs/ui/page-layout/panel.js

@@ -16,7 +16,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react2 = require("@compiled/react");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _useMotion2 = require("@atlaskit/motion/use-motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
 var _constants = require("./constants");
@@ -44,10 +44,10 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1nn1 _158obamb",
-  exiting: "_y44v14vv _158oeydr",
+  entering: "_y44v1nn1 _kqsw1n9t _158obamb",
+  exiting: "_y44v14vv _kqsw1n9t _158oeydr",
   contentEntering: "_y44v11az",
-  contentExiting: "_y44v6gs0"
+  contentExiting: "_y44vf1qi"
 };
 
 /**
@@ -75,7 +75,7 @@ function Panel(_ref) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
-  var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel');
+  var isMotionUpliftEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel');
   var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
     defaultWidthProp: defaultWidthProp,
     fallbackDefaultWidth: fallbackDefaultWidth,
@@ -106,7 +106,7 @@ function Panel(_ref) {
   (0, _useSkipLinkInternal.useSkipLinkInternal)({
     id: id,
     label: skipLinkLabel,
-    isHidden: defaultWidth === 0 || (0, _platformFeatureFlags.fg)('platform_dst_nav4_skip_link_a11y_1')
+    isHidden: defaultWidth === 0 || (0, _fg.fg)('platform_dst_nav4_skip_link_a11y_1')
   });
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(defaultWidth),

package/dist/cjs/ui/page-layout/side-nav/side-nav.compiled.css

@@ -6,7 +6,7 @@
 ._1bsb1ego{width:min(90%,20pc)}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
-._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
+._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
@@ -20,7 +20,7 @@
 ._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
-[dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
+[dir=rtl] ._2qe0jwwr{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentRight)}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}

package/dist/cjs/ui/page-layout/side-nav/side-nav.js

@@ -102,7 +102,7 @@ var styles = {
  * never runs.
  */
 var motionUpliftStyles = {
-  animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
+  animationRTLSupport: "_cjprp6j8 _1p2s1vfh _1jq41dy6 _2qe0jwwr",
   animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
   expandAnimationMobile: "_k1af10ed",
   collapseAnimationMobile: "_1lh81gzg _k1affm5y",

package/dist/cjs/ui/top-nav-items/themed/button.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Button = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
 var _hasCustomThemeContext = require("./has-custom-theme-context");
 var _themedButton = require("./themed-button");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // which is a subset of the normal button API
 var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
-  var Component = hasCustomTheme ? _themedButton.ThemedButton : _new.default;
+  var Component = hasCustomTheme ? _themedButton.ThemedButton : _button.default;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref
   }, props));

package/dist/cjs/ui/top-nav-items/themed/icon-button.js

@@ -8,13 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.IconButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _new = require("@atlaskit/button/new");
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _hasCustomThemeContext = require("./has-custom-theme-context");
 var _themedIconButton = require("./themed-icon-button");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
-  var Component = hasCustomTheme ? _themedIconButton.ThemedIconButton : _new.IconButton;
+  var Component = hasCustomTheme ? _themedIconButton.ThemedIconButton : _button.default;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref
   }, props));

package/dist/cjs/ui/top-nav-items/themed/link-button.js

@@ -8,13 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.LinkButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _new = require("@atlaskit/button/new");
+var _link = _interopRequireDefault(require("@atlaskit/button/link"));
 var _hasCustomThemeContext = require("./has-custom-theme-context");
 var _themedLinkButton = require("./themed-link-button");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var LinkButton = exports.LinkButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
-  var Component = hasCustomTheme ? _themedLinkButton.ThemedLinkButton : _new.LinkButton;
+  var Component = hasCustomTheme ? _themedLinkButton.ThemedLinkButton : _link.default;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref
   }, props));

package/dist/cjs/ui/top-nav-items/themed/link-icon-button.js

@@ -8,13 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.LinkIconButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _new = require("@atlaskit/button/new");
+var _link = _interopRequireDefault(require("@atlaskit/button/icon/link"));
 var _hasCustomThemeContext = require("./has-custom-theme-context");
 var _themedLinkIconButton = require("./themed-link-icon-button");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var LinkIconButton = exports.LinkIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
-  var Component = hasCustomTheme ? _themedLinkIconButton.ThemedLinkIconButton : _new.LinkIconButton;
+  var Component = hasCustomTheme ? _themedLinkIconButton.ThemedLinkIconButton : _link.default;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref
   }, props));

package/dist/es2019/components/skip-links/skip-links-popup.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useId, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import Button from '@atlaskit/button/new';
+import Button from '@atlaskit/button/default/button';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Popup } from '@atlaskit/popup/popup';
 import { focusElement } from './focus-element';

package/dist/es2019/ui/page-layout/panel.compiled.css

@@ -2,7 +2,7 @@
 ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
 ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
 ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
-._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
 [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
@@ -17,6 +17,7 @@
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
+._kqsw1n9t{position:fixed}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
 @media (min-width:64rem){._1w6eia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}

package/dist/es2019/ui/page-layout/panel.js

@@ -6,7 +6,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import { cx } from '@compiled/react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { useMotion, Reanimate } from '@atlaskit/motion/use-motion';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
@@ -33,10 +33,10 @@ const styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1nn1 _158obamb",
-  exiting: "_y44v14vv _158oeydr",
+  entering: "_y44v1nn1 _kqsw1n9t _158obamb",
+  exiting: "_y44v14vv _kqsw1n9t _158oeydr",
   contentEntering: "_y44v11az",
-  contentExiting: "_y44v6gs0"
+  contentExiting: "_y44vf1qi"
 };
 
 /**

package/dist/es2019/ui/page-layout/side-nav/side-nav.compiled.css

@@ -6,7 +6,7 @@
 ._1bsb1ego{width:min(90%,20pc)}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
-._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
+._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
@@ -20,7 +20,7 @@
 ._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
-[dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
+[dir=rtl] ._2qe0jwwr{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentRight)}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}

package/dist/es2019/ui/page-layout/side-nav/side-nav.js

@@ -89,7 +89,7 @@ const styles = {
  * never runs.
  */
 const motionUpliftStyles = {
-  animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
+  animationRTLSupport: "_cjprp6j8 _1p2s1vfh _1jq41dy6 _2qe0jwwr",
   animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
   expandAnimationMobile: "_k1af10ed",
   collapseAnimationMobile: "_1lh81gzg _k1affm5y",

package/dist/es2019/ui/top-nav-items/themed/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import AkButton from '@atlaskit/button/new';
+import AkButton from '@atlaskit/button/default/button';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedButton } from './themed-button';
 // Explicitly typed to use only the themed button API,

package/dist/es2019/ui/top-nav-items/themed/icon-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { IconButton as AkIconButton } from '@atlaskit/button/new';
+import AkIconButton from '@atlaskit/button/icon/button';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedIconButton } from './themed-icon-button';
 export const IconButton = /*#__PURE__*/forwardRef((props, ref) => {

package/dist/es2019/ui/top-nav-items/themed/link-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { LinkButton as AkLinkButton } from '@atlaskit/button/new';
+import AkLinkButton from '@atlaskit/button/link';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedLinkButton } from './themed-link-button';
 export const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {

package/dist/es2019/ui/top-nav-items/themed/link-icon-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { LinkIconButton as AkLinkIconButton } from '@atlaskit/button/new';
+import AkLinkIconButton from '@atlaskit/button/icon/link';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedLinkIconButton } from './themed-link-icon-button';
 export const LinkIconButton = /*#__PURE__*/forwardRef((props, ref) => {

package/dist/esm/components/skip-links/skip-links-popup.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useId, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import Button from '@atlaskit/button/new';
+import Button from '@atlaskit/button/default/button';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Popup } from '@atlaskit/popup/popup';
 import { focusElement } from './focus-element';

package/dist/esm/ui/page-layout/panel.compiled.css

@@ -2,7 +2,7 @@
 ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
 ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
 ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
-._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
 [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
@@ -17,6 +17,7 @@
 ._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
+._kqsw1n9t{position:fixed}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
 @media (min-width:64rem){._1w6eia51{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}

package/dist/esm/ui/page-layout/panel.js

@@ -8,7 +8,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import { cx } from '@compiled/react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { useMotion, Reanimate } from '@atlaskit/motion/use-motion';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
@@ -35,10 +35,10 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1nn1 _158obamb",
-  exiting: "_y44v14vv _158oeydr",
+  entering: "_y44v1nn1 _kqsw1n9t _158obamb",
+  exiting: "_y44v14vv _kqsw1n9t _158oeydr",
   contentEntering: "_y44v11az",
-  contentExiting: "_y44v6gs0"
+  contentExiting: "_y44vf1qi"
 };
 
 /**

package/dist/esm/ui/page-layout/side-nav/side-nav.compiled.css

@@ -6,7 +6,7 @@
 ._1bsb1ego{width:min(90%,20pc)}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
-._1p2s58oa{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentLeft)}
+._1p2s1vfh{--exit-animation:var(--ds-sidenav-exit-left,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentLeft)}
 ._1pbycs5v{z-index:2}
 ._1pbyegat{z-index:4}
 ._2lx21bp4{flex-direction:column}
@@ -20,7 +20,7 @@
 ._u7coidpf{inset-block-end:0}
 ._vchhusvi{box-sizing:border-box}
 [dir=rtl] ._1jq41dy6{--enter-animation:var(--ds-sidenav-enter-right,250ms cubic-bezier(0,0.4,0,1) SlideIn100PercentRight)}
-[dir=rtl] ._2qe0k8f8{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0.6,0,0.8,0.6) SlideOut100PercentRight)}
+[dir=rtl] ._2qe0jwwr{--exit-animation:var(--ds-sidenav-exit-right,200ms cubic-bezier(0,0.4,0,1) SlideOut100PercentRight)}
 [dir=rtl] ._65m41mrw{--animation-direction:-1}
 @media (prefers-reduced-motion:no-preference){._10t81t0s{transition-property:display}._1vrh1a5r{transition-behavior:allow-discrete}._xrrpi9qs{transition-duration:var(--ds-duration-medium,.2s)}._10t88iot{transition-property:transform,display}._xrrpfnf5{transition-duration:.2s}._1lh81gzg{grid-area:main}._1xq51mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._k1affm5y{animation:var(--exit-animation)}@starting-style{._1nu51p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1xq51ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._k1af10ed{animation:var(--enter-animation)}}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}

package/dist/esm/ui/page-layout/side-nav/side-nav.js

@@ -93,7 +93,7 @@ var styles = {
  * never runs.
  */
 var motionUpliftStyles = {
-  animationRTLSupport: "_cjprp6j8 _1p2s58oa _1jq41dy6 _2qe0k8f8",
+  animationRTLSupport: "_cjprp6j8 _1p2s1vfh _1jq41dy6 _2qe0jwwr",
   animationBaseStyles: "_10t81t0s _1vrh1a5r _xrrpi9qs",
   expandAnimationMobile: "_k1af10ed",
   collapseAnimationMobile: "_1lh81gzg _k1affm5y",

package/dist/esm/ui/top-nav-items/themed/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import AkButton from '@atlaskit/button/new';
+import AkButton from '@atlaskit/button/default/button';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedButton } from './themed-button';
 // Explicitly typed to use only the themed button API,

package/dist/esm/ui/top-nav-items/themed/icon-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { IconButton as AkIconButton } from '@atlaskit/button/new';
+import AkIconButton from '@atlaskit/button/icon/button';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedIconButton } from './themed-icon-button';
 export var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {

package/dist/esm/ui/top-nav-items/themed/link-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { LinkButton as AkLinkButton } from '@atlaskit/button/new';
+import AkLinkButton from '@atlaskit/button/link';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedLinkButton } from './themed-link-button';
 export var LinkButton = /*#__PURE__*/forwardRef(function (props, ref) {

package/dist/esm/ui/top-nav-items/themed/link-icon-button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
-import { LinkIconButton as AkLinkIconButton } from '@atlaskit/button/new';
+import AkLinkIconButton from '@atlaskit/button/icon/link';
 import { useHasCustomTheme } from './has-custom-theme-context';
 import { ThemedLinkIconButton } from './themed-link-icon-button';
 export var LinkIconButton = /*#__PURE__*/forwardRef(function (props, ref) {

package/dist/types/ui/top-nav-items/app-switcher.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type IconButtonProps } from '@atlaskit/button/new';
+import type { IconButtonProps } from '@atlaskit/button/icon/button';
 import type { TriggerProps } from '@atlaskit/popup/types';
 interface AppSwitcherProps extends Partial<Omit<TriggerProps, 'ref' | 'data-ds--level'>> {
     /**

package/dist/types/ui/top-nav-items/end-item.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
-import { type IconButtonProps } from '@atlaskit/button/new';
+import type { IconButtonProps } from '@atlaskit/button/icon/button';
 import type { TriggerProps } from '@atlaskit/popup/types';
 import type { TooltipProps } from '@atlaskit/tooltip/types';
 export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>> {

package/dist/types/ui/top-nav-items/icon-renderer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type IconProp } from '@atlaskit/button/new';
+import type { IconProp } from '@atlaskit/button/variants/types';
 /**
  * __Icon renderer__
  *

package/dist/types/ui/top-nav-items/themed/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { IconButtonProps } from '@atlaskit/button/new';
+import type { IconButtonProps } from '@atlaskit/button/icon/button';
 import type { IgnoredPrimitiveProps } from './get-primitives-spread-props';
 /**
  * Props present in underlying primitives but we want to override,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.16.1",
+	"version": "10.16.3",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -53,16 +53,16 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^12.3.0",
+		"@atlaskit/analytics-next": "^12.4.0",
 		"@atlaskit/app-provider": "^5.4.0",
 		"@atlaskit/avatar": "^27.2.0",
 		"@atlaskit/button": "^25.2.0",
-		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^37.5.0",
 		"@atlaskit/layering": "^5.1.0",
 		"@atlaskit/logo": "^21.5.0",
-		"@atlaskit/motion": "^8.4.0",
+		"@atlaskit/motion": "^8.5.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/popup": "^6.2.0",
@@ -94,6 +94,7 @@
 		"@atlaskit/flag": "^18.4.0",
 		"@atlaskit/form": "^17.1.0",
 		"@atlaskit/heading": "^7.1.0",
+		"@atlaskit/image": "^5.1.0",
 		"@atlaskit/inline-dialog": "^20.2.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/lozenge": "^15.3.0",
@@ -104,9 +105,12 @@
 		"@atlaskit/page-layout": "^5.4.0",
 		"@atlaskit/popper": "^9.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
-		"@atlaskit/select": "^22.8.0",
+		"@atlaskit/section-message": "^10.1.0",
+		"@atlaskit/select": "^22.10.0",
 		"@atlaskit/skeleton": "^4.3.0",
 		"@atlaskit/spotlight": "^4.2.0",
+		"@atlaskit/tabs": "^21.1.0",
+		"@atlaskit/tag": "^15.7.0",
 		"@atlaskit/textfield": "^10.1.0",
 		"@atlaskit/top-layer": "^4.4.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
@@ -116,8 +120,6 @@
 		"@atlassian/test-utils": "^1.1.0",
 		"@atlassian/testing-library": "^0.11.0",
 		"@axe-core/playwright": "^4.11.1",
-		"@testing-library/react": "^16.3.0",
-		"@testing-library/user-event": "^14.4.3",
 		"raf-stub": "^2.0.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"