@atlaskit/page-layout 1.0.7 → 1.2.1

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

@@ -1,116 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resizeableChildrenWrapperStyle = exports.leftSidebarStyles = exports.fixedLeftSidebarInnerStyles = exports.fixedChildrenWrapperStyle = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _motion = require("@atlaskit/motion");
-
-var _constants = require("../../common/constants");
-
-var _utils = require("../../common/utils");
-
-var _styles = require("./styles");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-// This inner wrapper is required to allow the
-// sidebar to be position: fixed. If we were to apply position: fixed
-// to the outer wrapper, it will be popped out of it's flex container
-// and Main would stretch to occupy all the space.
-var fixedLeftSidebarInnerStyles = function fixedLeftSidebarInnerStyles(isFixed, isFlyoutOpen, isLeftSidebarCollapsed) {
-  return _objectSpread(_objectSpread(_objectSpread({}, _styles.focusStyles), isFixed ? _objectSpread((0, _defineProperty2.default)({
-    position: 'fixed',
-    top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
-    left: "".concat(_constants.LEFT_PANEL_WIDTH),
-    bottom: 0,
-    width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
-    transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s")
-  }, "[".concat(_constants.IS_SIDEBAR_DRAGGING, "] &"), {
-    // Make sure drag to resize does not animate as the user drags
-    transition: 'none',
-    cursor: 'ew-resize'
-  }), isFlyoutOpen && {
-    width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
-  }) : {
-    height: '100%'
-  }), (0, _motion.prefersReducedMotion)());
-};
-
-exports.fixedLeftSidebarInnerStyles = fixedLeftSidebarInnerStyles;
-
-var leftSidebarStyles = function leftSidebarStyles(isFixed, isFlyoutOpen) {
-  var _objectSpread3;
-
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {
-    position: 'relative',
-    width: "".concat(_constants.LEFT_SIDEBAR_WIDTH),
-    transition: "width ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s"),
-    zIndex: 1,
-    // Make resize affordance appear on top of content
-    marginLeft: 0
-  }, (0, _defineProperty2.default)(_objectSpread3, "[".concat(_constants.IS_SIDEBAR_DRAGGING, "] &"), {
-    // Make sure drag to resize does not animate as the user drags
-    transition: 'none',
-    cursor: 'ew-resize'
-  }), (0, _defineProperty2.default)(_objectSpread3, "&:hover [".concat(_constants.RESIZE_BUTTON_SELECTOR, "]"), {
-    opacity: 1
-  }), _objectSpread3), isFlyoutOpen && {
-    width: _constants.LEFT_SIDEBAR_FLYOUT_WIDTH
-  }), isFlyoutOpen && !isFixed && (0, _defineProperty2.default)({}, "& + ".concat((0, _utils.getPageLayoutSlotCSSSelector)('main')), {
-    // adds a negative left margin to main
-    // which transitions at the same speed
-    // with which left sidebars width increases
-    // This give an illusion that the flyout is appearing
-    // on top of the main content, while main remains in place
-    marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
-  })), isFixed && _objectSpread({
-    // in fixed mode this element's child is taken out of the document flow
-    // It doesn't take up the width as expected
-    // psuedo element forces it to take up the necessary width
-    '&::after': {
-      content: "''",
-      display: 'inline-block',
-      width: "".concat(_constants.LEFT_SIDEBAR_WIDTH)
-    }
-  }, isFlyoutOpen && {
-    width: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH
-  })), _styles.focusStyles), (0, _motion.prefersReducedMotion)());
-};
-
-exports.leftSidebarStyles = leftSidebarStyles;
-
-var resizeableChildrenWrapperStyle = function resizeableChildrenWrapperStyle(isFlyoutOpen, isLeftSidebarCollapsed, collapsedState) {
-  return _objectSpread((0, _defineProperty2.default)({
-    visibility: 'visible',
-    transition: 'none',
-    opacity: 1,
-    overflow: 'hidden auto',
-    height: '100%'
-  }, "[".concat(_constants.IS_SIDEBAR_COLLAPSING, "] &"), hideLeftSidebarContents), (isLeftSidebarCollapsed || collapsedState) && !isFlyoutOpen && hideLeftSidebarContents);
-};
-
-exports.resizeableChildrenWrapperStyle = resizeableChildrenWrapperStyle;
-
-var hideLeftSidebarContents = _objectSpread({
-  // the transition duration is intentionally set to 0ms
-  // transition is being used here to delay the setting of
-  // opacity and visibility so that it syncs collapsing sidebar.
-  transition: "opacity 0ms linear, visibility 0ms linear",
-  transitionDelay: "".concat(_constants.TRANSITION_DURATION - 100, "ms"),
-  opacity: 0,
-  visibility: 'hidden'
-}, (0, _motion.prefersReducedMotion)());
-
-var fixedChildrenWrapperStyle = {
-  height: '100%',
-  minWidth: '240px'
-};
-exports.fixedChildrenWrapperStyle = fixedChildrenWrapperStyle;

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

