@atlaskit/page-layout 1.0.7 → 1.2.1

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

@@ -1,131 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _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 { 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 var resizeControlCSS = function resizeControlCSS(setIsGrabAreaFocused, isLeftSidebarCollapsed) {
-  var _$concat, _ref;
-
-  return _ref = {
-    left: '100%',
-    top: 0,
-    bottom: 0,
-    position: 'absolute',
-    outline: 'none'
-  }, _defineProperty(_ref, "[".concat(GRAB_AREA_SELECTOR, "]:enabled"), (_$concat = {}, _defineProperty(_$concat, "&:hover [".concat(GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: B100
-  }), _defineProperty(_$concat, "&:active [".concat(GRAB_AREA_LINE_SELECTOR, "] , &:focus [").concat(GRAB_AREA_LINE_SELECTOR, "]"), {
-    backgroundColor: B200
-  }), _defineProperty(_$concat, "&:hover [".concat(RESIZE_BUTTON_SELECTOR, "]:not(:focus):not(:hover)"), {
-    color: B100
-  }), _defineProperty(_$concat, "&:hover [".concat(RESIZE_BUTTON_SELECTOR, "]"), {
-    opacity: 1
-  }), _$concat)), _defineProperty(_ref, "[".concat(RESIZE_BUTTON_SELECTOR, "]"), {
-    opacity: setIsGrabAreaFocused || isLeftSidebarCollapsed ? 1 : 0
-  }), _ref;
-};
-export var resizeIconButtonCSS = function resizeIconButtonCSS(isCollapsed) {
-  return _objectSpread(_objectSpread({
-    backgroundColor: N0,
-    position: 'absolute',
-    top: 32,
-    left: 0,
-    transform: 'translateX(-50%)',
-    border: 0,
-    borderRadius: '50%',
-    boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 4px 1px ").concat(N30A),
-    color: N200,
-    cursor: 'pointer',
-    height: 24,
-    opacity: 0,
-    outline: 0,
-    padding: 0,
-    transition: "\n    background-color ".concat(smallDurationMs, "ms linear,\n    color ").concat(smallDurationMs, "ms linear,\n    opacity ").concat(mediumDurationMs, "ms ").concat(easeOut, "\n  "),
-    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
-  }), {}, _defineProperty({}, "[".concat(IS_SIDEBAR_DRAGGING, "] &"), {
-    opacity: 1
-  }));
-};
-export var grabAreaCSS = function grabAreaCSS(isLeftSidebarCollapsed) {
-  var _objectSpread3;
-
-  return _objectSpread((_objectSpread3 = {
-    cursor: 'ew-resize',
-    height: '100%',
-    width: '24px',
-    padding: 0,
-    border: 0,
-    backgroundColor: 'transparent'
-  }, _defineProperty(_objectSpread3, '&::-moz-focus-inner', {
-    border: 0
-  }), _defineProperty(_objectSpread3, ':focus', {
-    outline: 0
-  }), _objectSpread3), isLeftSidebarCollapsed && {
-    padding: 0,
-    border: 0,
-    backgroundColor: 'transparent',
-    cursor: 'default'
-  });
-};
-export var lineCSS = function lineCSS(isLeftSidebarCollapsed) {
-  return _objectSpread({
-    display: 'block',
-    height: '100%',
-    transition: 'background-color 200ms',
-    width: 2
-  }, isLeftSidebarCollapsed && {
-    '&&': {
-      backgroundColor: 'transparent'
-    }
-  });
-};
-export var increaseHitArea = {
-  position: 'absolute',
-  left: -8,
-  right: -12,
-  bottom: -8,
-  top: -8
-};
-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';
-export var shadowCSS = _defineProperty({
-  background: "linear-gradient(".concat(direction, ", ").concat(colorStops, ")"),
-  bottom: 0,
-  top: 0,
-  left: -1,
-  opacity: 0.5,
-  pointerEvents: 'none',
-  position: 'absolute',
-  transitionDuration: transitionDuration,
-  transitionProperty: 'left, opacity, width',
-  transitionTimingFunction: easeOut,
-  width: 3
-}, "[".concat(IS_SIDEBAR_DRAGGING, "] &"), {
-  opacity: 0.8,
-  width: 6,
-  left: -6
-});

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

@@ -1,45 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _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 { easeOut, prefersReducedMotion } from '@atlaskit/motion';
-import { N30A, N60A } from '@atlaskit/theme/colors';
-export var skipLinkStyles = _objectSpread(_objectSpread({
-  zIndex: -1,
-  left: -999999,
-  position: 'fixed',
-  opacity: 0,
-  background: 'white',
-  border: 'none',
-  padding: '0.8rem 1rem',
-  boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 10px ").concat(N30A, ", 0 0 20px -4px ").concat(N60A),
-  borderRadius: '3px',
-  margin: 10
-}, prefersReducedMotion()), {}, {
-  transform: 'translateY(-50%)',
-  transition: "transform 0.3s ".concat(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/esm/components/slots/left-sidebar-styles.js

@@ -1,94 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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) { _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 { 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 var fixedLeftSidebarInnerStyles = function fixedLeftSidebarInnerStyles(isFixed, isFlyoutOpen, isLeftSidebarCollapsed) {
-  return _objectSpread(_objectSpread(_objectSpread({}, focusStyles), isFixed ? _objectSpread(_defineProperty({
-    position: 'fixed',
-    top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
-    left: "".concat(LEFT_PANEL_WIDTH),
-    bottom: 0,
-    width: "".concat(LEFT_SIDEBAR_WIDTH),
-    transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
-  }, "[".concat(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 var leftSidebarStyles = function leftSidebarStyles(isFixed, isFlyoutOpen) {
-  var _objectSpread3;
-
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {
-    position: 'relative',
-    width: "".concat(LEFT_SIDEBAR_WIDTH),
-    transition: "width ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
-    zIndex: 1,
-    // Make resize affordance appear on top of content
-    marginLeft: 0
-  }, _defineProperty(_objectSpread3, "[".concat(IS_SIDEBAR_DRAGGING, "] &"), {
-    // Make sure drag to resize does not animate as the user drags
-    transition: 'none',
-    cursor: 'ew-resize'
-  }), _defineProperty(_objectSpread3, "&:hover [".concat(RESIZE_BUTTON_SELECTOR, "]"), {
-    opacity: 1
-  }), _objectSpread3), isFlyoutOpen && {
-    width: LEFT_SIDEBAR_FLYOUT_WIDTH
-  }), isFlyoutOpen && !isFixed && _defineProperty({}, "& + ".concat(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(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(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(LEFT_SIDEBAR_WIDTH)
-    }
-  }, isFlyoutOpen && {
-    width: COLLAPSED_LEFT_SIDEBAR_WIDTH
-  })), focusStyles), prefersReducedMotion());
-};
-export var resizeableChildrenWrapperStyle = function resizeableChildrenWrapperStyle(isFlyoutOpen, isLeftSidebarCollapsed, collapsedState) {
-  return _objectSpread(_defineProperty({
-    visibility: 'visible',
-    transition: 'none',
-    opacity: 1,
-    overflow: 'hidden auto',
-    height: '100%'
-  }, "[".concat(IS_SIDEBAR_COLLAPSING, "] &"), hideLeftSidebarContents), (isLeftSidebarCollapsed || collapsedState) && !isFlyoutOpen && hideLeftSidebarContents);
-};
-
-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(TRANSITION_DURATION - 100, "ms"),
-  opacity: 0,
-  visibility: 'hidden'
-}, prefersReducedMotion());
-
-export var fixedChildrenWrapperStyle = {
-  height: '100%',
-  minWidth: '240px'
-};

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

@@ -1,117 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-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) { _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 { 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';
-var gridTemplateAreas = "\n  \"".concat(LEFT_PANEL, " ").concat(BANNER, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(TOP_NAVIGATION, " ").concat(RIGHT_PANEL, "\"\n  \"").concat(LEFT_PANEL, " ").concat(CONTENT, " ").concat(RIGHT_PANEL, "\"\n ");
-export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, gridTemplateAreas);
-export var contentStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  grid-area: ", ";\n  display: flex;\n  height: 100%;\n  position: relative;\n"])), CONTENT);
-export 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'
-    }
-  }
-};
-export var bannerStyles = function bannerStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: "".concat(BANNER),
-    height: "".concat(BANNER_HEIGHT)
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    top: 0,
-    left: "".concat(LEFT_PANEL_WIDTH),
-    right: "".concat(RIGHT_PANEL_WIDTH),
-    zIndex: 2
-  });
-};
-export var topNavigationStyles = function topNavigationStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: "".concat(TOP_NAVIGATION),
-    height: "".concat(TOP_NAVIGATION_HEIGHT)
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    top: "".concat(BANNER_HEIGHT),
-    left: "".concat(LEFT_PANEL_WIDTH),
-    right: "".concat(RIGHT_PANEL_WIDTH),
-    zIndex: 2
-  });
-};
-export var mainStyles = _objectSpread(_objectSpread({}, focusStyles), {}, _defineProperty({
-  // 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(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s"),
-  marginLeft: 0
-}, "[".concat(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 var fixedRightSidebarInnerStyles = function fixedRightSidebarInnerStyles(isFixed) {
-  return _objectSpread(_objectSpread({}, focusStyles), isFixed ? {
-    position: 'fixed',
-    top: "calc(".concat(BANNER_HEIGHT, " + ").concat(TOP_NAVIGATION_HEIGHT, ")"),
-    right: "calc(".concat(RIGHT_PANEL_WIDTH, ")"),
-    bottom: 0
-  } : {
-    height: '100%'
-  });
-};
-export var rightSidebarStyles = function rightSidebarStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    width: "".concat(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(RIGHT_SIDEBAR_WIDTH)
-    }
-  });
-};
-export var rightPanelStyles = function rightPanelStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: RIGHT_PANEL
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    width: "".concat(RIGHT_PANEL_WIDTH),
-    top: 0,
-    bottom: 0,
-    right: 0
-  });
-};
-export var leftPanelStyles = function leftPanelStyles(isFixed) {
-  return _objectSpread(_objectSpread({
-    gridArea: LEFT_PANEL
-  }, focusStyles), isFixed && {
-    position: 'fixed',
-    width: "".concat(LEFT_PANEL_WIDTH),
-    top: 0,
-    bottom: 0,
-    left: 0
-  });
-};

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

