@atlaskit/smart-card 26.42.11 → 26.42.12

package/dist/esm/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';
@@ -12,21 +14,21 @@ export var ResolvingView = function ResolvingView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'block-card-resolving-view' : _ref$testId,
     inheritDimensions = _ref.inheritDimensions;
-  return /*#__PURE__*/React.createElement(Frame, {
+  return 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, ".concat(N50, ")"),
     label: "document-icon"
-  }), /*#__PURE__*/React.createElement("span", {
+  }), jsx("span", {
     css: {
       fontSize: "".concat(fontSize(), "px"),
       color: "var(--ds-text-subtlest, ".concat(N90, ")"),
       marginLeft: gs(0.5)
     }
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.loading)));
+  }, jsx(FormattedMessage, messages.loading)));
 };

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

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
@@ -34,29 +36,29 @@ export var UnauthorizedView = function UnauthorizedView(_ref) {
   var handleClick = function handleClick(event) {
     return 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 ? "".concat(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/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -3,7 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["testId"];
 var _templateObject;
-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';
@@ -43,12 +44,12 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     }
   }, [onAuthorize, extensionKey, analytics === null || analytics === void 0 ? void 0 : analytics.track]);
   var content = useMemo(function () {
-    return onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
+    return 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
       }
@@ -57,10 +58,10 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
   var actions = useMemo(function () {
     return 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": "".concat(testId, "-content")
   }, content));

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

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

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

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { di } from 'react-magnetic-di';
 import { getIframeSandboxAttribute } from '../../../utils';
@@ -85,13 +87,13 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   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": "".concat(testId, "-frame"),

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

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

package/dist/esm/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';
@@ -13,16 +15,16 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'embed-card-errored-view' : _ref$testId,
     inheritDimensions = _ref.inheritDimensions;
