@atlaskit/side-navigation 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/side-navigation
 
+## 2.0.2
+
+### Patch Changes
+
+- [`bff06efcf86`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bff06efcf86) - Fix a bug where `className` was not being applied to Header.
+
+## 2.0.1
+
+### Patch Changes
+
+- [`cac6bbb702d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cac6bbb702d) - The internal composition of this component has changed. There is no expected change in behavior.
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/common/styles.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.sectionHeaderSpacingStyles = exports.overrideStyleFunction = exports.baseSideNavItemStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _colors = require("@atlaskit/theme/colors");
-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; }
+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; }
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn

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

@@ -7,16 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
-var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
 var _Header = require("../Header");
 var _Item = require("../Item");
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 
+var iconContainerStyles = (0, _primitives.xcss)({
+  display: 'inline-block',
+  width: 'size.200',
+  height: 'size.200'
+});
 /**
  * __Footer__
  *
@@ -92,18 +96,15 @@ var Footer = function Footer(_ref2) {
     children = _ref2.children,
     iconBefore = _ref2.iconBefore,
     testId = _ref2.testId;
-  return /*#__PURE__*/_react.default.createElement(_box.default, {
-    display: "block",
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     padding: "space.100",
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_stack.default, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.100",
     alignInline: "center"
-  }, /*#__PURE__*/_react.default.createElement(_box.default, {
-    display: "inlineBlock",
-    width: "size.200",
-    height: "size.200"
-  }, iconBefore), /*#__PURE__*/_react.default.createElement(_stack.default, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: iconContainerStyles
+  }, iconBefore), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.075"
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
     fontSize: "size.075",

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,16 +8,20 @@ exports.default = exports.Container = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _styles = require("../../common/styles");
 var _Item = require("../Item");
 var _excluded = ["children"],
   _excluded2 = ["children"];
-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; }
+/** @jsx jsx */
+var containerStyles = (0, _react2.css)({
+  display: 'block',
+  position: 'relative'
+});
+
 /**
  * __Container__
  *
@@ -50,9 +53,8 @@ var Container = function Container(_ref) {
       disabled: disabled
     };
   }(props);
-  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
-    as: "div",
-    display: "block"
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: containerStyles
   }, safeProps), children);
 };
 exports.Container = Container;
@@ -80,7 +82,7 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       color: "var(--ds-text, ".concat(_colors.N500, ")")
     }), _ref3;
   }, props.cssFn);
-  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)(_Item.CustomItem, (0, _extends2.default)({}, props, {
     ref: ref,
     component: props.component || Container
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -93,7 +95,7 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         render: function render(_, _ref4) {
           var children = _ref4.children,
             props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
-          return /*#__PURE__*/_react.default.createElement("h2", props, children);
+          return (0, _react2.jsx)("h2", props, children);
         }
       }
     }

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

@@ -11,8 +11,8 @@ 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; }
+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; }
 /**
  * __Skeleton item__
  *

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

@@ -9,8 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
 var _constants = require("../../common/constants");
-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; } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+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; } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;

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

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _primitives = require("@atlaskit/primitives");
 /** @jsx jsx */
 
+var navigationFooterStyles = (0, _primitives.xcss)({
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -19,13 +21,10 @@ var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
  */
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)(_box.default, {
-    display: "block",
-    position: "relative",
+  return (0, _react.jsx)(_primitives.Box, {
     padding: "space.100",
-    UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 16px)"
-    }
+    paddingBlockEnd: "space.200",
+    xcss: navigationFooterStyles
   }, children);
 };
 var _default = NavigationFooter;

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

@@ -1,14 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _primitives = require("@atlaskit/primitives");
 /** @jsx jsx */
 
+var navigationFooterStyles = (0, _primitives.xcss)({
+  display: 'block',
+  padding: 'space.100',
+  paddingTop: 'space.300'
+});
 /**
  * __Navigation header__
  *
@@ -19,13 +23,9 @@ var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
  */
 var NavigationHeader = function NavigationHeader(props) {
   var children = props.children;
-  return (0, _react.jsx)(_box.default, {
-    display: "block",
-    "data-navheader": true,
-    padding: "space.100",
-    UNSAFE_style: {
-      paddingTop: "var(--ds-space-300, 24px)"
-    }
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: navigationFooterStyles,
+    "data-navheader": true
   }, children);
 };
 var _default = NavigationHeader;

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

@@ -8,8 +8,8 @@ exports.NestingMotion = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
-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; } /** @jsx jsx */
+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 */
 /**
  * @internal
  */

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

@@ -13,8 +13,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 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 _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
 var _index = require("../index");
@@ -26,8 +26,12 @@ var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelect
 /** @jsx jsx */
 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; }
+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 iconContainerStyles = (0, _primitives.xcss)({
+  display: 'inline'
+});
+
 // Doesn't extend from ButtonItemProps because it blows ERT up.
 
 /**
@@ -101,9 +105,7 @@ var NestingItem = function NestingItem(props) {
   if (currentStackId === id) {
     return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && (0, _react2.jsx)(_box.default, {
-      as: "div",
-      display: "block",
+    }, stack.length >= 1 && (0, _react2.jsx)(_primitives.Box, {
       paddingBlock: "space.075",
       paddingInline: "space.100"
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
@@ -115,13 +117,13 @@ var NestingItem = function NestingItem(props) {
     return children;
   }
   var componentProps = _objectSpread(_objectSpread({
-    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)(_box.default, {
+    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)(_primitives.Box, {
+      xcss: iconContainerStyles,
       "data-custom-icon": true,
-      display: "inline",
       as: "span"
-    }, iconAfter) : null, (0, _react2.jsx)(_box.default, {
+    }, iconAfter) : null, (0, _react2.jsx)(_primitives.Box, {
       "data-right-arrow": true,
-      display: "inline",
+      xcss: iconContainerStyles,
       as: "span"
     }, (0, _react2.jsx)(_arrowRightCircle.default, {
       testId: testId && "".concat(testId, "--item--right-arrow"),

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 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; }
+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; }
 // exposed for testing purposes
 var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {
   display: 'none'

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

@@ -11,8 +11,8 @@ 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; }
+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; }
 /**
  * __Skeleton heading item__
  *

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

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
-import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
+const iconContainerStyles = xcss({
+  display: 'inline-block',
+  width: 'size.200',
+  height: 'size.200'
+});
 /**
  * __Footer__
  *
@@ -83,16 +87,13 @@ const Footer = ({
   testId
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    display: "block",
     padding: "space.100",
     testId: testId
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
     alignInline: "center"
   }, /*#__PURE__*/React.createElement(Box, {
-    display: "inlineBlock",
-    width: "size.200",
-    height: "size.200"
+    xcss: iconContainerStyles
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
     space: "space.075"
   }, /*#__PURE__*/React.createElement(Text, {

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

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef } from 'react';
-import Box from '@atlaskit/ds-explorations/box';
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+const containerStyles = css({
+  display: 'block',
+  position: 'relative'
+});
 
 /**
  * __Container__
@@ -37,9 +42,8 @@ export const Container = ({
     tabIndex,
     disabled
   }))(props);
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "div",
-    display: "block"
+  return jsx("div", _extends({
+    css: containerStyles
   }, safeProps), children);
 };
 /**
@@ -67,7 +71,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
       color: `var(--ds-text, ${N500})`
     }
   }), props.cssFn);
-  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
+  return jsx(CustomItem, _extends({}, props, {
     ref: ref,
     component: props.component || Container
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -80,7 +84,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
         render: (_, {
           children,
           ...props
-        }) => /*#__PURE__*/React.createElement("h2", props, children)
+        }) => jsx("h2", props, children)
       }
     }
   }));

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

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

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

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

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

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
@@ -11,6 +11,9 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
+const iconContainerStyles = xcss({
+  display: 'inline'
+});
 
 // Doesn't extend from ButtonItemProps because it blows ERT up.
 
@@ -82,8 +85,6 @@ const NestingItem = props => {
     return jsx(NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && jsx(Box, {
-      as: "div",
-      display: "block",
       paddingBlock: "space.075",
       paddingInline: "space.100"
     }, backButton), jsx(NavigationContent, {
@@ -96,12 +97,12 @@ const NestingItem = props => {
   }
   const componentProps = {
     iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
+      xcss: iconContainerStyles,
       "data-custom-icon": true,
-      display: "inline",
       as: "span"
     }, iconAfter) : null, jsx(Box, {
       "data-right-arrow": true,
-      display: "inline",
+      xcss: iconContainerStyles,
       as: "span"
     }, jsx(RightArrow, {
       testId: testId && `${testId}--item--right-arrow`,

package/dist/esm/common/styles.js

@@ -1,6 +1,6 @@
 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; }
+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; }
 import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
 /**
  * Allows chaining of style functions on top of base style functions

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

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
-import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
+var iconContainerStyles = xcss({
+  display: 'inline-block',
+  width: 'size.200',
+  height: 'size.200'
+});
 /**
  * __Footer__
  *
@@ -85,16 +89,13 @@ var Footer = function Footer(_ref2) {
     iconBefore = _ref2.iconBefore,
     testId = _ref2.testId;
   return /*#__PURE__*/React.createElement(Box, {
-    display: "block",
     padding: "space.100",
     testId: testId
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
     alignInline: "center"
   }, /*#__PURE__*/React.createElement(Box, {
-    display: "inlineBlock",
-    width: "size.200",
-    height: "size.200"
+    xcss: iconContainerStyles
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
     space: "space.075"
   }, /*#__PURE__*/React.createElement(Text, {

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

@@ -3,12 +3,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],
   _excluded2 = ["children"];
-import React, { forwardRef } from 'react';
-import Box from '@atlaskit/ds-explorations/box';
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+var containerStyles = css({
+  display: 'block',
+  position: 'relative'
+});
 
 /**
  * __Container__
@@ -41,9 +46,8 @@ export var Container = function Container(_ref) {
       disabled: disabled
     };
   }(props);
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "div",
-    display: "block"
+  return jsx("div", _extends({
+    css: containerStyles
   }, safeProps), children);
 };
 /**
@@ -70,7 +74,7 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
       color: "var(--ds-text, ".concat(N500, ")")
     }), _ref3;
   }, props.cssFn);
-  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
+  return jsx(CustomItem, _extends({}, props, {
     ref: ref,
     component: props.component || Container
     // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
@@ -83,7 +87,7 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
         render: function render(_, _ref4) {
           var children = _ref4.children,
             props = _objectWithoutProperties(_ref4, _excluded2);
-          return /*#__PURE__*/React.createElement("h2", props, children);
+          return jsx("h2", props, children);
         }
       }
     }

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

@@ -1,7 +1,7 @@
 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; }
+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; }
 import React from 'react';
 import { SkeletonItem as SkelItem } from '@atlaskit/menu';
 import { sectionHeaderSpacingStyles } from '../../common/styles';

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

@@ -1,6 +1,6 @@
 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; }
+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; }
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { N10, N30 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';

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

@@ -1,7 +1,10 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
+import { Box, xcss } from '@atlaskit/primitives';
+var navigationFooterStyles = xcss({
+  position: 'relative'
+});
 /**
  * __Navigation footer__
  *
@@ -13,12 +16,9 @@ import Box from '@atlaskit/ds-explorations/box';
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
   return jsx(Box, {
-    display: "block",
-    position: "relative",
     padding: "space.100",
-    UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 16px)"
-    }
+    paddingBlockEnd: "space.200",
+    xcss: navigationFooterStyles
   }, children);
 };
 export default NavigationFooter;

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

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

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

@@ -1,6 +1,6 @@
 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; }
+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; }
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';

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

@@ -4,13 +4,13 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
-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; }
+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; }
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import Box from '@atlaskit/ds-explorations/box';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
@@ -18,6 +18,9 @@ import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
+var iconContainerStyles = xcss({
+  display: 'inline'
+});
 
 // Doesn't extend from ButtonItemProps because it blows ERT up.
 
@@ -93,8 +96,6 @@ var NestingItem = function NestingItem(props) {
     return jsx(NestedContext.Provider, {
       value: context
     }, stack.length >= 1 && jsx(Box, {
-      as: "div",
-      display: "block",
       paddingBlock: "space.075",
       paddingInline: "space.100"
     }, backButton), jsx(NavigationContent, {
@@ -107,12 +108,12 @@ var NestingItem = function NestingItem(props) {
   }
   var componentProps = _objectSpread(_objectSpread({
     iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
+      xcss: iconContainerStyles,
       "data-custom-icon": true,
-      display: "inline",
       as: "span"
     }, iconAfter) : null, jsx(Box, {
       "data-right-arrow": true,
-      display: "inline",
+      xcss: iconContainerStyles,
       as: "span"
     }, jsx(RightArrow, {
       testId: testId && "".concat(testId, "--item--right-arrow"),

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@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) { _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; }
+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; }
 // exposed for testing purposes
 export var enabledCSS = (_enabledCSS = {}, _defineProperty(_enabledCSS, '&:hover [data-custom-icon]', {
   display: 'none'

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

@@ -1,7 +1,7 @@
 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; }
+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; }
 import React from 'react';
 import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
 import { sectionHeaderSpacingStyles } from '../../common/styles';

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

@@ -1,11 +1,12 @@
-import React from 'react';
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
 /**
  * __Container__
  *
  * A container for Header and Footer that safely handles props to the child component
  */
-export declare const Container: ({ children, ...props }: CustomItemComponentProps) => JSX.Element;
+export declare const Container: ({ children, ...props }: CustomItemComponentProps) => jsx.JSX.Element;
 export type HeaderProps = {
     /**
      * A function that can be used to override the styles of the component.
@@ -51,5 +52,5 @@ export type HeaderProps = {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;
 export default Header;

package/dist/types-ts4.5/components/Header/index.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
 /**
  * __Container__
  *
  * A container for Header and Footer that safely handles props to the child component
  */
-export declare const Container: ({ children, ...props }: CustomItemComponentProps) => JSX.Element;
+export declare const Container: ({ children, ...props }: CustomItemComponentProps) => jsx.JSX.Element;
 export type HeaderProps = {
     /**
      * A function that can be used to override the styles of the component.
@@ -51,5 +52,5 @@ export type HeaderProps = {
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;
 export default Header;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,11 +35,11 @@
     "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/menu": "^1.9.0",
+    "@atlaskit/menu": "^1.10.0",
     "@atlaskit/motion": "^1.4.0",
     "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.18.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -91,19 +91,19 @@ export const GoBackItem: React_2.ForwardRefExoticComponent<
 >;
 
 // @public
-export const Header: React_2.ForwardRefExoticComponent<
-  HeaderProps & React_2.RefAttributes<HTMLElement>
+export const Header: ForwardRefExoticComponent<
+  HeaderProps & RefAttributes<HTMLElement>
 >;
 
 // @public (undocumented)
 export type HeaderProps = {
   cssFn?: CSSFn;
-  iconBefore?: React_2.ReactNode;
-  onClick?: (event: React_2.KeyboardEvent | React_2.MouseEvent) => void;
+  iconBefore?: React.ReactNode;
+  onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
   description?: JSX.Element | string;
-  children?: React_2.ReactNode;
+  children?: React.ReactNode;
   testId?: string;
-  component?: React_2.ComponentType<CustomItemComponentProps>;
+  component?: React.ComponentType<CustomItemComponentProps>;
 };
 
 // @public

package/tmp/api-report-tmp.d.ts

@@ -63,17 +63,17 @@ export type FooterProps = HeaderProps | NewFooterProps;
 export const GoBackItem: React_2.ForwardRefExoticComponent<ButtonItemProps & React_2.RefAttributes<HTMLElement>>;
 
 // @public
-export const Header: React_2.ForwardRefExoticComponent<HeaderProps & React_2.RefAttributes<HTMLElement>>;
+export const Header: ForwardRefExoticComponent<HeaderProps & RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 export type HeaderProps = {
     cssFn?: CSSFn;
-    iconBefore?: React_2.ReactNode;
-    onClick?: (event: React_2.KeyboardEvent | React_2.MouseEvent) => void;
+    iconBefore?: React.ReactNode;
+    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
     description?: JSX.Element | string;
-    children?: React_2.ReactNode;
+    children?: React.ReactNode;
     testId?: string;
-    component?: React_2.ComponentType<CustomItemComponentProps>;
+    component?: React.ComponentType<CustomItemComponentProps>;
 };
 
 // @public