@atlaskit/side-navigation 3.2.0 → 3.3.0

package/constellation/index/examples.mdx

@@ -16,7 +16,8 @@ import SectionExample from '../../examples/constellation/section';
 
 ## Default
 
-This side navigation example shows all of the [components](#side-navigation-components) and [items](#side-navigation-items) composed together.
+This side navigation example shows all of the [components](#side-navigation-components) and
+[items](#side-navigation-items) composed together.
 
 <Example Component={DefaultExample} packageName="@atlaskit/side-navigation" />
 
@@ -24,7 +25,8 @@ This side navigation example shows all of the [components](#side-navigation-comp
 
 ### Container
 
-Uses 100% of its parent's height and width, so make sure to place it into an element with explicit values set.
+Uses 100% of its parent's height and width, so make sure to place it into an element with explicit
+values set.
 
 The minimum width of the container is `240px`.
 
@@ -34,20 +36,19 @@ The minimum width of the container is `240px`.
 
 Use `NavigationHeader` and `NavigationFooter` to customise the header and footer.
 
-<Example
-  Component={HeaderAndFooterExample}
-  packageName="@atlaskit/side-navigation"
-/>
+<Example Component={HeaderAndFooterExample} packageName="@atlaskit/side-navigation" />
 
 ### Content
 
-This is used as the container for [navigation items](#side-navigation-items). For nested views see the [nested navigation example](#nested-navigation).
+This is used as the container for [navigation items](#side-navigation-items). For nested views see
+the [nested navigation example](#nested-navigation).
 
 <Example Component={ContentExample} packageName="@atlaskit/side-navigation" />
 
 ### Section
 
-This is used to separate items into sections. Using the `title` prop makes a section implicitly group the items for assistive technology such as screen readers with no extra work required.
+This is used to separate items into sections. Using the `title` prop makes a section implicitly
+group the items for assistive technology such as screen readers with no extra work required.
 
 <Example Component={SectionExample} packageName="@atlaskit/side-navigation" />
 
@@ -71,9 +72,11 @@ Use the go back item to provide a customized "go back" button in nested navigati
 
 ### Link item
 
-This renders an item wrapped in an anchor tag, useful when you have an item that should navigate to another page using native browser navigation.
+This renders an item wrapped in an anchor tag, useful when you have an item that should navigate to
+another page using native browser navigation.
 
-For custom SPA transitions use a custom item with the respective router logic, following the [custom item example](#custom-item).
+For custom SPA transitions use a custom item with the respective router logic, following the
+[custom item example](#custom-item).
 
 <Example Component={LinkItemExample} packageName="@atlaskit/side-navigation" />
 
@@ -81,21 +84,18 @@ For custom SPA transitions use a custom item with the respective router logic, f
 
 This handles use cases where a custom router link component is needed.
 
-The custom component receives all overflow props passed to the custom item component. When using TypeScript this will add the custom component props to the root component props type for type safety.
+The custom component receives all overflow props passed to the custom item component. When using
+TypeScript this will add the custom component props to the root component props type for type
+safety.
 
-<Example
-  Component={CustomItemExample}
-  packageName="@atlaskit/side-navigation"
-/>
+<Example Component={CustomItemExample} packageName="@atlaskit/side-navigation" />
 
 ### Button item
 
-This renders an item wrapped in a button tag. Use this when an action does something other than navigating to another page.
+This renders an item wrapped in a button tag. Use this when an action does something other than
+navigating to another page.
 
-<Example
-  Component={ButtonItemExample}
-  packageName="@atlaskit/side-navigation"
-/>
+<Example Component={ButtonItemExample} packageName="@atlaskit/side-navigation" />
 
 ## Loading
 

package/constellation/index/props.mdx

@@ -1,13 +1,13 @@
 ---
 props:
-    packageName: '@atlaskit/side-navigation'
-    exports:
-        - SideNavigation
-        - Header
-        - Footer
-        - NavigationContent
-        - NestableNavigationContent
-        - Section
+  packageName: '@atlaskit/side-navigation'
+  exports:
+    - SideNavigation
+    - Header
+    - Footer
+    - NavigationContent
+    - NestableNavigationContent
+    - Section
 ---
 
 ### Navigation props

package/constellation/index/usage.mdx

@@ -4,26 +4,42 @@ order: 2
 
 ## Usage
 
-The side navigation helps people move around within a subsection of a product. For example, navigating through the topics in a Confluence space, or to specific tasks within their Jira project.
+The side navigation helps people move around within a subsection of a product. For example,
+navigating through the topics in a Confluence space, or to specific tasks within their Jira project.
 
-Use the side navigation with the [page layout component](/components/page-layout/examples) to compose your navigation experience. This ensures that you get access to useful accessibility and customization features by default.
+Use the side navigation with the [page layout component](/components/page-layout/examples) to
+compose your navigation experience. This ensures that you get access to useful accessibility and
+customization features by default.
 
 ## Accessibility
 
-- Keep nested navigation levels to a minimum. If you need to use a nested navigation, always provide a "go back" button to help people get out of the menu.
-- Provide a unique `label` for every different navigation in the page layout. Make sure that the navigation label is meaningful and not direction-based. For example, "Current project" not "Left navigation". If it's the same navigation repeated in another place on the page layout, use the same `label`.
-- Don't include the word "navigation" in your `label`. The `<nav>` semantics mean assistive technology will already tell people that they are using a navigation.
+- Keep nested navigation levels to a minimum. If you need to use a nested navigation, always provide
+  a "go back" button to help people get out of the menu.
+- Provide a unique `label` for every different navigation in the page layout. Make sure that the
+  navigation label is meaningful and not direction-based. For example, "Current project" not "Left
+  navigation". If it's the same navigation repeated in another place on the page layout, use the
+  same `label`.
+- Don't include the word "navigation" in your `label`. The `<nav>` semantics mean assistive
+  technology will already tell people that they are using a navigation.
 
 ## Best practices
 
 ### Loading states
 
-Sometimes you'll need to load some of the side navigation content asynchronously. There are a few things to keep in mind:
-
-- Only use skeletons when you're certain of what the loaded state will look like. Most items that appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
-- When transitioning from loading skeleton to loaded items, try to ensure the jump doesn't look janky - use the equivalent skeleton item that is appropriate and be careful of things changing size by a few pixels. We should be striving for UI that feels **stable**, which means it doesn't jump around when content loads.
-- Ensure loading does not take too long - try to anticipate if people will look at your menu via hover events and pre-load the data as soon as possible.
-- When the content is loading in, make sure it all loads in at the same time - our minds aren't fast enough to distinguish each item loading individually, for example, and it appears slower to most people.
+Sometimes you'll need to load some of the side navigation content asynchronously. There are a few
+things to keep in mind:
+
+- Only use skeletons when you're certain of what the loaded state will look like. Most items that
+  appear in side navigation are probably fine to use with skeletons, for example, `@atlaskit/tree`.
+- When transitioning from loading skeleton to loaded items, try to ensure the jump doesn't look
+  janky - use the equivalent skeleton item that is appropriate and be careful of things changing
+  size by a few pixels. We should be striving for UI that feels **stable**, which means it doesn't
+  jump around when content loads.
+- Ensure loading does not take too long - try to anticipate if people will look at your menu via
+  hover events and pre-load the data as soon as possible.
+- When the content is loading in, make sure it all loads in at the same time - our minds aren't fast
+  enough to distinguish each item loading individually, for example, and it appears slower to most
+  people.
 
 ## Related
 

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

@@ -16,7 +16,11 @@ var _styles = require("../../common/styles");
 var _Item = require("../Item");
 var _excluded = ["children", "data-testid"],
   _excluded2 = ["children"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var containerStyles = (0, _react2.css)({

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

@@ -38,7 +38,9 @@ function (_ref, ref) {
     return null;
   }
   var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
-  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+
+  // Anchor content will be handled by LinkItem
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, jsx-a11y/anchor-has-content
   return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride,

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

@@ -9,16 +9,20 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 var _context = require("../NestableNavigationContent/context");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var baseMotionStyles = (0, _react.css)({
   position: 'absolute',
   zIndex: 1,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   right: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   left: 0
 });
 var enteringStyles = (0, _react.css)({

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

@@ -10,8 +10,13 @@ var _react2 = require("@emotion/react");
 var _useScrollbarWidth = _interopRequireDefault(require("@atlaskit/ds-lib/use-scrollbar-width"));
 var _context = require("../NestableNavigationContent/context");
 var _styles = require("./styles");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * __Navigation content__
  *
@@ -32,7 +37,9 @@ var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
   }
   var typedRef = ref;
   return (0, _react2.jsx)("div", {
-    ref: typedRef,
+    ref: typedRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: (0, _styles.outerContainerCSS)({
       showTopScrollIndicator: showTopScrollIndicator,
       scrollbarWidth: scrollbar.width

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

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var navigationFooterStyles = (0, _primitives.xcss)({
   display: 'block',

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

@@ -15,8 +15,13 @@ var _NestingItem = _interopRequireDefault(require("../NestingItem"));
 var _hooks = require("../utils/hooks");
 var _context = require("./context");
 var _nestingMotion = require("./nesting-motion");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 // Named so ERT doesn't pick up the override name as a type.
 
 var ROOT_ID = exports.ROOT_ID = 'ATLASKIT_NESTED_ROOT';

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

@@ -9,7 +9,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * @internal
  */

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

@@ -23,7 +23,11 @@ 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"];
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

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

@@ -8,8 +8,13 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var sidebarMinWidth = '240px';
 var sideNavStyles = (0, _react2.css)({
   display: 'flex',

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';

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

@@ -28,7 +28,9 @@ const LinkItem = /*#__PURE__*/forwardRef(
     return null;
   }
   const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
-  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+
+  // Anchor content will be handled by LinkItem
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, jsx-a11y/anchor-has-content
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
     cssFn: cssOverride,

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

@@ -1,16 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 const baseMotionStyles = css({
   position: 'absolute',
   zIndex: 1,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   right: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   left: 0
 });
 const enteringStyles = css({

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

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
@@ -27,7 +32,9 @@ const NavigationContent = /*#__PURE__*/forwardRef((props, ref) => {
   }
   const typedRef = ref;
   return jsx("div", {
-    ref: typedRef,
+    ref: typedRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: outerContainerCSS({
       showTopScrollIndicator,
       scrollbarWidth: scrollbar.width

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

@@ -1,4 +1,8 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Box, xcss } from '@atlaskit/primitives';
 const navigationFooterStyles = xcss({

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';

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

@@ -1,5 +1,9 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { easeOut, SlideIn } from '@atlaskit/motion';
 /**

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

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { Box, xcss } from '@atlaskit/primitives';

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

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import { N10, N500 } from '@atlaskit/theme/colors';

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

@@ -5,8 +5,13 @@ var _excluded = ["children", "data-testid"],
   _excluded2 = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';

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

@@ -28,7 +28,9 @@ function (_ref, ref) {
     return null;
   }
   var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
-  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
+
+  // Anchor content will be handled by LinkItem
+  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, jsx-a11y/anchor-has-content
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
     cssFn: cssOverride,

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

@@ -1,16 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence, FadeIn, mediumDurationMs } from '@atlaskit/motion';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 var baseMotionStyles = css({
   position: 'absolute',
   zIndex: 1,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   top: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   right: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-physical-properties
   left: 0
 });
 var enteringStyles = css({

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

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import useScrollbarWidth from '@atlaskit/ds-lib/use-scrollbar-width';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
@@ -24,7 +29,9 @@ var NavigationContent = /*#__PURE__*/forwardRef(function (props, ref) {
   }
   var typedRef = ref;
   return jsx("div", {
-    ref: typedRef,
+    ref: typedRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: outerContainerCSS({
       showTopScrollIndicator: showTopScrollIndicator,
       scrollbarWidth: scrollbar.width

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

@@ -1,4 +1,8 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Box, xcss } from '@atlaskit/primitives';
 var navigationFooterStyles = xcss({

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

@@ -1,7 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';

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

@@ -1,8 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { easeOut, SlideIn } from '@atlaskit/motion';
 /**

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

@@ -6,8 +6,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { Box, xcss } from '@atlaskit/primitives';

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

@@ -1,5 +1,10 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import { N10, N500 } from '@atlaskit/theme/colors';

package/dist/types/components/LoadingItems/index.d.ts

@@ -31,5 +31,5 @@ export interface LoadingItemsProps {
  *
  * Loading items conditionally render based on the useShouldNestedElementRender() hook.
  */
-declare const LoadingItems: ({ children, isLoading, fallback, testId, }: LoadingItemsProps) => JSX.Element;
+declare const LoadingItems: ({ children, isLoading, fallback, testId }: LoadingItemsProps) => JSX.Element;
 export default LoadingItems;

package/dist/types/components/NavigationContent/index.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type HTMLAttributes } from 'react';
 export interface NavigationContentProps {

package/dist/types/components/NavigationHeader/index.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 export interface NavigationHeaderProps {

package/dist/types/components/NestableNavigationContent/index.d.ts

@@ -12,7 +12,6 @@ export interface NestableNavigationContentProps {
      * A `testId` prop is provided for specified elements,
      * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
      * serving as a hook for automated tests.
-     *
      * Will set these elements when defined:
      * - This wrapper - `{testId}`
      * - The back item (displayed when inside a nested view) - `{testId}--go-back-item`

package/dist/types/components/NestableNavigationContent/nesting-motion.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @jsxRuntime classic
+ */
 /** @jsx jsx */
 import { type Ref } from 'react';
 import { jsx } from '@emotion/react';