@@ -1,41 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const resizeControlCSS: (setIsGrabAreaFocused: boolean, isLeftSidebarCollapsed: boolean) => CSSObject;
-export declare const resizeIconButtonCSS: (isCollapsed: boolean) => CSSObject;
-export declare const grabAreaCSS: (isLeftSidebarCollapsed: boolean) => {
-    cursor: string;
-    height: string;
-    width: string;
-    padding: number;
-    border: number;
-    backgroundColor: string;
-    "&::-moz-focus-inner": {
-        border: number;
-    };
-    ":focus": {
-        outline: number;
-    };
-} | {
-    padding: number;
-    border: number;
-    backgroundColor: string;
-    cursor: string;
-    height: string;
-    width: string;
-    "&::-moz-focus-inner": {
-        border: number;
-    };
-    ":focus": {
-        outline: number;
-    };
-};
-export declare const lineCSS: (isLeftSidebarCollapsed: boolean) => {
-    '&&'?: {
-        backgroundColor: string;
-    };
-    display: string;
-    height: string;
-    transition: string;
-    width: number;
-};
-export declare const increaseHitArea: CSSObject;
-export declare const shadowCSS: CSSObject;

package/dist/types/components/skip-links/styles.d.ts

@@ -1,2 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const skipLinkStyles: CSSObject;

