@atlaskit/side-navigation 1.5.0 → 1.5.2

package/dist/cjs/components/NestingItem/index.js

@@ -1,56 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
 var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _styles = require("../../common/styles");
-
 var _index = require("../index");
-
 var _NestableNavigationContent = require("../NestableNavigationContent");
-
 var _context = require("../NestableNavigationContent/context");
-
 var _hooks = require("../utils/hooks");
-
 var _styles2 = require("./styles");
-
 var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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) { (0, _defineProperty2.default)(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; }
-
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
  * When not open - it will render itself as an item.
@@ -58,31 +34,27 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var NestingItem = function NestingItem(props) {
   var children = props.children,
-      iconAfter = props.iconAfter,
-      title = props.title,
-      onClick = props.onClick,
-      cssFn = props.cssFn,
-      isSelected = props.isSelected,
-      id = props.id,
-      component = props.component,
-      testId = props.testId,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-
+    iconAfter = props.iconAfter,
+    title = props.title,
+    onClick = props.onClick,
+    cssFn = props.cssFn,
+    isSelected = props.isSelected,
+    id = props.id,
+    component = props.component,
+    testId = props.testId,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _useNestedContext = (0, _context.useNestedContext)(),
-      currentStackId = _useNestedContext.currentStackId,
-      onNest = _useNestedContext.onNest,
-      onUnNest = _useNestedContext.onUnNest,
-      contextualBackButton = _useNestedContext.backButton,
-      stack = _useNestedContext.stack,
-      childIds = _useNestedContext.childIds;
-
+    currentStackId = _useNestedContext.currentStackId,
+    onNest = _useNestedContext.onNest,
+    onUnNest = _useNestedContext.onUnNest,
+    contextualBackButton = _useNestedContext.backButton,
+    stack = _useNestedContext.stack,
+    childIds = _useNestedContext.childIds;
   var mergedStyles = (0, _styles.overrideStyleFunction)(_styles2.nestingItemStyle, cssFn);
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isInteracted = _useState2[0],
-      setIsInteracted = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isInteracted = _useState2[0],
+    setIsInteracted = _useState2[1];
   var backButton = props.overrides && props.overrides.GoBackItem && props.overrides.GoBackItem.render && props.overrides.GoBackItem.render({
     onClick: onUnNest,
     testId: testId && "".concat(testId, "--go-back-item")
@@ -97,54 +69,49 @@ var NestingItem = function NestingItem(props) {
       parentId: id,
       childIds: childIds
     };
-  }, // 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
   [onNest, onUnNest, backButton, stack, id, currentStackId]);
   (0, _hooks.useChildIdsEffect)(childIds, id);
-
   var isNormalClick = function isNormalClick(e) {
     return !(e.button || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
   };
+
   /**
    * We want both the on nest handler and the onclick handler to be called.
    * We create a wrapper function to call both.
    */
-
-
   var onClickHandler = (0, _react.useCallback)(function (e) {
     if (isInteracted) {
       // We return early if this has been interacted with because its assumed
       // this will be already exiting - so we don't want to double up the click.
       return;
-    } // Avoid a nesting transition if a modifier key is detected during click.
-
+    }
 
+    // Avoid a nesting transition if a modifier key is detected during click.
     if (isNormalClick(e)) {
       setIsInteracted(true);
       onNest(id);
     }
-
     onClick && onClick(e);
   }, [isInteracted, onClick, onNest, id]);
-
   if (currentStackId === id) {
     return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && (0, _react2.jsx)(_box.default, {
       as: "div",
       display: "block",
-      paddingBlock: "scale.075",
-      paddingInline: "scale.100"
+      paddingBlock: "space.075",
+      paddingInline: "space.100"
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
     }, children));
   }
-
   if ([_NestableNavigationContent.ROOT_ID].concat((0, _toConsumableArray2.default)(stack)).includes(id)) {
     return children;
   }
-
   var componentProps = _objectSpread(_objectSpread({
     iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)(_box.default, {
       "data-custom-icon": true,
@@ -166,16 +133,13 @@ var NestingItem = function NestingItem(props) {
     children: title,
     cssFn: mergedStyles
   });
-
   if (component) {
     return (0, _react2.jsx)(_index.CustomItem, (0, _extends2.default)({}, componentProps, {
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
       component: component
     }));
   }
-
   return (0, _react2.jsx)(_index.ButtonItem, componentProps);
 };
-
 var _default = NestingItem;
 exports.default = _default;

package/dist/cjs/components/NestingItem/styles.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nestingItemStyle = exports.enabledCSS = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _enabledCSS, _disabledCSS;
-
 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) { (0, _defineProperty2.default)(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; }
-
 // exposed for testing purposes
 var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {
   display: 'none'
@@ -39,9 +33,7 @@ var disabledCSS = (_disabledCSS = {}, (0, _defineProperty2.default)(_disabledCSS
 }), (0, _defineProperty2.default)(_disabledCSS, '& [data-right-arrow]', {
   display: 'none'
 }), _disabledCSS);
-
 var nestingItemStyle = function nestingItemStyle(state) {
   return _objectSpread({}, state.isDisabled ? disabledCSS : enabledCSS);
 };
-
 exports.nestingItemStyle = nestingItemStyle;

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

@@ -1,22 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _menu = require("@atlaskit/menu");
-
 var _styles = require("../../common/styles");
-
 var _context = require("../NestableNavigationContent/context");
-
 /**
  * __Heading item__
  *
@@ -25,18 +18,16 @@ var _context = require("../NestableNavigationContent/context");
  */
 var HeadingItem = function HeadingItem(props) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
+  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderSpacingStyles, props.cssFn);
 
-  var cssFn = (0, _styles.overrideStyleFunction)(_styles.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.default.createElement(_menu.HeadingItem, (0, _extends2.default)({}, props, {
     cssFn: cssFn
   }));
 };
-
 var _default = HeadingItem;
 exports.default = _default;

package/dist/cjs/components/Section/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,9 +22,6 @@ Object.defineProperty(exports, "SkeletonHeadingItem", {
     return _skeletonHeadingItem.default;
   }
 });
-
 var _headingItem = _interopRequireDefault(require("./heading-item"));
-
 var _section = _interopRequireDefault(require("./section"));
-
 var _skeletonHeadingItem = _interopRequireDefault(require("./skeleton-heading-item"));

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

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _menu = require("@atlaskit/menu");
-
 var _styles = require("../../common/styles");
-
 var _context = require("../NestableNavigationContent/context");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Type needed on props to extract types with extract react types.
-
 /**
  * __Section__
  *
@@ -36,14 +25,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return props.children;
   }
-
   return /*#__PURE__*/_react.default.createElement(_menu.Section, (0, _extends2.default)({}, 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/cjs/components/Section/skeleton-heading-item.js

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _menu = require("@atlaskit/menu");
-
 var _styles = require("../../common/styles");
-
 var _context = require("../NestableNavigationContent/context");
-
 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) { (0, _defineProperty2.default)(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; }
-
 /**
  * __Skeleton heading item__
  *
@@ -32,20 +22,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
-      shouldRender = _useShouldNestedEleme.shouldRender;
-
+    shouldRender = _useShouldNestedEleme.shouldRender;
   if (!shouldRender) {
     return null;
   }
-
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , (0, _extends2.default)({
     cssFn: function cssFn() {
       return _objectSpread({}, (0, _styles.sectionHeaderSpacingStyles)());
-    } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+    }
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-
 var _default = SkeletonHeadingItem;
 exports.default = _default;

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

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 /** @jsx jsx */
+
 var sidebarMinWidth = '240px';
 var sideNavStyles = (0, _react2.css)({
   display: 'flex',
@@ -24,6 +21,7 @@ var sideNavStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
   overflow: 'hidden'
 });
+
 /**
  * __Side navigation__
  *
@@ -33,12 +31,12 @@ var sideNavStyles = (0, _react2.css)({
  * - [Code](https://atlassian.design/components/side-navigation/code)
  * - [Usage](https://atlassian.design/components/side-navigation/usage)
  */
-
 var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
-      testId = props.testId,
-      label = props.label;
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    testId = props.testId,
+    label = props.label;
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     (0, _react2.jsx)("nav", {
       ref: ref,
       "data-testid": testId,

package/dist/cjs/components/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -107,25 +106,14 @@ Object.defineProperty(exports, "SkeletonItem", {
     return _Item.SkeletonItem;
   }
 });
-
 var _SideNavigation = _interopRequireDefault(require("./SideNavigation"));
-
 var _Section = require("./Section");
-
 var _NestingItem = _interopRequireDefault(require("./NestingItem"));
-
 var _NavigationContent = _interopRequireDefault(require("./NavigationContent"));
-
 var _Item = require("./Item");
-
 var _Footer = _interopRequireDefault(require("./Footer"));
-
 var _Header = _interopRequireDefault(require("./Header"));
-
 var _NavigationHeader = _interopRequireDefault(require("./NavigationHeader"));
-
 var _NavigationFooter = _interopRequireDefault(require("./NavigationFooter"));
-
 var _LoadingItems = _interopRequireDefault(require("./LoadingItems"));
-
 var _NestableNavigationContent = _interopRequireDefault(require("./NestableNavigationContent"));

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

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChildIdsEffect = exports.useChildIds = void 0;
-
 var _react = require("react");
-
 var _NestableNavigationContent = require("../NestableNavigationContent");
-
 var useChildIds = function useChildIds(currentStackId, committedStack, onUnknownNest) {
   var childIdsRef = (0, _react.useRef)(new Set());
   (0, _react.useEffect)(function () {
@@ -17,32 +14,27 @@ var useChildIds = function useChildIds(currentStackId, committedStack, onUnknown
     if (currentStackId === _NestableNavigationContent.ROOT_ID || !childIdsRef.current.size || childIdsRef.current.has(currentStackId) || !onUnknownNest) {
       return;
     }
-
     onUnknownNest(committedStack || [currentStackId]);
   }, [currentStackId, committedStack, onUnknownNest]);
   return {
     childIdsRef: childIdsRef
   };
 };
-
 exports.useChildIds = useChildIds;
-
 var useChildIdsEffect = function useChildIdsEffect(childIds, id) {
   (0, _react.useEffect)(function () {
     if (!childIds || !childIds.current) {
       return;
     }
-
     if (!childIds.current.has(id)) {
       childIds.current.add(id);
     }
-
     return function () {
       // 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]);
 };
-
 exports.useChildIdsEffect = useChildIdsEffect;

package/dist/cjs/index.js

@@ -123,9 +123,6 @@ Object.defineProperty(exports, "useShouldNestedElementRender", {
     return _context.useShouldNestedElementRender;
   }
 });
-
 var _components = require("./components");
-
 var _context = require("./components/NestableNavigationContent/context");
-
 var _constants = require("./common/constants");

package/dist/cjs/version.json

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

package/dist/es2019/common/styles.js

@@ -1,6 +1,7 @@
 import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn } from '@atlaskit/theme/constants';
 const borderRadius = borderRadiusFn();
+
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
@@ -8,7 +9,6 @@ const 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 const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
   return state => {
     return [baseStyle(state), newStyle(state)];
@@ -46,7 +46,7 @@ export const baseSideNavItemStyle = ({
   return {
     // 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)"} ${"var(--ds-scale-100, 10px)"}`,
+    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 10px)"}`,
     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!
@@ -55,22 +55,23 @@ export const baseSideNavItemStyle = ({
     ...(!isDisabled && !isSelected && defaultStyles),
     ...(!isDisabled && isSelected && selectedStyles),
     // -- END TODO --------------------------------------------------------------
+
     ['& [data-item-elem-before]']: {
       // 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 const sectionHeaderSpacingStyles = () => {
   return {
-    paddingInline: "var(--ds-scale-100, 10px)"
+    paddingInline: "var(--ds-space-100, 10px)"
   };
 };

package/dist/es2019/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__
  *
@@ -20,8 +19,8 @@ const 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]': {
@@ -31,7 +30,7 @@ const 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': {
@@ -42,8 +41,9 @@ const Footer = props => {
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       color: `var(--ds-text-subtle, ${N500})`
     }
-  }), props.cssFn); // https://stackoverflow.com/a/39333479
+  }), props.cssFn);
 
+  // https://stackoverflow.com/a/39333479
   const safeProps = (({
     iconBefore,
     onClick,
@@ -57,12 +57,11 @@ const Footer = props => {
     children,
     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;