@atlaskit/renderer 91.0.0 → 93.0.0

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,31 +19,31 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("react");
 
 var _templateObject;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
 
-var FadeOut = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    /* Using 'rgba(255, 255, 255, 0)' because 'transparent' breaks the gradient in Safari 11 */\n    background-image: ", ";\n  }\n"])), function (_ref) {
-  var height = _ref.height;
-  return height;
-}, function (_ref2) {
-  var height = _ref2.height,
-      fadeHeight = _ref2.fadeHeight;
-  return height - fadeHeight;
-}, function (_ref3) {
-  var backgroundColor = _ref3.backgroundColor;
-  return "linear-gradient(rgba(255, 255, 255, 0),  ".concat(backgroundColor, ")");
-});
+var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      rgba(255, 255, 255, 0),\n      ", "\n    );\n  }\n"])), maxHeight, top, backgroundColor);
+};
+
+var FadeOut = function FadeOut(props) {
+  var children = props.children,
+      backgroundColor = props.backgroundColor,
+      fadeHeight = props.fadeHeight,
+      height = props.height;
+  var top = height - fadeHeight;
+  var styles = fadeOutStyles(height, top, backgroundColor);
+  return (0, _react.jsx)("div", {
+    css: styles
+  }, children);
+};
 
 var TruncatedWrapper = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(TruncatedWrapper, _Component);
@@ -68,7 +66,7 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
           _this$props$backgroun = _this$props.backgroundColor,
           backgroundColor = _this$props$backgroun === void 0 ? 'white' : _this$props$backgroun,
           children = _this$props.children;
-      return /*#__PURE__*/_react.default.createElement(FadeOut, {
+      return (0, _react.jsx)(FadeOut, {
         height: height,
         fadeHeight: fadeHeight,
         backgroundColor: backgroundColor
@@ -76,6 +74,6 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
     }
   }]);
   return TruncatedWrapper;
-}(_react.Component);
+}(_react2.Component);
 
 exports.TruncatedWrapper = TruncatedWrapper;

package/dist/cjs/ui/SortingIcon.js

@@ -9,9 +9,7 @@ exports.default = exports.TableSortIconDataUrl = exports.StatusClassNames = void
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -43,9 +41,8 @@ exports.StatusClassNames = StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (exports.StatusClassNames = StatusClassNames = {}));
 
-var Wrapper = _styledComponents.default.figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid #fff;\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), (0, _constants.gridSize)() / 2, _colors.N20, _colors.N30, StatusClassNames.SORTING_NOT_ALLOWED);
-
-var TableSortingIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
+var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid #fff;\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), (0, _constants.gridSize)() / 2, _colors.N20, _colors.N30, StatusClassNames.SORTING_NOT_ALLOWED);
+var tableSortingIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
 
 var getClassName = function getClassName(status) {
   switch (status) {
@@ -91,13 +88,15 @@ var SortingIcon = function SortingIcon(_ref) {
   var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
   var wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
   var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react.jsx)(_tooltip.default, {
     delay: 0,
     content: content,
     position: "top"
-  }, /*#__PURE__*/_react.default.createElement(Wrapper, {
+  }, (0, _react.jsx)("figure", {
+    css: wrapperStyles,
     className: wrapperClassName
-  }, /*#__PURE__*/_react.default.createElement(TableSortingIcon, {
+  }, (0, _react.jsx)("div", {
+    css: tableSortingIconStyles,
     className: "".concat(getClassName(sortOrdered), " ").concat(TABLE_SORTING_ICON_CLASS, "-").concat(activated ? 'active' : 'inactive')
   })));
 };

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _types = require("../types");
 
@@ -23,20 +27,26 @@ var _position = require("./position");
 
 var _dom = require("./dom");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject;
 
-var DraftAnnotation = _styledComponents.default.mark(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), _styles.AnnotationSharedCSSByState.focus);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var markStyles = function markStyles(props) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), (0, _styles.AnnotationSharedCSSByState)(props).focus);
+};
 
 var AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
       children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(DraftAnnotation, (0, _extends2.default)({
+  return (0, _react2.jsx)("mark", (0, _extends2.default)({
     "data-renderer-mark": true
-  }, (0, _dom.dataAttributes)(draftPosition)), children);
+  }, (0, _dom.dataAttributes)(draftPosition), {
+    css: markStyles
+  }), children);
 };
 
 exports.AnnotationDraft = AnnotationDraft;
