@atlaskit/page-layout 1.2.6 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/page-layout
 
+## 1.3.0
+
+### Minor Changes
+
+- [`3de296cfd19`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3de296cfd19) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.8
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 1.2.7
+
+### Patch Changes
+
+- [`26b3e978512`](https://bitbucket.org/atlassian/atlassian-frontend/commits/26b3e978512) - Internal code change turning on new linting rules.
+- Updated dependencies
+
 ## 1.2.6
 
 ### Patch Changes

package/__perf__/utils/perf-example.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { token } from '@atlaskit/tokens';
 
@@ -12,8 +12,8 @@ import {
   TopNavigation,
 } from '../../src';
 
-import JiraIntegrationExample from './product-integration/AtlassianNavigation';
-import Sidebar from './product-integration/SideNavigation';
+import JiraIntegrationExample from './product-integration/atlassian-navigation';
+import Sidebar from './product-integration/side-navigation';
 
 const wrapperStyles = css({
   boxSizing: 'border-box',

package/__perf__/utils/product-integration/{AtlassianNavigation.tsx → atlassian-navigation.tsx}

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { Fragment, MouseEvent, useState } from 'react';
 
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 // AFP-1799 storybook examples in src cause issues
 import {
@@ -14,10 +14,10 @@ import {
 import Drawer from '@atlaskit/drawer';
 import { JiraIcon, JiraLogo } from '@atlaskit/logo';
 
-import { DefaultCreate } from './Create';
-import { HelpPopup } from './HelpPopup';
-import { NotificationsPopup } from './NotificationsPopup';
-import { ProfilePopup } from './ProfilePopup';
+import { DefaultCreate } from './create';
+import { HelpPopup } from './help-popup';
+import { NotificationsPopup } from './notifications-popup';
+import { ProfilePopup } from './profile-popup';
 
 const ProductHomeExample = () => (
   <ProductHome icon={JiraIcon} logo={JiraLogo} siteTitle="Extranet" />

package/__perf__/utils/product-integration/{Create.tsx → create.tsx}

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Create } from '@atlaskit/atlassian-navigation';
+import noop from '@atlaskit/ds-lib/noop';
 import { token } from '@atlaskit/tokens';
 
 const StyledTooltip = () => (
@@ -17,7 +18,7 @@ export const DefaultCreate = () => (
   <Create
     buttonTooltip={<StyledTooltip />}
     iconButtonTooltip="Create button"
-    onClick={() => {}}
+    onClick={noop}
     text="Create"
     testId="create-cta"
   />

package/__perf__/utils/product-integration/{HelpPopup.tsx → help-popup.tsx}

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Help } from '@atlaskit/atlassian-navigation';
 import { ButtonItem, MenuGroup, Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
+
 const HelpContent = () => (
   <MenuGroup testId={'nav-help-content'}>
     <Section title="Help">

package/__perf__/utils/product-integration/{NotificationsPopup.tsx → notifications-popup.tsx}

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useState } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { Notifications } from '@atlaskit/atlassian-navigation';
 import { Notifications as NotificationsIframe } from '@atlaskit/atlassian-notifications';

package/__perf__/utils/product-integration/{ProfilePopup.tsx → profile-popup.tsx}

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 
 import { Profile } from '@atlaskit/atlassian-navigation';
+import noop from '@atlaskit/ds-lib/noop';
 import { ButtonItem, MenuGroup, Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 
 export const DefaultProfile = () => (
   <Profile
     icon={<img src={avatarUrl} alt="Your profile and settings" />}
-    onClick={() => {}}
+    onClick={noop}
     tooltip="Your profile and settings"
   />
 );

package/__perf__/utils/product-integration/{SampleFooter.tsx → sample-footer.tsx}

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Footer } from '@atlaskit/side-navigation';
@@ -9,6 +9,7 @@ import { B400, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 const Container: React.FC<CustomItemComponentProps> = (props) => {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return <div {...props} />;
 };
 

package/__perf__/utils/product-integration/{SampleHeader.tsx → sample-header.tsx}

@@ -1,12 +1,14 @@
 /** @jsx jsx */
 import React from 'react';
 
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import Icon from '@atlaskit/icon';
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Header } from '@atlaskit/side-navigation';
+
 const Container: React.FC<CustomItemComponentProps> = (props) => {
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return <div {...props} />;
 };
 

package/__perf__/utils/product-integration/{SideNavigation.tsx → side-navigation.tsx}

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import DropboxIcon from '@atlaskit/icon/glyph/dropbox';
 import FilterIcon from '@atlaskit/icon/glyph/filter';
@@ -20,8 +20,8 @@ import {
   SideNavigation,
 } from '@atlaskit/side-navigation';
 
-import SampleFooter from './SampleFooter';
-import SampleHeader from './SampleHeader';
+import SampleFooter from './sample-footer';
+import SampleHeader from './sample-header';
 
 const LanguageSettings = () => {
   return (

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

@@ -11,6 +11,7 @@ exports.default = void 0;
 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/cjs/components/resize-control/grab-area.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -27,7 +27,7 @@ var _excluded = ["testId", "isLeftSidebarCollapsed"];
  * Used on internal leaf node, so naming collisions won't matter.
  */
 var varLineColor = '--ds-line';
-var grabAreaStyles = (0, _core.css)({
+var grabAreaStyles = (0, _react.css)({
   width: 24,
   height: '100%',
   padding: 0,
@@ -45,13 +45,13 @@ var grabAreaStyles = (0, _core.css)({
     ':active, :focus': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
   }
 });
-var grabAreaCollapsedStyles = (0, _core.css)({
+var grabAreaCollapsedStyles = (0, _react.css)({
   padding: 0,
   backgroundColor: 'transparent',
   border: 0,
   cursor: 'default'
 });
-var lineStyles = (0, _core.css)({
+var lineStyles = (0, _react.css)({
   display: 'block',
   width: 2,
   height: '100%',
@@ -65,14 +65,16 @@ var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
       isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
+  return (0, _react.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
-  }, rest), (0, _core.jsx)("span", (0, _extends2.default)({
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, rest), (0, _react.jsx)("span", (0, _extends2.default)({
     css: lineStyles
   }, grabAreaLineSelector)));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = GrabArea;
 exports.default = _default;

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

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _bindEventListener = require("bind-event-listener");
 
@@ -38,14 +38,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; }
 
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
-var resizeControlStyles = (0, _core.css)({
+var resizeControlStyles = (0, _react2.css)({
   position: 'absolute',
   top: 0,
   bottom: 0,
   left: '100%',
   outline: 'none'
 });
-var showResizeButtonStyles = (0, _core.css)({
+var showResizeButtonStyles = (0, _react2.css)({
   '--ds--resize-button--opacity': 1
 });
 
@@ -263,7 +263,7 @@ var ResizeControl = function ResizeControl(_ref) {
 
   var resizeButton = _objectSpread({
     render: function render(Component, props) {
-      return (0, _core.jsx)(Component, props);
+      return (0, _react2.jsx)(Component, props);
     }
   }, overrides && overrides.ResizeButton); // This width is calculated once only on mount.
   // This means resizing the window will cause this value to be incorrect for screen reader users,
@@ -277,11 +277,11 @@ var ResizeControl = function ResizeControl(_ref) {
   var leftSidebarPercentageExpanded = (0, _utils.getLeftSidebarPercentage)(leftSidebarState.leftSidebarWidth, maxAriaWidth);
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
-  return (0, _core.jsx)("div", (0, _extends2.default)({}, cssSelector, {
+  return (0, _react2.jsx)("div", (0, _extends2.default)({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
-  }), (0, _core.jsx)(_shadow.default, {
+  }), (0, _react2.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
-  }), (0, _core.jsx)(_grabArea.default, {
+  }), (0, _react2.jsx)(_grabArea.default, {
     role: "separator",
     "aria-label": resizeGrabAreaLabel,
     "aria-valuenow": leftSidebarPercentageExpanded,
@@ -302,7 +302,8 @@ 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
+
 
 var _default = ResizeControl;
 exports.default = _default;

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 
@@ -26,14 +26,14 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 
 var _excluded = ["isLeftSidebarCollapsed", "label", "testId"];
-var increaseHitAreaStyles = (0, _core.css)({
+var increaseHitAreaStyles = (0, _react.css)({
   position: 'absolute',
   top: -8,
   right: -12,
   bottom: -8,
   left: -8
 });
-var resizeIconButtonStyles = (0, _core.css)({
+var resizeIconButtonStyles = (0, _react.css)({
   width: 24,
   height: 24,
   padding: 0,
@@ -73,7 +73,7 @@ var resizeIconButtonStyles = (0, _core.css)({
     opacity: 1
   }
 });
-var resizeIconButtonExpandedStyles = (0, _core.css)({
+var resizeIconButtonExpandedStyles = (0, _react.css)({
   transform: 'rotate(180deg)',
   transformOrigin: 7
 });
@@ -89,7 +89,7 @@ var ResizeButton = function ResizeButton(_ref) {
       label = _ref.label,
       testId = _ref.testId,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("button", (0, _extends2.default)({}, cssSelector, {
+  return (0, _react.jsx)("button", (0, _extends2.default)({}, cssSelector, {
     // DO NOT remove. used as a CSS selector.
     "aria-expanded": !isLeftSidebarCollapsed,
     "aria-label": label,
@@ -98,13 +98,15 @@ var ResizeButton = function ResizeButton(_ref) {
     "data-testid": testId // Prevents focus staying attached to the button
     // when pressed
     ,
-    onMouseDown: preventDefault
-  }, props), (0, _core.jsx)(_chevronRight.default, {
+    onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, props), (0, _react.jsx)(_chevronRight.default, {
     label: ""
-  }), (0, _core.jsx)("div", {
+  }), (0, _react.jsx)("div", {
     css: increaseHitAreaStyles
   }));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = ResizeButton;
 exports.default = _default;

package/dist/cjs/components/resize-control/shadow.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");
 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  ";
 var direction = 'to left';
 var transitionDuration = '0.22s';
-var shadowStyles = (0, _core.css)({
+var shadowStyles = (0, _react.css)({
   width: 3,
   position: 'absolute',
   top: 0,
@@ -28,7 +28,7 @@ var shadowStyles = (0, _core.css)({
   transitionProperty: 'left, opacity, width',
   transitionTimingFunction: _motion.easeOut
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react.css)({
   width: 6,
   left: -6,
   background: "var(--ds-background-neutral-subtle, ".concat("linear-gradient(".concat(direction, ", ").concat(colorStops, ")"), ")"),
@@ -38,11 +38,12 @@ var draggingStyles = (0, _core.css)({
 var Shadow = function Shadow(_ref) {
   var testId = _ref.testId;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: [shadowStyles, isDragging && draggingStyles]
   });
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = Shadow;
 exports.default = _default;

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

@@ -11,7 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
@@ -26,8 +26,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) { (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-next-line @repo/internal/react/consistent-css-prop-usage
-var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion)());
-var skipLinkStyles = (0, _core.css)({
+var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotion)());
+var skipLinkStyles = (0, _react.css)({
   margin: 10,
   padding: '0.8rem 1rem',
   position: 'fixed',
@@ -53,13 +53,13 @@ var skipLinkStyles = (0, _core.css)({
     transform: 'translateY(0%)'
   }
 });
-var skipLinkListStyles = (0, _core.css)({
+var skipLinkListStyles = (0, _react.css)({
   marginTop: 4,
   paddingLeft: 0,
   listStylePosition: 'outside',
   listStyleType: 'none'
 });
-var skipLinkListItemStyles = (0, _core.css)({
+var skipLinkListItemStyles = (0, _react.css)({
   marginTop: 0
 });
 
@@ -69,7 +69,8 @@ var assignIndex = function assignIndex(num, arr) {
   }
 
   return assignIndex(num + 1, arr);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
   var skipLinksLabel = _ref.skipLinksLabel;
@@ -125,17 +126,17 @@ var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
     return window.removeEventListener('keydown', escapeHandler, false);
   };
 
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     onFocus: attachEscHandler,
     onBlur: removeEscHandler,
     css: [skipLinkStyles, prefersReducedMotionStyles],
     "data-skip-link-wrapper": true
-  }, (0, _core.jsx)("h5", null, skipLinksLabel), (0, _core.jsx)("ol", {
+  }, (0, _react.jsx)("h5", null, skipLinksLabel), (0, _react.jsx)("ol", {
     css: skipLinkListStyles
   }, sortSkipLinks(skipLinksData).map(function (_ref2) {
     var id = _ref2.id,
         skipLinkTitle = _ref2.skipLinkTitle;
-    return (0, _core.jsx)(SkipLink, {
+    return (0, _react.jsx)(SkipLink, {
       key: id,
       href: "#".concat(id),
       isFocusable: true,
@@ -179,16 +180,17 @@ var focusTargetRef = function focusTargetRef(href) {
 
     return false;
   };
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var SkipLink = function SkipLink(_ref3) {
   var href = _ref3.href,
       children = _ref3.children,
       isFocusable = _ref3.isFocusable,
       title = _ref3.title;
-  return (0, _core.jsx)("li", {
+  return (0, _react.jsx)("li", {
     css: skipLinkListItemStyles
-  }, (0, _core.jsx)("a", {
+  }, (0, _react.jsx)("a", {
     tabIndex: isFocusable ? 0 : -1,
     href: href,
     onClick: focusTargetRef(href),

package/dist/cjs/components/slots/banner.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 bannerStyles = (0, _core.css)({
+var bannerStyles = (0, _react2.css)({
   height: _constants.BANNER_HEIGHT,
   gridArea: _constants.BANNER
 });
-var bannerFixedStyles = (0, _core.css)({
+var bannerFixedStyles = (0, _react2.css)({
   position: 'fixed',
   zIndex: 2,
   top: 0,
   right: _constants.RIGHT_PANEL_WIDTH,
   left: _constants.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,
@@ -56,14 +64,14 @@ var Banner = function Banner(props) {
     };
   }, [bannerHeight]);
   (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: [bannerStyles, isFixed && bannerFixedStyles],
       className: className,
       "data-testid": testId,
       id: id
-    }, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _core.jsx)(_slotDimensions.default, {
+    }, (0, _utils.getPageLayoutSlotSelector)('banner')), (0, _react2.jsx)(_slotDimensions.default, {
       variableName: _constants.VAR_BANNER_HEIGHT,
       value: bannerHeight
     }), children);

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

@@ -5,22 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("../../common/constants");
 
 /** @jsx jsx */
-var contentStyles = (0, _core.css)({
+var contentStyles = (0, _react.css)({
   display: 'flex',
   height: '100%',
   position: 'relative',
   gridArea: _constants.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,
       testId = props.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: contentStyles
   }, children);

package/dist/cjs/components/slots/internal/left-sidebar-inner.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)());
 /**
  * This inner wrapper is required to allow the sidebar to be `position: fixed`.
  *
@@ -23,7 +23,7 @@ var prefersReducedMotionStyles = (0, _core.css)((0, _motion.prefersReducedMotion
  * out of its flex container and Main would stretch to occupy all the space.
  */
 
-var fixedInnerStyles = (0, _core.css)({
+var fixedInnerStyles = (0, _react.css)({
   width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
   position: 'fixed',
   top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
@@ -31,7 +31,7 @@ var fixedInnerStyles = (0, _core.css)({
   left: "".concat(_constants.LEFT_PANEL_WIDTH),
   transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
 });
-var fixedInnerFlyoutStyles = (0, _core.css)({
+var fixedInnerFlyoutStyles = (0, _react.css)({
   width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
 });
 /**
@@ -40,10 +40,10 @@ var fixedInnerFlyoutStyles = (0, _core.css)({
  * It will expand the page height to fit its content.
  */
 
-var staticInnerStyles = (0, _core.css)({
+var staticInnerStyles = (0, _react.css)({
   height: '100%'
 });
-var draggingStyles = (0, _core.css)({
+var draggingStyles = (0, _react.css)({
   cursor: 'ew-resize',
   // Make sure drag to resize does not animate as the user drags
   transition: 'none'
@@ -56,10 +56,11 @@ var LeftSidebarInner = function LeftSidebarInner(_ref) {
       _ref$isFlyoutOpen = _ref.isFlyoutOpen,
       isFlyoutOpen = _ref$isFlyoutOpen === void 0 ? false : _ref$isFlyoutOpen;
   var isDragging = (0, _hooks.useIsSidebarDragging)();
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [!isFixed && staticInnerStyles, isFixed && fixedInnerStyles, isFixed && isFlyoutOpen && fixedInnerFlyoutStyles, isDragging && draggingStyles, prefersReducedMotionStyles]
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = LeftSidebarInner;
 exports.default = _default;