@atlaskit/smart-card 26.42.11 → 26.43.0

package/dist/es2019/view/BlockCard/views/ErroredView.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useMemo } from 'react';
 import { R300 } from '@atlaskit/theme/colors';
@@ -27,29 +29,29 @@ export const ErroredView = ({
 }) => {
   const handleClick = event => handleClickCommon(event, onClick);
   const actions = useMemo(() => onRetry ? [RetryAction(onRetry)] : [], [onRetry]);
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
     className: blockCardErroredViewClassName,
     isFluidHeight: true,
     inheritDimensions: inheritDimensions
-  }, /*#__PURE__*/React.createElement(Content, {
+  }, jsx(Content, {
     isCompact: true
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ContentHeader, {
+  }, jsx("div", null, jsx(ContentHeader, {
     onClick: handleClick,
     link: link
-  }, /*#__PURE__*/React.createElement(Link, {
+  }, jsx(Link, {
     url: link,
     testId: testId
-  })), /*#__PURE__*/React.createElement(Byline, null, /*#__PURE__*/React.createElement(UnresolvedText, {
-    icon: /*#__PURE__*/React.createElement(WarningIcon, {
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(WarningIcon, {
       label: "errored-warning-icon",
       size: "small",
       primaryColor: `var(--ds-icon-warning, ${R300})`,
       testId: `${testId}-warning-icon`
     }),
-    text: /*#__PURE__*/React.createElement(FormattedMessage, textDescriptionProps)
-  }))), /*#__PURE__*/React.createElement(ContentFooter, null, /*#__PURE__*/React.createElement(ActionList, {
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(ActionList, {
     items: actions
   }))));
 };

package/dist/es2019/view/BlockCard/views/ForbiddenView.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
@@ -33,36 +35,36 @@ export const ForbiddenView = ({
     descriptiveMessageKey = 'invalid_permissions_description'
   } = requestAccessContext;
   const items = action ? [...actions, action] : actions;
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
     className: blockCardForbiddenViewClassName,
     isFluidHeight: true
-  }, /*#__PURE__*/React.createElement(Content, {
+  }, jsx(Content, {
     isCompact: true
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ContentHeader, {
+  }, jsx("div", null, jsx(ContentHeader, {
     onClick: handleClick,
     link: link
-  }, /*#__PURE__*/React.createElement(Link, {
+  }, jsx(Link, {
     url: link,
     testId: testId,
     className: blockCardForbiddenViewLinkClassName
-  })), /*#__PURE__*/React.createElement(Byline, null, /*#__PURE__*/React.createElement(UnresolvedText, {
-    icon: /*#__PURE__*/React.createElement(LockIcon, {
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",
       size: "small",
       primaryColor: `var(--ds-icon-danger, ${R300})`,
       testId: `${testId}-lock-icon`
     }),
-    text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
+    text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
       values: {
         context: context.text
       }
     }))
-  }))), /*#__PURE__*/React.createElement(ContentFooter, null, /*#__PURE__*/React.createElement(Provider, {
+  }))), jsx(ContentFooter, null, jsx(Provider, {
     name: context.text,
     icon: context.icon
-  }), showActions && /*#__PURE__*/React.createElement(ActionList, {
+  }), showActions && jsx(ActionList, {
     items: items
   }))));
 };

package/dist/es2019/view/BlockCard/views/NotFoundView.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
@@ -26,28 +28,28 @@ export const NotFoundView = ({
   onClick = () => {}
 }) => {
   const handleClick = event => handleClickCommon(event, onClick);
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
     className: blockCardNotFoundViewClassName,
     isFluidHeight: true
-  }, /*#__PURE__*/React.createElement(Content, {
+  }, jsx(Content, {
     isCompact: true
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ContentHeader, {
+  }, jsx("div", null, jsx(ContentHeader, {
     onClick: handleClick,
     link: link
-  }, /*#__PURE__*/React.createElement(Link, {
+  }, jsx(Link, {
     url: link,
     testId: testId
-  })), /*#__PURE__*/React.createElement(Byline, null, /*#__PURE__*/React.createElement(UnresolvedText, {
-    icon: /*#__PURE__*/React.createElement(WarningIcon, {
+  })), jsx(Byline, null, jsx(UnresolvedText, {
+    icon: jsx(WarningIcon, {
       label: "not-found-warning-icon",
       size: "small",
       primaryColor: `var(--ds-icon-warning, ${R300})`,
       testId: `${testId}-warning-icon`
     }),
-    text: /*#__PURE__*/React.createElement(FormattedMessage, textDescriptionProps)
-  }))), /*#__PURE__*/React.createElement(ContentFooter, null, /*#__PURE__*/React.createElement(Provider, {
+    text: jsx(FormattedMessage, textDescriptionProps)
+  }))), jsx(ContentFooter, null, jsx(Provider, {
     name: context.text,
     icon: context.icon
   }))));

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { Frame } from '../components/Frame';
 import { Thumbnail } from '../components/Thumbnail';
@@ -39,54 +41,54 @@ export const ResolvedView = ({
   testId = 'block-card-resolved-view',
   showActions = true
 }) => {
-  const resolvedMetadata = details.length > 0 ? /*#__PURE__*/React.createElement(MetadataList, {
+  const resolvedMetadata = details.length > 0 ? jsx(MetadataList, {
     testId: testId ? `${testId}-meta` : undefined,
     items: details
   }) : undefined;
-  const resolvedByline = /*#__PURE__*/React.createElement(Byline, {
+  const resolvedByline = jsx(Byline, {
     testId: testId ? `${testId}-by` : undefined,
     className: blockCardResolvedViewByClassName
   }, byline);
   const handleClick = event => handleClickCommon(event, onClick);
   const hasActions = showActions && actions.length > 0;
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
     className: blockCardResolvedViewClassName
-  }, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, jsx(Content, null, jsx("div", null, jsx("div", {
     css: {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'flex-start'
     }
-  }, /*#__PURE__*/React.createElement(ContentHeader, {
+  }, jsx(ContentHeader, {
     onClick: handleClick,
     link: link
-  }, titlePrefix ? /*#__PURE__*/React.createElement(Emoji, {
+  }, titlePrefix ? jsx(Emoji, {
     emoji: titlePrefix
-  }) : /*#__PURE__*/React.createElement(Icon, icon), /*#__PURE__*/React.createElement(Name, {
+  }) : jsx(Icon, icon), jsx(Name, {
     name: title,
     textColor: titleTextColor
-  }), lozenge && /*#__PURE__*/React.createElement(LozengeBlockWrapper, {
+  }), lozenge && jsx(LozengeBlockWrapper, {
     css: {
       height: gs(2.5),
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))), /*#__PURE__*/React.createElement(CollaboratorList, {
+  }, jsx(Lozenge, lozenge, lozenge.text))), jsx(CollaboratorList, {
     items: users,
     handleAvatarClick: handleAvatarClick,
     handleMoreAvatarsClick: handleMoreAvatarsClick,
     testId: testId ? `${testId}-collaborator-list` : undefined
-  })), resolvedByline, resolvedMetadata), /*#__PURE__*/React.createElement(ContentFooter, {
+  })), resolvedByline, resolvedMetadata), jsx(ContentFooter, {
     hasSpaceBetween: hasActions
-  }, /*#__PURE__*/React.createElement(Provider, {
+  }, jsx(Provider, {
     name: context.text,
     icon: context.icon
-  }), hasActions && /*#__PURE__*/React.createElement(ActionList, {
+  }), hasActions && jsx(ActionList, {
     items: actions
-  }))), thumbnail ? /*#__PURE__*/React.createElement(Thumbnail, {
+  }))), thumbnail ? jsx(Thumbnail, {
     src: thumbnail,
     testId: testId ? `${testId}-thumb` : undefined
   }) : null);

package/dist/es2019/view/BlockCard/views/ResolvingView.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
@@ -10,20 +12,20 @@ export const ResolvingView = ({
   isSelected = false,
   testId = 'block-card-resolving-view',
   inheritDimensions
-}) => /*#__PURE__*/React.createElement(Frame, {
+}) => jsx(Frame, {
   inheritDimensions: inheritDimensions,
   compact: true,
   isSelected: isSelected,
   testId: testId,
   className: blockCardResolvingViewClassName
-}, /*#__PURE__*/React.createElement(DocumentFilledIcon, {
+}, jsx(DocumentFilledIcon, {
   size: "small",
   primaryColor: `var(--ds-icon-subtle, ${N50})`,
   label: "document-icon"
-}), /*#__PURE__*/React.createElement("span", {
+}), jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
     color: `var(--ds-text-subtlest, ${N90})`,
     marginLeft: gs(0.5)
   }
-}, /*#__PURE__*/React.createElement(FormattedMessage, messages.loading)));
+}, jsx(FormattedMessage, messages.loading)));

package/dist/es2019/view/BlockCard/views/UnauthorizedView.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
@@ -25,29 +27,29 @@ export const UnauthorizedView = ({
   onClick = () => {}
 }) => {
   const handleClick = event => handleClickCommon(event, onClick);
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     isSelected: isSelected,
     testId: testId,
     isFluidHeight: true
-  }, /*#__PURE__*/React.createElement(Content, {
+  }, jsx(Content, {
     isCompact: true
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ContentHeader, {
+  }, jsx("div", null, jsx(ContentHeader, {
     onClick: handleClick,
     link: link
-  }, /*#__PURE__*/React.createElement(Link, {
+  }, jsx(Link, {
     url: link,
     testId: testId
-  })), /*#__PURE__*/React.createElement(Byline, {
+  })), jsx(Byline, {
     testId: testId ? `${testId}-byline` : undefined,
-    text: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, textBylineProps, {
+    text: jsx(FormattedMessage, _extends({}, textBylineProps, {
       values: {
         context: context.text
       }
     }))
-  })), /*#__PURE__*/React.createElement(ContentFooter, null, /*#__PURE__*/React.createElement(Provider, {
+  })), jsx(ContentFooter, null, jsx(Provider, {
     name: context.text,
     icon: context.icon
-  }), showActions && /*#__PURE__*/React.createElement(ActionList, {
+  }), showActions && jsx(ActionList, {
     items: actions
   }))));
 };

package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.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 { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { getExtensionKey, hasAuthScopeOverrides } from '../../../../state/helpers';
@@ -44,21 +45,21 @@ const FlexibleUnauthorisedView = ({
       onAuthorize();
     }
   }, [onAuthorize, extensionKey, analytics === null || analytics === void 0 ? void 0 : analytics.track]);
-  const content = useMemo(() => onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+  const content = useMemo(() => onAuthorize ? jsx(UnauthorisedViewContent, {
     providerName: providerName,
     isProductIntegrationSupported: isProductIntegrationSupported,
     analytics: analytics,
     testId: testId
-  }) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
+  }) : jsx(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
     values: {
       context: providerName
     }
   })), [analytics, isProductIntegrationSupported, onAuthorize, providerName, testId]);
   const actions = useMemo(() => onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [], [handleAuthorize, onAuthorize, providerName]);
