@atlaskit/page-layout 1.2.6 → 1.3.0

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
 import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
@@ -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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut } from '@atlaskit/motion';
 import { useIsSidebarDragging } from '../../common/hooks';
 var colorStops = "\n    rgba(0, 0, 0, 0.2) 0px,\n    rgba(0, 0, 0, 0.2) 1px,\n    rgba(0, 0, 0, 0.1) 1px,\n    rgba(0, 0, 0, 0) 100%\n  ";
@@ -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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
 import { PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
@@ -57,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;
@@ -165,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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER, BANNER_HEIGHT, DEFAULT_BANNER_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, VAR_BANNER_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
@@ -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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { CONTENT } from '../../common/constants';
 var contentStyles = css({
   display: 'flex',
@@ -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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { BANNER_HEIGHT, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';
@@ -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/left-sidebar-outer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarDragging } from '../../../common/hooks';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion';
 import { TRANSITION_DURATION } from '../../../common/constants';
 import { useIsSidebarCollapsing } from '../../../common/hooks';
@@ -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/internal/slot-focus-ring.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import { B100 } from '@atlaskit/theme/colors';
 var focusStyles = css({
   ':focus': {

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DEFAULT_LEFT_PANEL_WIDTH, LEFT_PANEL, LEFT_PANEL_WIDTH, VAR_LEFT_PANEL_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
@@ -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

@@ -2,13 +2,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { resolveDimension } from '../../common/utils';
 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,

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { useContext, useEffect, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, RESIZE_BUTTON_SELECTOR, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getGridStateFromStorage, mergeGridStateIntoStorage, resolveDimension } from '../../common/utils';
 import { publishGridState, SidebarResizeContext, useSkipLink } from '../../controllers';
@@ -17,6 +17,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)
+ */
 
 var LeftSidebar = function LeftSidebar(props) {
   var children = props.children,
@@ -235,7 +243,8 @@ var LeftSidebar = function 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/esm/components/slots/main.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useContext } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { prefersReducedMotion } from '@atlaskit/motion/accessibility';
 import { easeOut } from '@atlaskit/motion/curves';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT } from '../../common/constants';
@@ -35,6 +35,14 @@ var draggingStyles = css({
 var flyoutStyles = css({
   marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(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,

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER, BANNER_HEIGHT, CONTENT, DEFAULT_I18N_PROPS_SKIP_LINKS, LEFT_PANEL, LEFT_PANEL_WIDTH, PAGE_LAYOUT_CONTAINER_SELECTOR, RIGHT_PANEL, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { SidebarResizeController, SkipLinksController } from '../../controllers';
 import { SkipLinkWrapper } from '../skip-links';
@@ -19,6 +19,14 @@ var gridStyles = css({
   gridTemplateRows: "".concat(BANNER_HEIGHT, " ").concat(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,

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DEFAULT_RIGHT_PANEL_WIDTH, RIGHT_PANEL, RIGHT_PANEL_WIDTH, VAR_RIGHT_PANEL_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
@@ -19,6 +19,14 @@ var 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)
+ */
 
 var RightPanel = function RightPanel(props) {
   var children = props.children,

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER_HEIGHT, DEFAULT_RIGHT_SIDEBAR_WIDTH, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION_HEIGHT, VAR_RIGHT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
@@ -46,6 +46,14 @@ var 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)
+ */
 
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { BANNER_HEIGHT, DEFAULT_TOP_NAVIGATION_HEIGHT, LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT, VAR_TOP_NAVIGATION_HEIGHT } from '../../common/constants';
 import { getPageLayoutSlotSelector, resolveDimension } from '../../common/utils';
 import { publishGridState, useSkipLink } from '../../controllers';
@@ -20,6 +20,14 @@ var 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)
+ */
 
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,

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

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

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

@@ -1,19 +1,19 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
 
-var noop = function noop() {};
-
 var handleDataAttributesAndCb = function handleDataAttributesAndCb() {
   var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
   var isLeftSidebarCollapsed = arguments.length > 1 ? arguments[1] : undefined;
   var leftSidebarState = arguments.length > 2 ? arguments[2] : undefined;
   document.documentElement.removeAttribute(IS_SIDEBAR_COLLAPSING);
   callback(leftSidebarState);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export var SidebarResizeController = function SidebarResizeController(_ref) {
   var children = _ref.children,

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

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

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

@@ -28,7 +28,8 @@ var byDOMOrder = function byDOMOrder(a, b) {
   }
 
   return indexA - indexB;
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export var SkipLinksController = function SkipLinksController(_ref) {
   var children = _ref.children;

package/dist/esm/version.json

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

package/dist/types/common/types.d.ts

@@ -2,27 +2,39 @@ import { ElementType, ReactElement, ReactNode } from 'react';
 import { ResizeButtonProps } from '../components/resize-control/types';
 import { LeftSidebarState } from '../controllers/sidebar-resize-context';
 interface SlotProps {
-    /** Sets positon to fixed. */
+    /**
+     * Sets positon to fixed.
+     */
     isFixed?: boolean;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests .
      */
     testId?: string;
-    /** React Children! */
+    /**
+     * React Children!
+     */
     children: ReactNode;
     id?: string;
     skipLinkTitle?: string;
 }
 export interface SlotHeightProps extends SlotProps {
-    /** It save height in local storage. */
+    /**
+     * It save height in local storage.
+     */
     shouldPersistHeight?: boolean;
-    /** Height! */
+    /**
+     * Height!
+     */
     height?: number;
 }
 export interface SlotWidthProps extends SlotProps {
-    /** It save width in local storage. */
+    /**
+     * It save width in local storage.
+     */
     shouldPersistWidth?: boolean;
-    /** Width! */
+    /**
+     * Width!
+     */
     width?: number;
 }
 export interface LeftSidebarProps extends SlotWidthProps {
@@ -30,48 +42,76 @@ export interface LeftSidebarProps extends SlotWidthProps {
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /** You can override prop(s) for the mentioned component(s). */
+    /**
+     * You can override prop(s) for the mentioned component(s).
+     */
     overrides?: {
         ResizeButton?: {
             render?: (Component: ElementType<ResizeButtonProps>, props: ResizeButtonProps) => ReactElement;
         };
     };
-    /** Display label for grab area. This will be announced to the screenreaders when the grab area receives focus */
+    /**
+     * Display label for grab area. This will be announced to the screenreaders when the grab area receives focus
+     */
     resizeGrabAreaLabel?: string;
-    /** Display label for resize button. */
+    /**
+     * Display label for resize button.
+     */
     resizeButtonLabel?: string;
-    /** Called when left-sidebar is collapsed. */
+    /**
+     * Called when left-sidebar is collapsed.
+     */
     onCollapse?: () => void;
-    /** Called when left-sidebar is expanded. */
+    /**
+     * Called when left-sidebar is expanded.
+     */
     onExpand?: () => void;
-    /** Called when left-sidebar resize starts using mouse or touch. */
+    /**
+     * Called when left-sidebar resize starts using mouse or touch.
+     */
     onResizeStart?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar resize ends using mouse or touch. */
+    /**
+     * Called when left-sidebar resize ends using mouse or touch.
+     */
     onResizeEnd?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar is collapsed and mouse leaves the area. */
+    /**
+     * Called when left-sidebar is collapsed and mouse leaves the area.
+     */
     onFlyoutCollapse?: () => void;
-    /** Called after flyout delay when left-sidebar is collapsed and mouse enters the area. */
+    /**
+     * Called after flyout delay when left-sidebar is collapsed and mouse enters the area.
+     */
     onFlyoutExpand?: () => void;
-    /** Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage */
+    /**
+     * Controls whether the LeftSidebar mounts in a collapsed state, this will override the setting in localStorage
+     */
     collapsedState?: 'collapsed' | 'expanded';
-    /** Controls the width when LeftSidebar mounts, this will override the setting in localStorage */
+    /**
+     * Controls the width when LeftSidebar mounts, this will override the setting in localStorage
+     */
     width?: number;
 }
 export declare type SidebarResizeControllerProps = {
-    /** Called when left-sidebar expanded. */
+    /**
+     * Called when left-sidebar expanded.
+     */
     onLeftSidebarExpand?: (leftSidebarState: LeftSidebarState) => void;
-    /** Called when left-sidebar collapsed. */
+    /**
+     * Called when left-sidebar collapsed.
+     */
     onLeftSidebarCollapse?: (leftSidebarState: LeftSidebarState) => void;
 };
 export declare type DimensionNames = 'leftPanelWidth' | 'bannerHeight' | 'topNavigationHeight' | 'leftSidebarWidth' | 'leftSidebarFlyoutWidth' | 'rightSidebarWidth' | 'rightPanelWidth';
 export declare type Dimensions = Partial<Record<DimensionNames, number>>;
 export interface PageLayoutProps extends SidebarResizeControllerProps {
-    /** React children! */
+    /**
+     * React children!
+     */
     children: ReactNode;
     skipLinksLabel?: string;
     /**
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-     **/
+     */
     testId?: string;
 }
 export type { LeftSidebarState } from '../controllers/sidebar-resize-context';

package/dist/types/common/utils.d.ts

@@ -1,4 +1,4 @@
-import { DimensionNames, Dimensions } from '../common/types';
+import { DimensionNames, Dimensions } from './types';
 declare const emptyGridState: Dimensions;
 declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
 declare const getGridStateFromStorage: (key: string) => any;

package/dist/types/components/resize-control/grab-area.d.ts

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { ComponentProps } from 'react';
+import { jsx } from '@emotion/react';
 export declare type GrabAreaProps = {
     testId?: string;
     isLeftSidebarCollapsed: boolean;
 } & ComponentProps<'button'>;
-declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => JSX.Element;
+declare const GrabArea: ({ testId, isLeftSidebarCollapsed, ...rest }: GrabAreaProps) => jsx.JSX.Element;
 export default GrabArea;

package/dist/types/components/resize-control/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { ResizeControlProps } from './types';
-declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => JSX.Element;
+declare const ResizeControl: ({ testId, overrides, resizeButtonLabel, resizeGrabAreaLabel, onResizeStart, onResizeEnd, }: ResizeControlProps) => jsx.JSX.Element;
 export default ResizeControl;

package/dist/types/components/resize-control/resize-button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { ResizeButtonProps } from './types';
-declare const ResizeButton: ({ isLeftSidebarCollapsed, label, testId, ...props }: ResizeButtonProps) => JSX.Element;
+declare const ResizeButton: ({ isLeftSidebarCollapsed, label, testId, ...props }: ResizeButtonProps) => jsx.JSX.Element;
 export default ResizeButton;

package/dist/types/components/resize-control/shadow.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 declare const Shadow: ({ testId }: {
     testId?: string | undefined;
-}) => JSX.Element;
+}) => jsx.JSX.Element;
 export default Shadow;