@atlaskit/renderer 108.18.0 → 108.20.0

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

@@ -1,4 +1,5 @@
-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';
@@ -8,9 +9,9 @@ export const wrapperStyles = css`
   transform: translateX(-50%);
 `;
 export default function Breakout(props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return jsx(WidthConsumer, null, ({
     width
-  }) => /*#__PURE__*/React.createElement("div", {
+  }) => jsx("div", {
     css: wrapperStyles,
     "data-mode": props.mode,
     style: {

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -38,7 +39,7 @@ export default function Link(props) {
   }
   const handler = getEventHandler(eventHandlers, 'link');
   if (isMediaLink) {
-    return /*#__PURE__*/React.createElement(Fragment, null, props.children);
+    return jsx(Fragment, null, props.children);
   }
   const analyticsData = {
     attributes: {
@@ -47,9 +48,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: e => {
       if (fireAnalyticsEvent) {

package/dist/es2019/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';
@@ -56,7 +57,7 @@ export default function BlockCard(props) {
   };
   if (props.datasource) {
     if (platform === 'mobile') {
-      return /*#__PURE__*/React.createElement(InlineCard, props);
+      return jsx(InlineCard, props);
     }
     const views = props.datasource.views;
     const tableView = views.find(view => view.type === 'table');
@@ -75,18 +76,18 @@ export default function BlockCard(props) {
         datasource,
         layout
       } = props;
-      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, ({
+      }, cardProps), jsx(WidthConsumer, null, ({
         width
-      }) => /*#__PURE__*/React.createElement("div", {
+      }) => jsx("div", {
         css: datasourceContainerStyle,
         style: {
           width: calcBreakoutWidth(layout, width)
         }
-      }, /*#__PURE__*/React.createElement(DatasourceTableView, {
+      }, jsx(DatasourceTableView, {
         datasourceId: datasource.id,
         parameters: datasource.parameters,
         visibleColumnKeys: visibleColumnKeys,
@@ -94,21 +95,21 @@ export default function BlockCard(props) {
         url: url
       })))));
     }
-    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/es2019/react/nodes/codeBlock/codeBlock.js

@@ -1,4 +1,6 @@
+/** @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';
@@ -15,14 +17,14 @@ function CodeBlock(props) {
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
   const [wrapLongLines, setWrapLongLines] = useState(false);
-  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/es2019/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';
@@ -45,14 +46,14 @@ const CodeBlockButtonContainer = ({
   text,
   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/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -1,4 +1,5 @@
-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';
@@ -47,10 +48,10 @@ const CodeBlockContainer = ({
   text,
   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/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
@@ -17,20 +19,20 @@ const CopyButton = ({
     setTooltip(intl.formatMessage(codeBlockButtonMessages.copyCodeToClipboard));
     setClassName('copy-to-clipboard');
   };
-  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
+  return jsx(AnalyticsContext.Consumer, null, ({
     fireAnalyticsEvent
-  }) => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, {
+  }) => 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: event => {

package/dist/es2019/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';
 const 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"
@@ -27,18 +29,18 @@ const CodeBlockWrapButton = ({
   intl
 }) => {
   const wrapMessage = intl.formatMessage(wrapLongLines ? codeBlockButtonMessages.unwrapCode : codeBlockButtonMessages.wrapCode);
-  return /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
+  return jsx(AnalyticsContext.Consumer, null, ({
     fireAnalyticsEvent
-  }) => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, {
+  }) => 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 ${wrapLongLines ? 'clicked' : ''}`,
-    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+    iconBefore: jsx(Icon, {
       glyph: WrapIcon,
       label: ""
     }),

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

@@ -1,5 +1,6 @@
+/** @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';
@@ -40,20 +41,20 @@ const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
     enableWarningTooltip: codeBidiWarningTooltipEnabled
   });
   const 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((_, index) => /*#__PURE__*/React.createElement("span", {
+  }, textRows.map((_, index) => 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/es2019/react/nodes/codeBlock/windowedCodeBlock.js

@@ -1,4 +1,6 @@
+/** @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';
@@ -26,23 +28,23 @@ const WindowedCodeBlock = ({
     trackingRef
   } = useInViewport();
   const className = joinWithSpaces(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, rootClassName);
-  const memoizedLightWeightCodeBlock = /*#__PURE__*/React.createElement(MemoizedLightWeightCodeBlock, {
+  const memoizedLightWeightCodeBlock = jsx(MemoizedLightWeightCodeBlock, {
     ref: trackingRef,
     text: text,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
     className: rootClassName
   });
   const [wrapLongLines, setWrapLongLines] = useState(false);
-  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/es2019/react/nodes/embedCard.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-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';
@@ -97,9 +98,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, ({
+  }, jsx(WidthConsumer, null, ({
     width: documentWidth
   }) => {
     const isFullWidth = rendererAppearance === 'full-width';
@@ -126,12 +127,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,
@@ -142,9 +143,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,
@@ -152,7 +153,7 @@ export default function EmbedCard(props) {
       "data-card-data": data ? JSON.stringify(data) : undefined,
       "data-card-url": url,
       "data-card-original-height": originalHeight
-    }, /*#__PURE__*/React.createElement(Card, _extends({
+    }, jsx(Card, _extends({
       appearance: "embed"
     }, cardProps, {
       onResolve: onResolve,

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -13,7 +14,7 @@ const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+  return jsx("span", _extends({}, rest, {
     className: HeadingAnchorWrapperClassName,
     ref: ref
   }), children);
@@ -64,12 +65,12 @@ class HeadingAnchor extends React.PureComponent {
       this.setTooltipState(headingAnchorLinkMessages.copyHeadingLinkToClipboard);
     });
     _defineProperty(this, "renderAnchorButton", () => {
-      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, ${B400})` : `var(--ds-icon-subtle, ${N200})`
@@ -87,7 +88,7 @@ class HeadingAnchor extends React.PureComponent {
       // We set the key to the message to ensure it remounts when the message
       // changes, so that it correctly repositions.
       // @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         tag: CopyAnchorWrapperWithRef,
         content: tooltipMessage,
         position: "top",

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

@@ -1,18 +1,19 @@
+/** @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';
 const layoutColumnClearMarginTopStyles = css`
   ${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: `${props.width}%`
     }
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx(WidthProvider, null, jsx("div", {
     css: layoutColumnClearMarginTopStyles
   }), props.children));
 }

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

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
+/** @jsx jsx */
+
+import React from 'react';
+import { 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';
@@ -17,6 +21,7 @@ export default class Media extends PureComponent {
     _defineProperty(this, "renderCard", (providers = {}) => {
       var _borderMark$attrs$col, _borderMark$attrs$siz;
       const {
+        mediaProvider,
         contextIdentifierProvider
       } = providers;
       const {
@@ -34,13 +39,14 @@ export default class Media extends PureComponent {
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
       const shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      const mediaComponent = /*#__PURE__*/React.createElement(AnalyticsContext, {
+      const mediaComponent = jsx(AnalyticsContext, {
         data: {
           [MEDIA_CONTEXT]: {
             border: !!borderMark
           }
         }
-      }, /*#__PURE__*/React.createElement(MediaCard, _extends({
+      }, jsx(MediaCard, _extends({
+        mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -51,15 +57,15 @@ export default class Media extends PureComponent {
         ssr: ssr
       })));
       const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
-      const mediaComponentWithBorder = borderMark ? /*#__PURE__*/React.createElement("div", {
+      const 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,
@@ -101,7 +107,7 @@ export default class Media extends PureComponent {
     if (!providers) {
       return this.renderCard();
     }
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providers,
       renderNode: this.renderCard

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaClientContext } from '@atlaskit/media-client-react';
+import { getMediaClient } from '@atlaskit/media-client-react';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
 export const RenderMediaInline = ({
@@ -12,31 +12,31 @@ export const RenderMediaInline = ({
   clipboardAttrs,
   mediaInlineProviders,
   collection: collectionName,
+  featureFlags,
   eventHandlers,
   identifier
 }) => {
   const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
+  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
   const [fileState, setFileState] = useState();
-  const mediaClient = React.useContext(MediaClientContext);
   const updateContext = async contextIdentifierProvider => {
     if (contextIdentifierProvider) {
       const resolvedContextID = await contextIdentifierProvider;
       setContextIdentifierProvider(resolvedContextID);
     }
   };
-  const updateFileState = useCallback(async id => {
+  const updateFileState = useCallback(async (id, mediaClientConfig) => {
+    const mediaClient = getMediaClient(mediaClientConfig);
     const options = {
       collectionName
     };
     try {
-      if (mediaClient) {
-        const fileState = await mediaClient.file.getCurrentState(id, options);
-        setFileState(fileState);
-      }
+      const fileState = await mediaClient.file.getCurrentState(id, options);
+      setFileState(fileState);
     } catch (error) {
       // do not set state on error
     }
-  }, [collectionName, mediaClient]);
+  }, [collectionName]);
   useEffect(() => {
     const {
       id
@@ -54,20 +54,28 @@ export const RenderMediaInline = ({
   }, [identifier, collectionName]);
   useEffect(() => {
     const {
+      mediaProvider,
       contextIdentifierProvider
     } = mediaInlineProviders;
     const {
       id
     } = clipboardAttrs;
+    updateViewMediaClientConfigState(mediaProvider);
     updateContext(contextIdentifierProvider);
-    id && updateFileState(id);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
+    id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
+  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
+  const updateViewMediaClientConfigState = async mediaProvider => {
+    if (mediaProvider) {
+      const mediaClientConfig = await mediaProvider;
+      setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+    }
+  };
 
   /*
    * Only show the loading view if the media provider is not ready
    * prevents calling the media API before the provider is ready
    */
-  if (!mediaClient) {
+  if (!viewMediaClientConfigState) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
@@ -101,7 +109,7 @@ export const RenderMediaInline = ({
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: mediaClient.mediaClientConfig,
+    mediaClientConfig: viewMediaClientConfigState,
     mediaViewerItems: Array.from(mediaIdentifierMap.values())
   }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
     message: (intl || createIntl({

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -1,4 +1,7 @@
+/** @jsx jsx */
+
 import { default as React, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -150,7 +153,7 @@ const MediaSingle = props => {
       featureFlags
     });
     const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
-    return /*#__PURE__*/React.createElement(UIMediaSingle, {
+    return jsx(UIMediaSingle, {
       css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
@@ -163,9 +166,9 @@ const MediaSingle = props => {
         widthType
       },
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/React.createElement(Fragment, null, mediaComponent), allowCaptions && caption);
+    }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return jsx(WidthConsumer, null, ({
     width
   }) => {
     // Note: in SSR mode the `window` object is not defined,

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { css } from '@emotion/react';
 export const uiMediaSingleBaseStyles = css`
   transition: all 0.1s linear;