@atlaskit/renderer 92.0.1 → 93.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/renderer
 
+## 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

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

package/dist/cjs/react/nodes/mediaSingle/index.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
 });
@@ -9,7 +11,9 @@ exports.getMediaContainerWidth = exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -25,6 +29,11 @@ var _useObservedWidth2 = require("../../hooks/use-observed-width");
 
 var _styles = require("./styles");
 
+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; }
+
+/** @jsx jsx */
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
 
@@ -198,7 +207,9 @@ var MediaSingle = function MediaSingle(props) {
       featureFlags: featureFlags
     });
 
-    return /*#__PURE__*/_react.default.createElement(_styles.ExtendedUIMediaSingle, {
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [_styles.uiMediaSingleBaseStyles, _styles.uiMediaSingleLayoutStyles] : [_styles.uiMediaSingleBaseStyles];
+    return (0, _react2.jsx)(_ui.MediaSingle, {
+      css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
       width: width,
@@ -207,10 +218,10 @@ var MediaSingle = function MediaSingle(props) {
       containerWidth: containerWidth,
       pctWidth: pctWidth,
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+    }, (0, _react2.jsx)(_react.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };
 
-  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref3) {
     var width = _ref3.width,
         breakpoint = _ref3.breakpoint;
     return renderMediaSingle(width, breakpoint);

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

@@ -5,18 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExtendedUIMediaSingle = void 0;
+exports.uiMediaSingleLayoutStyles = exports.uiMediaSingleBaseStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
-var _ui = require("@atlaskit/editor-common/ui");
+var _templateObject, _templateObject2;
 
-var _templateObject;
-
-var ExtendedUIMediaSingle = (0, _styledComponents.default)(_ui.MediaSingle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " transition: all 0.1s linear;\n"])), function (_ref) {
-  var layout = _ref.layout;
-  return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";
-});
-exports.ExtendedUIMediaSingle = ExtendedUIMediaSingle;
+var uiMediaSingleBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  transition: all 0.1s linear;\n"])));
+exports.uiMediaSingleBaseStyles = uiMediaSingleBaseStyles;
+var uiMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
+exports.uiMediaSingleLayoutStyles = uiMediaSingleLayoutStyles;

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

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _hint = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/hint"));
 
@@ -27,19 +29,27 @@ var _theme = require("@atlaskit/theme");
 
 var _icons = require("@atlaskit/editor-common/icons");
 
-var _templateObject;
-
-var PanelStyled = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
-  if (props['data-panel-type'] !== _adfSchema.PanelType.CUSTOM || !props.backgroundColor) {
-    return '';
-  } // Similar to mainDynamicStyles()
+var _templateObject, _templateObject2;
 
+var PanelStyled = function PanelStyled(props) {
+  var styles = function styles(themeProps) {
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+  };
 
-  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat((0, _theme.themed)({
-    dark: _styles.getPanelBackgroundDarkModeColors
-  }), ";\n      }\n    ");
-});
+  if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && props.backgroundColor) {
+    styles = function styles(themeProps) {
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", ";\n      }\n    "])), _adfSchema.PanelType.CUSTOM, props.backgroundColor, (0, _theme.themed)({
+        dark: _styles.getPanelBackgroundDarkModeColors
+      })(themeProps));
+    };
+  }
+
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
+PanelStyled.displayName = 'PanelStyled';
 var panelIcons = {
   info: _icons.PanelInfoIcon,
   success: _icons.PanelSuccessIcon,
@@ -66,7 +76,7 @@ var Panel = function Panel(props) {
   var getIcon = function getIcon() {
     if (panelType === _adfSchema.PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/_react.default.createElement(_emoji2.default, {
+        return (0, _react2.jsx)(_emoji2.default, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -78,7 +88,7 @@ var Panel = function Panel(props) {
     }
 
     var Icon = panelIcons[panelType];
-    return /*#__PURE__*/_react.default.createElement(Icon, {
+    return (0, _react2.jsx)(Icon, {
       label: "Panel ".concat(panelType)
     });
   };
@@ -87,13 +97,13 @@ var Panel = function Panel(props) {
     var icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         className: _styles.PanelSharedCssClassName.icon
       }, icon);
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(PanelStyled, {
+  return (0, _react2.jsx)(PanelStyled, {
     className: _styles.PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -101,7 +111,7 @@ var Panel = function Panel(props) {
     "data-panel-icon-id": panelIconId,
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
-  }, renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
+  }, renderIcon(), (0, _react2.jsx)("div", {
     className: _styles.PanelSharedCssClassName.content
   }, children));
 };