@atlaskit/navigation-system 10.17.1 → 10.17.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/navigation-system
 
+## 10.17.3
+
+### Patch Changes
+
+- [`14307d3138fd3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/14307d3138fd3) -
+  Refactor styles to use statically analyzable values and type-checked inline constants for Compiled
+  and Atlaspack incremental builds, preserving existing styling behavior.
+- Updated dependencies
+
+## 10.17.2
+
+### Patch Changes
+
+- [`5017f4bf49edf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5017f4bf49edf) -
+  [ux] Adjusted main content to snap when 60% of the entry or exit animation of the panel and side
+  nav have completed. Changes are behind the `platform-dst-motion-uplift-panel` and
+  `platform-dst-motion-uplift-sidenav` feature gates.
+
 ## 10.17.1
 
 ### Patch Changes

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

@@ -12,9 +12,10 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useSkipLink = require("../../../context/skip-links/use-skip-link");
-var _constants = require("../constants");
 var _useLayoutId = require("../use-layout-id");
 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 contentInsetBlockStartStatic = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
+var contentHeightWhenFixedStatic = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
 var mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8",
   print: "_8rrs1wug"

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

@@ -14,7 +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 (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)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1jkh{transition-delay:19ms}._1vrh1a5r{transition-behavior:allow-discrete}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._1wsa4so3{transition-delay:24ms}[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

@@ -45,8 +45,8 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
-  exiting: "_k1af14vv _bq641n9t _105aeydr",
+  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa4so3 _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _10t81ia4 _xrrp147i _1wsa1jkh _1vrh1a5r _bq641n9t _105aeydr",
   contentEntering: "_y44v1mph",
   contentExiting: "_y44vf1qi",
   contentChangeContainer: "_4t3i1osq"

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

@@ -17,6 +17,20 @@ var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
 var _useLayoutId = require("./use-layout-id");
 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); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
+var localSlotLayersStatic = {
+  ribbon: 4,
+  // The side nav panel splitter is layered above the top nav when FHS is enabled.
+  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
+  sideNavPanelSplitterFHS: 4,
+  topBar: 4,
+  banner: 4,
+  // When FHS is enabled, the side nav is layered below the top nav,
+  // but above the panel
+  bannerFHS: 3,
+  topNavFHS: 3,
+  sideNav: 2,
+  panelSmallViewports: 1
+};
 var styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

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

@@ -25,7 +25,7 @@
 @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)))}@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 (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._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)}._1wxo4so3{transition-delay:24ms}@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

@@ -110,8 +110,8 @@ var motionUpliftStyles = {
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
   flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
   flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
-  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
-  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo4so3",
+  collapseAnimationDesktop: "_1sg81gzg _n2infm5y _17ly1wzp _hjoi1wsm _1wxo1cio"
 };
 var fallbackDefaultWidth = 320;
 var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;

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

