@atlaskit/renderer 108.18.0 → 108.19.0

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

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { alignmentPositionMap } from '@atlaskit/adf-schema';
 var MarkWrapper = function MarkWrapper(props) {
   var styles = props['data-align'] ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        text-align: ", ";\n      "])), alignmentPositionMap[props['data-align']]) : '';
-  return /*#__PURE__*/React.createElement("div", _extends({
+  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 fabric-editor-alignment",
     "data-align": props.align
   }, props.children);

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

@@ -1,14 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 export var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), blockNodesVerticalMargin);
 export default function Breakout(props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref) {
+  return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: wrapperStyles,
       "data-mode": props.mode,
       style: {

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -27,7 +28,7 @@ export default function Link(props) {
   }
   var handler = getEventHandler(eventHandlers, 'link');
   if (isMediaLink) {
-    return /*#__PURE__*/React.createElement(Fragment, null, props.children);
+    return jsx(Fragment, null, props.children);
   }
   var analyticsData = {
     attributes: {
@@ -36,9 +37,9 @@ export default function Link(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+  return jsx(AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/React.createElement(LinkUrl, _extends({
+  }, jsx(LinkUrl, _extends({
     css: anchorStyles,
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import { useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
 import { UnsupportedBlock, UnsupportedInline, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { getPlatform } from '../../utils';
@@ -54,7 +55,7 @@ export default function BlockCard(props) {
   };
   if (props.datasource) {
     if (platform === 'mobile') {
-      return /*#__PURE__*/React.createElement(InlineCard, props);
+      return jsx(InlineCard, props);
     }
     var views = props.datasource.views;
     var tableView = views.find(function (view) {
@@ -77,18 +78,18 @@ export default function BlockCard(props) {
       var columnCustomSizes = columnCustomSizesEntries !== null && columnCustomSizesEntries !== void 0 && columnCustomSizesEntries.length ? Object.fromEntries(columnCustomSizesEntries) : undefined;
       var datasource = props.datasource,
         layout = props.layout;
-      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      return jsx(AnalyticsContext, {
         data: analyticsData
-      }, /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
+      }, jsx(CardErrorBoundary, _extends({
         unsupportedComponent: UnsupportedInline
-      }, cardProps), /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref5) {
+      }, cardProps), jsx(WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           css: datasourceContainerStyle,
           style: {
             width: calcBreakoutWidth(layout, width)
           }
-        }, /*#__PURE__*/React.createElement(DatasourceTableView, {
+        }, jsx(DatasourceTableView, {
           datasourceId: datasource.id,
           parameters: datasource.parameters,
           visibleColumnKeys: visibleColumnKeys,
@@ -97,21 +98,21 @@ export default function BlockCard(props) {
         }));
       })));
     }
-    return /*#__PURE__*/React.createElement(InlineCard, {
+    return jsx(InlineCard, {
       data: data,
       url: url
     });
   }
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+  return jsx(AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
     "data-card-url": url
-  }, /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
+  }, jsx(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedBlock
-  }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
+  }, cardProps), jsx(Card, _extends({
     appearance: "block",
     showActions: rendererAppearance !== 'mobile',
     platform: platform,

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

@@ -1,5 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
 import { useState } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
@@ -19,14 +21,14 @@ function CodeBlock(props) {
     _useState2 = _slicedToArray(_useState, 2),
     wrapLongLines = _useState2[0],
     setWrapLongLines = _useState2[1];
-  return /*#__PURE__*/React.createElement(CodeBlockContainer, {
+  return jsx(CodeBlockContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,
     wrapLongLines: wrapLongLines
-  }, /*#__PURE__*/React.createElement(AkCodeBlock, {
+  }, jsx(AkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: codeBidiWarningLabel,

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

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import CopyButton from './codeBlockCopyButton';
 import CodeWrapButton from './codeBlockWrapButton';
 import { N0, N20, N30, N700 } from '@atlaskit/theme/colors';
@@ -44,14 +45,14 @@ var CodeBlockButtonContainer = function CodeBlockButtonContainer(_ref) {
     setWrapLongLines = _ref.setWrapLongLines,
     text = _ref.text,
     wrapLongLines = _ref.wrapLongLines;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: codeBlockButtonsWrapper
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: codeBlockButtonsStyle
-  }, allowWrapCodeBlock && /*#__PURE__*/React.createElement(CodeWrapButton, {
+  }, allowWrapCodeBlock && jsx(CodeWrapButton, {
     setWrapLongLines: setWrapLongLines,
     wrapLongLines: wrapLongLines
-  }), allowCopyToClipboard && /*#__PURE__*/React.createElement(CopyButton, {
+  }), allowCopyToClipboard && jsx(CopyButton, {
     content: text
   })));
 };

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

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
@@ -27,10 +28,10 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
     setWrapLongLines = _ref.setWrapLongLines,
     text = _ref.text,
     wrapLongLines = _ref.wrapLongLines;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     className: className,
     css: codeBlockStyleOverrides
-  }, /*#__PURE__*/React.createElement(CodeBlockButtonContainer, {
+  }, jsx(CodeBlockButtonContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,
     setWrapLongLines: setWrapLongLines,

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

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
@@ -23,20 +25,20 @@ var CopyButton = function CopyButton(_ref) {
     setTooltip(intl.formatMessage(codeBlockButtonMessages.copyCodeToClipboard));
     setClassName('copy-to-clipboard');
   };
-  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {
+  return jsx(AnalyticsContext.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx("span", null, jsx(Tooltip, {
       content: tooltip,
       hideTooltipOnClick: false,
       position: "top"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       onMouseLeave: onMouseLeave
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, jsx(Button, {
       appearance: "subtle",
       "aria-haspopup": true,
       "aria-label": tooltip,
       className: className,
-      iconBefore: /*#__PURE__*/React.createElement(CopyIcon, {
+      iconBefore: jsx(CopyIcon, {
         label: tooltip
       }),
       onClick: function onClick(event) {

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
@@ -7,15 +9,15 @@ import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../../analytics/enums';
 import AnalyticsContext from '../../../../analytics/analyticsContext';
 var WrapIcon = function WrapIcon() {
-  return /*#__PURE__*/React.createElement("svg", {
+  return jsx("svg", {
     width: "24",
     height: "24",
     fill: "none",
     viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, jsx("g", {
     fill: "currentColor",
     clipPath: "url(#clip0_654_431)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
     clipRule: "evenodd",
     fillRule: "evenodd"
@@ -26,18 +28,18 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
     wrapLongLines = _ref.wrapLongLines,
     intl = _ref.intl;
   var wrapMessage = intl.formatMessage(wrapLongLines ? codeBlockButtonMessages.unwrapCode : codeBlockButtonMessages.wrapCode);
-  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {
+  return jsx(AnalyticsContext.Consumer, null, function (_ref2) {
     var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx("span", null, jsx(Tooltip, {
       content: wrapMessage,
       hideTooltipOnClick: false,
       position: "top"
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, jsx(Button, {
       appearance: "subtle",
       "aria-haspopup": true,
       "aria-label": wrapMessage,
       className: "wrap-code ".concat(wrapLongLines ? 'clicked' : ''),
-      iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      iconBefore: jsx(Icon, {
         glyph: WrapIcon,
         label: ""
       }),

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

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 import React, { forwardRef, useMemo } from 'react';
-import { css, useTheme } from '@emotion/react';
+import { css, jsx, useTheme } from '@emotion/react';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
@@ -33,22 +34,22 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }),
     renderBidiWarnings = _useBidiWarnings.renderBidiWarnings;
   var classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     className: classNames,
     ref: ref,
     css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
   }, textRows.map(function (_, index) {
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       key: index
     });
-  })), /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
-  }, /*#__PURE__*/React.createElement("code", null, renderBidiWarnings(text))))));
+  }, jsx("code", null, renderBidiWarnings(text))))));
 });
 export default LightWeightCodeBlock;

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

@@ -1,7 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
 import { Fragment, lazy, memo, Suspense, useState } from 'react';
+import { jsx } from '@emotion/react';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useInViewport } from '../../hooks/use-in-viewport';
 import { useBidiWarnings } from '../../hooks/use-bidi-warnings';
@@ -42,7 +44,7 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
     isInViewport = _useInViewport.isInViewport,
     trackingRef = _useInViewport.trackingRef;
   var className = joinWithSpaces(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, rootClassName);
-  var memoizedLightWeightCodeBlock = /*#__PURE__*/React.createElement(MemoizedLightWeightCodeBlock, {
+  var memoizedLightWeightCodeBlock = jsx(MemoizedLightWeightCodeBlock, {
     ref: trackingRef,
     text: text,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
@@ -52,16 +54,16 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     wrapLongLines = _useState2[0],
     setWrapLongLines = _useState2[1];
-  return isInViewport ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Suspense, {
+  return isInViewport ? jsx(Fragment, null, jsx(Suspense, {
     fallback: memoizedLightWeightCodeBlock
-  }, /*#__PURE__*/React.createElement(CodeBlockContainer, {
+  }, jsx(CodeBlockContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
     allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,
     wrapLongLines: wrapLongLines
-  }, /*#__PURE__*/React.createElement(LazyAkCodeBlock, {
+  }, jsx(LazyAkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: warningLabel,

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

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { SmartCardContext } from '@atlaskit/link-provider';
@@ -92,9 +93,9 @@ export default function EmbedCard(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
-  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+  return jsx(AnalyticsContext, {
     data: analyticsData
-  }, /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+  }, jsx(WidthConsumer, null, function (_ref2) {
     var documentWidth = _ref2.width;
     var isFullWidth = rendererAppearance === 'full-width';
     var containerWidth = documentWidth;
@@ -119,12 +120,12 @@ export default function EmbedCard(props) {
         throw err;
       }
     };
-    return /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
+    return jsx(CardErrorBoundary, _extends({
       unsupportedComponent: UnsupportedBlock
-    }, cardProps), /*#__PURE__*/React.createElement(EmbedResizeMessageListener, {
+    }, cardProps), jsx(EmbedResizeMessageListener, {
       embedIframeRef: embedIframeRef,
       onHeightUpdate: setLiveHeight
-    }, /*#__PURE__*/React.createElement(UIMediaSingle, {
+    }, jsx(UIMediaSingle, {
       css: uiMediaSingleStyles,
       layout: layout,
       width: originalWidth,
@@ -135,9 +136,9 @@ export default function EmbedCard(props) {
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       hasFallbackContainer: hasPreview
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: embedCardWrapperStyles
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       className: "embedCardView-content-wrap",
       "data-embed-card": true,
       "data-layout": layout,
@@ -145,7 +146,7 @@ export default function EmbedCard(props) {
       "data-card-data": data ? JSON.stringify(data) : undefined,
       "data-card-url": url,
       "data-card-original-height": originalHeight
-    }, /*#__PURE__*/React.createElement(Card, _extends({
+    }, jsx(Card, _extends({
       appearance: "embed"
     }, cardProps, {
       onResolve: onResolve,

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

@@ -14,8 +14,9 @@ var _excluded = ["children"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+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';
@@ -25,7 +26,7 @@ export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+  return jsx("span", _extends({}, rest, {
     className: HeadingAnchorWrapperClassName,
     ref: ref
   }), children);
@@ -90,12 +91,12 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       _this.setTooltipState(headingAnchorLinkMessages.copyHeadingLinkToClipboard);
     });
     _defineProperty(_assertThisInitialized(_this), "renderAnchorButton", function () {
-      return /*#__PURE__*/React.createElement("button", {
+      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 ? "var(--ds-icon-selected, ".concat(B400, ")") : "var(--ds-icon-subtle, ".concat(N200, ")")
@@ -116,7 +117,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         // We set the key to the message to ensure it remounts when the message
         // changes, so that it correctly repositions.
         // @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
-        return /*#__PURE__*/React.createElement(Tooltip, {
+        return jsx(Tooltip, {
           tag: CopyAnchorWrapperWithRef,
           content: tooltipMessage,
           position: "top",

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

@@ -1,17 +1,18 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
 var layoutColumnClearMarginTopStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle);
 export default function LayoutSection(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-layout-column": true,
     "data-column-width": props.width,
     style: {
       flexBasis: "".concat(props.width, "%")
     }
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx(WidthProvider, null, jsx("div", {
     css: layoutColumnClearMarginTopStyles
   }), props.children));
 }

package/dist/esm/react/nodes/media/index.js

@@ -8,7 +8,10 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+/** @jsx jsx */
+
 import React, { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
@@ -47,11 +50,11 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      var mediaComponent = /*#__PURE__*/React.createElement(AnalyticsContext, {
+      var mediaComponent = jsx(AnalyticsContext, {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, /*#__PURE__*/React.createElement(MediaCard, _extends({
+      }, jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -62,15 +65,15 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         ssr: ssr
       })));
       var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
-      var mediaComponentWithBorder = borderMark ? /*#__PURE__*/React.createElement("div", {
+      var mediaComponentWithBorder = borderMark ? jsx("div", {
         "data-mark-type": "border",
         "data-color": borderColor,
         "data-size": borderWidth,
         css: borderStyle(paletteColorValue, borderWidth)
-      }, /*#__PURE__*/React.createElement(MediaBorderGapFiller, {
+      }, jsx(MediaBorderGapFiller, {
         borderColor: borderColor
       }), mediaComponent) : mediaComponent;
-      return linkHref ? /*#__PURE__*/React.createElement("a", {
+      return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
@@ -112,7 +115,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       if (!providers) {
         return this.renderCard();
       }
-      return /*#__PURE__*/React.createElement(WithProviders, {
+      return jsx(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providers,
         renderNode: this.renderCard

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

@@ -12,6 +12,7 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaClientContext } from '@atlaskit/media-client-react';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
+import { shouldShowInlineImage, MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 export var RenderMediaInline = function RenderMediaInline(_ref) {
   var rendererAppearance = _ref.rendererAppearance,
     intl = _ref.intl,
@@ -19,7 +20,12 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     mediaInlineProviders = _ref.mediaInlineProviders,
     collectionName = _ref.collection,
     eventHandlers = _ref.eventHandlers,
-    identifier = _ref.identifier;
+    identifier = _ref.identifier,
+    alt = _ref.alt,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? '' : _ref$type;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     contextIdentifierProvider = _useState2[0],
@@ -130,6 +136,15 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
   var mediaProvider = mediaInlineProviders.mediaProvider;
   var id = clipboardAttrs.id,
     collection = clipboardAttrs.collection;
+  if (shouldShowInlineImage(type)) {
+    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
+      mediaClient: mediaClient,
+      identifier: identifier,
+      alt: alt,
+      width: width,
+      height: height
+    });
+  }
   return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
     id: id,
     collection: collection,
@@ -156,7 +171,11 @@ var MediaInline = function MediaInline(props) {
     providerFactory = props.providers,
     intl = props.intl,
     rendererAppearance = props.rendererAppearance,
-    featureFlags = props.featureFlags;
+    featureFlags = props.featureFlags,
+    fileType = props.type,
+    alt = props.alt,
+    width = props.width,
+    height = props.height;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -178,7 +197,11 @@ var MediaInline = function MediaInline(props) {
         intl: intl,
         mediaInlineProviders: mediaInlineProviders,
         collection: collection,
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        type: fileType,
+        alt: alt,
+        width: width,
+        height: height
       });
     }
   });