package/dist/types/components/slots/left-sidebar-styles.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const fixedLeftSidebarInnerStyles: (isFixed?: boolean | undefined, isFlyoutOpen?: boolean | undefined, isLeftSidebarCollapsed?: boolean | undefined) => CSSObject;
-export declare const leftSidebarStyles: (isFixed?: boolean | undefined, isFlyoutOpen?: boolean | undefined) => CSSObject;
-export declare const resizeableChildrenWrapperStyle: (isFlyoutOpen?: boolean | undefined, isLeftSidebarCollapsed?: boolean | undefined, collapsedState?: boolean | undefined) => CSSObject;
-export declare const fixedChildrenWrapperStyle: CSSObject;

package/dist/types/components/slots/styles.d.ts

@@ -1,23 +0,0 @@
-import { CSSObject } from '@emotion/core';
-export declare const gridStyles: import("@emotion/core").SerializedStyles;
-export declare const contentStyles: import("@emotion/core").SerializedStyles;
-export declare const focusStyles: {
-    '&:focus': {
-        outline: string;
-        '&  [data-wrapper-element]': {
-            outline: string;
-            boxShadow: string;
-        };
-        '& > div:not([data-skip-link-wrapper])': {
-            outline: string;
-            boxShadow: string;
-        };
-    };
-};
-export declare const bannerStyles: (isFixed?: boolean | undefined) => CSSObject;
-export declare const topNavigationStyles: (isFixed?: boolean | undefined) => CSSObject;
-export declare const mainStyles: CSSObject;
-export declare const fixedRightSidebarInnerStyles: (isFixed?: boolean | undefined) => CSSObject;
-export declare const rightSidebarStyles: (isFixed?: boolean | undefined) => CSSObject;
-export declare const rightPanelStyles: (isFixed?: boolean | undefined) => CSSObject;
-export declare const leftPanelStyles: (isFixed?: boolean | undefined) => CSSObject;