@@ -1,154 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.topNavigationStyles = exports.rightSidebarStyles = exports.rightPanelStyles = exports.mainStyles = exports.leftPanelStyles = exports.gridStyles = exports.focusStyles = exports.fixedRightSidebarInnerStyles = exports.contentStyles = exports.bannerStyles = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _core = require("@emotion/core");
-
-var _motion = require("@atlaskit/motion");
-
-var _constants = require("../../common/constants");
-
-var _templateObject, _templateObject2;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
-var gridStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n\n  display: grid;\n  height: 100%;\n  // prettier-ignore\n  grid-template-columns: ", " minmax(0, 1fr) ", ";\n  grid-template-rows:\n    ", " ", "\n    auto;\n  grid-template-areas: ", ";\n"])), _constants.LEFT_PANEL_WIDTH, _constants.RIGHT_PANEL_WIDTH, _constants.BANNER_HEIGHT, _constants.TOP_NAVIGATION_HEIGHT, gridTemplateAreas);
-exports.gridStyles = gridStyles;
-var contentStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: ", ";\n  display: flex;\n  height: 100%;\n  position: relative;\n"])), _constants.CONTENT);
-exports.contentStyles = contentStyles;
-var focusStyles = {
-  '&:focus': {
-    outline: 'none',
-    '&  [data-wrapper-element]': {
-      outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
-    },
-    '& > div:not([data-skip-link-wrapper])': {
-      outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
-    }
-  }
-};
-exports.focusStyles = focusStyles;
-
-var bannerStyles = function bannerStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: "".concat(_constants.BANNER),
-    height: "".concat(_constants.BANNER_HEIGHT)
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    top: 0,
-    left: "".concat(_constants.LEFT_PANEL_WIDTH),
-    right: "".concat(_constants.RIGHT_PANEL_WIDTH),
-    zIndex: 2
-  });
-};
-
-exports.bannerStyles = bannerStyles;
-
-var topNavigationStyles = function topNavigationStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: "".concat(_constants.TOP_NAVIGATION),
-    height: "".concat(_constants.TOP_NAVIGATION_HEIGHT)
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    top: "".concat(_constants.BANNER_HEIGHT),
-    left: "".concat(_constants.LEFT_PANEL_WIDTH),
-    right: "".concat(_constants.RIGHT_PANEL_WIDTH),
-    zIndex: 2
-  });
-};
-
-exports.topNavigationStyles = topNavigationStyles;
-
-var mainStyles = _objectSpread(_objectSpread({}, focusStyles), {}, (0, _defineProperty2.default)({
-  // Prevent flex container from blowing
-  // up when there's super wide content
-  flexGrow: 1,
-  minWidth: 0,
-  // Transition negative margin on main
-  // in sync with the increase in width of
-  // leftSidebar
-  transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_motion.easeOut, " 0s"),
-  marginLeft: 0
-}, "[".concat(_constants.IS_SIDEBAR_DRAGGING, "] &"), {
-  // Make sure drag to resize remains snappy
-  transition: 'none',
-  cursor: 'ew-resize'
-}), (0, _motion.prefersReducedMotion)()); // This inner wrapper is required to allow the
-// sidebar to be position: fixed. If we were to apply position: fixed
-// to the outer wrapper, it will be popped out of it's flex container
-// and Main would stretch to occupy all the space.
-
-
-exports.mainStyles = mainStyles;
-
-var fixedRightSidebarInnerStyles = function fixedRightSidebarInnerStyles(isFixed) {
-  return _objectSpread(_objectSpread({}, focusStyles), isFixed ? {
-    position: 'fixed',
-    top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
-    right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
-    bottom: 0
-  } : {
-    height: '100%'
-  });
-};
-
-exports.fixedRightSidebarInnerStyles = fixedRightSidebarInnerStyles;
-
-var rightSidebarStyles = function rightSidebarStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    width: "".concat(_constants.RIGHT_SIDEBAR_WIDTH)
-  }, focusStyles), isFixed && {
-    // in fixed mode this element's child is taken out of the document flow
-    // It doesn't take up the width as expected
-    // psuedo element forces it to take up the necessary width
-    '&::after': {
-      content: "''",
-      display: 'inline-block',
-      width: "".concat(_constants.RIGHT_SIDEBAR_WIDTH)
-    }
-  });
-};
-
-exports.rightSidebarStyles = rightSidebarStyles;
-
-var rightPanelStyles = function rightPanelStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: _constants.RIGHT_PANEL
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    width: "".concat(_constants.RIGHT_PANEL_WIDTH),
-    top: 0,
-    bottom: 0,
-    right: 0
-  });
-};
-
-exports.rightPanelStyles = rightPanelStyles;
-
-var leftPanelStyles = function leftPanelStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: _constants.LEFT_PANEL
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    width: "".concat(_constants.LEFT_PANEL_WIDTH),
-    top: 0,
-    bottom: 0,
-    left: 0
-  });
-};
-
-exports.leftPanelStyles = leftPanelStyles;

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