-  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+  return jsx(UnresolvedView, _extends({}, props, {
     actions: actions,
     testId: testId
-  }), /*#__PURE__*/React.createElement("div", {
+  }), jsx("div", {
     css: contentStyles,
     "data-testid": `${testId}-content`
   }, content));

package/dist/es2019/view/BlockCard/views/flexible/utils/withFlexibleUIBlockCardStyle.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { flexibleBlockCardStyle } from '../styled';
 export const withFlexibleUIBlockCardStyle = FlexibleBlockCardView => props => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: flexibleBlockCardStyle
-  }, /*#__PURE__*/React.createElement(FlexibleBlockCardView, props));
+  }, jsx(FlexibleBlockCardView, props));
 };

package/dist/es2019/view/CardWithUrl/component.js

@@ -17,6 +17,7 @@ function Component({
   id,
   url,
   isSelected,
+  isHovered,
   isFrameVisible,
   frameStyle,
   platform,
@@ -203,6 +204,7 @@ function Component({
         handleAuthorize: services.length && handleAuthorize || undefined,
         handleFrameClick: handleClickWrapper,
         isSelected: isSelected,
+        isHovered: isHovered,
         onResolve: onResolve,
         onError: onError,
         testId: testId,

package/dist/es2019/view/CardWithUrl/loader.js

@@ -20,6 +20,7 @@ export function CardWithURLRenderer(props) {
     url,
     appearance,
     isSelected,
+    isHovered,
     isFrameVisible,
     frameStyle,
     onClick,
@@ -88,6 +89,7 @@ export function CardWithURLRenderer(props) {
     appearance,
     onClick,
     isSelected,
+    isHovered,
     isFrameVisible,
     frameStyle,
     container,

package/dist/es2019/view/EmbedCard/components/Frame.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { di } from 'react-magnetic-di';
 import { getIframeSandboxAttribute } from '../../../utils';
@@ -70,13 +72,13 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
   if (!url) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IframeDwellTracker, {
+  return jsx(React.Fragment, null, jsx(IframeDwellTracker, {
     isIframeLoaded: isIframeLoaded,
     isMouseOver: isMouseOver,
     isWindowFocused: isWindowFocused,
     iframePercentVisible: percentVisible,
     onIframeDwell: onIframeDwell
-  }), /*#__PURE__*/React.createElement(IFrame, {
+  }), jsx(IFrame, {
     childRef: mergedRef,
     src: url,
     "data-testid": `${testId}-frame`,

package/dist/es2019/view/EmbedCard/components/IframeDwellTracker.js

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 /**
  * A kind of cheap logarithmic backoff. Fire analytics after the user has

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { fontSize } from '@atlaskit/theme/constants';
@@ -11,16 +13,16 @@ export const EmbedCardErroredView = ({
   isSelected = false,
   testId = 'embed-card-errored-view',
   inheritDimensions
-}) => /*#__PURE__*/React.createElement(Frame, {
+}) => jsx(Frame, {
   inheritDimensions: inheritDimensions,
   compact: true,
   isSelected: isSelected,
   testId: testId
-}, /*#__PURE__*/React.createElement(ErrorIcon, {
+}, jsx(ErrorIcon, {
   size: "small",
   primaryColor: `var(--ds-icon-danger, ${R300})`,
   label: "error-icon"
-}), /*#__PURE__*/React.createElement("span", {
+}), jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
     marginLeft: gs(0.5),
@@ -33,9 +35,9 @@ export const EmbedCardErroredView = ({
     // Fallback options.
     maxHeight: gs(3)
   }
-}, /*#__PURE__*/React.createElement(FormattedMessage, messages.could_not_load_link)), /*#__PURE__*/React.createElement(Button, {
+}, jsx(FormattedMessage, messages.could_not_load_link)), jsx(Button, {
   testId: "err-view-retry",
   appearance: "link",
   spacing: "none",
   onClick: onRetry
-}, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)));
+}, jsx(FormattedMessage, messages.try_again)));

package/dist/es2019/view/EmbedCard/views/ResolvedView.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/glyph/link';
 import { ExpandedFrame } from '../components/ExpandedFrame';
@@ -23,7 +25,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   const text = title || (context === null || context === void 0 ? void 0 : context.text);
-  const linkGlyph = React.useMemo(() => /*#__PURE__*/React.createElement(LinkGlyph, {
+  const linkGlyph = React.useMemo(() => jsx(LinkGlyph, {
     label: "icon",
     size: "small",
     testId: "embed-card-fallback-icon"
@@ -32,7 +34,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
       return iconFromContext;
     }
-    return /*#__PURE__*/React.createElement(ImageIcon, {
+    return jsx(ImageIcon, {
       src: src,
       default: linkGlyph
     });
@@ -44,7 +46,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   if (previewUrl && isSupportTheming && colorMode) {
     previewUrl = `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeMode=${colorMode}`;
   }
-  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+  return jsx(ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
@@ -54,7 +56,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     text: text,
     onClick: onClick,
     inheritDimensions: inheritDimensions
-  }, /*#__PURE__*/React.createElement(Frame, {
+  }, jsx(Frame, {
     url: previewUrl,
     isTrusted: isTrusted,
     testId: testId,

package/dist/es2019/view/EmbedCard/views/UnresolvedView.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { fontSize } from '@atlaskit/theme/constants';
 import { FormattedMessage } from 'react-intl-next';
@@ -20,7 +21,7 @@ export const EmbedCardUnresolvedView = ({
   testId,
   children
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: {
       display: 'flex',
       flexDirection: 'column',
@@ -30,14 +31,14 @@ export const EmbedCardUnresolvedView = ({
       paddingBottom: gridSize(6)
     },
     "data-testid": `${testId}-unresolved-container`
-  }, /*#__PURE__*/React.createElement("img", {
+  }, jsx("img", {
     src: image,
     css: {
       height: gridSize(14),
       marginBottom: gridSize(4)
     },
     "data-testid": `${testId}-unresolved-image`
-  }), /*#__PURE__*/React.createElement("span", {
+  }), jsx("span", {
     css: {
       fontSize: gridSize(2.5),
       marginBottom: gridSize(1.5),
@@ -45,11 +46,11 @@ export const EmbedCardUnresolvedView = ({
       textAlign: 'center'
     },
     "data-testid": `${testId}-unresolved-title`
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[title], {
+  }, jsx(FormattedMessage, _extends({}, messages[title], {
     values: {
       context
     }
-  }))), /*#__PURE__*/React.createElement("span", {
+  }))), jsx("span", {
     css: {
       fontSize: fontSize(),
       marginBottom: gridSize(2.5),
@@ -58,15 +59,15 @@ export const EmbedCardUnresolvedView = ({
       lineHeight: gridSize(3)
     },
     "data-testid": `${testId}-unresolved-description`
-  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[description], {
+  }, children !== null && children !== void 0 ? children : jsx(FormattedMessage, _extends({}, messages[description], {
     values: {
       context
     }
-  }))), button && /*#__PURE__*/React.createElement(Button, {
+  }))), button && jsx(Button, {
     testId: `button-${button.testId || testId}`,
     appearance: button.appearance,
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[button.text], {
+  }, jsx(FormattedMessage, _extends({}, messages[button.text], {
     values: {
       context
     }

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import LinkGlyph from '@atlaskit/icon/glyph/link';
+import { jsx } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
@@ -20,16 +22,16 @@ const UnresolvedView = ({
     if ( /*#__PURE__*/React.isValidElement(iconUrlOrElement)) {
       return iconUrlOrElement;
     }
-    return /*#__PURE__*/React.createElement(ImageIcon, {
+    return jsx(ImageIcon, {
       src: typeof iconUrlOrElement === 'string' ? iconUrlOrElement : undefined,
-      default: /*#__PURE__*/React.createElement(LinkGlyph, {
+      default: jsx(LinkGlyph, {
         label: "icon",
         size: "small",
         testId: "embed-card-fallback-icon"
       })
     });
   }, [iconUrlOrElement]);
-  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+  return jsx(ExpandedFrame, {
     allowScrollBar: true,
     frameStyle: "show",
     href: url,
@@ -39,19 +41,19 @@ const UnresolvedView = ({
     onClick: onClick,
     testId: testId,
     text: text
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: containerStyles,
     "data-testid": `${testId}-unresolved-container`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: contentStyles
-  }, /*#__PURE__*/React.createElement("img", {
+  }, jsx("img", {
     css: imageStyles,
     "data-testid": `${testId}-unresolved-image`,
     src: image
-  }), /*#__PURE__*/React.createElement("h2", {
+  }), jsx("h2", {
     css: titleStyles,
     "data-testid": `${testId}-unresolved-title`
-  }, title), /*#__PURE__*/React.createElement("span", {
+  }, title), jsx("span", {
     css: descriptionStyles,
     "data-testid": `${testId}-unresolved-description`
   }, description), button)));

package/dist/es2019/view/EmbedModal/components/embed-content/index.js

@@ -1,5 +1,7 @@
+/** @jsx jsx */
+
 import { di } from 'react-magnetic-di';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
 const iframeCss = css`
@@ -21,6 +23,6 @@ const EmbedContent = ({
     src,
     'data-testid': `${testId}-embed`
   };
-  return /*#__PURE__*/React.createElement(IFrame, props);
+  return jsx(IFrame, props);
 };
 export default EmbedContent;