@atlaskit/renderer 92.0.1 → 93.0.2

package/dist/es2019/i18n/en_GB.js

@@ -0,0 +1,20 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//English (United Kingdom)
+export default {
+  'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copied!',
+  'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copy',
+  'fabric.editor.headingLink.ascOrderLabel': 'Sort column Z to A',
+  'fabric.editor.headingLink.ascSortingLabel': 'ascending',
+  'fabric.editor.headingLink.copied': 'Copied!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Copy link to heading',
+  'fabric.editor.headingLink.copyAriaLabel': 'Copy',
+  'fabric.editor.headingLink.descOrderLabel': "⚠️ You can't sort a table with merged cell",
+  'fabric.editor.headingLink.failedToCopy': 'Copy failed',
+  'fabric.editor.headingLink.noOrderLabel': 'Sort column A to Z',
+  'fabric.editor.headingLink.noneSortingLabel': 'descending'
+};

package/dist/es2019/i18n/pl.js

@@ -8,7 +8,13 @@
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Skopiowano!',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopiuj',
+  'fabric.editor.headingLink.ascOrderLabel': 'Sortuj kolumnę od Z do A',
+  'fabric.editor.headingLink.ascSortingLabel': 'rosnąco',
   'fabric.editor.headingLink.copied': 'Skopiowano!',
   'fabric.editor.headingLink.copyAnchorLink': 'Skopiuj łącze do nagłówka',
-  'fabric.editor.headingLink.failedToCopy': 'Kopiowanie nie powiodło się'
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopiuj',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ Nie można sortować tabeli ze scaloną komórką',
+  'fabric.editor.headingLink.failedToCopy': 'Kopiowanie nie powiodło się',
+  'fabric.editor.headingLink.noOrderLabel': 'Sortuj kolumnę od A do Z',
+  'fabric.editor.headingLink.noneSortingLabel': 'malejąco'
 };

package/dist/es2019/i18n/pt_BR.js