@@ -1,136 +0,0 @@
-import { easeOut, mediumDurationMs, smallDurationMs } from '@atlaskit/motion';
-import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
-import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR, IS_SIDEBAR_DRAGGING, RESIZE_BUTTON_SELECTOR } from '../../common/constants';
-export const resizeControlCSS = (setIsGrabAreaFocused, isLeftSidebarCollapsed) => ({
-  left: '100%',
-  top: 0,
-  bottom: 0,
-  position: 'absolute',
-  outline: 'none',
-  [`[${GRAB_AREA_SELECTOR}]:enabled`]: {
-    [`&:hover [${GRAB_AREA_LINE_SELECTOR}]`]: {
-      backgroundColor: B100
-    },
-    [`&:active [${GRAB_AREA_LINE_SELECTOR}] , &:focus [${GRAB_AREA_LINE_SELECTOR}]`]: {
-      backgroundColor: B200
-    },
-    [`&:hover [${RESIZE_BUTTON_SELECTOR}]:not(:focus):not(:hover)`]: {
-      color: B100
-    },
-    [`&:hover [${RESIZE_BUTTON_SELECTOR}]`]: {
-      opacity: 1
-    }
-  },
-  [`[${RESIZE_BUTTON_SELECTOR}]`]: {
-    opacity: setIsGrabAreaFocused || isLeftSidebarCollapsed ? 1 : 0
-  }
-});
-export const resizeIconButtonCSS = isCollapsed => ({
-  backgroundColor: N0,
-  position: 'absolute',
-  top: 32,
-  left: 0,
-  transform: 'translateX(-50%)',
-  border: 0,
-  borderRadius: '50%',
-  boxShadow: `0 0 0 1px ${N30A}, 0 2px 4px 1px ${N30A}`,
-  color: N200,
-  cursor: 'pointer',
-  height: 24,
-  opacity: 0,
-  outline: 0,
-  padding: 0,
-  transition: `
-    background-color ${smallDurationMs}ms linear,
-    color ${smallDurationMs}ms linear,
-    opacity ${mediumDurationMs}ms ${easeOut}
-  `,
-  width: 24,
-  ':hover': {
-    backgroundColor: B100,
-    color: N0,
-    opacity: 1
-  },
-  ':active': {
-    backgroundColor: B200,
-    color: N0,
-    opacity: 1
-  },
-  ':focus': {
-    backgroundColor: B200,
-    color: N0,
-    opacity: 1
-  },
-  ...(!isCollapsed && {
-    transform: 'rotate(180deg)',
-    transformOrigin: 7,
-    opacity: 1
-  }),
-  [`[${IS_SIDEBAR_DRAGGING}] &`]: {
-    opacity: 1
-  }
-});
-export const grabAreaCSS = isLeftSidebarCollapsed => ({
-  cursor: 'ew-resize',
-  height: '100%',
-  width: '24px',
-  padding: 0,
-  border: 0,
-  backgroundColor: 'transparent',
-  ['&::-moz-focus-inner']: {
-    border: 0
-  },
-  [':focus']: {
-    outline: 0
-  },
-  ...(isLeftSidebarCollapsed && {
-    padding: 0,
-    border: 0,
-    backgroundColor: 'transparent',
-    cursor: 'default'
-  })
-});
-export const lineCSS = isLeftSidebarCollapsed => ({
-  display: 'block',
-  height: '100%',
-  transition: 'background-color 200ms',
-  width: 2,
-  ...(isLeftSidebarCollapsed && {
-    '&&': {
-      backgroundColor: 'transparent'
-    }
-  })
-});
-export const increaseHitArea = {
-  position: 'absolute',
-  left: -8,
-  right: -12,
-  bottom: -8,
-  top: -8
-};
-const colorStops = `
-    rgba(0, 0, 0, 0.2) 0px,
-    rgba(0, 0, 0, 0.2) 1px,
-    rgba(0, 0, 0, 0.1) 1px,
-    rgba(0, 0, 0, 0) 100%
-  `;
-const direction = 'to left';
-const transitionDuration = '0.22s';
-export const shadowCSS = {
-  background: `linear-gradient(${direction}, ${colorStops})`,
-  bottom: 0,
-  top: 0,
-  left: -1,
-  opacity: 0.5,
-  pointerEvents: 'none',
-  position: 'absolute',
-  transitionDuration,
-  transitionProperty: 'left, opacity, width',
-  transitionTimingFunction: easeOut,
-  width: 3,
-  [`[${IS_SIDEBAR_DRAGGING}] &`]: {
-    opacity: 0.8,
-    width: 6,
-    left: -6
-  }
-};

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

