@atlaskit/renderer 92.0.0 → 93.0.1

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # @atlaskit/renderer
 
+## 93.0.1
+
+### Patch Changes
+
+- [`0c64f6136e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0c64f6136e6) - ED-14268 migrate editor-core to use emotion
+- [`b29ce16dad8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b29ce16dad8) - [ED-14606] Move bitbucket schema, confluence schema, jira schema, and default schema from @atlaskit/adf-schema to their own entry points. These new entry points are as follows
+
+  @atlaskit/adf-schema/schema-bitbucket for:
+
+  - bitbucketSchema
+
+  @atlaskit/adf-schema/schema-confluence for:
+
+  - confluenceSchema
+  - confluenceSchemaWithMediaSingle
+
+  @atlaskit/adf-schema/schema-jira for:
+
+  - default as createJIRASchema
+  - isSchemaWithLists
+  - isSchemaWithMentions
+  - isSchemaWithEmojis
+  - isSchemaWithLinks
+  - isSchemaWithAdvancedTextFormattingMarks
+  - isSchemaWithCodeBlock
+  - isSchemaWithBlockQuotes
+  - isSchemaWithMedia
+  - isSchemaWithSubSupMark
+  - isSchemaWithTextColor
+  - isSchemaWithTables
+
+  @atlaskit/adf-schema/schema-default for:
+
+  - defaultSchema
+  - getSchemaBasedOnStage
+  - defaultSchemaConfig
+
+  This change also includes codemods in @atlaskit/adf-schema to update these entry points. It also introduces a new util function "changeImportEntryPoint" to @atlaskit/codemod-utils to handle this scenario.
+
+- [`3ef794dc11f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ef794dc11f) - Removed emoji and media packages dependencies from renderer initial load.
+- Updated dependencies
+
+## 93.0.0
+
+### Major Changes
+
+- [`2ec99bf6f9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ec99bf6f9f) - [ux] ED-14651: removed react-intl v2.
+
+### Minor Changes
+
+- [`e78e261ac6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e78e261ac6f) - [ux] ED-14487: Removed IE11/Edge18 support in @atlaskit/width-detector. No longer exporting IframeWidthObserverFallbackWrapper and IframeWrapperConsumer.
+
+  - Fixed example pages
+  - Updated docs/comments
+  - Removed tests
+
+- [`bceab5fa97d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bceab5fa97d) - ED-14632: Add render count tracking reRendered event in Renderer
+- [`033bcd50ab8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/033bcd50ab8) - ED-14266 Removed all the usages of styled-components from renderer.
+
+### Patch Changes
+
+- [`ced96eebe47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ced96eebe47) - Minor changes in MarkWrapper and Expand styles.
+- [`44c6c36d8d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44c6c36d8d9) - ED-14263 replaced styled usages
+- [`860c5f319c9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/860c5f319c9) - [ux] ED-14454: Add clearfix to renderer document container to prevent content outside renderer from sliding up alongside floated media images
+- [`08a5acc6d0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08a5acc6d0e) - ED-14338 Migrated renderer examples to emotion
+- [`5c6607ee0e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c6607ee0e7) - Migrated link, rule, panel and expand styles in editor-common to emotion.
+- [`7cc9d0d6927`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7cc9d0d6927) - ED-14671 Fixed table sticky header height issue.
+- Updated dependencies
+
+## 92.0.1
+
+### Patch Changes
+
+- [`9671dfa12b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9671dfa12b1) - Revert [MEX-1276] fix vertical scroll for firefox when media link is wrapped
+
 ## 92.0.0
 
 ### Minor Changes

package/dist/cjs/analytics/enums.js

@@ -20,6 +20,7 @@ exports.ACTION = 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";

package/dist/cjs/i18n/en.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+var _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'
+};
+exports.default = _default;

package/dist/cjs/i18n/en_GB.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * 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)
+var _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'
+};
+exports.default = _default;

package/dist/cjs/i18n/pl.js

@@ -15,8 +15,14 @@ exports.default = void 0;
 var _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'
 };
 exports.default = _default;

package/dist/cjs/i18n/pt_BR.js

@@ -20,7 +20,7 @@ var _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/cjs/react/marks/alignment.js

@@ -2,33 +2,32 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Alignment;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _templateObject, _templateObject2;
-
-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); }
+var _templateObject;
 
-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 MarkWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (props) {
-  return props['data-align'] && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      text-align: ", ";\n    "])), _adfSchema.alignmentPositionMap[props['data-align']]);
-});
+var MarkWrapper = function MarkWrapper(props) {
+  var styles = props['data-align'] ? (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        text-align: ", ";\n      "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
 function Alignment(props) {
-  return /*#__PURE__*/_react.default.createElement(MarkWrapper, {
+  return (0, _react2.jsx)(MarkWrapper, {
     className: "fabric-editor-block-mark",
     "data-align": props.align
   }, props.children);

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

@@ -5,14 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = void 0;
 exports.default = Breakout;
+exports.wrapperStyles = void 0;
 
 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 _ui = require("@atlaskit/editor-common/ui");
 
@@ -22,14 +20,14 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), _editorSharedStyles.blockNodesVerticalMargin);
-
-exports.Wrapper = Wrapper;
+var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), _editorSharedStyles.blockNodesVerticalMargin);
+exports.wrapperStyles = wrapperStyles;
 
 function Breakout(props) {
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref) {
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/_react.default.createElement(Wrapper, {
+    return (0, _react.jsx)("div", {
+      css: wrapperStyles,
       "data-mode": props.mode,
       style: {
         width: (0, _utils.calcBreakoutWidth)(props.mode, width)

package/dist/cjs/react/marks/link.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,11 +13,11 @@ 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 _colors = require("@atlaskit/theme/colors");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _utils = require("../../utils");
 
@@ -25,7 +27,11 @@ var _enums = require("../../analytics/enums");
 
 var _templateObject;
 
-var StyledAnchor = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _colors.B400, _colors.B300);
+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 anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _colors.B400, _colors.B300);
 
 function Link(props) {
   var href = props.href,
@@ -47,10 +53,11 @@ function Link(props) {
   var handler = (0, _utils.getEventHandler)(eventHandlers, 'link');
 
   if (isMediaLink) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
+    return (0, _react2.jsx)(_react.Fragment, null, props.children);
   }
 
-  return /*#__PURE__*/_react.default.createElement(StyledAnchor, (0, _extends2.default)({
+  return (0, _react2.jsx)("a", (0, _extends2.default)({
+    css: anchorStyles,
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({

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

@@ -32,7 +32,7 @@ var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton
 var _templateObject;
 
 var codeBlockStyle = function codeBlockStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
       light: _colors.N20,
       dark: _colors.DN50

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

@@ -13,11 +13,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -37,18 +37,18 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 CopyButtonWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N20, _colors.N30, _colors.N700);
+var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N20, _colors.N30, _colors.N700);
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,
       intl = _ref.intl;
 
-  var _useState = (0, _react.useState)(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copyCodeToClipboard)),
+  var _useState = (0, _react2.useState)(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copyCodeToClipboard)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       tooltip = _useState2[0],
       setTooltip = _useState2[1];
 
-  var _useState3 = (0, _react.useState)('copy-to-clipboard'),
+  var _useState3 = (0, _react2.useState)('copy-to-clipboard'),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       className = _useState4[0],
       setClassName = _useState4[1];
@@ -58,21 +58,23 @@ var CopyButton = function CopyButton(_ref) {
     setClassName('copy-to-clipboard');
   };
 
-  return /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextConsumer, null, function (_ref2) {
+  return (0, _react.jsx)(_copyTextProvider.CopyTextConsumer, null, function (_ref2) {
     var copyTextToClipboard = _ref2.copyTextToClipboard;
-    return /*#__PURE__*/_react.default.createElement(CopyButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    return (0, _react.jsx)("span", {
+      css: copyButtonWrapperStyles
+    }, (0, _react.jsx)(_tooltip.default, {
       content: tooltip,
       hideTooltipOnClick: false,
       position: "top"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _react.jsx)("div", {
       onMouseLeave: onMouseLeave
-    }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    }, (0, _react.jsx)(_customThemeButton.default, {
       className: className,
       "aria-label": tooltip,
       spacing: "compact",
       appearance: "subtle",
       "aria-haspopup": true,
-      iconBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
+      iconBefore: (0, _react.jsx)(_copy.default, {
         label: tooltip
       }),
       onClick: function onClick() {

package/dist/cjs/react/nodes/embedCard.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
 });
@@ -15,7 +13,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _smartCard = require("@atlaskit/smart-card");
 
@@ -27,26 +27,14 @@ var _utils = require("../../utils");
 
 var _fallback = require("./fallback");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _style = require("../../ui/Renderer/style");
 
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 
 var _templateObject, _templateObject2;
 
-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 EmbedCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _styledComponents.default)(_ui.MediaSingle)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
 
 function EmbedCard(props) {
   var url = props.url,
@@ -58,9 +46,9 @@ function EmbedCard(props) {
       isInsideOfBlockNode = props.isInsideOfBlockNode,
       allowDynamicTextSizing = props.allowDynamicTextSizing,
       rendererAppearance = props.rendererAppearance;
-  var embedIframeRef = (0, _react.useRef)(null);
+  var embedIframeRef = (0, _react2.useRef)(null);
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
-  var platform = (0, _react.useMemo)(function () {
+  var platform = (0, _react2.useMemo)(function () {
     return (0, _utils.getPlatform)(rendererAppearance);
   }, [rendererAppearance]);
   var cardProps = {
@@ -72,12 +60,12 @@ function EmbedCard(props) {
     showActions: platform === 'web'
   };
 
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react2.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       liveHeight = _useState2[0],
       setLiveHeight = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react2.useState)(),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       aspectRatio = _useState4[0],
       setAspectRatio = _useState4[1];
@@ -108,15 +96,15 @@ function EmbedCard(props) {
 
   var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
 
-  var _useState5 = (0, _react.useState)(true),
+  var _useState5 = (0, _react2.useState)(true),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       hasPreview = _useState6[0],
       setPreviewAvailableState = _useState6[1];
 
-  var cardContext = (0, _react.useContext)(_smartCard.Context);
+  var cardContext = (0, _react2.useContext)(_smartCard.Context);
 
-  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) {
@@ -126,9 +114,9 @@ function EmbedCard(props) {
     setAspectRatio(resolvedAspectRatio);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
-    var containerWidth = _ref3.width,
-        breakpoint = _ref3.breakpoint;
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
+    var containerWidth = _ref2.width,
+        breakpoint = _ref2.breakpoint;
     var nonFullWidthSize = containerWidth;
     var isFullWidth = rendererAppearance === 'full-width';
 
@@ -145,12 +133,14 @@ function EmbedCard(props) {
     }
 
     var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    return /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
+    return (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
       unsupportedComponent: _ui.UnsupportedBlock
-    }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.EmbedResizeMessageListener, {
+    }, cardProps), (0, _react.jsx)(_smartCard.EmbedResizeMessageListener, {
       embedIframeRef: embedIframeRef,
       onHeightUpdate: setLiveHeight
-    }, /*#__PURE__*/_react.default.createElement(ExtendedEmbedCard, {
+    }, (0, _react.jsx)(_ui.MediaSingle, {
+      css: uiMediaSingleStyles,
       layout: layout,
       width: originalWidth,
       containerWidth: containerWidth,
@@ -160,7 +150,9 @@ function EmbedCard(props) {
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       hasFallbackContainer: hasPreview
-    }, /*#__PURE__*/_react.default.createElement(EmbedCardWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _react.jsx)("div", {
+      css: embedCardWrapperStyles
+    }, (0, _react.jsx)("div", {
       className: "embedCardView-content-wrap",
       "data-embed-card": true,
       "data-layout": layout,
@@ -168,7 +160,7 @@ function EmbedCard(props) {
       "data-card-data": data ? JSON.stringify(data) : undefined,
       "data-card-url": url,
       "data-card-original-height": originalHeight
-    }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
+    }, (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
       appearance: "embed"
     }, cardProps, {
       onResolve: onResolve,

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

@@ -33,7 +33,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -59,13 +59,13 @@ exports.HeadingAnchorWrapperClassName = HeadingAnchorWrapperClassName;
 var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
       rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)("span", (0, _extends2.default)({}, rest, {
     className: HeadingAnchorWrapperClassName,
     ref: ref
   }), children);
 });
 
-var CopyAnchorButton = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), _colors.N500);
+var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), _colors.N500);
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
@@ -140,11 +140,12 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       _this.setTooltipState(_messages.headingAnchorLinkMessages.copyHeadingLinkToClipboard);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAnchorButton", function () {
-      return /*#__PURE__*/_react.default.createElement(CopyAnchorButton, {
+      return (0, _react2.jsx)("button", {
+        css: copyAnchorButtonStyles,
         onMouseLeave: _this.resetMessage,
         onClick: _this.copyToClipboard,
         "aria-label": _this.state.tooltipMessage
-      }, /*#__PURE__*/_react.default.createElement(_link.default, {
+      }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
         primaryColor: _this.state.isClicked ? _colors.B400 : _colors.N200
@@ -167,7 +168,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.default.createElement(_tooltip.default, {
+        return (0, _react2.jsx)(_tooltip.default, {
           tag: CopyAnchorWrapperWithRef,
           content: tooltipMessage,
           position: "top",