@atlaskit/side-navigation 1.5.1 → 1.5.2

package/dist/es2019/components/Section/heading-item.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { HeadingItem as MenuHeadingItem } from '@atlaskit/menu';
 import { overrideStyleFunction, sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
 /**
  * __Heading item__
  *
@@ -14,16 +13,14 @@ const HeadingItem = props => {
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   if (!shouldRender) {
     return null;
   }
+  const cssFn = overrideStyleFunction(sectionHeaderSpacingStyles, props.cssFn);
 
-  const cssFn = overrideStyleFunction(sectionHeaderSpacingStyles, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
-
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
     cssFn: cssFn
   }));
 };
-
 export default HeadingItem;

package/dist/es2019/components/Section/section.js

@@ -4,7 +4,6 @@ import { Section as MenuSection } from '@atlaskit/menu';
 import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 // Type needed on props to extract types with extract react types.
-
 /**
  * __Section__
  *
@@ -18,13 +17,12 @@ const Section = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   if (!shouldRender) {
     return props.children;
   }
-
   return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
-    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+    ref: ref
+    // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
     ,
     overrides: {
       HeadingItem: {

package/dist/es2019/components/Section/skeleton-heading-item.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
 import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
 /**
  * __Skeleton heading item__
  *
@@ -15,17 +14,16 @@ const SkeletonHeadingItem = props => {
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   if (!shouldRender) {
     return null;
   }
-
-  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , _extends({
-    cssFn: () => ({ ...sectionHeaderSpacingStyles()
-    }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    cssFn: () => ({
+      ...sectionHeaderSpacingStyles()
+    })
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-
 export default SkeletonHeadingItem;

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

@@ -14,6 +14,7 @@ const sideNavStyles = css({
   color: `var(--ds-text-subtle, ${N500})`,
   overflow: 'hidden'
 });
+
 /**
  * __Side navigation__
  *
@@ -23,14 +24,14 @@ const sideNavStyles = css({
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
-
 const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     testId,
     label
   } = props;
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     jsx("nav", {
       ref: ref,
       "data-testid": testId,

package/dist/es2019/components/utils/hooks.js

@@ -8,7 +8,6 @@ export const useChildIds = (currentStackId, committedStack, onUnknownNest) => {
     if (currentStackId === ROOT_ID || !childIdsRef.current.size || childIdsRef.current.has(currentStackId) || !onUnknownNest) {
       return;
     }
-
     onUnknownNest(committedStack || [currentStackId]);
   }, [currentStackId, committedStack, onUnknownNest]);
   return {
@@ -20,15 +19,14 @@ export const useChildIdsEffect = (childIds, id) => {
     if (!childIds || !childIds.current) {
       return;
     }
-
     if (!childIds.current.has(id)) {
       childIds.current.add(id);
     }
-
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       childIds.current.delete(id);
-    }; // childIds shouldn't change as it's a ref
+    };
+    // childIds shouldn't change as it's a ref
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 };

package/dist/es2019/version.json

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

package/dist/esm/common/styles.js

@@ -1,12 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn } from '@atlaskit/theme/constants';
 var borderRadius = borderRadiusFn();
+
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
@@ -14,7 +12,6 @@ var borderRadius = borderRadiusFn();
  *
  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
-
 export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
   var newStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
     return {};
@@ -50,11 +47,11 @@ var selectedStyles = {
 };
 export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
   var isSelected = _ref.isSelected,
-      isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled;
   return _objectSpread(_objectSpread(_objectSpread({
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
-    padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 10px)"),
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 10px)"),
     borderRadius: borderRadius,
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
@@ -64,17 +61,17 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     // TODO: Can this be moved into menu?
     // center align icons with app-switcher regardless of size
     display: 'flex',
-    height: "var(--ds-scale-300, 24px)",
-    width: "var(--ds-scale-300, 24px)",
+    height: "var(--ds-space-300, 24px)",
+    width: "var(--ds-space-300, 24px)",
     alignItems: 'center',
     justifyContent: 'center',
     // this margin could be removed if the respective item had a more
     // compositional API so an Inline could be used to separate elements instead
-    marginRight: "var(--ds-scale-200, 16px)"
+    marginRight: "var(--ds-space-200, 16px)"
   }));
 };
 export var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
   return {
-    paddingInline: "var(--ds-scale-100, 10px)"
+    paddingInline: "var(--ds-space-100, 10px)"
   };
 };

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

@@ -4,7 +4,6 @@ import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
-
 /**
  * __Footer__
  *
@@ -21,8 +20,8 @@ var Footer = function Footer(props) {
       alignItems: 'center',
       width: '100%',
       '[data-item-elem-before]': {
-        marginRight: "var(--ds-scale-0, 0px)",
-        marginBottom: "var(--ds-scale-100, 8px)",
+        marginRight: "var(--ds-space-0, 0px)",
+        marginBottom: "var(--ds-space-100, 8px)",
         display: 'inline-block'
       },
       '[data-item-title]': {
@@ -32,7 +31,7 @@ var Footer = function Footer(props) {
       '[data-item-description]': {
         textAlign: 'center',
         display: 'inline-block',
-        margin: "var(--ds-scale-075, 6px)"
+        margin: "var(--ds-space-075, 6px)"
       },
       // Will look interactive if the `component` is anything other than a div.
       'div&:hover': {
@@ -44,14 +43,15 @@ var Footer = function Footer(props) {
         color: "var(--ds-text-subtle, ".concat(N500, ")")
       }
     };
-  }, props.cssFn); // https://stackoverflow.com/a/39333479
+  }, props.cssFn);
 
+  // https://stackoverflow.com/a/39333479
   var safeProps = function (_ref) {
     var iconBefore = _ref.iconBefore,
-        onClick = _ref.onClick,
-        description = _ref.description,
-        children = _ref.children,
-        testId = _ref.testId;
+      onClick = _ref.onClick,
+      description = _ref.description,
+      children = _ref.children,
+      testId = _ref.testId;
     return {
       iconBefore: iconBefore,
       onClick: onClick,
@@ -60,12 +60,11 @@ var Footer = function Footer(props) {
       testId: testId
     };
   }(props);
-
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, safeProps, {
-    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    component: props.component || Container
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn
   }));
 };
-
 export default Footer;

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

@@ -2,8 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],
-    _excluded2 = ["children"];
-
+  _excluded2 = ["children"];
 /* eslint-disable @repo/internal/react/use-primitives */
 import React, { forwardRef } from 'react';
 import Box from '@atlaskit/ds-explorations/box';
@@ -11,27 +10,26 @@ import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+
 /**
  * __Container__
  *
  * A container for Header and Footer that safely handles props to the child component
  */
-
 export var Container = function Container(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   // https://stackoverflow.com/a/39333479
   var safeProps = function (_ref2) {
     var className = _ref2.className,
-        testId = _ref2['data-testid'],
-        onClick = _ref2.onClick,
-        onMouseDown = _ref2.onMouseDown,
-        onDragStart = _ref2.onDragStart,
-        draggable = _ref2.draggable,
-        ref = _ref2.ref,
-        tabIndex = _ref2.tabIndex,
-        disabled = _ref2.disabled;
+      testId = _ref2['data-testid'],
+      onClick = _ref2.onClick,
+      onMouseDown = _ref2.onMouseDown,
+      onDragStart = _ref2.onDragStart,
+      draggable = _ref2.draggable,
+      ref = _ref2.ref,
+      tabIndex = _ref2.tabIndex,
+      disabled = _ref2.disabled;
     return {
       className: className,
       testId: testId,
@@ -44,13 +42,11 @@ export var Container = function Container(_ref) {
       disabled: disabled
     };
   }(props);
-
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "div",
     display: "block"
   }, safeProps), children);
 };