@@ -1,41 +0,0 @@
-import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { N30A, N60A } from '@atlaskit/theme/colors';
-export const skipLinkStyles = {
-  zIndex: -1,
-  left: -999999,
-  position: 'fixed',
-  opacity: 0,
-  background: 'white',
-  border: 'none',
-  padding: '0.8rem 1rem',
-  boxShadow: `0 0 0 1px ${N30A}, 0 2px 10px ${N30A}, 0 0 20px -4px ${N60A}`,
-  borderRadius: '3px',
-  margin: 10,
-
-  /* Do the transform when focused */
-  ...prefersReducedMotion(),
-  transform: 'translateY(-50%)',
-  transition: `transform 0.3s ${easeOut}`,
-  ':focus-within': {
-    transform: 'translateY(0%)',
-    opacity: 1,
-    left: 0,
-
-    /* Max z-index is 2147483647. Skip links always be on top,
-              but giving a few digits extra space just in case there's
-              a future need. */
-    zIndex: 2147483640
-  },
-  '& > span': {
-    fontWeight: 'bold'
-  },
-  '> ol': {
-    listStyleType: 'none',
-    listStylePosition: 'outside',
-    paddingLeft: 0,
-    marginTop: '4px',
-    '> li': {
-      marginTop: 0
-    }
-  }
-};

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

