@atlaskit/page-layout 1.2.4 → 1.2.7

package/dist/es2019/components/resize-control/index.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -49,6 +50,7 @@ const ResizeControl = ({
   const offset = useRef(0);
   const keyboardEventTimeout = useRef();
   const [isGrabAreaFocused, setIsGrabAreaFocused] = useState(false);
+  const unbindEvents = useRef(null);
 
   const toggleSideBar = e => {
     if (isResizing) {
@@ -75,8 +77,13 @@ const ResizeControl = ({
     }
 
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
+    unbindEvents.current = bindAll(document, [{
+      type: 'mousemove',
+      listener: onMouseMove
+    }, {
+      type: 'mouseup',
+      listener: onMouseUp
+    }]);
     document.documentElement.setAttribute(IS_SIDEBAR_DRAGGING, 'true');
     const newLeftbarState = { ...leftSidebarState,
       isResizing: true
@@ -86,9 +93,11 @@ const ResizeControl = ({
   };
 
   const cancelDrag = shouldCollapse => {
+    var _unbindEvents$current;
+
     onMouseMove.cancel();
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
+    unbindEvents.current = null;
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
@@ -113,10 +122,12 @@ const ResizeControl = ({
   });
 
   const cleanupAfterResize = () => {
+    var _unbindEvents$current2;
+
     x.current = 0;
     offset.current = 0;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
   };
 
   let updatedLeftSidebarState = {};
@@ -263,6 +274,7 @@ const ResizeControl = ({
     testId: testId && `${testId}-resize-button`
   }));
   /* eslint-enable jsx-a11y/role-supports-aria-props */
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ResizeControl;

package/dist/es2019/components/resize-control/resize-button.js

@@ -83,11 +83,13 @@ const ResizeButton = ({
   "data-testid": testId // Prevents focus staying attached to the button
   // when pressed
   ,
-  onMouseDown: preventDefault
+  onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
 }, props), jsx(ChevronRight, {
   label: ""
 }), jsx("div", {
   css: increaseHitAreaStyles
-}));
+})); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ResizeButton;

package/dist/es2019/components/resize-control/shadow.js

@@ -38,6 +38,7 @@ const Shadow = ({
     "data-testid": testId,
     css: [shadowStyles, isDragging && draggingStyles]
   });
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Shadow;

package/dist/es2019/components/skip-links/skip-link-components.js

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
@@ -48,7 +50,8 @@ const assignIndex = (num, arr) => {
   }
 
   return assignIndex(num + 1, arr);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export const SkipLinkWrapper = ({
   skipLinksLabel
@@ -142,7 +145,8 @@ const focusTargetRef = href => event => {
   }
 
   return false;
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export const SkipLink = ({
   href,

package/dist/es2019/components/slots/banner.js

@@ -19,6 +19,14 @@ const bannerFixedStyles = css({
   right: RIGHT_PANEL_WIDTH,
   left: LEFT_PANEL_WIDTH
 });
+/**
+ * __Banner__
+ *
+ * Provides a slot for a Banner within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 const Banner = props => {
   const {

package/dist/es2019/components/slots/content.js

@@ -7,6 +7,14 @@ const contentStyles = css({
   position: 'relative',
   gridArea: CONTENT
 });
+/**
+ * __Content__
+ *
+ * Provides a slot for your application content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 const Content = props => {
   const {

package/dist/es2019/components/slots/internal/left-sidebar-inner.js

@@ -47,6 +47,7 @@ const LeftSidebarInner = ({
   return jsx("div", {
     css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default LeftSidebarInner;

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

@@ -44,6 +44,7 @@ const ResizableChildrenWrapper = ({
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ResizableChildrenWrapper;

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

@@ -18,6 +18,14 @@ const leftPanelFixedStyles = css({
   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)
+ */
 
 const LeftPanel = props => {
   const {

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

@@ -7,6 +7,14 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import SlotDimensions from './slot-dimensions';
+/**
+ * __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)
+ */
 
 const LeftSidebarWithoutResize = props => {
   const {

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

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
@@ -9,6 +11,14 @@ import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import ResizableChildrenWrapper from './internal/resizable-children-wrapper';
 import SlotDimensions from './slot-dimensions';
+/**
+ * __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)
+ */
 
 const LeftSidebar = props => {
   const {
@@ -224,7 +234,8 @@ const LeftSidebar = props => {
     }, children), jsx(ResizeControl, {
       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/es2019/components/slots/main.js

@@ -35,6 +35,14 @@ const draggingStyles = css({
 const flyoutStyles = css({
   marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${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)
+ */
 
 const Main = props => {
   const {

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

@@ -22,6 +22,14 @@ const gridStyles = css({
   gridTemplateRows: `${BANNER_HEIGHT} ${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)
+ */
 
 const PageLayout = ({
   skipLinksLabel = DEFAULT_I18N_PROPS_SKIP_LINKS,

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

@@ -18,6 +18,14 @@ const fixedStyles = css({
   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)
+ */
 
 const RightPanel = props => {
   const {

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

@@ -45,6 +45,14 @@ const fixedOuterStyles = css({
     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)
+ */
 
 const RightSidebar = props => {
   const {

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

@@ -19,6 +19,14 @@ const fixedStyles = css({
   right: RIGHT_PANEL_WIDTH,
   left: 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)
+ */
 
 const TopNavigation = props => {
   const {

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

@@ -1,7 +1,5 @@
 import { createContext, useContext, useEffect } from 'react';
-
-const noop = () => {};
-
+import noop from '@atlaskit/ds-lib/noop';
 const leftSidebarState = {
   isFlyoutOpen: false,
   isResizing: false,
@@ -10,7 +8,8 @@ const leftSidebarState = {
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
   isFixed: true
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export const SidebarResizeContext = /*#__PURE__*/createContext({
   isLeftSidebarCollapsed: false,
   expandLeftSidebar: noop,
@@ -26,7 +25,7 @@ export const 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.
  *
  * ---

package/dist/es2019/controllers/sidebar-resize-controller.js

@@ -1,15 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
 import { isReducedMotion } from '@atlaskit/motion';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, GRAB_AREA_SELECTOR, IS_SIDEBAR_COLLAPSING } from '../common/constants';
 import { getPageLayoutSlotCSSSelector } from '../common/utils';
 import { SidebarResizeContext } from './sidebar-resize-context';
 
-const noop = () => {};
-
 const handleDataAttributesAndCb = (callback = noop, isLeftSidebarCollapsed, leftSidebarState) => {
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export const SidebarResizeController = ({
   children,
@@ -34,6 +34,7 @@ export const SidebarResizeController = ({
       const $leftSidebarResizeController = document.querySelector(`[${GRAB_AREA_SELECTOR}]`);
       const isCollapsed = !!$leftSidebarResizeController && $leftSidebarResizeController.hasAttribute('disabled');
       handleDataAttributesAndCb(isCollapsed ? onCollapse : onExpand, isCollapsed, leftSidebarState); // Make sure multiple event handlers do not get attached
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
 
       document.querySelector(leftSidebarSelector).removeEventListener('transitionend', transitionEventHandler);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -43,6 +44,7 @@ export const SidebarResizeController = ({
     const $leftSidebar = document.querySelector(leftSidebarSelector);
 
     if ($leftSidebar && !isReducedMotion()) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       $leftSidebar.addEventListener('transitionend', transitionEventHandler);
     }
   }, [isLeftSidebarCollapsed, leftSidebarSelector, leftSidebarState, onCollapse, onExpand, transitionEventHandler]);

package/dist/es2019/controllers/skip-link-context.js

@@ -1,7 +1,6 @@
 import { createContext, useContext, useEffect } from 'react';
-
-const noop = () => {};
-
+import noop from '@atlaskit/ds-lib/noop';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SkipLinksContext = /*#__PURE__*/createContext({
   skipLinksData: [],
   registerSkipLink: noop,

package/dist/es2019/controllers/skip-link-controller.js

@@ -26,7 +26,8 @@ const byDOMOrder = (a, b) => {
   }
 
   return indexA - indexB;
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export const SkipLinksController = ({
   children

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.2.4",
+	"version": "1.2.7",
 	"sideEffects": false
 }

package/dist/esm/common/safe-local-storage.js

@@ -4,6 +4,7 @@
 var isLocalStorageSupported = function isLocalStorageSupported() {
   try {
     // use an random key to test
+    // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
     var testKey = "__test_".concat(Date.now(), "__");
     localStorage.setItem(testKey, testKey);
     localStorage.removeItem(testKey);

package/dist/esm/components/resize-control/grab-area.js

@@ -59,10 +59,12 @@ var GrabArea = function GrabArea(_ref) {
   return jsx("button", _extends({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest), jsx("span", _extends({
     css: lineStyles
   }, grabAreaLineSelector)));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default GrabArea;

package/dist/esm/components/resize-control/index.js

@@ -9,6 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bindAll } from 'bind-event-listener';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -60,6 +61,8 @@ var ResizeControl = function ResizeControl(_ref) {
       isGrabAreaFocused = _useState2[0],
       setIsGrabAreaFocused = _useState2[1];
 
+  var unbindEvents = useRef(null);
+
   var toggleSideBar = function toggleSideBar(e) {
     if (isResizing) {
       return;
@@ -86,8 +89,13 @@ var ResizeControl = function ResizeControl(_ref) {
     }
 
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
+    unbindEvents.current = bindAll(document, [{
+      type: 'mousemove',
+      listener: onMouseMove
+    }, {
+      type: 'mouseup',
+      listener: onMouseUp
+    }]);
     document.documentElement.setAttribute(IS_SIDEBAR_DRAGGING, 'true');
 
     var newLeftbarState = _objectSpread(_objectSpread({}, leftSidebarState), {}, {
@@ -99,9 +107,11 @@ var ResizeControl = function ResizeControl(_ref) {
   };
 
   var cancelDrag = function cancelDrag(shouldCollapse) {
+    var _unbindEvents$current;
+
     onMouseMove.cancel();
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
+    unbindEvents.current = null;
     document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
@@ -124,10 +134,12 @@ var ResizeControl = function ResizeControl(_ref) {
   });
 
   var cleanupAfterResize = function cleanupAfterResize() {
+    var _unbindEvents$current2;
+
     x.current = 0;
     offset.current = 0;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
+    (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
+    unbindEvents.current = null;
   };
 
   var updatedLeftSidebarState = {};
@@ -274,6 +286,7 @@ var ResizeControl = function ResizeControl(_ref) {
     testId: testId && "".concat(testId, "-resize-button")
   }));
   /* eslint-enable jsx-a11y/role-supports-aria-props */
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ResizeControl;

package/dist/esm/components/resize-control/resize-button.js

@@ -83,12 +83,14 @@ var ResizeButton = function ResizeButton(_ref) {
     "data-testid": testId // Prevents focus staying attached to the button
     // when pressed
     ,
-    onMouseDown: preventDefault
+    onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, props), jsx(ChevronRight, {
     label: ""
   }), jsx("div", {
     css: increaseHitAreaStyles
   }));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ResizeButton;

package/dist/esm/components/resize-control/shadow.js

@@ -32,6 +32,7 @@ var Shadow = function Shadow(_ref) {
     "data-testid": testId,
     css: [shadowStyles, isDragging && draggingStyles]
   });
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Shadow;

package/dist/esm/components/skip-links/skip-link-components.js

@@ -5,6 +5,8 @@ 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) { _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; }
 
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
@@ -55,7 +57,8 @@ var assignIndex = function assignIndex(num, arr) {
   }
 
   return assignIndex(num + 1, arr);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   var skipLinksLabel = _ref.skipLinksLabel;
@@ -163,7 +166,8 @@ var focusTargetRef = function focusTargetRef(href) {
 
     return false;
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export var SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,

package/dist/esm/components/slots/banner.js

@@ -20,6 +20,14 @@ var bannerFixedStyles = css({
   right: RIGHT_PANEL_WIDTH,
   left: LEFT_PANEL_WIDTH
 });
+/**
+ * __Banner__
+ *
+ * Provides a slot for a Banner within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var Banner = function Banner(props) {
   var children = props.children,

package/dist/esm/components/slots/content.js

@@ -7,6 +7,14 @@ var contentStyles = css({
   position: 'relative',
   gridArea: CONTENT
 });
+/**
+ * __Content__
+ *
+ * Provides a slot for your application content within the PageLayout.
+ *
+ * - [Examples](https://atlassian.design/components/page-layout/examples)
+ * - [Code](https://atlassian.design/components/page-layout/code)
+ */
 
 var Content = function Content(props) {
   var children = props.children,

package/dist/esm/components/slots/internal/left-sidebar-inner.js

@@ -48,6 +48,7 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
   return jsx("div", {
     css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default LeftSidebarInner;

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

@@ -46,6 +46,7 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ResizableChildrenWrapper;

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

@@ -19,6 +19,14 @@ var leftPanelFixedStyles = css({
   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,

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

@@ -9,6 +9,14 @@ import { publishGridState, useSkipLink } from '../../controllers';
 import LeftSidebarInner from './internal/left-sidebar-inner';
 import LeftSidebarOuter from './internal/left-sidebar-outer';
 import SlotDimensions from './slot-dimensions';
+/**
+ * __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,