@@ -66,13 +76,13 @@ var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
   var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map(function (value, index) {
     if (annotateIndex === index) {
-      return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
+      return (0, _react2.jsx)(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
       }, value);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    return (0, _react2.jsx)(_react.default.Fragment, {
       key: index
     }, value);
   });
@@ -103,11 +113,11 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+    return (0, _react2.jsx)(_react.Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === _types.InsertDraftPosition.AROUND_TEXT) {
-    return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
+    return (0, _react2.jsx)(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
     }, children);
@@ -117,7 +127,7 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var texts = (0, _text.splitText)(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+    return (0, _react2.jsx)(_react.Fragment, null, children);
   }
 
   var components = applyAnnotationOnText({
@@ -125,7 +135,7 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,
     draftPosition: nextDraftPosition
   });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, components);
+  return (0, _react2.jsx)(_react.Fragment, null, components);
 };
 
 exports.TextWithAnnotationDraft = TextWithAnnotationDraft;

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

@@ -19,12 +19,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,7 +35,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 MarkStyled = _styledComponents.default.mark(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, _styles.AnnotationSharedCSSByState.blur, _styles.AnnotationSharedCSSByState.focus);
+var markStyles = function markStyles(props) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), _adfSchema.AnnotationMarkStates.ACTIVE, (0, _styles.AnnotationSharedCSSByState)(props).blur, (0, _styles.AnnotationSharedCSSByState)(props).focus);
+};
 
 var MarkComponent = function MarkComponent(_ref) {
   var annotationParentIds = _ref.annotationParentIds,
@@ -70,10 +72,12 @@ var MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return /*#__PURE__*/_react.default.createElement(MarkStyled, (0, _extends2.default)({
+  return (0, _react2.jsx)("mark", (0, _extends2.default)({
     id: id,
     onClick: onMarkClick
-  }, accessibility, overriddenData), children);
+  }, accessibility, overriddenData, {
+    css: markStyles
+  }), children);
 };
 
 exports.MarkComponent = MarkComponent;

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

@@ -1,5 +1,3 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var _enums = require("../analytics/enums");

package/dist/cjs/version.json

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

package/dist/es2019/analytics/enums.js

@@ -12,6 +12,8 @@ export let 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/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

@@ -1,6 +1,6 @@
-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';
@@ -10,6 +10,23 @@ import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
+const codeBlockStyle = props => css`
+    tab-size: 4;
+    [data-ds--code--code-block] {
+      font-size: ${relativeFontSizeToBase16(fontSize())};
+      line-height: 1.5rem;
+      background-image: ${overflowShadow({
+  background: themed({
+    light: N20,
+    dark: DN50
+  })(props),
+  width: `${gridSize()}px`
+})};
+      background-attachment: local, scroll, scroll;
+      background-position: 100% 0, 100% 0, 0 0;
+    }
+  `;
+
 function CodeBlock(props) {
   const {
     text,
@@ -20,11 +37,12 @@ function CodeBlock(props) {
   const featureFlags = useFeatureFlags();
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const 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,
@@ -33,20 +51,4 @@ function CodeBlock(props) {
   }));
 }
 
-const IntlCodeBlock = injectIntl(CodeBlock);
-export default styled(IntlCodeBlock)`
-  tab-size: 4;
-  [data-ds--code--code-block] {
-    font-size: ${relativeFontSizeToBase16(fontSize())};
-    line-height: 1.5rem;
-    background-image: ${overflowShadow({
-  background: themed({
-    light: N20,
-    dark: DN50
-  }),
-  width: `${gridSize()}px`
-})};
-    background-attachment: local, scroll, scroll;
-    background-position: 100% 0, 100% 0, 0 0;
-  }
-`;
+export default injectIntl(CodeBlock);

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",