@atlaskit/navigation-system 10.16.2 → 10.16.4

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlassian/navigation-system
 
+## 10.16.4
+
+### Patch Changes
+
+- [`1cfdd8f6d54e6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1cfdd8f6d54e6) -
+  Behind `platform-dst-motion-uplift-sidenav`, the side nav now holds `grid-area: main` for the
+  first 150ms of its desktop enter animation instead of switching immediately, so the main content
+  reflows shortly into the animation rather than at the very start.
+
+  Behind `platform-dst-motion-uplift-panel`, the panel holds `position: fixed` for the first 150ms
+  of its enter animation, and its enter and exit animations are now disabled under
+  `prefers-reduced-motion: reduce`.
+
+## 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

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

@@ -1,10 +1,6 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._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)}
-[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)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -18,6 +14,7 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}
 @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)}}
 @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}

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

@@ -13,10 +13,10 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-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 _useMotion2 = require("@atlaskit/motion/entering/use-motion");
+var _reanimate = require("@atlaskit/motion/reanimate");
+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: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _bq641n9t _105aeydr",
   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),
@@ -136,12 +136,12 @@ function Panel(_ref) {
     }
     if (isMotionUpliftEnabled) {
       if (defaultWidth === 0) {
-        reanimate(_useMotion2.Reanimate.exit);
+        reanimate(_reanimate.Reanimate.exit);
         defaultWidthRef.current = defaultWidth;
         // Set width to 0 once the exit animation is complete
         return;
       } else if (defaultWidthRef.current === 0) {
-        reanimate(_useMotion2.Reanimate.enter);
+        reanimate(_reanimate.Reanimate.enter);
       }
     }
     defaultWidthRef.current = defaultWidth;
@@ -200,9 +200,7 @@ function Panel(_ref) {
     "aria-label": label
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: (0, _runtime.ax)([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    (0, _react2.cx)(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
+    className: (0, _runtime.ax)([styles.root, isMotionUpliftEnabled && state === 'hidden' && styles.hidden, isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
     ref: mergedRef

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,12 +20,12 @@
 ._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))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo1ign{transition-delay:var(--ds-duration-short,.15s)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

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",
@@ -110,7 +110,7 @@ var motionUpliftStyles = {
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
   flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
   flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
-  expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
   collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
 };
 var fallbackDefaultWidth = 320;

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

@@ -1,10 +1,6 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._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)}
-[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)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -18,6 +14,7 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}
 @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)}}
 @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}

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

@@ -3,10 +3,10 @@ import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-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 { useMotion } from '@atlaskit/motion/entering/use-motion';
+import { Reanimate } from '@atlaskit/motion/reanimate';
+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: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _bq641n9t _105aeydr",
   contentEntering: "_y44v11az",
-  contentExiting: "_y44v6gs0"
+  contentExiting: "_y44vf1qi"
 };
 
 /**
@@ -182,9 +182,7 @@ export function Panel({
     "aria-label": label
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
+    className: ax([styles.root, isMotionUpliftEnabled && state === 'hidden' && styles.hidden, isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
       [panelVar]: panelVariableWidth,

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,12 +20,12 @@
 ._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))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo1ign{transition-delay:var(--ds-duration-short,.15s)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

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",
@@ -97,7 +97,7 @@ const motionUpliftStyles = {
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
   flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
   flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
-  expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
   collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
 };
 const fallbackDefaultWidth = 320;

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

@@ -1,10 +1,6 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._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)}
-[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)}
+._y44vf1qi{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.6,0,.8,.6) FadeOut100to0)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
@@ -18,6 +14,7 @@
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
+@media (prefers-reduced-motion:no-preference){._k1af14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}[dir=rtl] ._105aeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1ign{transition-delay:var(--ds-duration-short,.15s)}._1vrh1a5r{transition-behavior:allow-discrete}[dir=rtl] ._105abamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}}
 @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)}}
 @media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}

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

@@ -5,10 +5,10 @@ import "./panel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-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 { useMotion } from '@atlaskit/motion/entering/use-motion';
+import { Reanimate } from '@atlaskit/motion/reanimate';
+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: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _bq641n9t _105aeydr",
   contentEntering: "_y44v11az",
-  contentExiting: "_y44v6gs0"
+  contentExiting: "_y44vf1qi"
 };
 
 /**
@@ -191,9 +191,7 @@ export function Panel(_ref) {
     "aria-label": label
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
+    className: ax([styles.root, isMotionUpliftEnabled && state === 'hidden' && styles.hidden, isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
     style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
     ref: mergedRef

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,12 +20,12 @@
 ._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))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._p0az1elq{transform:translateX(calc(var(--n_snvRsz, var(--n_snvW, 0px)) - var(--ds-border-width, 1px)))}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._qilnk0mc{grid-area:side-nav}._p5clia51{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
+@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._1xpz1gzg{grid-area:main}}._1sg8k0mc{grid-area:side-nav}._n2in10ed{animation:var(--enter-animation)}._17ly1q8v{transition-property:grid-area}._hjoi147i{transition-duration:var(--ds-duration-instant,0ms)}._1wxo1ign{transition-delay:var(--ds-duration-short,.15s)}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}._hjoi1mzy{transition-duration:var(--ds-duration-long,.25s)}._hjoii9qs{transition-duration:var(--ds-duration-medium,.2s)}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
 @media not (min-width:64rem){._89fi1b6c{grid-area:main/aside/aside/aside}}
 @supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference){._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._139f8iot{transition-property:transform,display}._1tpvfnf5{transition-duration:.2s}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xci10ed{animation:var(--enter-animation)}._1tpv1mzy{transition-duration:var(--ds-duration-long,.25s)}._sylc1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference){._4xcifm5y{animation:var(--exit-animation)}._1tpvi9qs{transition-duration:var(--ds-duration-medium,.2s)}._sylc1a5r{transition-behavior:allow-discrete}}}

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",
@@ -101,7 +101,7 @@ var motionUpliftStyles = {
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
   flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
   flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
-  expandAnimationDesktop: "_1sg8k0mc _n2in10ed",
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
   collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
 };
 var fallbackDefaultWidth = 320;

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.2",
+	"version": "10.16.4",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -53,26 +53,26 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^12.3.0",
-		"@atlaskit/app-provider": "^5.4.0",
-		"@atlaskit/avatar": "^27.2.0",
-		"@atlaskit/button": "^25.2.0",
-		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/analytics-next": "^12.5.0",
+		"@atlaskit/app-provider": "^5.5.0",
+		"@atlaskit/avatar": "^27.3.0",
+		"@atlaskit/button": "^25.3.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/platform-feature-flags": "^2.1.0",
-		"@atlaskit/platform-feature-flags-react": "^1.1.0",
-		"@atlaskit/popup": "^6.2.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
-		"@atlaskit/primitives": "^22.4.0",
+		"@atlaskit/icon": "^37.6.0",
+		"@atlaskit/layering": "^5.2.0",
+		"@atlaskit/logo": "^21.6.0",
+		"@atlaskit/motion": "^8.6.0",
+		"@atlaskit/platform-feature-flags": "^2.2.0",
+		"@atlaskit/platform-feature-flags-react": "^1.2.0",
+		"@atlaskit/popup": "^6.3.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
+		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
-		"@atlaskit/tokens": "^16.8.0",
-		"@atlaskit/tooltip": "^24.2.0",
-		"@atlaskit/visually-hidden": "^4.3.0",
+		"@atlaskit/tokens": "^16.10.0",
+		"@atlaskit/tooltip": "^24.3.0",
+		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -87,31 +87,35 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/badge": "^21.1.0",
-		"@atlaskit/banner": "^15.2.0",
-		"@atlaskit/breadcrumbs": "^17.6.0",
-		"@atlaskit/dropdown-menu": "^18.2.0",
-		"@atlaskit/flag": "^18.4.0",
-		"@atlaskit/form": "^17.1.0",
-		"@atlaskit/heading": "^7.1.0",
-		"@atlaskit/inline-dialog": "^20.2.0",
+		"@atlaskit/badge": "^21.2.0",
+		"@atlaskit/banner": "^15.3.0",
+		"@atlaskit/breadcrumbs": "^17.7.0",
+		"@atlaskit/dropdown-menu": "^18.3.0",
+		"@atlaskit/flag": "^18.5.0",
+		"@atlaskit/form": "^17.2.0",
+		"@atlaskit/heading": "^7.2.0",
+		"@atlaskit/image": "^5.2.0",
+		"@atlaskit/inline-dialog": "^20.3.0",
 		"@atlaskit/link": "^5.1.0",
-		"@atlaskit/lozenge": "^15.3.0",
-		"@atlaskit/menu": "^10.1.0",
-		"@atlaskit/modal-dialog": "^16.5.0",
-		"@atlaskit/onboarding": "^15.3.0",
-		"@atlaskit/page-header": "^13.2.0",
-		"@atlaskit/page-layout": "^5.4.0",
-		"@atlaskit/popper": "^9.3.0",
-		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.1.0",
-		"@atlaskit/select": "^22.9.0",
-		"@atlaskit/skeleton": "^4.3.0",
+		"@atlaskit/lozenge": "^15.4.0",
+		"@atlaskit/menu": "^10.2.0",
+		"@atlaskit/modal-dialog": "^16.6.0",
+		"@atlaskit/onboarding": "^15.4.0",
+		"@atlaskit/page-header": "^13.3.0",
+		"@atlaskit/page-layout": "^5.5.0",
+		"@atlaskit/popper": "^9.4.0",
+		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
+		"@atlaskit/section-message": "^10.2.0",
+		"@atlaskit/select": "^22.11.0",
+		"@atlaskit/skeleton": "^4.4.0",
 		"@atlaskit/spotlight": "^4.2.0",
-		"@atlaskit/textfield": "^10.1.0",
+		"@atlaskit/tabs": "^21.2.0",
+		"@atlaskit/tag": "^15.8.0",
+		"@atlaskit/textfield": "^10.2.0",
 		"@atlaskit/top-layer": "^4.4.0",
-		"@atlassian/feature-flags-test-utils": "^1.2.0",
-		"@atlassian/gemini": "^1.52.0",
-		"@atlassian/search-dialog": "^10.10.0",
+		"@atlassian/feature-flags-test-utils": "^1.3.0",
+		"@atlassian/gemini": "^1.53.0",
+		"@atlassian/search-dialog": "^10.11.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
 		"@atlassian/testing-library": "^0.11.0",