@@ -8,7 +8,7 @@ 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';
-import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
+import { UNSAFE_asideLayoutVar, asidePanelSplitterId, asideVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';

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

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
+import { bannerMountedVar, UNSAFE_bannerVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from './hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';

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

@@ -5,8 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
-import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
+const contentInsetBlockStartStatic = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))`;
+const contentHeightWhenFixedStatic = `calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))`;
 const mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8",
   print: "_8rrs1wug"

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

@@ -14,7 +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 (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)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1jkh{transition-delay:19ms}._1vrh1a5r{transition-behavior:allow-discrete}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._1wsa4so3{transition-delay:24ms}[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

@@ -11,7 +11,7 @@ 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';
-import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
+import { UNSAFE_panelLayoutVar, panelPanelSplitterId, panelVar, sideNavLiveWidthVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';
@@ -34,8 +34,8 @@ const styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
-  exiting: "_k1af14vv _bq641n9t _105aeydr",
+  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa4so3 _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _10t81ia4 _xrrp147i _1wsa1jkh _1vrh1a5r _bq641n9t _105aeydr",
   contentEntering: "_y44v1mph",
   contentExiting: "_y44vf1qi",
   contentChangeContainer: "_4t3i1osq"

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

@@ -5,10 +5,24 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
-import { localSlotLayers, UNSAFE_ribbonVar } from './constants';
+import { UNSAFE_ribbonVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { useLayoutId } from './use-layout-id';
+const localSlotLayersStatic = {
+  ribbon: 4,
+  // The side nav panel splitter is layered above the top nav when FHS is enabled.
+  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
+  sideNavPanelSplitterFHS: 4,
+  topBar: 4,
+  banner: 4,
+  // When FHS is enabled, the side nav is layered below the top nav,
+  // but above the panel
+  bannerFHS: 3,
+  topNavFHS: 3,
+  sideNav: 2,
+  panelSmallViewports: 1
+};
 const styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

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

@@ -25,7 +25,7 @@
 @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)))}@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 (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._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)}._1wxo4so3{transition-delay:24ms}@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

@@ -17,7 +17,7 @@ import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
@@ -97,8 +97,8 @@ const motionUpliftStyles = {
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
   flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
   flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
-  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
-  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo4so3",
+  collapseAnimationDesktop: "_1sg81gzg _n2infm5y _17ly1wzp _hjoi1wsm _1wxo1cio"
 };
 const fallbackDefaultWidth = 320;
 export const onPeekStartDelayMs = 500;

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

@@ -11,7 +11,7 @@ import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-the
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
 import { useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme-new';
-import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { UNSAFE_topNavVar, topNavMountedVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from '../hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';

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

@@ -10,7 +10,7 @@ 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';
-import { asidePanelSplitterId, asideVar, contentHeightWhenFixed, contentInsetBlockStart, UNSAFE_asideLayoutVar } from './constants';
+import { UNSAFE_asideLayoutVar, asidePanelSplitterId, asideVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';

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

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLinkInternal } from '../../context/skip-links/use-skip-link-internal';
 import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
+import { bannerMountedVar, UNSAFE_bannerVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from './hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';

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

@@ -5,8 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useSkipLink } from '../../../context/skip-links/use-skip-link';
-import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
 import { useLayoutId } from '../use-layout-id';
+var contentInsetBlockStartStatic = "calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))";
+var contentHeightWhenFixedStatic = "calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))";
 var mainElementStyles = {
   root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _4t3ieqxy _qwfh1wug _13wn1if8",
   print: "_8rrs1wug"

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

@@ -14,7 +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 (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)}._10t81ia4{transition-property:position}._xrrp147i{transition-duration:var(--ds-duration-instant,0ms)}._1wsa1jkh{transition-delay:19ms}._1vrh1a5r{transition-behavior:allow-discrete}._bq641n9t{position:fixed}@starting-style{._1kmh1n9t{position:fixed}}._k1af1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}._1wsa4so3{transition-delay:24ms}[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

@@ -13,7 +13,7 @@ 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';
-import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
+import { UNSAFE_panelLayoutVar, panelPanelSplitterId, panelVar, sideNavLiveWidthVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { PanelSplitterProvider } from './panel-splitter/provider';
@@ -36,8 +36,8 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
-  exiting: "_k1af14vv _bq641n9t _105aeydr",
+  entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa4so3 _1vrh1a5r _1kmh1n9t _105abamb",
+  exiting: "_k1af14vv _10t81ia4 _xrrp147i _1wsa1jkh _1vrh1a5r _bq641n9t _105aeydr",
   contentEntering: "_y44v1mph",
   contentExiting: "_y44vf1qi",
   contentChangeContainer: "_4t3i1osq"

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

@@ -5,10 +5,24 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled
 import { media } from '@atlaskit/primitives/responsive';
-import { localSlotLayers, UNSAFE_ribbonVar } from './constants';
+import { UNSAFE_ribbonVar } from './constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from './dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
 import { useLayoutId } from './use-layout-id';
+var localSlotLayersStatic = {
+  ribbon: 4,
+  // The side nav panel splitter is layered above the top nav when FHS is enabled.
+  // It has the same z-index value, but is rendered after the top nav in the DOM so is stacked above.
+  sideNavPanelSplitterFHS: 4,
+  topBar: 4,
+  banner: 4,
+  // When FHS is enabled, the side nav is layered below the top nav,
+  // but above the panel
+  bannerFHS: 3,
+  topNavFHS: 3,
+  sideNav: 2,
+  panelSmallViewports: 1
+};
 var styles = {
   root: "_nd5l1c99 _1reo15vq _18m915vq _4t3i1osq _152tidpf _kqsw1if8 _vchhusvi _1pbyegat _1e0cglyw _dm2518uv"
 };

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

@@ -25,7 +25,7 @@
 @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)))}@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 (min-width:64rem){._17ly8iot{transition-property:transform,display}._177m1a5r{transition-behavior:allow-discrete}._1sg81gzg{grid-area:main}._n2infm5y{animation:var(--exit-animation)}._17ly1wzp{transition-property:grid-area,display}._hjoi1wsm{transition-duration:var(--ds-duration-instant,0ms),var(--ds-duration-medium,.2s)}._1wxo1cio{transition-delay:19ms,var(--ds-duration-instant,0ms)}._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)}._1wxo4so3{transition-delay:24ms}@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

@@ -21,7 +21,7 @@ import { media } from '@atlaskit/primitives/responsive';
 import { useSkipLinkInternal } from '../../../context/skip-links/use-skip-link-internal';
 import { TopNavStartElement } from '../../../context/top-nav-start/top-nav-start-element';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
-import { bannerMountedVar, contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar, UNSAFE_sideNavLayoutVar } from '../constants';
+import { UNSAFE_sideNavLayoutVar, openLayerObserverSideNavNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, sideNavPanelSplitterId, sideNavVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
 import { PanelSplitterProvider } from '../panel-splitter/provider';
@@ -101,8 +101,8 @@ var motionUpliftStyles = {
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _4xcifm5y _1tpvi9qs _sylc1a5r",
   flyoutOpenFullHeightSidebar: "_n2in10ed _hjoi1mzy",
   flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _n2infm5y _hjoii9qs",
-  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo1ign",
-  collapseAnimationDesktop: "_1sg81gzg _n2infm5y"
+  expandAnimationDesktop: "_1sg8k0mc _n2in10ed _1xpz1gzg _17ly1q8v _hjoi147i _1wxo4so3",
+  collapseAnimationDesktop: "_1sg81gzg _n2infm5y _17ly1wzp _hjoi1wsm _1wxo1cio"
 };
 var fallbackDefaultWidth = 320;
 export var onPeekStartDelayMs = 500;

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

@@ -11,7 +11,7 @@ import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-the
 import { HasDefaultBackgroundColorContext } from '../../top-nav-items/themed/has-default-background-color-context';
 import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
 import { useCustomThemeNew } from '../../top-nav-items/themed/use-custom-theme-new';
-import { bannerMountedVar, localSlotLayers, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
+import { UNSAFE_topNavVar, topNavMountedVar } from '../constants';
 import { DangerouslyHoistCssVarToDocumentRoot } from '../dangerously-hoist-css-var-to-document-root';
 import { HoistCssVarToLocalGrid } from '../hoist-css-var-to-local-grid';
 import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.17.1",
+	"version": "10.17.3",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -64,16 +64,16 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/layering": "^5.2.0",
-		"@atlaskit/logo": "^23.0.0",
-		"@atlaskit/motion": "^8.7.0",
+		"@atlaskit/logo": "^23.1.0",
+		"@atlaskit/motion": "^8.8.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.4.0",
-		"@atlaskit/tokens": "^18.0.0",
+		"@atlaskit/side-nav-items": "^2.5.0",
+		"@atlaskit/tokens": "^18.2.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -101,7 +101,7 @@
 		"@atlaskit/inline-dialog": "^20.3.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/lozenge": "^15.4.0",
-		"@atlaskit/menu": "^10.2.0",
+		"@atlaskit/menu": "^11.0.0",
 		"@atlaskit/modal-dialog": "^16.6.0",
 		"@atlaskit/onboarding": "^15.4.0",
 		"@atlaskit/page-header": "^13.3.0",