@@ -13,7 +13,7 @@ export default {
   'fabric.editor.headingLink.copied': 'Copiado!',
   'fabric.editor.headingLink.copyAnchorLink': 'Copiar link para cabeçalho',
   'fabric.editor.headingLink.copyAriaLabel': 'Copiar',
-  'fabric.editor.headingLink.descOrderLabel': '⚠ Você não pode ordenar uma tabela com células mescladas',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ Você não pode ordenar uma tabela com células mescladas',
   'fabric.editor.headingLink.failedToCopy': 'Falha na cópia',
   'fabric.editor.headingLink.noOrderLabel': 'Ordenar coluna de A a Z',
   'fabric.editor.headingLink.noneSortingLabel': 'descendente'

package/dist/es2019/react/marks/alignment.js

@@ -1,13 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
-import styled, { css } from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { alignmentPositionMap } from '@atlaskit/adf-schema';
-const MarkWrapper = styled.div`
-  ${props => props['data-align'] && css`
-      text-align: ${alignmentPositionMap[props['data-align']]};
-    `};
-`;
+
+const MarkWrapper = props => {
+  const styles = props['data-align'] ? css`
+        text-align: ${alignmentPositionMap[props['data-align']]};
+      ` : '';
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
 export default function Alignment(props) {
-  return /*#__PURE__*/React.createElement(MarkWrapper, {
+  return jsx(MarkWrapper, {
     className: "fabric-editor-block-mark",
     "data-align": props.align
   }, props.children);

package/dist/es2019/react/marks/breakout.js

@@ -1,17 +1,18 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-export const Wrapper = styled.div`
+export const wrapperStyles = css`
   margin: ${blockNodesVerticalMargin} 0;
   margin-left: 50%;
   transform: translateX(-50%);
 `;
 export default function Breakout(props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return jsx(WidthConsumer, null, ({
     width
-  }) => /*#__PURE__*/React.createElement(Wrapper, {
+  }) => jsx("div", {
+    css: wrapperStyles,
     "data-mode": props.mode,
     style: {
       width: calcBreakoutWidth(props.mode, width)

package/dist/es2019/react/marks/link.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { B400, B300 } from '@atlaskit/theme/colors';
-import styled from 'styled-components';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
-const StyledAnchor = styled.a`
+const anchorStyles = css`
   color: ${B400};
 
   &:hover {
@@ -35,10 +37,11 @@ export default function Link(props) {
   const handler = getEventHandler(eventHandlers, 'link');
 
   if (isMediaLink) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+    return jsx(Fragment, null, props.children);
   }
 
-  return /*#__PURE__*/React.createElement(StyledAnchor, _extends({
+  return jsx("a", _extends({
+    css: anchorStyles,
     onClick: e => {
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({

package/dist/es2019/react/nodes/codeBlock.js

@@ -24,7 +24,7 @@ const codeBlockStyle = props => css`
 })};
       background-attachment: local, scroll, scroll;
       background-position: 100% 0, 100% 0, 0 0;
-
+    }
   `;
 
 function CodeBlock(props) {

package/dist/es2019/react/nodes/codeBlockCopyButton.js

@@ -1,13 +1,14 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { CopyTextConsumer } from './copy-text-provider';
 import { codeBlockCopyButtonMessages } from '../../messages';
-const CopyButtonWrapper = styled.span`
+const copyButtonWrapperStyles = css`
   display: flex;
   position: sticky;
   justify-content: flex-end;
@@ -24,7 +25,7 @@ const CopyButtonWrapper = styled.span`
     padding: 2px;
     opacity: 0;
     transition: opacity 0.2s ease 0s;
-    border: 2px solid #ffffff;
+    border: 2px solid #fff;
     border-radius: 4px;
     background-color: ${N20};
     color: rgb(66, 82, 110);
@@ -36,7 +37,7 @@ const CopyButtonWrapper = styled.span`
 
   button.clicked {
     background-color: ${N700};
-    color: #ffffff !important;
+    color: #fff !important;
   }
 `;
 
@@ -52,22 +53,24 @@ const CopyButton = ({
     setClassName('copy-to-clipboard');
   };
 
-  return /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
+  return jsx(CopyTextConsumer, null, ({
     copyTextToClipboard
   }) => {
-    return /*#__PURE__*/React.createElement(CopyButtonWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx("span", {
+      css: copyButtonWrapperStyles
+    }, jsx(Tooltip, {
       content: tooltip,
       hideTooltipOnClick: false,
       position: "top"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       onMouseLeave: onMouseLeave
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, jsx(Button, {
       className: className,
       "aria-label": tooltip,
       spacing: "compact",
       appearance: "subtle",
       "aria-haspopup": true,
-      iconBefore: /*#__PURE__*/React.createElement(CopyIcon, {
+      iconBefore: jsx(CopyIcon, {
         label: tooltip
       }),
       onClick: () => {

package/dist/es2019/react/nodes/embedCard.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo, useContext, useState, useRef } from 'react';
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, Context as CardContext, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { WidthConsumer, mapBreakpointToLayoutMaxWidth, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, getAkEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
-import styled from 'styled-components';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
-const EmbedCardWrapper = styled.div`
+const embedCardWrapperStyles = css`
   width: 100%;
   height: 100%;
 
@@ -22,16 +24,10 @@ const EmbedCardWrapper = styled.div`
 
   margin: 0 auto;
 `;
-EmbedCardWrapper.displayName = 'EmbedCardWrapper';
-const ExtendedEmbedCard = styled(UIMediaSingle)`
-  ${({
-  layout
-}) => layout === 'full-width' || layout === 'wide' ? `
+const uIMediaSingleLayoutStyles = css`
   margin-left: 50%;
   transform: translateX(-50%);
-  ` : ``}
 `;
-ExtendedEmbedCard.displayName = 'ExtendedEmbedCard';
 export default function EmbedCard(props) {
   const {
     url,
@@ -97,7 +93,7 @@ export default function EmbedCard(props) {
     setAspectRatio(resolvedAspectRatio);
   };
 
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return jsx(WidthConsumer, null, ({
     width: containerWidth,
     breakpoint
   }) => {
@@ -117,12 +113,14 @@ export default function EmbedCard(props) {
     }
 
     const lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    return /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
+    const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
+    return jsx(CardErrorBoundary, _extends({
       unsupportedComponent: UnsupportedBlock
-    }, cardProps), /*#__PURE__*/React.createElement(EmbedResizeMessageListener, {
+    }, cardProps), jsx(EmbedResizeMessageListener, {
       embedIframeRef: embedIframeRef,
       onHeightUpdate: setLiveHeight
-    }, /*#__PURE__*/React.createElement(ExtendedEmbedCard, {
+    }, jsx(UIMediaSingle, {
+      css: uiMediaSingleStyles,
       layout: layout,
       width: originalWidth,
       containerWidth: containerWidth,
@@ -132,7 +130,9 @@ export default function EmbedCard(props) {
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       hasFallbackContainer: hasPreview
-    }, /*#__PURE__*/React.createElement(EmbedCardWrapper, null, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
+      css: embedCardWrapperStyles
+    }, jsx("div", {
       className: "embedCardView-content-wrap",
       "data-embed-card": true,
       "data-layout": layout,
@@ -140,7 +140,7 @@ export default function EmbedCard(props) {
       "data-card-data": data ? JSON.stringify(data) : undefined,
       "data-card-url": url,
       "data-card-original-height": originalHeight
-    }, /*#__PURE__*/React.createElement(Card, _extends({
+    }, jsx(Card, _extends({
       appearance: "embed"
     }, cardProps, {
       onResolve: onResolve,

package/dist/es2019/react/nodes/heading-anchor.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { N200, N500, B400 } from '@atlaskit/theme/colors';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
@@ -13,12 +15,12 @@ const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+  return jsx("span", _extends({}, rest, {
     className: HeadingAnchorWrapperClassName,
     ref: ref
   }), children);
 });
-const CopyAnchorButton = styled.button`
+const copyAnchorButtonStyles = css`
   display: inline;
   outline: none;
   background-color: transparent;
@@ -72,11 +74,12 @@ class HeadingAnchor extends React.PureComponent {
     });
 
     _defineProperty(this, "renderAnchorButton", () => {
-      return /*#__PURE__*/React.createElement(CopyAnchorButton, {
+      return jsx("button", {
+        css: copyAnchorButtonStyles,
         onMouseLeave: this.resetMessage,
         onClick: this.copyToClipboard,
         "aria-label": this.state.tooltipMessage
-      }, /*#__PURE__*/React.createElement(LinkIcon, {
+      }, jsx(LinkIcon, {
         label: this.getCopyAriaLabel(),
         size: this.props.level > 3 ? 'small' : 'medium',
         primaryColor: this.state.isClicked ? B400 : N200
@@ -97,7 +100,7 @@ class HeadingAnchor extends React.PureComponent {
       // We set the key to the message to ensure it remounts when the message
       // changes, so that it correctly repositions.
       // @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         tag: CopyAnchorWrapperWithRef,
         content: tooltipMessage,
         position: "top",

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -1,11 +1,13 @@
-import { default as React } from 'react';
+/** @jsx jsx */
+import { default as React, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { mapBreakpointToLayoutMaxWidth, getBreakpoint, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { mapBreakpointToLayoutMaxWidth, getBreakpoint, MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useObservedWidth } from '../../hooks/use-observed-width';
-import { ExtendedUIMediaSingle } from './styles';
+import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 
@@ -166,7 +168,9 @@ const MediaSingle = props => {
       disableOverlay: true,
       featureFlags
     });
-    return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
+    const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
+    return jsx(UIMediaSingle, {
+      css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
       width: width,
@@ -175,10 +179,10 @@ const MediaSingle = props => {
       containerWidth: containerWidth,
       pctWidth: pctWidth,
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+    }, jsx(Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };
 
-  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : jsx(WidthConsumer, null, ({
     width,
     breakpoint
   }) => {

package/dist/es2019/react/nodes/mediaSingle/styles.js

@@ -1,10 +1,9 @@
-import styled from 'styled-components';
-import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-export const ExtendedUIMediaSingle = styled(UIMediaSingle)`
-  ${({
-  layout
-}) => layout === 'full-width' || layout === 'wide' ? `
+/** @jsx jsx */
+import { css } from '@emotion/react';
+export const uiMediaSingleBaseStyles = css`
+  transition: all 0.1s linear;
+`;
+export const uiMediaSingleLayoutStyles = css`
   margin-left: 50%;
   transform: translateX(-50%);
-  ` : ``} transition: all 0.1s linear;
 `;

package/dist/es2019/react/nodes/panel.js

@@ -1,32 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { getPanelBackgroundDarkModeColors, panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
-import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common/styles';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
-const PanelStyled = styled.div`
-  ${props => {
-  if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
-    return '';
-  } // Similar to mainDynamicStyles()
 
+const PanelStyled = props => {
+  let styles = theme => css`
+    &.${PanelSharedCssClassName.prefix} {
+      ${panelSharedStylesWithoutPrefix({
+    theme
+  })}
+    }
+  `;
+
+  if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
+    styles = theme => css`
+      &.${PanelSharedCssClassName.prefix} {
+        ${panelSharedStylesWithoutPrefix({
+      theme
+    })}
+      }
 
-  return `
       &[data-panel-type=${PanelType.CUSTOM}] {
         background-color: ${props.backgroundColor};
         ${themed({
-    dark: getPanelBackgroundDarkModeColors
-  })};
+      dark: getPanelBackgroundDarkModeColors
+    })({
+      theme
+    })};
       }
     `;
-}}
-`;
+  }
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+PanelStyled.displayName = 'PanelStyled';
 const panelIcons = {
   info: PanelInfoIcon,
   success: PanelSuccessIcon,
@@ -55,7 +75,7 @@ const Panel = props => {
   const getIcon = () => {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/React.createElement(EmojiItem, {
+        return jsx(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -67,7 +87,7 @@ const Panel = props => {
     }
 
     const Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: `Panel ${panelType}`
     });
   };
@@ -76,13 +96,13 @@ const Panel = props => {
     const icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
 
-  return /*#__PURE__*/React.createElement(PanelStyled, {
+  return jsx(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -90,7 +110,7 @@ const Panel = props => {
     "data-panel-icon-id": panelIconId,
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
-  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+  }, renderIcon(), jsx("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

package/dist/es2019/react/nodes/table/sticky.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
@@ -10,38 +11,30 @@ import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
-// creates a new stacking context and places the div in the same
-// position as the table
-const RelativeTableDiv = styled.div.attrs({
-  style: ({
-    left,
-    top
-  }) => ({
-    left: left && left < 0 ? left : undefined,
-    top
-  })
-})`
-  position: relative;
-`;
-export const FixedTableDiv = styled.div.attrs({
-  style: ({
-    top,
-    wrapperWidth
-  }) => ({
-    top,
-    width: wrapperWidth
-  })
-})`
-  ${props => props.mode === 'stick' ? 'position: fixed' : ''};
-  ${props => props.mode === 'pin-bottom' ? 'position: absolute' : ''};
-  ${props => props.mode === 'none' ? 'display: none' : ''};
+const fixedTableDivModeToPosition = {
+  stick: 'fixed',
+  'pin-bottom': 'absolute'
+};
 
-  z-index: ${akEditorStickyHeaderZIndex};
+const getModeSpecificStyles = mode => {
+  if (mode === 'none') {
+    return css`
+      display: none;
+    `;
+  } else {
+    return css`
+      position: ${fixedTableDivModeToPosition[mode]};
+    `;
+  }
+};
 
-  // Fix this when move we move this to use emotion
-  &&&
+const fixedTableDivStaticStyles = (top, width) => css`
+  top: ${top}px;
+  width: ${width}px;
+  z-index: ${akEditorStickyHeaderZIndex};
+  &
     .${TableSharedCssClassName.TABLE_CONTAINER},
-    &&&
+    &
     .${TableSharedCssClassName.TABLE_STICKY_WRAPPER}
     > table {
     margin-top: 0;
@@ -56,15 +49,26 @@ export const FixedTableDiv = styled.div.attrs({
     display: none;
   }
 
-  &&&
+  &
     .${TableSharedCssClassName.TABLE_CONTAINER}.right-shadow::after,
-    &&&
+    &
     .${TableSharedCssClassName.TABLE_CONTAINER}.left-shadow::before {
     top: 0px;
     height: 100%;
   }
 `;
-const StyledDiv = styled.div``;
+
+export const FixedTableDiv = props => {
+  const {
+    top,
+    wrapperWidth,
+    mode
+  } = props;
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
+  return jsx("div", {
+    css: fixedTableCss
+  }, props.children);
+};
 export const StickyTable = ({
   top,
   left,
@@ -81,26 +85,29 @@ export const StickyTable = ({
   allowDynamicTextSizing,
   rowHeight
 }) => {
-  return /*#__PURE__*/React.createElement(RelativeTableDiv, {
-    left: left,
-    top: mode === 'pin-bottom' ? top : undefined
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+  return jsx("div", {
+    css: {
+      left: left && left < 0 ? left : undefined,
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    }
+  }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
+  }, jsx("div", {
     className: `${TableSharedCssClassName.TABLE_CONTAINER} ${shadowClassNames}`,
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
-    innerRef: innerRef,
+  }, jsx("div", {
+    ref: innerRef,
     className: `${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`,
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,