@atlaskit/side-navigation 1.5.0 → 1.5.2

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /* eslint-disable @repo/internal/react/use-primitives */
 import React, { forwardRef } from 'react';
 import Box from '@atlaskit/ds-explorations/box';
@@ -7,12 +6,12 @@ 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 const Container = ({
   children,
   ...props
@@ -39,13 +38,11 @@ export const Container = ({
     tabIndex,
     disabled
   }))(props);
-
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "div",
     display: "block"
   }, safeProps), children);
 };
-
 /**
  * __Header__
  *
@@ -73,9 +70,11 @@ const Header = /*#__PURE__*/forwardRef((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: {

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

@@ -3,7 +3,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__
  *
@@ -13,7 +12,8 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
  * - [Examples](https://atlassian.design/components/side-navigation/examples#button-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-const ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+const ButtonItem = /*#__PURE__*/forwardRef(
+// Type needed on props to extract types with extract react types.
 ({
   cssFn,
   ...rest
@@ -21,13 +21,11 @@ const ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   if (!shouldRender) {
     return null;
   }
-
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
-
+  const 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/es2019/components/Item/custom-item.js

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /* 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.
  */
-const CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+const CustomItem = /*#__PURE__*/forwardRef(
+// Type needed on props to extract types with extract react types.
 ({
   cssFn,
   ...rest
@@ -18,17 +17,17 @@ const CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   if (!shouldRender) {
     return null;
   }
-
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
-
+  const 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/es2019/components/Item/go-back-item.js

@@ -3,7 +3,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__
  *
@@ -28,12 +27,12 @@ const GoBackItem = /*#__PURE__*/forwardRef(({
     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/es2019/components/Item/link-item.js

@@ -3,7 +3,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__
  *
@@ -15,7 +14,8 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
  * - [Examples](https://atlassian.design/components/side-navigation/examples#link-item)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-const LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
+const LinkItem = /*#__PURE__*/forwardRef(
+// Type needed on props to extract types with extract react types.
 ({
   cssFn,
   ...rest
@@ -23,13 +23,11 @@ const LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract typ
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   if (!shouldRender) {
     return null;
   }
-
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
-
+  const 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/es2019/components/Item/skeleton-item.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { SkeletonItem as SkelItem } from '@atlaskit/menu';
 import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
-
 /**
  * __Skeleton item__
  *
@@ -16,23 +15,22 @@ const SkeletonItem = props => {
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   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: () => ({ ...sectionHeaderSpacingStyles(),
+    cssFn: () => ({
+      ...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/es2019/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,12 +14,12 @@ const enteringStyles = css({
   position: 'static',
   zIndex: 2
 });
+
 /**
  * __Loading items__
  *
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
  */
-
 const LoadingItems = ({
   children,
   isLoading,
@@ -30,19 +29,17 @@ const LoadingItems = ({
   const {
     shouldRender
   } = useShouldNestedElementRender();
-
   if (!shouldRender) {
     return children;
   }
-
   return jsx(ExitingPersistence, null, jsx(FadeIn, {
     key: `loading-section-${isLoading}`,
     duration: mediumDurationMs
-  }, (motion, state) => // eslint-disable-next-line @repo/internal/react/use-primitives
+  }, (motion, state) =>
+  // eslint-disable-next-line @repo/internal/react/use-primitives
   jsx("span", _extends({}, motion, {
     "data-testid": testId && `${testId}--${state}`,
     css: [baseMotionStyles, state === 'entering' && enteringStyles]
   }), isLoading ? fallback : children)));
 };
-
 export default LoadingItems;

package/dist/es2019/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__
  *
@@ -25,11 +23,9 @@ const NavigationContent = /*#__PURE__*/forwardRef((props, ref) => {
     shouldRender
   } = useShouldNestedElementRender();
   const scrollbar = useScrollbarWidth();
-
   if (!shouldRender) {
     return children;
   }
-
   const typedRef = ref;
   return jsx("div", {
     ref: typedRef,

package/dist/es2019/components/NavigationContent/styles.js

@@ -9,14 +9,13 @@ const scrollIndicatorBorderRadius = 1;
 const containerPadding = gridSize();
 const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const skeletonHeadingHeight = containerPadding;
-const skeletonHeadingMarginOffset = 3; // Skeleton content is slightly shorter than the real content.
+const skeletonHeadingMarginOffset = 3;
+// Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
-
-const skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
-
+const skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
+// We want to move the entire body up by 3px without affecting the height of the skeleton container.
 const skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
-
 /**
  * This outer container css contains the "real" scroll indicators which are
  * always rendered to the screen.
@@ -54,12 +53,12 @@ export const outerContainerCSS = opts => ({
     backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`
   }
 });
+
 /**
  * This inner container css contains the "mask" logic for the scroll indicators.
  * Essentially they cover (mask) the "real" scroll indicators when the user is scrolled
  * to the top or bottom of the container.
  */
-
 export const innerContainerCSS = opts => ({
   display: 'flex',
   overflow: 'auto',
@@ -102,13 +101,13 @@ export const containerCSS = opts => ({
   // so the spacing between matches what it would be if the indicator was a "block" element.
   // We use margin here so any child absolutely positioned elements are positioned correctly.
   marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
-  marginLeft: "var(--ds-scale-100, 8px)",
-  marginRight: "var(--ds-scale-100, 8px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
   // Enables child absolutely positioned elements to be positioned relative to this element.
   position: 'relative',
   '& [data-ds--menu--heading-item]': {
-    marginBottom: "var(--ds-scale-075, 6px)",
-    marginTop: "var(--ds-scale-200, 20px)"
+    marginBottom: "var(--ds-space-075, 6px)",
+    marginTop: "var(--ds-space-200, 20px)"
   },
   '& [data-ds--menu--skeleton-heading-item]': {
     marginTop: skeletonHeadingTopMargin,

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import Box from '@atlaskit/ds-explorations/box';
-
 /**
  * __Navigation footer__
  *
@@ -16,11 +16,10 @@ const NavigationFooter = ({
   return jsx(Box, {
     display: "block",
     position: "relative",
-    padding: "scale.100",
+    padding: "space.100",
     UNSAFE_style: {
-      paddingBottom: "var(--ds-scale-200, 14px)"
+      paddingBottom: "var(--ds-space-200, 14px)"
     }
   }, children);
 };
-
 export default NavigationFooter;

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Box from '@atlaskit/ds-explorations/box';
-
 /**
  * __Navigation header__
  *
@@ -17,11 +16,10 @@ const NavigationHeader = props => {
   return jsx(Box, {
     display: "block",
     "data-navheader": true,
-    padding: "scale.100",
+    padding: "space.100",
     UNSAFE_style: {
-      paddingTop: "var(--ds-scale-300, 24px)"
+      paddingTop: "var(--ds-space-300, 24px)"
     }
   }, children);
 };
-
 export default NavigationHeader;

package/dist/es2019/components/NestableNavigationContent/context.js

@@ -1,15 +1,12 @@
 import { createContext, useContext } from 'react';
-
 /**
  * @internal
  */
 export const NestedContext = /*#__PURE__*/createContext(undefined);
 export const useNestedContext = () => {
   const context = useContext(NestedContext);
-
   if (!context) {
     let error = '';
-
     if (process.env.NODE_ENV === 'development') {
       error = `
 To use a <NestingItem /> it needs to be a descendant of <NestableNavigationContent>.
@@ -18,27 +15,23 @@ You probably need to replace your <NavigationContent> with <NestableNavigationCo
 import { NestableNavigationContent } from '@atlaskit/side-navigation';
       `;
     }
-
     throw new Error(error);
   }
-
   return context;
 };
+
 /**
  * Used by children of the NestableNavigationContent component to see if they should render or not.
  * If `shouldRender` returns `true` - return your nodes.
  * If it returns `false` - either return `null` or `children` if you have children.
  */
-
 export const useShouldNestedElementRender = () => {
   const context = useContext(NestedContext);
-
   if (!context) {
     return {
       shouldRender: true
     };
   }
-
   return {
     shouldRender: context.currentStackId === context.parentId
   };

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -8,7 +7,8 @@ import { GoBackItem as GoBackButton } from '../Item';
 import { default as NestingItem } from '../NestingItem';
 import { useChildIds } from '../utils/hooks';
 import { NestedContext } from './context';
-import { NestingMotion } from './nesting-motion'; // Named so ERT doesn't pick up the override name as a type.
+import { NestingMotion } from './nesting-motion';
+// Named so ERT doesn't pick up the override name as a type.
 
 export const ROOT_ID = 'ATLASKIT_NESTED_ROOT';
 const nestableNavigationContentStyles = css({
@@ -23,6 +23,7 @@ const nestingRootStyles = css({
   position: 'absolute',
   flexDirection: 'column'
 });
+
 /**
  * __Nestable navigation content__
  *
@@ -31,7 +32,6 @@ const nestingRootStyles = css({
  * - [Examples](https://atlassian.design/components/side-navigation/examples#nested-navigation)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-
 const NestableNavigationContent = props => {
   const containerRef = useRef(null);
   const {
@@ -54,15 +54,14 @@ const NestableNavigationContent = props => {
   } = useChildIds(currentStackId, committedStack, onUnknownNest);
   const onNestHandler = useCallback(layerId => {
     onChange && onChange(committedStack.concat(layerId));
-
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
-    } // We need to split the state update into to parts.
+    }
+
+    // We need to split the state update into to parts.
     // First: Updating the direction of the motions.
     // Second: Actually updating the stack (which will cause elements to enter & leave).
-
-
     setTransition('nesting');
     requestAnimationFrame(() => {
       setCommittedStack(prev => {
@@ -73,15 +72,14 @@ const NestableNavigationContent = props => {
   }, [controlledStack, onChange, committedStack]);
   const onUnNestHandler = useCallback(() => {
     onChange && onChange(committedStack.slice(0, committedStack.length - 1));
-
     if (controlledStack) {
       // We are in controlled mode - ignore the steps.
       return;
-    } // We need to split the state update into to parts.
+    }
+
+    // We need to split the state update into to parts.
     // First: Updating the direction of the motions.
     // Second: Actually updating the stack (which will cause elements to enter & leave).
-
-
     setTransition('unnesting');
     requestAnimationFrame(() => {
       setCommittedStack(prev => {
@@ -95,13 +93,12 @@ const NestableNavigationContent = props => {
       // We aren't in controlled mode - bail out.
       return;
     }
-
     if (JSON.stringify(committedStack) === JSON.stringify(controlledStack)) {
       // stacks are equal - do nothing!
       return;
-    } // Controlled prop updated, let's figure out if we're nesting or unnesting.
-
+    }
 
+    // Controlled prop updated, let's figure out if we're nesting or unnesting.
     if (controlledStack.length < committedStack.length) {
       // We are unnesting (removing from the stack)
       setTransition('unnesting');
@@ -109,7 +106,6 @@ const NestableNavigationContent = props => {
       // We are nesting (adding to the stack)
       setTransition('nesting');
     }
-
     requestAnimationFrame(() => {
       setCommittedStack(controlledStack);
     });
@@ -127,30 +123,30 @@ const NestableNavigationContent = props => {
     parentId: ROOT_ID,
     childIds: childIdsRef
   }), [currentStackId, backButton, committedStack, onNestHandler, onUnNestHandler, childIdsRef]);
-
   const manageFocus = event => {
     const triggeredByKeyboard = event.nativeEvent.detail === 0;
-
     if (triggeredByKeyboard) {
       containerRef.current && containerRef.current.focus();
     }
   };
-
-  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+  return (
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     jsx("div", {
       "data-testid": testId,
       css: nestableNavigationContentStyles,
       ref: containerRef,
       tabIndex: -1,
       onClick: manageFocus
-    }, jsx(ExitingPersistence, null, jsx(NestingMotion // Key is needed to have a unique react instance per stack name.
+    }, jsx(ExitingPersistence, null, jsx(NestingMotion
+    // Key is needed to have a unique react instance per stack name.
     // This enables us to easily animate it in & out with exiting persistence.
     , {
       key: currentStackId,
       enterFrom: transition === 'nesting' ? 'right' : 'left',
       exitTo: transition === 'nesting' ? 'left' : 'right',
       testId: testId && `${testId}-anim`
-    }, motion => // eslint-disable-next-line @repo/internal/react/use-primitives
+    }, motion =>
+    // eslint-disable-next-line @repo/internal/react/use-primitives
     jsx("div", _extends({
       css: nestingRootStyles
     }, motion), jsx(NestedContext.Provider, {
@@ -163,5 +159,4 @@ const NestableNavigationContent = props => {
     }, children))))))
   );
 };
-
 export default NestableNavigationContent;

package/dist/es2019/components/NestableNavigationContent/nesting-motion.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import { easeOut, SlideIn } from '@atlaskit/motion';
-
 /**
  * @internal
  */

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -12,7 +11,6 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
-
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
  * When not open - it will render itself as an item.
@@ -53,52 +51,47 @@ const NestingItem = props => {
     backButton,
     parentId: id,
     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]);
   useChildIdsEffect(childIds, id);
-
   const isNormalClick = e => !(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.
    */
-
-
   const onClickHandler = useCallback(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 jsx(NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && jsx(Box, {
       as: "div",
       display: "block",
-      paddingBlock: "scale.075",
-      paddingInline: "scale.100"
+      paddingBlock: "space.075",
+      paddingInline: "space.100"
     }, backButton), jsx(NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
     }, children));
   }
-
   if ([ROOT_ID, ...stack].includes(id)) {
     return children;
   }
-
   const componentProps = {
     iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
       "data-custom-icon": true,
@@ -120,15 +113,12 @@ const NestingItem = props => {
     children: title,
     cssFn: mergedStyles
   };
-
   if (component) {
     return jsx(CustomItem, _extends({}, componentProps, {
       //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
       component: component
     }));
   }
-
   return jsx(ButtonItem, componentProps);
 };
-
 export default NestingItem;

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

@@ -34,6 +34,7 @@ const disabledCSS = {
   }
 };
 export const nestingItemStyle = state => {
-  return { ...(state.isDisabled ? disabledCSS : enabledCSS)
+  return {
+    ...(state.isDisabled ? disabledCSS : enabledCSS)
   };
 };