@atlaskit/page-layout 1.2.6 → 1.3.0

package/dist/cjs/components/slots/internal/left-sidebar-outer.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -25,8 +25,8 @@ var _slotFocusRing = _interopRequireDefault(require("./slot-focus-ring"));
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
-var outerStyles = (0, _core.css)({
+var prefersReducedMotionStyles = (0, _react2.css)((0, _motion.prefersReducedMotion)());
+var outerStyles = (0, _react2.css)({
   width: _constants.LEFT_SIDEBAR_WIDTH,
   marginLeft: 0,
   position: 'relative',
@@ -36,7 +36,7 @@ var outerStyles = (0, _core.css)({
     '--ds--resize-button--opacity': 1
   }
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react2.css)({
   cursor: 'ew-resize',
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
@@ -47,17 +47,17 @@ var draggingStyles = (0, _core.css)({
  * so the pseudo element forces it to take up the necessary width.
  */
 
-var fixedStyles = (0, _core.css)({
+var fixedStyles = (0, _react2.css)({
   '::after': {
     display: 'inline-block',
     width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
     content: "''"
   }
 });
-var flyoutStyles = (0, _core.css)({
+var flyoutStyles = (0, _react2.css)({
   width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
 });
-var flyoutFixedStyles = (0, _core.css)({
+var flyoutFixedStyles = (0, _react2.css)({
   width: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH
 });
 var selector = (0, _utils.getPageLayoutSlotSelector)('left-sidebar');
@@ -73,7 +73,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
       onMouseOver = _ref.onMouseOver,
       id = _ref.id;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
-  return (0, _core.jsx)(_slotFocusRing.default, {
+  return (0, _react2.jsx)(_slotFocusRing.default, {
     isSidebar: true
   }, function (_ref2) {
     var className = _ref2.className;
@@ -82,7 +82,7 @@ var LeftSidebarOuter = function LeftSidebarOuter(_ref, ref) {
        * The mouse handlers control flyout behavior, a mouse-only experience.
        */
       // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      (0, _core.jsx)("div", (0, _extends2.default)({
+      (0, _react2.jsx)("div", (0, _extends2.default)({
         css: [outerStyles, isFixed && fixedStyles, isFlyoutOpen && flyoutStyles, isFlyoutOpen && isFixed && flyoutFixedStyles, isDragging && draggingStyles, prefersReducedMotionStyles],
         className: className,
         "data-testid": testId,

package/dist/cjs/components/slots/internal/resizable-children-wrapper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -15,7 +15,7 @@ var _hooks = require("../../../common/hooks");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
+var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
 /**
  * The transition duration is intentionally set to 0ms.
  *
@@ -23,20 +23,20 @@ var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion
  * opacity and visibility so that it syncs collapsing sidebar.
  */
 
-var hideLeftSidebarContentsStyles = (0, _core.css)({
+var hideLeftSidebarContentsStyles = (0, _react.css)({
   opacity: 0,
   transition: "opacity 0ms linear, visibility 0ms linear",
   transitionDelay: "".concat(_constants.TRANSITION_DURATION - 100, "ms"),
   visibility: 'hidden'
 });
-var resizableChildrenWrapperStyles = (0, _core.css)({
+var resizableChildrenWrapperStyles = (0, _react.css)({
   height: '100%',
   opacity: 1,
   overflow: 'hidden auto',
   transition: 'none',
   visibility: 'visible'
 });
-var fixedChildrenWrapperStyles = (0, _core.css)({
+var fixedChildrenWrapperStyles = (0, _react.css)({
   minWidth: 240,
   height: '100%'
 });
@@ -52,12 +52,13 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   var isCollapsing = (0, _hooks.useIsSidebarCollapsing)();
   var isCollapsed = isLeftSidebarCollapsed || hasCollapsedState;
   var isHidden = isCollapsing || isCollapsed && !isFlyoutOpen;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles]
-  }, (0, _core.jsx)("div", {
+  }, (0, _react.jsx)("div", {
     css: fixedChildrenWrapperStyles
   }, children));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = ResizableChildrenWrapper;
 exports.default = _default;

package/dist/cjs/components/slots/internal/slot-focus-ring.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
-var focusStyles = (0, _core.css)({
+var focusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -25,7 +25,7 @@ var focusStyles = (0, _core.css)({
  * so the nested selector needs to target an extra level deeper.
  */
 
-var sidebarFocusStyles = (0, _core.css)({
+var sidebarFocusStyles = (0, _react.css)({
   ':focus': {
     outline: 'none',
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
@@ -49,7 +49,7 @@ var SlotFocusRing = function SlotFocusRing(_ref) {
   var children = _ref.children,
       _ref$isSidebar = _ref.isSidebar,
       isSidebar = _ref$isSidebar === void 0 ? false : _ref$isSidebar;
-  return (0, _core.jsx)(_core.ClassNames, null, function (_ref2) {
+  return (0, _react.jsx)(_react.ClassNames, null, function (_ref2) {
     var css = _ref2.css;
     return children({
       className: isSidebar ? css(sidebarFocusStyles) : css(focusStyles)

package/dist/cjs/components/slots/left-panel.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -26,16 +26,24 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
-var leftPanelStyles = (0, _core.css)({
+var leftPanelStyles = (0, _react2.css)({
   gridArea: _constants.LEFT_PANEL
 });
-var leftPanelFixedStyles = (0, _core.css)({
+var leftPanelFixedStyles = (0, _react2.css)({
   width: _constants.LEFT_PANEL_WIDTH,
   position: 'fixed',
   top: 0,
   bottom: 0,
   left: 0
 });
+/**
+ * __Left panel__
+ *
+ * Provides a slot for a left panel within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var LeftPanel = function LeftPanel(props) {
   var children = props.children,
@@ -54,14 +62,14 @@ var LeftPanel = function LeftPanel(props) {
     };
   }, [leftPanelWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       css: [leftPanelStyles, isFixed && leftPanelFixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('left-panel')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_LEFT_PANEL_WIDTH,
       value: leftPanelWidth
     }), children);

package/dist/cjs/components/slots/left-sidebar-without-resize.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -26,6 +26,15 @@ var _leftSidebarOuter = _interopRequireDefault(require("./internal/left-sidebar-
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+
+/**
+ * __Left sidebar without resize__
+ *
+ * Provides a slot for a left sidebar without resize within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
   var children = props.children,
       id = props.id,
@@ -42,14 +51,14 @@ var LeftSidebarWithoutResize = function LeftSidebarWithoutResize(props) {
     };
   }, [leftSidebarWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_leftSidebarOuter.default, {
+  return (0, _react2.jsx)(_leftSidebarOuter.default, {
     id: id,
     testId: testId,
     isFixed: isFixed
-  }, (0, _core.jsx)(_slotDimensions.default, {
+  }, (0, _react2.jsx)(_slotDimensions.default, {
     variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
     value: leftSidebarWidth
-  }), (0, _core.jsx)(_leftSidebarInner.default, {
+  }), (0, _react2.jsx)(_leftSidebarInner.default, {
     isFixed: isFixed
   }, children));
 };

package/dist/cjs/components/slots/left-sidebar.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -33,6 +33,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+/**
+ * __Left sidebar__
+ *
+ * Provides a slot for a left sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,
       width = props.width,
@@ -229,7 +237,7 @@ var LeftSidebar = function LeftSidebar(props) {
   };
 
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    (0, _core.jsx)(_leftSidebarOuter.default, {
+    (0, _react2.jsx)(_leftSidebarOuter.default, {
       ref: leftSideBarRef,
       testId: testId,
       onMouseOver: onMouseOver,
@@ -237,20 +245,21 @@ var LeftSidebar = function LeftSidebar(props) {
       id: id,
       isFixed: isFixed,
       isFlyoutOpen: isFlyoutOpen
-    }, (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
       value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount
-    }), (0, _core.jsx)(_leftSidebarInner.default, {
+    }), (0, _react2.jsx)(_leftSidebarInner.default, {
       isFixed: isFixed,
       isFlyoutOpen: isFlyoutOpen
-    }, (0, _core.jsx)(_resizableChildrenWrapper.default, {
+    }, (0, _react2.jsx)(_resizableChildrenWrapper.default, {
       isFlyoutOpen: isFlyoutOpen,
       isLeftSidebarCollapsed: isLeftSidebarCollapsed,
       hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed'
-    }, children), (0, _core.jsx)(_resizeControl.default, {
+    }, children), (0, _react2.jsx)(_resizeControl.default, {
       testId: testId,
       resizeGrabAreaLabel: resizeGrabAreaLabel,
-      resizeButtonLabel: resizeButtonLabel,
+      resizeButtonLabel: resizeButtonLabel // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      ,
       overrides: overrides,
       onCollapse: onCollapse,
       onExpand: onExpand,

package/dist/cjs/components/slots/main.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _accessibility = require("@atlaskit/motion/accessibility");
 
@@ -29,8 +29,8 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _accessibility.prefersReducedMotion)());
-var mainStyles = (0, _core.css)({
+var prefersReducedMotionStyles = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
+var mainStyles = (0, _react2.css)({
   minWidth: 0,
   marginLeft: 0,
   // Prevent flex container from blowing up when there's super wide content.
@@ -38,7 +38,7 @@ var mainStyles = (0, _core.css)({
   // Transition negative margin on main in sync with the increase in width of leftSidebar.
   transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react2.css)({
   cursor: 'ew-resize',
   // Make sure drag to resize remains snappy.
   transition: 'none'
@@ -50,9 +50,17 @@ var draggingStyles = (0, _core.css)({
  * while main remains in place.
  */
 
-var flyoutStyles = (0, _core.css)({
+var flyoutStyles = (0, _react2.css)({
   marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
+/**
+ * __Main__
+ *
+ * Provides a slot for main content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var Main = function Main(props) {
   var children = props.children,
@@ -67,9 +75,9 @@ var Main = function Main(props) {
       isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
       isFixed = _useContext$leftSideb.isFixed;
 
-  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       "data-testid": testId,
       css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
       className: className,

package/dist/cjs/components/slots/page-layout.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -24,7 +24,7 @@ var _skipLinks = require("../skip-links");
 /** @jsx jsx */
 var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
 var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
-var gridStyles = (0, _core.css)({
+var gridStyles = (0, _react2.css)({
   display: 'grid',
   height: '100%',
   gridTemplateAreas: gridTemplateAreas,
@@ -32,6 +32,14 @@ var gridStyles = (0, _core.css)({
   gridTemplateRows: "".concat(_constants.BANNER_HEIGHT, " ").concat(_constants.TOP_NAVIGATION_HEIGHT, " auto"),
   outline: 'none'
 });
+/**
+ * __Page layout__
+ *
+ * A collection of components which let you compose an application's page layout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,
@@ -40,13 +48,13 @@ var PageLayout = function PageLayout(_ref) {
       testId = _ref.testId,
       onLeftSidebarExpand = _ref.onLeftSidebarExpand,
       onLeftSidebarCollapse = _ref.onLeftSidebarCollapse;
-  return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_controllers.SkipLinksController, null, (0, _core.jsx)(_skipLinks.SkipLinkWrapper, {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_controllers.SkipLinksController, null, (0, _react2.jsx)(_skipLinks.SkipLinkWrapper, {
     skipLinksLabel: skipLinksLabel
-  }), (0, _core.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
+  }), (0, _react2.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
     "data-testid": testId,
     css: gridStyles,
     tabIndex: -1
-  }), (0, _core.jsx)(_controllers.SidebarResizeController, {
+  }), (0, _react2.jsx)(_controllers.SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,
     onLeftSidebarExpand: onLeftSidebarExpand
   }, children))));

package/dist/cjs/components/slots/right-panel.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -26,16 +26,24 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
-var baseStyles = (0, _core.css)({
+var baseStyles = (0, _react2.css)({
   gridArea: _constants.RIGHT_PANEL
 });
-var fixedStyles = (0, _core.css)({
+var fixedStyles = (0, _react2.css)({
   width: _constants.RIGHT_PANEL_WIDTH,
   position: 'fixed',
   top: 0,
   right: 0,
   bottom: 0
 });
+/**
+ * __Right panel__
+ *
+ * Provides a slot for a right panel within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var RightPanel = function RightPanel(props) {
   var children = props.children,
@@ -54,14 +62,14 @@ var RightPanel = function RightPanel(props) {
     };
   }, [rightPanelWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       css: [baseStyles, isFixed && fixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
       value: rightPanelWidth
     }), children);

package/dist/cjs/components/slots/right-sidebar.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -33,7 +33,7 @@ var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
  * If we were to apply `position: fixed` to the outer wrapper, it will be popped
  * out of its flex container and Main would stretch to occupy all the space.
  */
-var fixedInnerStyles = (0, _core.css)({
+var fixedInnerStyles = (0, _react2.css)({
   /**
    * This width on the inner wrapper is required when it is using fixed
    * positioning. Otherwise its width is slightly off.
@@ -44,10 +44,10 @@ var fixedInnerStyles = (0, _core.css)({
   right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
   bottom: 0
 });
-var staticInnerStyles = (0, _core.css)({
+var staticInnerStyles = (0, _react2.css)({
   height: '100%'
 });
-var outerStyles = (0, _core.css)({
+var outerStyles = (0, _react2.css)({
   width: _constants.RIGHT_SIDEBAR_WIDTH
 });
 /**
@@ -56,13 +56,21 @@ var outerStyles = (0, _core.css)({
  * so the pseudo element forces it to take up the necessary width.
  */
 
-var fixedOuterStyles = (0, _core.css)({
+var fixedOuterStyles = (0, _react2.css)({
   '&::after': {
     display: 'inline-block',
     width: _constants.RIGHT_SIDEBAR_WIDTH,
     content: "''"
   }
 });
+/**
+ * __Right sidebar__
+ *
+ * Provides a slot for a right sidebar within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,
@@ -81,19 +89,19 @@ var RightSidebar = function RightSidebar(props) {
     };
   }, [rightSidebarWidth, id]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_slotFocusRing.default, {
+  return (0, _react2.jsx)(_slotFocusRing.default, {
     isSidebar: true
   }, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       "data-testid": testId,
       css: [outerStyles, isFixed && fixedOuterStyles],
       className: className,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
       value: rightSidebarWidth
-    }), (0, _core.jsx)("div", {
+    }), (0, _react2.jsx)("div", {
       css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
     }, children));
   });

package/dist/cjs/components/slots/top-navigation.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
@@ -26,17 +26,25 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
-var topNavigationStyles = (0, _core.css)({
+var topNavigationStyles = (0, _react2.css)({
   height: _constants.TOP_NAVIGATION_HEIGHT,
   gridArea: _constants.TOP_NAVIGATION
 });
-var fixedStyles = (0, _core.css)({
+var fixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
   top: _constants.BANNER_HEIGHT,
   right: _constants.RIGHT_PANEL_WIDTH,
   left: _constants.LEFT_PANEL_WIDTH
 });
+/**
+ * __Top navigation__
+ *
+ * Provides a slot for top navigation within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,
@@ -56,14 +64,14 @@ var TopNavigation = function TopNavigation(props) {
     };
   }, [topNavigationHeight]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
-    return (0, _core.jsx)("div", (0, _extends2.default)({
+    return (0, _react2.jsx)("div", (0, _extends2.default)({
       css: [topNavigationStyles, isFixed && fixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
       value: topNavigationHeight
     }), children);

package/dist/cjs/controllers/sidebar-resize-context.js

@@ -13,14 +13,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _excluded = ["setLeftSidebarState"];
 
 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; }
 
-var noop = function noop() {};
-
 var leftSidebarState = {
   isFlyoutOpen: false,
   isResizing: false,
@@ -29,13 +29,14 @@ var leftSidebarState = {
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
   isFixed: true
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   isLeftSidebarCollapsed: false,
-  expandLeftSidebar: noop,
-  collapseLeftSidebar: noop,
+  expandLeftSidebar: _noop.default,
+  collapseLeftSidebar: _noop.default,
   leftSidebarState: leftSidebarState,
-  setLeftSidebarState: noop
+  setLeftSidebarState: _noop.default
 });
 exports.SidebarResizeContext = SidebarResizeContext;
 
@@ -47,7 +48,7 @@ var usePageLayoutResize = function usePageLayoutResize() {
   return context;
 };
 /**
- * **WARNING:** This hook is intended as a temporary solution and
+ * _**WARNING:**_ This hook is intended as a temporary solution and
  * is likely to be removed in a future version of page-layout.
  *
  * ---