@atlaskit/navigation-system 2.10.0 → 2.10.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlassian/navigation-system
 
+## 2.10.2
+
+### Patch Changes
+
+- [`332393d8d236d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/332393d8d236d) -
+  Add `forwardRefWithGeneric` as a util to the `ds-lib` package so it is available for all of the
+  Design System.
+- Updated dependencies
+
+## 2.10.1
+
+### Patch Changes
+
+- [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 2.10.0
 
 ### Minor Changes

package/dist/cjs/ui/menu-item/link-menu-item.js

@@ -11,8 +11,8 @@ require("./link-menu-item.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _forwardRefWithGeneric = require("../../components/forward-ref-with-generic");
 var _listItem = require("../../components/list-item");
 var _menuItem = require("./menu-item");
 var _useScrollMenuItemIntoView = require("./use-scroll-menu-item-into-view");
@@ -78,4 +78,4 @@ var LinkMenuItemNoRef = function LinkMenuItemNoRef(_ref, forwardedRef) {
  *
  * A menu item link. It should be used within a `ul`.
  */
-var LinkMenuItem = exports.LinkMenuItem = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(LinkMenuItemNoRef);
+var LinkMenuItem = exports.LinkMenuItem = (0, _forwardRefWithGeneric.default)(LinkMenuItemNoRef);

package/dist/cjs/ui/menu-item/menu-item.js

@@ -15,11 +15,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _avatar = require("@atlaskit/avatar");
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireWildcard(require("@atlaskit/tooltip"));
-var _forwardRefWithGeneric = require("../../components/forward-ref-with-generic");
 var _constants = require("./constants");
 var _expandableMenuItemContext = require("./expandable-menu-item/expandable-menu-item-context");
 var _flyoutMenuItemContext = require("./flyout-menu-item/flyout-menu-item-context");
@@ -423,4 +423,4 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref3, forwardedRef) {
  * It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
  * This can be inferred from the type of the `onClick` prop.
  */
-var MenuItemBase = exports.MenuItemBase = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(MenuItemBaseNoRef);
+var MenuItemBase = exports.MenuItemBase = (0, _forwardRefWithGeneric.default)(MenuItemBaseNoRef);

package/dist/cjs/ui/menu-section/divider.compiled.css

@@ -1,4 +1,4 @@
 
 ._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
-._mqm2pp12{border-block-start:var(--_18x9sjc)}
+._mqm2kzr3{border-block-start:var(--_1hbmzy2)}
 ._1bsb1osq{width:100%}

package/dist/cjs/ui/menu-section/divider.js

@@ -27,9 +27,9 @@ var Divider = exports.Divider = function Divider() {
      * but it probably isn't necessary.
      */
     role: "none",
-    className: (0, _runtime.ax)(["_h7alglyw _179rglyw _mqm2pp12 _1bsb1osq"]),
+    className: (0, _runtime.ax)(["_h7alglyw _179rglyw _mqm2kzr3 _1bsb1osq"]),
     style: {
-      "--_18x9sjc": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #091E4224)"))
+      "--_1hbmzy2": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #091E4224)"))
     }
   });
 };

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

@@ -14,5 +14,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
-@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:64rem){._1w6e7r9e{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._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

@@ -36,7 +36,7 @@ var fallbackDefaultWidth = 365;
 var fallbackResizeMinWidth = 400;
 var styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
-  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  border: "_191wglyw _16qs1cd0 _1w6e7r9e _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw"
 };

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

@@ -1,8 +1,8 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51zglyw{border-inline-end:none}
-._t51zzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
@@ -16,5 +16,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @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}}}

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

@@ -52,8 +52,8 @@ function getResizeBounds() {
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
   root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51zzgxb",
-  newBorder: "_191wglyw _t51zglyw _p5clzgxb",
+  oldBorder: "_t51z7r9e",
+  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
   newBorderFlyoutOpen: "_p5clglyw",
   flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",

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

@@ -2,8 +2,8 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._179rglyw{border-block-end:none}
-._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._179r7r9e{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._179rglyw{border-block-end:none}._152t1nws{inset-block-start:var(--n_bnrM,0)}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * - The background sits below the expanded side nav
  */
 var styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
   fullHeightSidebarExpanded: "_1rqt15p1"
 };
@@ -43,7 +43,7 @@ var styles = {
  * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
  */
 var backgroundStyles = {
-  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  root: "_nd5l8cbt _179r7r9e _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
   sideNavExpanded: "_hyzqcs5v"
 };
 

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

@@ -13,11 +13,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var _forwardRefWithGeneric = require("../../../components/forward-ref-with-generic");
 var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"],
   _excluded2 = ["appearance", "shape", "isSelected", "isDisabled"],
   _excluded3 = ["appearance", "shape", "isSelected", "isDisabled"],
@@ -141,7 +141,7 @@ var ThemedPressable = /*#__PURE__*/(0, _react.forwardRef)(function ThemedPressab
  *
  * Render props had problems passing down styles through `xcss` to the `children` function.
  */
-var ThemedAnchor = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(function ThemedAnchor(_ref3, ref) {
+var ThemedAnchor = (0, _forwardRefWithGeneric.default)(function ThemedAnchor(_ref3, ref) {
   var _ref3$appearance = _ref3.appearance,
     appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
     _ref3$shape = _ref3.shape,
@@ -196,7 +196,7 @@ var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(fu
  *
  * A themed link button for the top bar.
  */
-var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(function ThemedLinkButton(_ref5, ref) {
+var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.default)(function ThemedLinkButton(_ref5, ref) {
   var IconBefore = _ref5.iconBefore,
     children = _ref5.children,
     props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
@@ -288,7 +288,7 @@ var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwar
  *
  * A themed link icon button for the top bar.
  */
-var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.forwardRefWithGeneric)(function ThemedLinkIconButton(_ref7, ref) {
+var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(function ThemedLinkIconButton(_ref7, ref) {
   var _tooltip$content2;
   var Icon = _ref7.icon,
     label = _ref7.label,

package/dist/es2019/ui/menu-item/link-menu-item.js

@@ -3,8 +3,8 @@ import "./link-menu-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo, useRef } from 'react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
 import { ListItem } from '../../components/list-item';
 import { MenuItemBase } from './menu-item';
 import { useScrollMenuItemIntoView } from './use-scroll-menu-item-into-view';

package/dist/es2019/ui/menu-item/menu-item.js

@@ -5,11 +5,11 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, lazy, Suspense, useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { AvatarContext } from '@atlaskit/avatar';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
-import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
 import { expandableMenuItemIndentation } from './constants';
 import { useLevel } from './expandable-menu-item/expandable-menu-item-context';
 import { useFlyoutMenuOpen, useSetFlyoutMenuOpen } from './flyout-menu-item/flyout-menu-item-context';

package/dist/es2019/ui/menu-section/divider.compiled.css

@@ -1,4 +1,4 @@
 
 ._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
-._mqm2zgxb{border-block-start:1px solid var(--ds-border,#091e4224)}
+._mqm27r9e{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
 ._1bsb1osq{width:100%}

package/dist/es2019/ui/menu-section/divider.js

@@ -18,5 +18,5 @@ export const Divider = () => /*#__PURE__*/React.createElement("hr", {
    * but it probably isn't necessary.
    */
   role: "none",
-  className: ax(["_h7alglyw _179rglyw _mqm2zgxb _1bsb1osq"])
+  className: ax(["_h7alglyw _179rglyw _mqm27r9e _1bsb1osq"])
 });

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

@@ -14,5 +14,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
-@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:64rem){._1w6e7r9e{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._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

@@ -25,7 +25,7 @@ const fallbackDefaultWidth = 365;
 const fallbackResizeMinWidth = 400;
 const styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
-  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  border: "_191wglyw _16qs1cd0 _1w6e7r9e _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw"
 };

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

@@ -1,8 +1,8 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51zglyw{border-inline-end:none}
-._t51zzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
@@ -16,5 +16,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @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}}}

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

@@ -39,8 +39,8 @@ function getResizeBounds() {
 const openLayerObserverSideNavNamespace = 'side-nav';
 const styles = {
   root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51zzgxb",
-  newBorder: "_191wglyw _t51zglyw _p5clzgxb",
+  oldBorder: "_t51z7r9e",
+  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
   newBorderFlyoutOpen: "_p5clglyw",
   flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",

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

@@ -2,8 +2,8 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._179rglyw{border-block-end:none}
-._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._179r7r9e{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._179rglyw{border-block-end:none}._152t1nws{inset-block-start:var(--n_bnrM,0)}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}

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

@@ -21,7 +21,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
  * - The background sits below the expanded side nav
  */
 const styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
   fullHeightSidebarExpanded: "_1rqt15p1"
 };
@@ -32,7 +32,7 @@ const styles = {
  * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
  */
 const backgroundStyles = {
-  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  root: "_nd5l8cbt _179r7r9e _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
   sideNavExpanded: "_hyzqcs5v"
 };
 

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

@@ -4,11 +4,11 @@ import "./button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@compiled/react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { forwardRefWithGeneric } from '../../../components/forward-ref-with-generic';
 
 /**
  * Props from primitives that we explicitly ignore and remove from spread props,

package/dist/esm/ui/menu-item/link-menu-item.js

@@ -3,8 +3,8 @@ import "./link-menu-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo, useRef } from 'react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
 import { ListItem } from '../../components/list-item';
 import { MenuItemBase } from './menu-item';
 import { useScrollMenuItemIntoView } from './use-scroll-menu-item-into-view';

package/dist/esm/ui/menu-item/menu-item.js

@@ -10,11 +10,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { forwardRef, lazy, Suspense, useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { AvatarContext } from '@atlaskit/avatar';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
-import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
 import { expandableMenuItemIndentation } from './constants';
 import { useLevel } from './expandable-menu-item/expandable-menu-item-context';
 import { useFlyoutMenuOpen, useSetFlyoutMenuOpen } from './flyout-menu-item/flyout-menu-item-context';

package/dist/esm/ui/menu-section/divider.compiled.css

@@ -1,4 +1,4 @@
 
 ._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
-._mqm2pp12{border-block-start:var(--_18x9sjc)}
+._mqm2kzr3{border-block-start:var(--_1hbmzy2)}
 ._1bsb1osq{width:100%}

package/dist/esm/ui/menu-section/divider.js

@@ -19,9 +19,9 @@ export var Divider = function Divider() {
      * but it probably isn't necessary.
      */
     role: "none",
-    className: ax(["_h7alglyw _179rglyw _mqm2pp12 _1bsb1osq"]),
+    className: ax(["_h7alglyw _179rglyw _mqm2kzr3 _1bsb1osq"]),
     style: {
-      "--_18x9sjc": ix("1px solid ".concat("var(--ds-border, #091E4224)"))
+      "--_1hbmzy2": ix("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #091E4224)"))
     }
   });
 };

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

@@ -14,5 +14,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
-@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:64rem){._1w6e7r9e{border-inline-start:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._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

@@ -27,7 +27,7 @@ var fallbackDefaultWidth = 365;
 var fallbackResizeMinWidth = 400;
 var styles = {
   root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
-  border: "_191wglyw _16qs1cd0 _1w6ezgxb _scbpglyw",
+  border: "_191wglyw _16qs1cd0 _1w6e7r9e _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw"
 };

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

@@ -1,8 +1,8 @@
 
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
 ._191wglyw{border-inline-start:none}
-._t51zglyw{border-inline-end:none}
-._t51zzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._t51z7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._t51zglyw{border-inline-end:none}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb1ego{width:min(90%,20pc)}
@@ -16,5 +16,5 @@
 ._kqsw1if8{position:sticky}
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
-@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5clglyw{border-inline-end:none}._p5clzgxb{border-inline-end:1px solid var(--ds-border,#091e4224)}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
+@media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._p5clglyw{border-inline-end:none}._qiln1gzg{grid-area:main}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
 @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}}}

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

@@ -43,8 +43,8 @@ function getResizeBounds() {
 var openLayerObserverSideNavNamespace = 'side-nav';
 var styles = {
   root: "_nd5l1b6c _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _4ap3vuon _scbpglyw",
-  oldBorder: "_t51zzgxb",
-  newBorder: "_191wglyw _t51zglyw _p5clzgxb",
+  oldBorder: "_t51z7r9e",
+  newBorder: "_191wglyw _t51zglyw _p5cl7r9e",
   newBorderFlyoutOpen: "_p5clglyw",
   flyoutOpen: "_qiln1gzg _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",

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

@@ -2,8 +2,8 @@
 ._nd5l8cbt{grid-area:top-bar}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
-._179rglyw{border-block-end:none}
-._179rzgxb{border-block-end:1px solid var(--ds-border,#091e4224)}._152t1nws{inset-block-start:var(--n_bnrM,0)}
+._179r7r9e{border-block-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._179rglyw{border-block-end:none}._152t1nws{inset-block-start:var(--n_bnrM,0)}
 ._1bsb1osq{width:100%}
 ._1e0c11p5{display:grid}
 ._1pbyegat{z-index:4}

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

@@ -23,7 +23,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
  * - The background sits below the expanded side nav
  */
 var styles = {
-  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179rzgxb _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
+  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
   fullHeightSidebarExpanded: "_1rqt15p1"
 };
@@ -34,7 +34,7 @@ var styles = {
  * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
  */
 var backgroundStyles = {
-  root: "_nd5l8cbt _179rzgxb _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
+  root: "_nd5l8cbt _179r7r9e _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
   sideNavExpanded: "_hyzqcs5v"
 };
 

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

@@ -12,11 +12,11 @@ import "./button.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@compiled/react';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { forwardRefWithGeneric } from '../../../components/forward-ref-with-generic';
 
 /**
  * Props from primitives that we explicitly ignore and remove from spread props,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.10.0",
+	"version": "2.10.2",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -70,7 +70,7 @@
 		"@atlaskit/avatar": "^25.1.0",
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.14.0",
-		"@atlaskit/ds-lib": "^5.0.0",
+		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.7.0",
@@ -80,7 +80,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -102,7 +102,7 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/form": "^12.6.0",
+		"@atlaskit/form": "^13.0.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",

package/dist/cjs/components/forward-ref-with-generic.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.forwardRefWithGeneric = void 0;
-var _react = require("react");
-/**
- * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
- */
-var forwardRefWithGeneric = exports.forwardRefWithGeneric = _react.forwardRef;

package/dist/es2019/components/forward-ref-with-generic.js

@@ -1,6 +0,0 @@
-import { forwardRef } from 'react';
-
-/**
- * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
- */
-export const forwardRefWithGeneric = forwardRef;

package/dist/esm/components/forward-ref-with-generic.js

@@ -1,6 +0,0 @@
-import { forwardRef } from 'react';
-
-/**
- * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
- */
-export var forwardRefWithGeneric = forwardRef;

package/dist/types/components/forward-ref-with-generic.d.ts

@@ -1,4 +0,0 @@
-/**
- * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
- */
-export declare const forwardRefWithGeneric: <ElementType, Props = {}>(render: (props: Props, ref: React.Ref<ElementType>) => React.ReactElement | null) => (props: Props & React.RefAttributes<ElementType>) => React.ReactElement | null;

package/dist/types-ts4.5/components/forward-ref-with-generic.d.ts

@@ -1,4 +0,0 @@
-/**
- * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
- */
-export declare const forwardRefWithGeneric: <ElementType, Props = {}>(render: (props: Props, ref: React.Ref<ElementType>) => React.ReactElement | null) => (props: Props & React.RefAttributes<ElementType>) => React.ReactElement | null;