@atlaskit/renderer 91.0.0 → 93.0.0

package/dist/es2019/ui/Renderer/truncated-wrapper.js

@@ -1,28 +1,39 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
-import styled from 'styled-components';
-const FadeOut = styled.div`
+
+const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
   position: relative;
   overflow-y: hidden;
-  max-height: ${({
-  height
-}) => height}px;
+  max-height: ${maxHeight}px;
   &::after {
     content: '';
     position: absolute;
-    top: ${({
-  height,
-  fadeHeight
-}) => height - fadeHeight}px;
+    top: ${top}px;
     bottom: 0;
     left: 0;
     right: 0;
-    /* Using 'rgba(255, 255, 255, 0)' because 'transparent' breaks the gradient in Safari 11 */
-    background-image: ${({
-  backgroundColor
-}) => `linear-gradient(rgba(255, 255, 255, 0),  ${backgroundColor})`};
+    background-image: linear-gradient(
+      rgba(255, 255, 255, 0),
+      ${backgroundColor}
+    );
   }
 `;
+
+const FadeOut = props => {
+  const {
+    children,
+    backgroundColor,
+    fadeHeight,
+    height
+  } = props;
+  const top = height - fadeHeight;
+  const styles = fadeOutStyles(height, top, backgroundColor);
+  return jsx("div", {
+    css: styles
+  }, children);
+};
+
 export class TruncatedWrapper extends Component {
   constructor(props) {
     super(props);
@@ -35,7 +46,7 @@ export class TruncatedWrapper extends Component {
       backgroundColor = 'white',
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement(FadeOut, {
+    return jsx(FadeOut, {
       height: height,
       fadeHeight: fadeHeight,
       backgroundColor: backgroundColor

package/dist/es2019/ui/SortingIcon.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
@@ -20,7 +20,7 @@ export let StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (StatusClassNames = {}));
 
-const Wrapper = styled.figure`
+const wrapperStyles = css`
   position: absolute;
   display: flex;
   height: 28px;
@@ -42,7 +42,7 @@ const Wrapper = styled.figure`
     cursor: not-allowed;
   }
 `;
-const TableSortingIcon = styled.div`
+const tableSortingIconStyles = css`
   width: 8px;
   height: 12px;
   transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);
@@ -105,13 +105,15 @@ const SortingIcon = ({
   const activated = sortOrdered !== SortOrder.NO_ORDER;
   const wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
   const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     delay: 0,
     content: content,
     position: "top"
-  }, /*#__PURE__*/React.createElement(Wrapper, {
+  }, jsx("figure", {
+    css: wrapperStyles,
     className: wrapperClassName
-  }, /*#__PURE__*/React.createElement(TableSortingIcon, {
+  }, jsx("div", {
+    css: tableSortingIconStyles,
     className: `${getClassName(sortOrdered)} ${TABLE_SORTING_ICON_CLASS}-${activated ? 'active' : 'inactive'}`
   })));
 };

package/dist/es2019/ui/annotations/draft/component.js

@@ -1,26 +1,32 @@
 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 { InsertDraftPosition } from '../types';
 import { AnnotationsDraftContext } from '../context';
 import { splitText, calcTextSplitOffset } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
-import styled from 'styled-components';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-const DraftAnnotation = styled.mark`
+
+const markStyles = props => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  ${AnnotationSharedCSSByState.focus};
+  ${AnnotationSharedCSSByState(props).focus};
 `;
+
 export const AnnotationDraft = ({
   draftPosition,
   children
 }) => {
-  return /*#__PURE__*/React.createElement(DraftAnnotation, _extends({
+  return jsx("mark", _extends({
     "data-renderer-mark": true
-  }, dataAttributes(draftPosition)), children);
+  }, dataAttributes(draftPosition), {
+    css: markStyles
+  }), children);
 };
 export const getAnnotationIndex = (annotationPosition, fragmentCount) => {
   if (annotationPosition === InsertDraftPosition.START) {
@@ -45,13 +51,13 @@ export const applyAnnotationOnText = ({
   const annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map((value, index) => {
     if (annotateIndex === index) {
-      return /*#__PURE__*/React.createElement(AnnotationDraft, {
+      return jsx(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
       }, value);
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return jsx(React.Fragment, {
       key: index
     }, value);
   });
@@ -75,11 +81,11 @@ export const TextWithAnnotationDraft = ({
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
-    return /*#__PURE__*/React.createElement(AnnotationDraft, {
+    return jsx(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
     }, children);
@@ -89,7 +95,7 @@ export const TextWithAnnotationDraft = ({
   const texts = splitText(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
 
   const components = applyAnnotationOnText({
@@ -97,5 +103,5 @@ export const TextWithAnnotationDraft = ({
     shouldApplyAnnotationAt,
     draftPosition: nextDraftPosition
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, components);
+  return jsx(Fragment, null, components);
 };

package/dist/es2019/ui/annotations/element/mark.js

@@ -1,22 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React, { useMemo, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-import styled from 'styled-components';
-const MarkStyled = styled.mark`
+
+const markStyles = props => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
-    ${AnnotationSharedCSSByState.blur};
+    ${AnnotationSharedCSSByState(props).blur};
 
     &:focus,
     &[data-has-focus='true'] {
-      ${AnnotationSharedCSSByState.focus};
+      ${AnnotationSharedCSSByState(props).focus};
     }
   }
 `;
+
 export const MarkComponent = ({
   annotationParentIds,
   children,
@@ -49,8 +53,10 @@ export const MarkComponent = ({
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return /*#__PURE__*/React.createElement(MarkStyled, _extends({
+  return jsx("mark", _extends({
     id: id,
     onClick: onMarkClick
-  }, accessibility, overriddenData), children);
+  }, accessibility, overriddenData, {
+    css: markStyles
+  }), children);
 };

package/dist/es2019/ui/renderer-props.js

@@ -1 +1 @@
-export {};
+import { ACTION_SUBJECT } from '../analytics/enums';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "91.0.0",
+	"version": "93.0.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/enums.js

@@ -12,6 +12,8 @@ export var ACTION;
 (function (ACTION) {
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
+  ACTION["RE_RENDERED"] = "reRendered";
+  ACTION["RENDERER_TTI"] = "tti";
   ACTION["CRASHED"] = "unhandledErrorCaught";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";

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

@@ -1,15 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
+/** @jsx jsx */
 import React from 'react';
-import styled, { css } from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { alignmentPositionMap } from '@atlaskit/adf-schema';
-var MarkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return props['data-align'] && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      text-align: ", ";\n    "])), alignmentPositionMap[props['data-align']]);
-});
+
+var MarkWrapper = function MarkWrapper(props) {
+  var styles = props['data-align'] ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        text-align: ", ";\n      "])), 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/esm/react/marks/breakout.js

@@ -2,16 +2,17 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-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 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), blockNodesVerticalMargin);
+export var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), blockNodesVerticalMargin);
 export default function Breakout(props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref) {
+  return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return jsx("div", {
+      css: wrapperStyles,
       "data-mode": props.mode,
       style: {
         width: calcBreakoutWidth(props.mode, width)

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

@@ -3,13 +3,14 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-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';
-var StyledAnchor = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), B400, B300);
+var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), B400, B300);
 export default function Link(props) {
   var href = props.href,
       target = props.target,
@@ -30,10 +31,11 @@ export default function Link(props) {
   var 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: function onClick(e) {
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({

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

@@ -2,9 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
@@ -14,6 +14,16 @@ import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
+var codeBlockStyle = function codeBlockStyle(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    [data-ds--code--code-block] {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n    }\n  "])), relativeFontSizeToBase16(fontSize()), overflowShadow({
+    background: themed({
+      light: N20,
+      dark: DN50
+    })(props),
+    width: "".concat(gridSize(), "px")
+  }));
+};
+
 function CodeBlock(props) {
   var text = props.text,
       language = props.language,
@@ -23,11 +33,12 @@ function CodeBlock(props) {
   var featureFlags = useFeatureFlags();
   var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, allowCopyToClipboard ? /*#__PURE__*/React.createElement(CopyButton, {
+  return jsx("div", {
+    className: className,
+    css: codeBlockStyle
+  }, allowCopyToClipboard ? jsx(CopyButton, {
     content: text
-  }) : null, /*#__PURE__*/React.createElement(AkCodeBlock, {
+  }) : null, jsx(AkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
@@ -36,11 +47,4 @@ function CodeBlock(props) {
   }));
 }
 
-var IntlCodeBlock = injectIntl(CodeBlock);
-export default styled(IntlCodeBlock)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), overflowShadow({
-  background: themed({
-    light: N20,
-    dark: DN50
-  }),
-  width: "".concat(gridSize(), "px")
-}));
+export default injectIntl(CodeBlock);

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

@@ -3,16 +3,17 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @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';
-var CopyButtonWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid #ffffff;\n    border-radius: 4px;\n    background-color: ", ";\n    color: rgb(66, 82, 110);\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: #ffffff !important;\n  }\n"])), N20, N30, N700);
+var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid #fff;\n    border-radius: 4px;\n    background-color: ", ";\n    color: rgb(66, 82, 110);\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: #fff !important;\n  }\n"])), N20, N30, N700);
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,
@@ -33,21 +34,23 @@ var CopyButton = function CopyButton(_ref) {
     setClassName('copy-to-clipboard');
   };
 
-  return /*#__PURE__*/React.createElement(CopyTextConsumer, null, function (_ref2) {
+  return jsx(CopyTextConsumer, null, function (_ref2) {
     var copyTextToClipboard = _ref2.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: function onClick() {

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

@@ -4,22 +4,18 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-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';
-var EmbedCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
-EmbedCardWrapper.displayName = 'EmbedCardWrapper';
-var ExtendedEmbedCard = styled(UIMediaSingle)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
-  var layout = _ref.layout;
-  return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";
-});
-ExtendedEmbedCard.displayName = 'ExtendedEmbedCard';
+var embedCardWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
+var uIMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
 export default function EmbedCard(props) {
   var url = props.url,
       data = props.data,
@@ -87,8 +83,8 @@ export default function EmbedCard(props) {
 
   var cardContext = useContext(CardContext);
 
-  var onResolve = function onResolve(_ref2) {
-    var resolvedAspectRatio = _ref2.aspectRatio;
+  var onResolve = function onResolve(_ref) {
+    var resolvedAspectRatio = _ref.aspectRatio;
     var hasPreviewOnResolve = !!(cardContext && url && cardContext.extractors.getPreview(url, platform));
 
     if (!hasPreviewOnResolve) {
@@ -98,9 +94,9 @@ export default function EmbedCard(props) {
     setAspectRatio(resolvedAspectRatio);
   };
 
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
-    var containerWidth = _ref3.width,
-        breakpoint = _ref3.breakpoint;
+  return jsx(WidthConsumer, null, function (_ref2) {
+    var containerWidth = _ref2.width,
+        breakpoint = _ref2.breakpoint;
     var nonFullWidthSize = containerWidth;
     var isFullWidth = rendererAppearance === 'full-width';
 
@@ -117,12 +113,14 @@ export default function EmbedCard(props) {
     }
 
     var lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    return /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
+    var 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/esm/react/nodes/heading-anchor.js

@@ -19,8 +19,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @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';
@@ -31,12 +32,12 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, re
   var children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+  return jsx("span", _extends({}, rest, {
     className: HeadingAnchorWrapperClassName,
     ref: ref
   }), children);
 });
-var CopyAnchorButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), N500);
+var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), N500);
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(HeadingAnchor, _React$PureComponent);
@@ -117,11 +118,12 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderAnchorButton", function () {
-      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
@@ -145,7 +147,7 @@ var HeadingAnchor = /*#__PURE__*/function (_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/esm/react/nodes/heading.js

@@ -34,13 +34,15 @@ function Heading(props) {
   var headingId = props.headingId,
       dataAttributes = props.dataAttributes,
       allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
-      marks = props.marks;
+      marks = props.marks,
+      invisible = props.invisible;
   var HX = "h".concat(props.level);
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  var headingIdToUse = invisible ? undefined : headingId;
   return /*#__PURE__*/React.createElement(HX, _extends({
-    id: headingId
+    id: headingIdToUse
   }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, function (_ref) {
     var copyTextToClipboard = _ref.copyTextToClipboard;
     return headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {

package/dist/esm/react/nodes/layoutColumn.js

@@ -1,11 +1,15 @@
+/** @jsx jsx */
 import React from 'react';
-import { WidthProvider, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
+import { jsx } from '@emotion/react';
+import { WidthProvider, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
 export default function LayoutSection(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-layout-column": true,
     "data-column-width": props.width,
     style: {
       flexBasis: "".concat(props.width, "%")
     }
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement(ClearNextSiblingMarginTop, null), props.children));
+  }, jsx(WidthProvider, null, jsx("div", {
+    css: clearNextSiblingMarginTopStyle
+  }), props.children));
 }