@atlaskit/page-layout 1.3.8 → 1.3.10

package/dist/es2019/common/utils.js

@@ -1,75 +1,59 @@
 import { DEFAULT_LEFT_SIDEBAR_WIDTH, DIMENSIONS, LEFT_PANEL_WIDTH, PAGE_LAYOUT_LS_KEY, PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
 import safeLocalStorage from './safe-local-storage';
-const emptyGridState = DIMENSIONS.reduce((acc, currentValue) => ({ ...acc,
+const emptyGridState = DIMENSIONS.reduce((acc, currentValue) => ({
+  ...acc,
   [currentValue]: 0
 }), {});
-
 const mergeGridStateIntoStorage = (key, value) => {
   const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
-
   if (value !== null && typeof value === 'object') {
-    storageValue[key] = { ...storageValue[key],
+    storageValue[key] = {
+      ...storageValue[key],
       ...value
     };
   } else {
     storageValue[key] = value;
   }
-
   safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
 };
-
 const getGridStateFromStorage = key => {
   const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
   return storageValue[key];
 };
-
 const removeFromGridStateInStorage = (key, secondKey) => {
   const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
-
   if (secondKey && storageValue[key]) {
     delete storageValue[key][secondKey];
   } else {
     delete storageValue[key];
   }
-
   safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
 };
-
 const resolveDimension = (key, dimension = 0, shouldPersist = false) => {
   if (shouldPersist) {
     const cachedGridState = getGridStateFromStorage('gridState');
     return cachedGridState && Object.keys(cachedGridState).length > 0 && cachedGridState[key] ? cachedGridState[key] : dimension;
   }
-
   return dimension;
 };
-
 const getLeftPanelWidth = () => {
   if (typeof window === 'undefined') {
     return 0;
   }
-
   return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue(`--${LEFT_PANEL_WIDTH}`), 10) || 0;
 };
-
 const getLeftSidebarPercentage = (currentWidth, maxWidth) => {
   const total = (currentWidth - DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - DEFAULT_LEFT_SIDEBAR_WIDTH);
-
   if (total < 0) {
     return 0;
   }
-
   if (total > 1) {
     return 100;
   }
-
   return Math.floor(total * 100);
 };
-
 const getPageLayoutSlotSelector = slotName => ({
   [PAGE_LAYOUT_SLOT_SELECTOR]: slotName
 });
-
 const getPageLayoutSlotCSSSelector = slotName => `[${PAGE_LAYOUT_SLOT_SELECTOR}='${slotName}']`;
-
 export { emptyGridState, mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector };

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

@@ -1,10 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
-
 /**
  * Determines the color of the grab line.
  *
@@ -51,8 +50,8 @@ const grabAreaLineSelector = {
 };
 const grabAreaSelector = {
   [GRAB_AREA_SELECTOR]: true
-}; // TODO: Consider allowing this to be controlled using arrow keys
-
+};
+// TODO: Consider allowing this to be controlled using arrow keys
 const GrabArea = ({
   testId,
   isLeftSidebarCollapsed,
@@ -60,11 +59,11 @@ const GrabArea = ({
 }) => jsx("button", _extends({}, grabAreaSelector, {
   "data-testid": testId,
   type: "button",
-  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+  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
-
+}, grabAreaLineSelector)));
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default GrabArea;

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -26,7 +25,6 @@ const resizeControlStyles = css({
 const showResizeButtonStyles = css({
   '--ds--resize-button--opacity': 1
 });
-
 const ResizeControl = ({
   testId,
   overrides,
@@ -45,37 +43,33 @@ const ResizeControl = ({
     isLeftSidebarCollapsed,
     isResizing
   } = leftSidebarState;
-  const x = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]); // Distance of mouse from left sidebar onMouseDown
-
+  const x = useRef(leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH]);
+  // Distance of mouse from left sidebar onMouseDown
   const offset = useRef(0);
   const keyboardEventTimeout = useRef();
   const [isGrabAreaFocused, setIsGrabAreaFocused] = useState(false);
   const unbindEvents = useRef(null);
-
   const toggleSideBar = e => {
     if (isResizing) {
       return;
     }
-
     if (isLeftSidebarCollapsed) {
       expandLeftSidebar();
     } else {
       collapseLeftSidebar();
-    } // Bring focus to the resize button if the grab area is
-    // "clicked" using enter/space on keyboard.
-
+    }
 
+    // Bring focus to the resize button if the grab area is
+    // "clicked" using enter/space on keyboard.
     if (e && e.nativeEvent.detail === 0) {
       const resizeButton = document.querySelector(`[${RESIZE_BUTTON_SELECTOR}]`);
       resizeButton && resizeButton.focus();
     }
   };
-
   const onMouseDown = event => {
     if (isLeftSidebarCollapsed) {
       return;
     }
-
     offset.current = event.clientX - leftSidebarState[VAR_LEFT_SIDEBAR_WIDTH] - getLeftPanelWidth();
     unbindEvents.current = bindAll(document, [{
       type: 'mousemove',
@@ -85,16 +79,15 @@ const ResizeControl = ({
       listener: onMouseUp
     }]);
     document.documentElement.setAttribute(IS_SIDEBAR_DRAGGING, 'true');
-    const newLeftbarState = { ...leftSidebarState,
+    const newLeftbarState = {
+      ...leftSidebarState,
       isResizing: true
     };
     setLeftSidebarState(newLeftbarState);
     onResizeStart && onResizeStart(newLeftbarState);
   };
-
   const cancelDrag = shouldCollapse => {
     var _unbindEvents$current;
-
     onMouseMove.cancel();
     (_unbindEvents$current = unbindEvents.current) === null || _unbindEvents$current === void 0 ? void 0 : _unbindEvents$current.call(unbindEvents);
     unbindEvents.current = null;
@@ -102,7 +95,6 @@ const ResizeControl = ({
     offset.current = 0;
     collapseLeftSidebar(undefined, true);
   };
-
   const onMouseMove = rafSchd(event => {
     // Allow the sidebar to be 50% of the available page width
     const maxWidth = Math.round(window.innerWidth / 2);
@@ -111,44 +103,40 @@ const ResizeControl = ({
       leftSidebarWidth
     } = leftSidebarState;
     const invalidDrag = event.clientX < 0;
-
     if (invalidDrag) {
       cancelDrag();
     }
-
     const delta = Math.max(Math.min(event.clientX - leftSidebarWidth - leftPanelWidth, maxWidth - leftSidebarWidth - leftPanelWidth), COLLAPSED_LEFT_SIDEBAR_WIDTH - leftSidebarWidth - leftPanelWidth);
     x.current = Math.max(leftSidebarWidth + delta - offset.current, COLLAPSED_LEFT_SIDEBAR_WIDTH);
     document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${x.current}px`);
   });
-
   const cleanupAfterResize = () => {
     var _unbindEvents$current2;
-
     x.current = 0;
     offset.current = 0;
     (_unbindEvents$current2 = unbindEvents.current) === null || _unbindEvents$current2 === void 0 ? void 0 : _unbindEvents$current2.call(unbindEvents);
     unbindEvents.current = null;
   };
-
   let updatedLeftSidebarState = {};
-
   const onMouseUp = event => {
     if (isLeftSidebarCollapsed) {
       return;
     }
+    document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING);
 
-    document.documentElement.removeAttribute(IS_SIDEBAR_DRAGGING); // If it is dragged to below the threshold,
+    // If it is dragged to below the threshold,
     // collapse the navigation
-
     if (x.current < MIN_LEFT_SIDEBAR_DRAG_THRESHOLD) {
       document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${COLLAPSED_LEFT_SIDEBAR_WIDTH}px`);
       collapseLeftSidebar(undefined, true);
-    } // If it is dragged to position in between the
+    }
+    // If it is dragged to position in between the
     // min threshold and default width
     // expand the nav to the default width
     else if (x.current > MIN_LEFT_SIDEBAR_DRAG_THRESHOLD && x.current < DEFAULT_LEFT_SIDEBAR_WIDTH) {
       document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${DEFAULT_LEFT_SIDEBAR_WIDTH}px`);
-      updatedLeftSidebarState = { ...leftSidebarState,
+      updatedLeftSidebarState = {
+        ...leftSidebarState,
         isResizing: false,
         [VAR_LEFT_SIDEBAR_WIDTH]: DEFAULT_LEFT_SIDEBAR_WIDTH,
         lastLeftSidebarWidth: DEFAULT_LEFT_SIDEBAR_WIDTH
@@ -156,14 +144,14 @@ const ResizeControl = ({
       setLeftSidebarState(updatedLeftSidebarState);
     } else {
       // otherwise resize it to the desired width
-      updatedLeftSidebarState = { ...leftSidebarState,
+      updatedLeftSidebarState = {
+        ...leftSidebarState,
         isResizing: false,
         [VAR_LEFT_SIDEBAR_WIDTH]: x.current,
         lastLeftSidebarWidth: x.current
       };
       setLeftSidebarState(updatedLeftSidebarState);
     }
-
     requestAnimationFrame(() => {
       onMouseMove.cancel();
       setIsGrabAreaFocused(false);
@@ -171,27 +159,22 @@ const ResizeControl = ({
       cleanupAfterResize();
     });
   };
-
   const onKeyDown = event => {
     if (isLeftSidebarCollapsed || !isGrabAreaFocused) {
       return false;
     }
-
     const {
       key
     } = event;
     const isLeftOrTopArrow = key === 'ArrowLeft' || key === 'ArrowUp' || key === 'Left' || key === 'Up';
     const isRightOrBottomArrow = key === 'ArrowRight' || key === 'ArrowDown' || key === 'Right' || key === 'Down';
     const isSpaceOrEnter = key === 'Enter' || key === 'Spacebar' || key === ' ';
-
     if (isSpaceOrEnter) {
       toggleSideBar(event);
       event.preventDefault();
     }
-
     if (isLeftOrTopArrow || isRightOrBottomArrow) {
       event.preventDefault(); // prevent content scroll
-
       onResizeStart && onResizeStart(leftSidebarState);
       const step = 10;
       const stepValue = isLeftOrTopArrow ? -step : step;
@@ -201,7 +184,6 @@ const ResizeControl = ({
       const maxWidth = Math.round(window.innerWidth / 2) - getLeftPanelWidth();
       const hasModifierKey = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
       let width = leftSidebarWidth + stepValue;
-
       if (width <= DEFAULT_LEFT_SIDEBAR_WIDTH) {
         width = DEFAULT_LEFT_SIDEBAR_WIDTH;
         document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${DEFAULT_LEFT_SIDEBAR_WIDTH - 20}px`);
@@ -210,15 +192,16 @@ const ResizeControl = ({
         document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${maxWidth + 20}px`);
       } else if (hasModifierKey) {
         width = isRightOrBottomArrow ? maxWidth : DEFAULT_LEFT_SIDEBAR_WIDTH;
-      } // Nesting the setTimeout within requestAnimationFrame helps
-      // the browser schedule the setTimeout call in an efficient manner
-
+      }
 
+      // Nesting the setTimeout within requestAnimationFrame helps
+      // the browser schedule the setTimeout call in an efficient manner
       requestAnimationFrame(() => {
         keyboardEventTimeout.current = window.setTimeout(() => {
           keyboardEventTimeout.current && clearTimeout(keyboardEventTimeout.current);
           document.documentElement.style.setProperty(`--${VAR_LEFT_SIDEBAR_WIDTH}`, `${width}px`);
-          const updatedLeftSidebarState = { ...leftSidebarState,
+          const updatedLeftSidebarState = {
+            ...leftSidebarState,
             [VAR_LEFT_SIDEBAR_WIDTH]: width,
             lastLeftSidebarWidth: width
           };
@@ -228,7 +211,6 @@ const ResizeControl = ({
       });
     }
   };
-
   const onFocus = useCallback(() => {
     setIsGrabAreaFocused(true);
   }, []);
@@ -238,17 +220,18 @@ const ResizeControl = ({
   const resizeButton = {
     render: (Component, props) => jsx(Component, props),
     ...(overrides && overrides.ResizeButton)
-  }; // This width is calculated once only on mount.
+  };
+
+  // This width is calculated once only on mount.
   // This means resizing the window will cause this value to be incorrect for screen reader users,
   // however this comes with a substantial performance gain and so is considered acceptable.
-
   const maxAriaWidth = useMemo(() => {
     const innerWidth = typeof window === 'undefined' ? 0 : window.innerWidth;
     return Math.round(innerWidth / 2) - getLeftPanelWidth();
   }, []);
   const leftSidebarPercentageExpanded = getLeftSidebarPercentage(leftSidebarState.leftSidebarWidth, maxAriaWidth);
-  /* eslint-disable jsx-a11y/role-supports-aria-props */
 
+  /* eslint-disable jsx-a11y/role-supports-aria-props */
   return jsx("div", _extends({}, cssSelector, {
     css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
@@ -274,7 +257,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
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default ResizeControl;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
 import { easeOut } from '@atlaskit/motion/curves';
@@ -24,7 +24,6 @@ const resizeIconButtonStyles = css({
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   border: 0,
   borderRadius: '50%',
-
   /**
    * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
    * This shadow needs further investigation,
@@ -34,7 +33,6 @@ const resizeIconButtonStyles = css({
   boxShadow: `0 0 0 1px ${N30A}, 0 2px 4px 1px ${N30A}`,
   color: `var(--ds-text-subtle, ${N200})`,
   cursor: 'pointer',
-
   /**
    * The fallback value of 0 ensures that the button is hidden by default,
    * unless some parent (or the button itself) overrides it.
@@ -62,13 +60,10 @@ const resizeIconButtonExpandedStyles = css({
   transform: 'rotate(180deg)',
   transformOrigin: 7
 });
-
 const preventDefault = event => event.preventDefault();
-
 const cssSelector = {
   [RESIZE_BUTTON_SELECTOR]: true
 };
-
 const ResizeButton = ({
   isLeftSidebarCollapsed,
   label,
@@ -80,16 +75,17 @@ const ResizeButton = ({
   "aria-label": label,
   type: "button",
   css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
-  "data-testid": testId // Prevents focus staying attached to the button
+  "data-testid": testId
+  // Prevents focus staying attached to the button
   // when pressed
   ,
-  onMouseDown: preventDefault // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
+  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
-
+}));
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default ResizeButton;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { easeOut } from '@atlaskit/motion';
 import { useIsSidebarDragging } from '../../common/hooks';
@@ -29,7 +30,6 @@ const draggingStyles = css({
   background: `var(--ds-background-neutral-subtle, ${`linear-gradient(${direction}, ${colorStops})`})`,
   opacity: 0.8
 });
-
 const Shadow = ({
   testId
 }) => {
@@ -38,7 +38,7 @@ const Shadow = ({
     "data-testid": testId,
     css: [shadowStyles, isDragging && draggingStyles]
   });
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default Shadow;

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

@@ -1,6 +1,6 @@
 /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
 import { N30A, N60A } from '@atlaskit/theme/colors';
@@ -19,7 +19,6 @@ const skipLinkStyles = css({
   borderRadius: 3,
   boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`})`,
   opacity: 0,
-
   /* Do the transform when focused */
   transform: 'translateY(-50%)',
   transition: `transform 0.3s ${easeOut}`,
@@ -46,14 +45,13 @@ const skipLinkListStyles = css({
 const skipLinkListItemStyles = css({
   marginTop: 0
 });
-
 const assignIndex = (num, arr) => {
   if (!arr.includes(num)) {
     return num;
   }
-
   return assignIndex(num + 1, arr);
 };
+
 /**
  * The default label will be used when the `skipLinksLabel` attribute is not
  * provided or the attribute is an empty string. If a string comprised only of
@@ -61,51 +59,41 @@ const assignIndex = (num, arr) => {
  * default label will still be used in `title` attribute of the skip links
  * themselves.
  */
-
-
 export const SkipLinkWrapper = ({
   skipLinksLabel
 }) => {
   const {
     skipLinksData
   } = useSkipLinks();
-
   if (skipLinksData.length === 0) {
     return null;
   }
-
   const sortSkipLinks = arr => {
     const customLinks = arr.filter(link => Number.isInteger(link.listIndex));
-
     if (customLinks.length === 0) {
       return arr;
     }
-
     const usedIndexes = customLinks.map(a => a.listIndex);
     const regularLinksWithIdx = arr.filter(link => link.listIndex === undefined).map((link, idx, currArr) => {
       const listIndex = assignIndex(idx, usedIndexes);
       usedIndexes.push(listIndex);
-      return { ...link,
+      return {
+        ...link,
         listIndex
       };
     });
     return [...customLinks, ...regularLinksWithIdx].sort((a, b) => a.listIndex - b.listIndex);
   };
-
   const escapeHandler = event => {
     if (event.keyCode === 27) {
       const container = document.querySelector(`[${PAGE_LAYOUT_CONTAINER_SELECTOR}="true"]`);
-
       if (container !== null) {
         container.focus();
       }
     }
   };
-
   const attachEscHandler = () => window.addEventListener('keydown', escapeHandler, false);
-
   const removeEscHandler = () => window.removeEventListener('keydown', escapeHandler, false);
-
   const emptyLabelOverride = !!(skipLinksLabel !== null && skipLinksLabel !== void 0 && skipLinksLabel.match(/^\s+$/));
   const label = skipLinksLabel || DEFAULT_I18N_PROPS_SKIP_LINKS;
   return jsx("div", {
@@ -127,41 +115,38 @@ export const SkipLinkWrapper = ({
     title: emptyLabelOverride ? `${DEFAULT_I18N_PROPS_SKIP_LINKS} ${skipLinkTitle}` : `${label} ${skipLinkTitle}`
   }, skipLinkTitle))));
 };
-
 const handleBlur = event => {
   // @ts-ignore
-  event.target.removeAttribute('tabindex'); // @ts-ignore
-
+  event.target.removeAttribute('tabindex');
+  // @ts-ignore
   event.target.removeEventListener('blur', handleBlur);
 };
-
 const focusTargetRef = href => event => {
   event.preventDefault();
-  const targetRef = document.querySelector(href); // @ts-ignore
+  const targetRef = document.querySelector(href);
 
-  const key = event.which || event.keycode; // if it is a keypress and the key is not
+  // @ts-ignore
+  const key = event.which || event.keycode;
+  // if it is a keypress and the key is not
   // space or enter, just ignore it.
-
   if (key && key !== 13 && key !== 32) {
     return;
   }
-
   if (targetRef) {
-    targetRef.setAttribute('tabindex', '-1'); // @ts-ignore
-
-    targetRef.addEventListener('blur', handleBlur); // @ts-ignore
-
+    targetRef.setAttribute('tabindex', '-1');
+    // @ts-ignore
+    targetRef.addEventListener('blur', handleBlur);
+    // @ts-ignore
     targetRef.focus();
     document.activeElement && document.activeElement.scrollIntoView({
       behavior: 'smooth'
     });
     window.scrollTo(0, 0);
   }
-
   return false;
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const SkipLink = ({
   href,
   children,

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -19,6 +18,7 @@ const bannerFixedStyles = css({
   right: RIGHT_PANEL_WIDTH,
   left: LEFT_PANEL_WIDTH
 });
+
 /**
  * __Banner__
  *
@@ -27,7 +27,6 @@ const bannerFixedStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const Banner = props => {
   const {
     children,
@@ -62,5 +61,4 @@ const Banner = props => {
     value: bannerHeight
   }), children));
 };
-
 export default Banner;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { CONTENT } from '../../common/constants';
 const contentStyles = css({
@@ -7,6 +8,7 @@ const contentStyles = css({
   position: 'relative',
   gridArea: CONTENT
 });
+
 /**
  * __Content__
  *
@@ -15,7 +17,6 @@ const contentStyles = css({
  * - [Examples](https://atlassian.design/components/page-layout/examples)
  * - [Code](https://atlassian.design/components/page-layout/code)
  */
-
 const Content = props => {
   const {
     children,
@@ -26,5 +27,4 @@ const Content = props => {
     css: contentStyles
   }, children);
 };
-
 export default Content;