-  return /*#__PURE__*/React.createElement(Frame, {
+  return jsx(Frame, {
     inheritDimensions: inheritDimensions,
     compact: true,
     isSelected: isSelected,
     testId: testId
-  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+  }, jsx(ErrorIcon, {
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
     label: "error-icon"
-  }), /*#__PURE__*/React.createElement("span", {
+  }), jsx("span", {
     css: {
       fontSize: "".concat(fontSize(), "px"),
       marginLeft: gs(0.5),
@@ -35,10 +37,10 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
       // 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/esm/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';
@@ -24,7 +26,7 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
   var linkGlyph = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(LinkGlyph, {
+    return jsx(LinkGlyph, {
       label: "icon",
       size: "small",
       testId: "embed-card-fallback-icon"
@@ -34,7 +36,7 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
       return iconFromContext;
     }
-    return /*#__PURE__*/React.createElement(ImageIcon, {
+    return jsx(ImageIcon, {
       src: src,
       default: linkGlyph
     });
@@ -45,7 +47,7 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
   if (previewUrl && isSupportTheming && colorMode) {
     previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
   }
-  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+  return jsx(ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
@@ -55,7 +57,7 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     text: text,
     onClick: onClick,
     inheritDimensions: inheritDimensions
-  }, /*#__PURE__*/React.createElement(Frame, {
+  }, jsx(Frame, {
     url: previewUrl,
     isTrusted: isTrusted,
     testId: testId,

package/dist/esm/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';
@@ -19,7 +20,7 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
     onClick = _ref.onClick,
     testId = _ref.testId,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: {
       display: 'flex',
       flexDirection: 'column',
@@ -29,14 +30,14 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       paddingBottom: gridSize(6)
     },
     "data-testid": "".concat(testId, "-unresolved-container")
-  }, /*#__PURE__*/React.createElement("img", {
+  }, jsx("img", {
     src: image,
     css: {
       height: gridSize(14),
       marginBottom: gridSize(4)
     },
     "data-testid": "".concat(testId, "-unresolved-image")
-  }), /*#__PURE__*/React.createElement("span", {
+  }), jsx("span", {
     css: {
       fontSize: gridSize(2.5),
       marginBottom: gridSize(1.5),
@@ -44,11 +45,11 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       textAlign: 'center'
     },
     "data-testid": "".concat(testId, "-unresolved-title")
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[title], {
+  }, jsx(FormattedMessage, _extends({}, messages[title], {
     values: {
       context: context
     }
-  }))), /*#__PURE__*/React.createElement("span", {
+  }))), jsx("span", {
     css: {
       fontSize: fontSize(),
       marginBottom: gridSize(2.5),
@@ -57,15 +58,15 @@ export var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       lineHeight: gridSize(3)
     },
     "data-testid": "".concat(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: context
     }
-  }))), button && /*#__PURE__*/React.createElement(Button, {
+  }))), button && jsx(Button, {
     testId: "button-".concat(button.testId || testId),
     appearance: button.appearance,
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[button.text], {
+  }, jsx(FormattedMessage, _extends({}, messages[button.text], {
     values: {
       context: context
     }

package/dist/esm/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';
@@ -19,16 +21,16 @@ var UnresolvedView = function UnresolvedView(_ref) {
     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,
@@ -38,19 +40,19 @@ var UnresolvedView = function UnresolvedView(_ref) {
     onClick: onClick,
     testId: testId,
     text: text
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: containerStyles,
     "data-testid": "".concat(testId, "-unresolved-container")
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: contentStyles
-  }, /*#__PURE__*/React.createElement("img", {
+  }, jsx("img", {
     css: imageStyles,
     "data-testid": "".concat(testId, "-unresolved-image"),
     src: image
-  }), /*#__PURE__*/React.createElement("h2", {
+  }), jsx("h2", {
     css: titleStyles,
     "data-testid": "".concat(testId, "-unresolved-title")
-  }, title), /*#__PURE__*/React.createElement("span", {
+  }, title), jsx("span", {
     css: descriptionStyles,
     "data-testid": "".concat(testId, "-unresolved-description")
   }, description), button)));

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

@@ -1,7 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @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';
 var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
@@ -19,6 +21,6 @@ var EmbedContent = function EmbedContent(_ref) {
     src: src,
     'data-testid': "".concat(testId, "-embed")
   };
-  return /*#__PURE__*/React.createElement(IFrame, props);
+  return jsx(IFrame, props);
 };
 export default EmbedContent;

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { useModal } from '@atlaskit/modal-dialog';
@@ -24,9 +26,9 @@ var LinkInfo = function LinkInfo(_ref) {
     onClose = _useModal.onClose;
   var downloadButton = useMemo(function () {
     if (onDownloadButtonClick) {
-      return /*#__PURE__*/React.createElement(LinkInfoButton, {
-        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
-        icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+      return jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, messages.download),
+        icon: jsx(DownloadIcon, {
           label: messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
@@ -36,10 +38,10 @@ var LinkInfo = function LinkInfo(_ref) {
   }, [onDownloadButtonClick, testId]);
   var urlButton = useMemo(function () {
     if (onViewButtonClick) {
-      var content = providerName ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.viewIn), " ", providerName) : /*#__PURE__*/React.createElement(FormattedMessage, messages.viewOriginal);
-      return /*#__PURE__*/React.createElement(LinkInfoButton, {
+      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
+      return jsx(LinkInfoButton, {
         content: content,
-        icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+        icon: jsx(ShortcutIcon, {
           label: messages.viewOriginal.defaultMessage
         }),
         onClick: onViewButtonClick,
@@ -50,36 +52,36 @@ var LinkInfo = function LinkInfo(_ref) {
   var sizeButton = useMemo(function () {
     var isFullScreen = size === MAX_MODAL_SIZE;
     var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
-    var icon = isFullScreen ? /*#__PURE__*/React.createElement(VidFullScreenOffIcon, {
+    var icon = isFullScreen ? jsx(VidFullScreenOffIcon, {
       label: message.defaultMessage
-    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+    }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       className: "smart-link-resize-button"
-    }, /*#__PURE__*/React.createElement(LinkInfoButton, {
-      content: /*#__PURE__*/React.createElement(FormattedMessage, message),
+    }, jsx(LinkInfoButton, {
+      content: jsx(FormattedMessage, message),
       icon: icon,
       onClick: onResizeButtonClick,
       testId: "".concat(testId, "-resize")
     }));
   }, [onResizeButtonClick, size, testId]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: containerStyles
-  }, icon && /*#__PURE__*/React.createElement("div", {
+  }, icon && jsx("div", {
     css: iconCss,
     "data-testid": "".concat(testId, "-icon")
-  }, /*#__PURE__*/React.createElement(Icon, icon)), /*#__PURE__*/React.createElement("div", {
+  }, jsx(Icon, icon)), jsx("div", {
     css: titleCss
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, jsx("h3", {
     "data-testid": "".concat(testId, "-title")
-  }, title), /*#__PURE__*/React.createElement("span", {
+  }, title), jsx("span", {
     tabIndex: 0
-  })), /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
     css: actionCss
-  }, downloadButton, urlButton, sizeButton, /*#__PURE__*/React.createElement(LinkInfoButton, {
-    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
-    icon: /*#__PURE__*/React.createElement(CrossIcon, {
+  }, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
+    content: jsx(FormattedMessage, messages.preview_close),
+    icon: jsx(CrossIcon, {
       label: messages.preview_close.defaultMessage
     }),
     onClick: onClose,

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 import React, { useCallback } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { LoadingButton } from '@atlaskit/button';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -39,14 +40,14 @@ var ActionButton = function ActionButton(_ref) {
       handler();
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [getButtonStyle(size, iconOnly), overrideCss],
     "data-testid": "".concat(testId, "-button-wrapper")
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: "".concat(testId, "-tooltip")
-  }, getBooleanFF('platform.linking-platform.smart-card.follow-button') ? /*#__PURE__*/React.createElement(LoadingButton, {
+  }, getBooleanFF('platform.linking-platform.smart-card.follow-button') ? jsx(LoadingButton, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,
@@ -55,7 +56,7 @@ var ActionButton = function ActionButton(_ref) {
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
     testId: testId
-  }, content) : /*#__PURE__*/React.createElement(Button, {
+  }, content) : jsx(Button, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,

package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -1,7 +1,8 @@
 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 { SmartLinkSize } from '../../../../../../constants';
 import { getIconSizeStyles } from '../../../utils';
 var getIconWidth = function getIconWidth(size) {
@@ -23,7 +24,7 @@ var ActionIcon = function ActionIcon(_ref) {
     testId = _ref.testId,
     icon = _ref.icon,
     isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: getIconStyles(size, isDisabled),
     "data-testid": "".concat(testId, "-icon")
   }, icon);

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SmartLinkSize } from '../../../../../constants';
 import ActionButton from './action-button';
 import ActionDropdownItem from './action-dropdown-item';
@@ -33,7 +35,7 @@ var Action = function Action(_ref) {
   if (!onClick) {
     return null;
   }
-  var actionIcon = icon && /*#__PURE__*/React.createElement(ActionIcon, {
+  var actionIcon = icon && jsx(ActionIcon, {
     isDisabled: isDisabled,
     icon: icon,
     size: size,
@@ -42,7 +44,7 @@ var Action = function Action(_ref) {
   var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
   var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
   if (asDropDownItem) {
-    return /*#__PURE__*/React.createElement(ActionDropdownItem, {
+    return jsx(ActionDropdownItem, {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
@@ -51,7 +53,7 @@ var Action = function Action(_ref) {
       testId: testId
     });
   } else {
-    return /*#__PURE__*/React.createElement(ActionButton, {
+    return jsx(ActionButton, {
       appearance: appearance,
       content: content,
       iconAfter: iconAfter,

package/dist/esm/view/FlexibleCard/components/blocks/action-group/action-group-item/index.js

@@ -4,6 +4,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["name", "hideContent", "hideIcon", "onClick", "isDisabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useCallback } from 'react';
 import * as Actions from '../../../actions';
 import { isJSXElementNull } from '../../utils';
@@ -38,7 +40,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
   if (hideIcon) {
     actionProps.icon = undefined;
   }
-  var action = /*#__PURE__*/React.createElement(Action, _extends({
+  var action = jsx(Action, _extends({
     url: "",
     asDropDownItem: asDropDownItems,
     size: size,

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -4,9 +4,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["triggerRef"];
 var _templateObject;
+/** @jsx jsx */
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Tooltip from '@atlaskit/tooltip';
 import DropdownMenu from '@atlaskit/dropdown-menu';
@@ -26,7 +27,7 @@ var renderActionItems = function renderActionItems() {
   var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
   var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
   return items.map(function (item, idx) {
-    return /*#__PURE__*/React.createElement(ActionGroupItem, {
+    return jsx(ActionGroupItem, {
       item: item,
       key: idx,
       size: size,
@@ -84,22 +85,22 @@ var ActionGroup = function ActionGroup(_ref) {
     var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
     if (actionItems.length > 0) {
       var spacing = sizeToButtonSpacing[size];
-      var moreIcon = /*#__PURE__*/React.createElement(MoreIcon, {
+      var moreIcon = jsx(MoreIcon, {
         label: "more"
       });
-      var formatMessage = /*#__PURE__*/React.createElement(FormattedMessage, messages.more_actions);
-      return /*#__PURE__*/React.createElement(DropdownMenu, {
+      var formatMessage = jsx(FormattedMessage, messages.more_actions);
+      return jsx(DropdownMenu, {
         isOpen: isOpen,
         onOpenChange: onOpenChange,
         trigger: function trigger(_ref2) {
           var triggerRef = _ref2.triggerRef,
             props = _objectWithoutProperties(_ref2, _excluded);
-          return /*#__PURE__*/React.createElement(Tooltip, {
+          return jsx(Tooltip, {
             content: formatMessage,
             hideTooltipOnClick: true,
             testId: "action-group-more-button-tooltip",
             tag: "span"
-          }, /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+          }, jsx(Button, _extends({}, props, {
             spacing: spacing,
             testId: "action-group-more-button",
             iconBefore: moreIcon,
@@ -112,10 +113,10 @@ var ActionGroup = function ActionGroup(_ref) {
     }
     return null;
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
-  return renderableActionItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  return renderableActionItems.length > 0 ? jsx("div", {
     css: styles,
     className: "actions-button-group",
     "data-action-open": isOpen
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
+  }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
 };
 export default ActionGroup;