@@ -1,96 +0,0 @@
-import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { BANNER_HEIGHT, COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, IS_SIDEBAR_COLLAPSING, IS_SIDEBAR_DRAGGING, LEFT_PANEL_WIDTH, LEFT_SIDEBAR_FLYOUT_WIDTH, LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT } from '../../common/constants';
-import { getPageLayoutSlotCSSSelector } from '../../common/utils';
-import { focusStyles } from './styles'; // This inner wrapper is required to allow the
-// sidebar to be position: fixed. If we were to apply position: fixed
-// to the outer wrapper, it will be popped out of it's flex container
-// and Main would stretch to occupy all the space.
-
-export const fixedLeftSidebarInnerStyles = (isFixed, isFlyoutOpen, isLeftSidebarCollapsed) => ({ ...focusStyles,
-  ...(isFixed ? {
-    position: 'fixed',
-    top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
-    left: `${LEFT_PANEL_WIDTH}`,
-    bottom: 0,
-    width: `${LEFT_SIDEBAR_WIDTH}`,
-    transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`,
-    [`[${IS_SIDEBAR_DRAGGING}] &`]: {
-      // Make sure drag to resize does not animate as the user drags
-      transition: 'none',
-      cursor: 'ew-resize'
-    },
-    ...(isFlyoutOpen && {
-      width: LEFT_SIDEBAR_FLYOUT_WIDTH
-    })
-  } : {
-    height: '100%'
-  }),
-  ...prefersReducedMotion()
-});
-export const leftSidebarStyles = (isFixed, isFlyoutOpen) => ({
-  position: 'relative',
-  width: `${LEFT_SIDEBAR_WIDTH}`,
-  transition: `width ${TRANSITION_DURATION}ms ${easeOut} 0s`,
-  zIndex: 1,
-  // Make resize affordance appear on top of content
-  marginLeft: 0,
-  [`[${IS_SIDEBAR_DRAGGING}] &`]: {
-    // Make sure drag to resize does not animate as the user drags
-    transition: 'none',
-    cursor: 'ew-resize'
-  },
-  [`&:hover [${RESIZE_BUTTON_SELECTOR}]`]: {
-    opacity: 1
-  },
-  ...(isFlyoutOpen && {
-    width: LEFT_SIDEBAR_FLYOUT_WIDTH
-  }),
-  ...(isFlyoutOpen && !isFixed && {
-    [`& + ${getPageLayoutSlotCSSSelector('main')}`]: {
-      // adds a negative left margin to main
-      // which transitions at the same speed
-      // with which left sidebars width increases
-      // This give an illusion that the flyout is appearing
-      // on top of the main content, while main remains in place
-      marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
-    }
-  }),
-  ...(isFixed && {
-    // in fixed mode this element's child is taken out of the document flow
-    // It doesn't take up the width as expected
-    // psuedo element forces it to take up the necessary width
-    '&::after': {
-      content: "''",
-      display: 'inline-block',
-      width: `${LEFT_SIDEBAR_WIDTH}`
-    },
-    ...(isFlyoutOpen && {
-      width: COLLAPSED_LEFT_SIDEBAR_WIDTH
-    })
-  }),
-  ...focusStyles,
-  ...prefersReducedMotion()
-});
-export const resizeableChildrenWrapperStyle = (isFlyoutOpen, isLeftSidebarCollapsed, collapsedState) => ({
-  visibility: 'visible',
-  transition: 'none',
-  opacity: 1,
-  overflow: 'hidden auto',
-  height: '100%',
-  [`[${IS_SIDEBAR_COLLAPSING}] &`]: hideLeftSidebarContents,
-  ...((isLeftSidebarCollapsed || collapsedState) && !isFlyoutOpen && hideLeftSidebarContents)
-});
-const hideLeftSidebarContents = {
-  // the transition duration is intentionally set to 0ms
-  // transition is being used here to delay the setting of
-  // opacity and visibility so that it syncs collapsing sidebar.
-  transition: `opacity 0ms linear, visibility 0ms linear`,
-  transitionDelay: `${TRANSITION_DURATION - 100}ms`,
-  opacity: 0,
-  visibility: 'hidden',
-  ...prefersReducedMotion()
-};
-export const fixedChildrenWrapperStyle = {
-  height: '100%',
-  minWidth: '240px'
-};

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

@@ -1,130 +0,0 @@
-import { css } from '@emotion/core';
-import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { BANNER, BANNER_HEIGHT, CONTENT, IS_SIDEBAR_DRAGGING, LEFT_PANEL, LEFT_PANEL_WIDTH, RIGHT_PANEL, RIGHT_PANEL_WIDTH, RIGHT_SIDEBAR_WIDTH, TOP_NAVIGATION, TOP_NAVIGATION_HEIGHT, TRANSITION_DURATION } from '../../common/constants';
-const gridTemplateAreas = `
-  "${LEFT_PANEL} ${BANNER} ${RIGHT_PANEL}"
-  "${LEFT_PANEL} ${TOP_NAVIGATION} ${RIGHT_PANEL}"
-  "${LEFT_PANEL} ${CONTENT} ${RIGHT_PANEL}"
- `;
-export const gridStyles = css`
-  outline: none;
-
-  display: grid;
-  height: 100%;
-  // prettier-ignore
-  grid-template-columns: ${LEFT_PANEL_WIDTH} minmax(0, 1fr) ${RIGHT_PANEL_WIDTH};
-  grid-template-rows:
-    ${BANNER_HEIGHT} ${TOP_NAVIGATION_HEIGHT}
-    auto;
-  grid-template-areas: ${gridTemplateAreas};
-`;
-export const contentStyles = css`
-  grid-area: ${CONTENT};
-  display: flex;
-  height: 100%;
-  position: relative;
-`;
-export const focusStyles = {
-  '&:focus': {
-    outline: 'none',
-    '&  [data-wrapper-element]': {
-      outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
-    },
-    '& > div:not([data-skip-link-wrapper])': {
-      outline: 'none',
-      boxShadow: '0px 0px 0px 2px inset #4C9AFF'
-    }
-  }
-};
-export const bannerStyles = isFixed => ({
-  gridArea: `${BANNER}`,
-  height: `${BANNER_HEIGHT}`,
-  ...focusStyles,
-  ...(isFixed && {
-    position: 'fixed',
-    top: 0,
-    left: `${LEFT_PANEL_WIDTH}`,
-    right: `${RIGHT_PANEL_WIDTH}`,
-    zIndex: 2
-  })
-});
-export const topNavigationStyles = isFixed => ({
-  gridArea: `${TOP_NAVIGATION}`,
-  height: `${TOP_NAVIGATION_HEIGHT}`,
-  ...focusStyles,
-  ...(isFixed && {
-    position: 'fixed',
-    top: `${BANNER_HEIGHT}`,
-    left: `${LEFT_PANEL_WIDTH}`,
-    right: `${RIGHT_PANEL_WIDTH}`,
-    zIndex: 2
-  })
-});
-export const mainStyles = { ...focusStyles,
-  // Prevent flex container from blowing
-  // up when there's super wide content
-  flexGrow: 1,
-  minWidth: 0,
-  // Transition negative margin on main
-  // in sync with the increase in width of
-  // leftSidebar
-  transition: `margin-left ${TRANSITION_DURATION}ms ${easeOut} 0s`,
-  marginLeft: 0,
-  [`[${IS_SIDEBAR_DRAGGING}] &`]: {
-    // Make sure drag to resize remains snappy
-    transition: 'none',
-    cursor: 'ew-resize'
-  },
-  ...prefersReducedMotion()
-}; // This inner wrapper is required to allow the
-// sidebar to be position: fixed. If we were to apply position: fixed
-// to the outer wrapper, it will be popped out of it's flex container
-// and Main would stretch to occupy all the space.
-
-export const fixedRightSidebarInnerStyles = isFixed => ({ ...focusStyles,
-  ...(isFixed ? {
-    position: 'fixed',
-    top: `calc(${BANNER_HEIGHT} + ${TOP_NAVIGATION_HEIGHT})`,
-    right: `calc(${RIGHT_PANEL_WIDTH})`,
-    bottom: 0
-  } : {
-    height: '100%'
-  })
-});
-export const rightSidebarStyles = isFixed => ({
-  width: `${RIGHT_SIDEBAR_WIDTH}`,
-  ...focusStyles,
-  ...(isFixed && {
-    // in fixed mode this element's child is taken out of the document flow
-    // It doesn't take up the width as expected
-    // psuedo element forces it to take up the necessary width
-    '&::after': {
-      content: "''",
-      display: 'inline-block',
-      width: `${RIGHT_SIDEBAR_WIDTH}`
-    }
-  })
-});
-export const rightPanelStyles = isFixed => ({
-  gridArea: RIGHT_PANEL,
-  ...focusStyles,
-  ...(isFixed && {
-    position: 'fixed',
-    width: `${RIGHT_PANEL_WIDTH}`,
-    top: 0,
-    bottom: 0,
-    right: 0
-  })
-});
-export const leftPanelStyles = isFixed => ({
-  gridArea: LEFT_PANEL,
-  ...focusStyles,
-  ...(isFixed && {
-    position: 'fixed',
-    width: `${LEFT_PANEL_WIDTH}`,
-    top: 0,
-    bottom: 0,
-    left: 0
-  })
-});