-
 /**
  * __Header__
  *
@@ -60,7 +56,6 @@ export var Container = function Container(_ref) {
 var Header = /*#__PURE__*/forwardRef(function (props, ref) {
   var cssFn = overrideStyleFunction(function () {
     var _ref3;
-
     return _ref3 = {
       userSelect: 'auto'
     }, _defineProperty(_ref3, '[data-item-title]', {
@@ -78,16 +73,17 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
     ref: ref,
-    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    component: props.component || Container
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
-    cssFn: cssFn // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    cssFn: cssFn
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     overrides: {
       Title: {
         render: function render(_, _ref4) {
           var children = _ref4.children,
-              props = _objectWithoutProperties(_ref4, _excluded2);
-
+            props = _objectWithoutProperties(_ref4, _excluded2);
           return /*#__PURE__*/React.createElement("h2", props, children);
         }
       }

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

@@ -5,7 +5,6 @@ import React, { forwardRef } from 'react';
 import { ButtonItem as Button } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
 /**
  * __Button item__
  *
@@ -15,20 +14,18 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
  * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-var ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+var ButtonItem = /*#__PURE__*/forwardRef(
+// Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useShouldNestedEleme = useShouldNestedElementRender(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
-
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -1,35 +1,33 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["cssFn"];
-
 /* eslint-disable @repo/internal/react/no-unsafe-overrides */
 import React, { forwardRef } from 'react';
 import { CustomItem as Custom } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
 /**
  * Used to support any custom items needed by products alongside the Header and Footer patterns.
  * Specific implementation of headers and footers are provided in the examples folder.
  */
-var CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+var CustomItem = /*#__PURE__*/forwardRef(
+// Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useShouldNestedEleme = useShouldNestedElementRender(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
-
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
   return /*#__PURE__*/React.createElement(Custom, _extends({
     ref: ref,
     cssFn: cssOverride
   }, rest));
-} // Dirty hack to get generics working with forward ref [2/2]
+}
+// Dirty hack to get generics working with forward ref [2/2]
 );
+
 export default CustomItem;

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

@@ -6,7 +6,6 @@ import React, { forwardRef, useCallback, useState } from 'react';
 import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import ButtonItem from './button-item';
-
 /**
  * __Go back item__
  *
@@ -18,30 +17,28 @@ import ButtonItem from './button-item';
  */
 var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      _ref$iconBefore = _ref.iconBefore,
-      iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
-    label: ""
-  }) : _ref$iconBefore,
-      onClick = _ref.onClick,
-      isSelected = _ref.isSelected,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$iconBefore = _ref.iconBefore,
+    iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
+      secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
+      label: ""
+    }) : _ref$iconBefore,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isInteracted = _useState2[0],
-      setIsInteracted = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isInteracted = _useState2[0],
+    setIsInteracted = _useState2[1];
   var onClickHandler = useCallback(function (e) {
     if (isInteracted) {
       return;
     }
-
     setIsInteracted(true);
     onClick && onClick(e);
   }, [onClick, isInteracted]);
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
-    isSelected: isSelected || isInteracted // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+    isSelected: isSelected || isInteracted
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn,
     iconBefore: iconBefore,

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

@@ -5,7 +5,6 @@ import React, { forwardRef } from 'react';
 import { LinkItem as Link } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
 /**
  * __Link item__
  *
@@ -17,20 +16,18 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
  * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-var LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+var LinkItem = /*#__PURE__*/forwardRef(
+// Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useShouldNestedEleme = useShouldNestedElementRender(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
-
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -1,15 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { SkeletonItem as SkelItem } from '@atlaskit/menu';
 import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
 /**
  * __Skeleton item__
  *
@@ -20,26 +16,24 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
  */
 var SkeletonItem = function SkeletonItem(props) {
   var _useShouldNestedEleme = useShouldNestedElementRender(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+  return /*#__PURE__*/React.createElement(SkelItem
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , _extends({
     cssFn: function cssFn() {
       return _objectSpread(_objectSpread({}, sectionHeaderSpacingStyles()), {}, {
         // This doubles up & to get a higher specificity as well as to not overwite the base styles.
         '&&::before': {
-          height: "var(--ds-scale-300, 20px)",
-          marginRight: "var(--ds-scale-200, 18px)",
-          width: "var(--ds-scale-300, 20px)"
+          height: "var(--ds-space-300, 20px)",
+          marginRight: "var(--ds-space-200, 18px)",
+          width: "var(--ds-space-300, 20px)"
         }
       });
-    } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    }
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-
 export default SkeletonItem;

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
@@ -15,30 +14,28 @@ var enteringStyles = css({
   position: 'static',
   zIndex: 2
 });
+
 /**
  * __Loading items__
  *
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
  */
-
 var LoadingItems = function LoadingItems(_ref) {
   var children = _ref.children,
-      isLoading = _ref.isLoading,
-      fallback = _ref.fallback,
-      testId = _ref.testId;
-
+    isLoading = _ref.isLoading,
+    fallback = _ref.fallback,
+    testId = _ref.testId;
   var _useShouldNestedEleme = useShouldNestedElementRender(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return children;
   }
-
   return jsx(ExitingPersistence, null, jsx(FadeIn, {
     key: "loading-section-".concat(isLoading),
     duration: mediumDurationMs
   }, function (motion, state) {
-    return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    return (
+      // eslint-disable-next-line @repo/internal/react/use-primitives
       jsx("span", _extends({}, motion, {
         "data-testid": testId && "".concat(testId, "--").concat(state),
         css: [baseMotionStyles, state === 'entering' && enteringStyles]
@@ -46,5 +43,4 @@ var LoadingItems = function LoadingItems(_ref) {
     );
   }));
 };
-
 export default LoadingItems;

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

@@ -1,12 +1,10 @@
 /* eslint-disable @repo/internal/react/use-primitives */
-
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';
 import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 import { containerCSS, innerContainerCSS, outerContainerCSS } from './styles';
-
 /**
  * __Navigation content__
  *
@@ -17,18 +15,14 @@ import { containerCSS, innerContainerCSS, outerContainerCSS } from './styles';
  */
 var NavigationContent = /*#__PURE__*/forwardRef(function (props, ref) {
   var showTopScrollIndicator = props.showTopScrollIndicator,
-      children = props.children,
-      testId = props.testId;
-
+    children = props.children,
+    testId = props.testId;
   var _useShouldNestedEleme = useShouldNestedElementRender(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   var scrollbar = useScrollbarWidth();
-
   if (!shouldRender) {
     return children;
   }
-
   var typedRef = ref;
   return jsx("div", {
     ref: typedRef,