@atlaskit/smart-card 26.42.11 → 26.43.0

package/dist/cjs/view/InlineCard/index.js

@@ -65,6 +65,7 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
     handleAuthorize = _ref.handleAuthorize,
     handleFrameClick = _ref.handleFrameClick,
     isSelected = _ref.isSelected,
+    isHovered = _ref.isHovered,
     renderers = _ref.renderers,
     onResolve = _ref.onResolve,
     onError = _ref.onError,
@@ -124,6 +125,7 @@ var InlineCard = exports.InlineCard = function InlineCard(_ref) {
         showServerActions: showServerActions,
         link: url,
         isSelected: isSelected,
+        isHovered: isHovered,
         onClick: handleFrameClick,
         testId: testIdWithStatus
       }));

package/dist/cjs/view/LinkUrl/LinkWarningModal/index.js

@@ -12,9 +12,12 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _reactIntlNext = require("react-intl-next");
 var _styled = require("./styled");
+var _react2 = require("@emotion/react");
 var _messages = require("../../../messages");
 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 WarningModal = function WarningModal(props) {
   var isOpen = props.isOpen,
     unsafeLinkText = props.unsafeLinkText,
@@ -22,33 +25,33 @@ var WarningModal = function WarningModal(props) {
     onClose = props.onClose,
     onContinue = props.onContinue,
     intl = props.intl;
-  var content = /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+  var content = (0, _react2.jsx)(_modalDialog.ModalTransition, null, isOpen && (0, _react2.jsx)(_modalDialog.default, {
     onClose: onClose,
     testId: "link-with-safety-warning"
-  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, {
     appearance: "warning"
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.check_this_link))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.check_this_link))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
     css: _styled.breakWordsCss
-  }, url && unsafeLinkText && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.link_safety_warning_message, {
+  }, url && unsafeLinkText && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.link_safety_warning_message, {
     values: {
       unsafeLinkText: unsafeLinkText,
       a: function a() {
-        return /*#__PURE__*/_react.default.createElement("a", {
+        return (0, _react2.jsx)("a", {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer"
         }, url);
       }
     }
-  })))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+  })))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
     appearance: "subtle",
     onClick: onClose
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.go_back)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.go_back)), (0, _react2.jsx)(_standardButton.default, {
     appearance: "warning",
     onClick: onContinue,
     autoFocus: true
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.continue)))));
-  return intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.continue)))));
+  return intl ? content : (0, _react2.jsx)(_reactIntlNext.IntlProvider, {
     locale: "en"
   }, content);
 };

package/dist/cjs/view/LinkUrl/index.js

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.42.11",
+  packageVersion: "26.43.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/Byline.js

@@ -4,14 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Byline = void 0;
+var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("./utils");
+/** @jsx jsx */
+
 var Byline = exports.Byline = function Byline(_ref) {
   var text = _ref.text,
     children = _ref.children,
     testId = _ref.testId,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement("span", {
+  return (0, _react.jsx)("span", {
     css: (0, _utils.mq)({
       fontSize: (0, _utils.gs)(1.5),
       lineHeight: (0, _utils.gs)(2.5),

package/dist/cjs/view/common/Icon.js

@@ -12,6 +12,7 @@ var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _utils = require("./utils");
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 var blockCardIconImageClassName = exports.blockCardIconImageClassName = 'block-card-icon-image';
 var getImageStyles = function getImageStyles(isFlexibleUi) {
   if (isFlexibleUi) {
@@ -33,21 +34,21 @@ var Icon = exports.Icon = function Icon(_ref) {
     testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId,
     _ref$isFlexibleUi = _ref.isFlexibleUi,
     isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
-  var placeholder = defaultIcon || /*#__PURE__*/_react2.default.createElement(_link.default, {
+  var placeholder = defaultIcon || (0, _react.jsx)(_link.default, {
     label: "link",
     size: "small",
     testId: "".concat(testId, "-default")
   });
-  var image = url && /*#__PURE__*/_react2.default.createElement(_reactRenderImage.default, {
+  var image = url && (0, _react.jsx)(_reactRenderImage.default, {
     src: url,
-    loaded: /*#__PURE__*/_react2.default.createElement("img", {
+    loaded: (0, _react.jsx)("img", {
       css: getImageStyles(isFlexibleUi),
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
-  return /*#__PURE__*/_react2.default.createElement("span", {
+  return (0, _react.jsx)("span", {
     css: getSpanStyles(isFlexibleUi),
     "data-testid": testId,
     className: blockCardIconImageClassName

package/dist/cjs/view/common/Metadata.js

@@ -5,8 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Metadata = void 0;
+var _react = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
 var Metadata = exports.Metadata = function Metadata(_ref) {
   var text = _ref.text,
     icon = _ref.icon,
@@ -14,7 +17,7 @@ var Metadata = exports.Metadata = function Metadata(_ref) {
     tooltip = _ref.tooltip;
   var metadataIcon = icon || null;
   if (!metadataIcon && iconUrl) {
-    metadataIcon = /*#__PURE__*/React.createElement("img", {
+    metadataIcon = (0, _react.jsx)("img", {
       src: iconUrl,
       css: {
         width: "var(--ds-space-100, 8px)",
@@ -22,13 +25,13 @@ var Metadata = exports.Metadata = function Metadata(_ref) {
       }
     });
   }
-  var metadata = /*#__PURE__*/React.createElement("div", {
+  var metadata = (0, _react.jsx)("div", {
     css: {
       display: 'flex',
       alignItems: 'center',
       marginRight: "var(--ds-space-050, 4px)"
     }
-  }, metadataIcon, /*#__PURE__*/React.createElement("span", {
+  }, metadataIcon, (0, _react.jsx)("span", {
     css: {
       fontSize: "var(--ds-space-150, 12px)",
       color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
@@ -37,7 +40,7 @@ var Metadata = exports.Metadata = function Metadata(_ref) {
     }
   }, text));
   if (tooltip) {
-    return /*#__PURE__*/React.createElement(_tooltip.default, {
+    return (0, _react.jsx)(_tooltip.default, {
       content: tooltip
     }, metadata);
   }

package/dist/cjs/view/common/MetadataList.js

@@ -6,13 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.metadataListClassName = exports.MetadataList = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
 var _Metadata = require("./Metadata");
 var _utils = require("./utils");
+/** @jsx jsx */
+
 var metadataListClassName = exports.metadataListClassName = 'smart-link-metadata-list';
 var MetadataList = exports.MetadataList = function MetadataList(_ref) {
   var items = _ref.items,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: {
       display: 'flex',
       marginTop: (0, _utils.gs)(0.5),
@@ -24,7 +27,7 @@ var MetadataList = exports.MetadataList = function MetadataList(_ref) {
     "data-testid": testId,
     className: metadataListClassName
   }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(_Metadata.Metadata, (0, _extends2.default)({
+    return (0, _react.jsx)(_Metadata.Metadata, (0, _extends2.default)({
       key: item.text
     }, item));
   }));

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.42.11"
+  packageVersion: "26.43.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/components/Action.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { useState } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { ActionIcon } from './ActionIcon';
@@ -9,7 +11,7 @@ export const Action = ({
   id
 }) => {
   const [state, setState] = useState('init');
-  return /*#__PURE__*/React.createElement(Button, {
+  return jsx(Button, {
     spacing: "compact",
     appearance: buttonAppearance,
     isLoading: state === 'loading',
@@ -28,12 +30,12 @@ export const Action = ({
         });
       }
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: {
       transition: 'opacity 0.3s',
       opacity: state !== 'init' ? 0 : 1
     }
-  }, text), /*#__PURE__*/React.createElement(ActionIcon, {
+  }, text), jsx(ActionIcon, {
     state: state
   }));
 };

package/dist/es2019/view/BlockCard/components/ActionList.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
@@ -10,23 +12,23 @@ export const ActionList = ({
 }) => {
   const actionsToShow = items.slice(0, 2);
   const actionsToList = items.slice(2, items.length);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mq({
       display: 'flex',
       marginTop: [gs(2), 0]
     })
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, actionsToShow.map(action => /*#__PURE__*/React.createElement(Action, _extends({
+  }, jsx(ButtonGroup, null, actionsToShow.map(action => jsx(Action, _extends({
     key: action.id
-  }, action)))), actionsToList.length ? /*#__PURE__*/React.createElement("div", {
+  }, action)))), actionsToList.length ? jsx("div", {
     css: {
       marginLeft: gs(0.5)
     }
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
+  }, jsx(DropdownMenu, {
     trigger: ({
       triggerRef,
       ...props
-    }) => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-      iconBefore: /*#__PURE__*/React.createElement(MoreIcon, {
+    }) => jsx(Button, _extends({}, props, {
+      iconBefore: jsx(MoreIcon, {
         label: "more"
       }),
       ref: triggerRef,
@@ -36,9 +38,9 @@ export const ActionList = ({
       testId: "dropdown-trigger"
     })),
     placement: "right-start"
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, {
+  }, jsx(DropdownItemGroup, {
     testId: "dropdown-menu"
-  }, actionsToList.map(actionToList => /*#__PURE__*/React.createElement(DropdownItem, {
+  }, actionsToList.map(actionToList => jsx(DropdownItem, {
     key: actionToList.id
   }, actionToList.text))))) : null);
 };

package/dist/es2019/view/BlockCard/components/CollaboratorList.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import AvatarGroup from '@atlaskit/avatar-group';
 import { mq } from '../../common/utils';
 export const CollaboratorList = ({
@@ -9,11 +11,11 @@ export const CollaboratorList = ({
   if (items.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: mq({
       display: ['none', 'inherit']
     })
-  }, /*#__PURE__*/React.createElement(AvatarGroup, {
+  }, jsx(AvatarGroup, {
     maxCount: 4,
     appearance: "stack",
     size: "small",

package/dist/es2019/view/BlockCard/components/Content.js

@@ -1,9 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export const blockCardContentClassName = 'block-card-content';
 export const Content = ({
   children,
   isCompact = false
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: mq({
     padding: isCompact ? gs(1) : gs(2),
     display: 'flex',

package/dist/es2019/view/BlockCard/components/ContentFooter.js

@@ -1,9 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export const contentFooterClassName = 'smart-link-content-footer';
 export const ContentFooter = ({
   children,
   hasSpaceBetween = false
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: mq({
     display: 'flex',
     flexDirection: ['column', 'row'],

package/dist/es2019/view/BlockCard/components/ContentHeader.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 export const blockCardContentHeaderClassName = 'block-card-content-header';
 export const ContentHeader = ({
@@ -6,7 +8,7 @@ export const ContentHeader = ({
   children
 }) => {
   const onMouseDown = useMouseDownEvent();
-  return /*#__PURE__*/React.createElement("a", {
+  return jsx("a", {
     onClick: onClick,
     onMouseDown: onMouseDown,
     href: link,

package/dist/es2019/view/BlockCard/components/Emoji.js

@@ -1,9 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { gs } from '../../common/utils';
 export const Emoji = ({
   emoji
 }) => {
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: {
       height: gs(2.5),
       width: gs(2),

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
 import { gs, br, mq } from '../../common/utils';
@@ -5,7 +7,7 @@ export const Frame = (props = {
   isSelected: false,
   isHoverable: false,
   isFluidHeight: false
-}) => props.compact ? /*#__PURE__*/React.createElement(CompactFrame, props) : /*#__PURE__*/React.createElement(ExpandedFrame, props);
+}) => props.compact ? jsx(CompactFrame, props) : jsx(ExpandedFrame, props);
 const sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
@@ -20,7 +22,7 @@ export const ExpandedFrame = ({
   className,
   isFluidHeight
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mq({
       ...sharedFrameStyles,
       '&:hover': isHoverable ? {
@@ -48,7 +50,7 @@ export const CompactFrame = ({
   className,
   inheritDimensions
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mq({
       ...sharedFrameStyles,
       '&:hover': isHoverable ? {

package/dist/es2019/view/BlockCard/components/Link.js

@@ -1,10 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 export const Link = ({
   url,
   testId = 'block-card',
   className
 }) => {
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     "data-testid": `${testId}-link`,
     className: className,
     css: {

package/dist/es2019/view/BlockCard/components/Name.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import { gs } from '../../common/utils';
 export const blockCardContentHeaderNameClassName = 'block-card-content-header-name';
@@ -6,7 +8,7 @@ export const Name = ({
   isLeftPadded = true,
   testId,
   textColor
-}) => /*#__PURE__*/React.createElement("span", {
+}) => jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
     fontWeight: 500,

package/dist/es2019/view/BlockCard/components/Provider.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs } from '../../common/utils';
 export const Provider = ({
@@ -6,7 +8,7 @@ export const Provider = ({
 }) => {
   let iconToRender = icon || null;
   if (typeof icon === 'string') {
-    iconToRender = /*#__PURE__*/React.createElement("img", {
+    iconToRender = jsx("img", {
       className: "smart-link-icon",
       css: {
         height: gs(1.5),
@@ -15,14 +17,14 @@ export const Provider = ({
       src: icon
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: {
       display: 'flex',
       alignItems: 'center',
       fontSize: gs(1.5),
       whiteSpace: 'normal'
     }
-  }, iconToRender, /*#__PURE__*/React.createElement("span", {
+  }, iconToRender, jsx("span", {
     css: {
       color: `var(--ds-text-subtlest, ${N300})`,
       margin: 0,

package/dist/es2019/view/BlockCard/components/Thumbnail.js

@@ -1,6 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export const Thumbnail = props => {
-  return props.color ? /*#__PURE__*/React.createElement(ThumbnailWithBackground, props) : /*#__PURE__*/React.createElement(ThumbnailDefault, props);
+  return props.color ? jsx(ThumbnailWithBackground, props) : jsx(ThumbnailDefault, props);
 };
 const sharedStyles = {
   // The dimensions of the image are set in this manner
@@ -12,7 +14,7 @@ export const ThumbnailDefault = ({
   src,
   testId
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mq({
       ...sharedStyles,
       backgroundSize: 'cover',
@@ -29,7 +31,7 @@ export const ThumbnailWithBackground = ({
   color,
   testId
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mq({
       ...sharedStyles,
       backgroundColor: color,
@@ -39,7 +41,7 @@ export const ThumbnailWithBackground = ({
     }),
     "data-testid": testId,
     "data-trello-do-not-use-override": testId
-  }, /*#__PURE__*/React.createElement("img", {
+  }, jsx("img", {
     src: src,
     css: {
       height: '90px',

package/dist/es2019/view/BlockCard/components/UnresolvedText.js

@@ -1,8 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 export const UnresolvedText = ({
   icon,
   text
 }) => {
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: {
       display: 'flex',
       alignItems: 'center'

package/dist/es2019/view/BlockCard/index.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
 import { getExtensionKey } from '../../state/helpers';
 import { extractBlockProps } from '../../extractors/block';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
@@ -19,6 +21,7 @@ import FlexibleNotFoundViewOld from './views/flexible/FlexibleNotFoundViewOld';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
 import FlexibleForbiddenViewOld from './views/flexible/FlexibleForbiddenViewOld';
 import FlexibleErroredView from './views/flexible/FlexibleErroredView';
+import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export { default as PreviewAction } from './actions/PreviewAction';
@@ -73,25 +76,25 @@ export const BlockCard = ({
     switch (status) {
       case 'pending':
       case 'resolving':
-        return /*#__PURE__*/React.createElement(FlexibleResolvedView, _extends({}, flexibleBlockCardProps, {
+        return jsx(FlexibleResolvedView, _extends({}, flexibleBlockCardProps, {
           testId: 'smart-block-resolving-view'
         }));
       case 'resolved':
-        return /*#__PURE__*/React.createElement(FlexibleResolvedView, flexibleBlockCardProps);
+        return jsx(FlexibleResolvedView, flexibleBlockCardProps);
       case 'unauthorized':
-        return /*#__PURE__*/React.createElement(FlexibleUnauthorisedView, _extends({}, flexibleBlockCardProps, {
+        return jsx(FlexibleUnauthorisedView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? /*#__PURE__*/React.createElement(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
-        })) : /*#__PURE__*/React.createElement(FlexibleForbiddenViewOld, _extends({}, flexibleBlockCardProps, {
+        })) : jsx(FlexibleForbiddenViewOld, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':
-        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? /*#__PURE__*/React.createElement(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
+        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? jsx(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
-        })) : /*#__PURE__*/React.createElement(FlexibleNotFoundViewOld, _extends({}, flexibleBlockCardProps, {
+        })) : jsx(FlexibleNotFoundViewOld, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'fallback':
@@ -104,14 +107,14 @@ export const BlockCard = ({
           });
         }
         if (authFlow && authFlow === 'disabled') {
-          return /*#__PURE__*/React.createElement(CardLinkView, {
+          return jsx(CardLinkView, {
             link: url,
             isSelected: isSelected,
             onClick: handleFrameClick,
             testId: `${testId}-${status}`
           });
         }
-        return /*#__PURE__*/React.createElement(FlexibleErroredView, _extends({}, flexibleBlockCardProps, {
+        return jsx(FlexibleErroredView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
     }
@@ -119,7 +122,7 @@ export const BlockCard = ({
   switch (status) {
     case 'pending':
     case 'resolving':
-      return /*#__PURE__*/React.createElement(BlockCardResolvingView, {
+      return jsx(BlockCardResolvingView, {
         testId: testId,
         isSelected: isSelected
       });
@@ -131,7 +134,7 @@ export const BlockCard = ({
           url
         });
       }
-      return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedViewProps, {
+      return jsx(BlockCardResolvedView, _extends({}, resolvedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -145,7 +148,7 @@ export const BlockCard = ({
         });
       }
       const unauthorizedViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
+      return jsx(BlockCardUnauthorisedView, _extends({}, unauthorizedViewProps, {
         isSelected: isSelected,
         testId: testId,
         showActions: showActions,
@@ -166,7 +169,7 @@ export const BlockCard = ({
         url,
         context: (_forbiddenViewProps$c = forbiddenViewProps.context) === null || _forbiddenViewProps$c === void 0 ? void 0 : _forbiddenViewProps$c.text
       });
-      return /*#__PURE__*/React.createElement(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
+      return jsx(BlockCardForbiddenView, _extends({}, forbiddenViewProps, {
         isSelected: isSelected,
         showActions: showActions,
         actions: handleAuthorize ? [ForbiddenAction(handleAuthorize)] : [],
@@ -181,7 +184,7 @@ export const BlockCard = ({
         });
       }
       const notFoundViewProps = extractBlockProps(data, meta, extractorOpts);
-      return /*#__PURE__*/React.createElement(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
+      return jsx(BlockCardNotFoundView, _extends({}, notFoundViewProps, {
         isSelected: isSelected,
         testId: testId,
         onClick: handleFrameClick
@@ -196,14 +199,14 @@ export const BlockCard = ({
         });
       }
       if (authFlow && authFlow === 'disabled') {
-        return /*#__PURE__*/React.createElement(CardLinkView, {
+        return jsx(CardLinkView, {
           link: url,
           isSelected: isSelected,
           onClick: handleFrameClick,
           testId: `${testId}-${status}`
         });
       }
-      return /*#__PURE__*/React.createElement(BlockCardErroredView, {
+      return jsx(BlockCardErroredView, {
         link: url,
         isSelected: isSelected,
         onRetry: handleErrorRetry,