@atlaskit/smart-card 26.42.11 → 26.42.12

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React, { useEffect } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
 var getBlockStyles = function getBlockStyles(direction, size) {
@@ -30,7 +31,7 @@ var Block = function Block(_ref) {
   useEffect(function () {
     onRender && onRender();
   }, [onRender]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
     "data-testid": testId,

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

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 import { getMaxLineHeight, getTruncateStyles } from '../../utils';
@@ -51,7 +52,7 @@ var ElementGroup = function ElementGroup(_ref) {
     width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? SmartLinkPosition.Center : _ref$position;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
     "data-smart-element-group": true,
     "data-testid": testId

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/index.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["status", "testId", "overrideUrl"];
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SmartLinkStatus } from '../../../../../constants';
 import PreviewBlockResolvedView from './resolved';
 
@@ -18,7 +20,7 @@ var PreviewBlock = function PreviewBlock(_ref) {
     testId = _ref$testId === void 0 ? 'smart-block-preview' : _ref$testId,
     overrideUrl = _ref.overrideUrl,
     blockProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(PreviewBlockResolvedView, _extends({}, blockProps, {
+  return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
     testId: testId,
     overrideUrl: overrideUrl
   }));

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -4,8 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
 var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
 import React, { useCallback, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { MediaPlacement } from '../../../../../../constants';
 import Block from '../../block';
 import { Preview } from '../../../elements';
@@ -68,10 +69,10 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
       onError();
     }
   }, [onError]);
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  return jsx(Block, _extends({}, blockProps, {
     overrideCss: styles,
     testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/React.createElement(Preview, {
+  }), jsx(Preview, {
     onError: handleOnError,
     onLoad: handleOnLoad,
     overrideUrl: overrideUrl

package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js

@@ -1,8 +1,6 @@
-/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject;
-import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';

package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/resolved-result-stack/index.js

@@ -1,5 +1,3 @@
-/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
-import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect } from 'react';
 import { Stack, xcss } from '@atlaskit/primitives';
 import { AnalyticsContext, useAnalyticsEvents } from '@atlaskit/analytics-next';

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -3,9 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
@@ -40,20 +41,20 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
-  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
+  }), !hideIcon && jsx(LinkIcon, {
     position: position
-  }), title, descriptor && /*#__PURE__*/React.createElement(ElementGroup, {
+  }), title, descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": "".concat(testId, "-errored-view-message"),
     tabIndex: hasAction ? 0 : -1
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, descriptor, {
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);
 };

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
 import LoadingSkeleton from '../../../common/loading-skeleton';
@@ -23,12 +25,12 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
     size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
   var iconWidth = getIconWidth(size);
   var iconStyles = getIconSizeStyles(iconWidth);
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), !hideIcon && /*#__PURE__*/React.createElement("span", {
+  }), !hideIcon && jsx("span", {
     css: iconStyles,
     "data-testid": "".concat(testId, "-icon")
-  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  }, jsx(LoadingSkeleton, {
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import ImageLoader from 'react-render-image';
 import LoadingSkeleton from '../loading-skeleton';
 var ImageIcon = function ImageIcon(_ref) {
@@ -7,12 +9,12 @@ var ImageIcon = function ImageIcon(_ref) {
     url = _ref.url,
     onError = _ref.onError,
     onLoad = _ref.onLoad;
-  return /*#__PURE__*/React.createElement(ImageLoader, {
+  return jsx(ImageLoader, {
     src: url,
-    loading: /*#__PURE__*/React.createElement(LoadingSkeleton, {
+    loading: jsx(LoadingSkeleton, {
       testId: "".concat(testId, "-loading")
     }),
-    loaded: /*#__PURE__*/React.createElement("img", {
+    loaded: jsx("img", {
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,14 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 import React from 'react';
-import { css, keyframes } from '@emotion/react';
+import { css, jsx, keyframes } from '@emotion/react';
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
     width = _ref.width,
     height = _ref.height;
   var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
   var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    background-image: linear-gradient(\n      to right,\n      transparent 0%,\n      ", " 20%,\n      transparent 40%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", animationNameStyles);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: styles,
     "data-testid": testId
   });

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 import React, { useContext } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
@@ -108,7 +109,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
   var _ref2 = getTitleBlockProps(children) || {},
     target = _ref2.anchorTarget,
     text = _ref2.text;
-  return /*#__PURE__*/React.createElement(LayeredLink, {
+  return jsx(LayeredLink, {
     onClick: onClick,
     target: target,
     testId: testId,
@@ -158,13 +159,13 @@ var Container = function Container(_ref3) {
   // `retry` object contains action that can be performed on
   // unresolved link (unauthorized, forbidden, not found, etc.)
   var canShowAuthTooltip = showAuthTooltip && status === 'unauthorized' && retry !== undefined;
-  var container = /*#__PURE__*/React.createElement("div", {
+  var container = jsx("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
-    return /*#__PURE__*/React.createElement(HoverCardControl, {
+    return jsx(HoverCardControl, {
       hideHoverCardPreviewButton: hideHoverCardPreviewButton,
       isHoverPreview: canShowHoverPreview,
       isAuthTooltip: canShowAuthTooltip,

package/dist/esm/view/FlexibleCard/components/container/layered-link/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 { jsx, css } from '@emotion/react';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
 
@@ -17,7 +18,7 @@ var LayeredLink = function LayeredLink(_ref) {
     text = _ref.text,
     url = _ref.url;
   var onMouseDown = useMouseDownEvent();
-  return /*#__PURE__*/React.createElement("a", {
+  return jsx("a", {
     className: "layered-link",
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),

package/dist/esm/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -1,8 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React from 'react';
 import AKBadge from '@atlaskit/badge';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n"])));
 
 /**
@@ -20,12 +21,12 @@ var AtlaskitBadge = function AtlaskitBadge(_ref) {
   if (!value) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-atlaskit-badge": true,
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement(AKBadge, null, value));
+  }, jsx(AKBadge, null, value));
 };
 export default AtlaskitBadge;

package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 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 React, { useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 import { messages } from '../../../../../messages';
@@ -86,13 +87,13 @@ var AvatarGroup = function AvatarGroup(_ref) {
   if (!data.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [getStyles(size), overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+  }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",

package/dist/esm/view/FlexibleCard/components/elements/badge/index.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _messageMapper;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { tokens } from '../../../../../utils/token';
 import { getFormattedMessage, getIconSizeStyles } from '../../utils';
 import { IconType } from '../../../../../constants';
@@ -25,7 +26,7 @@ var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   if (icon) {
-    return /*#__PURE__*/React.createElement(AtlaskitIcon, {
+    return jsx(AtlaskitIcon, {
       icon: icon,
       label: icon,
       testId: "".concat(testId, "-icon")
@@ -34,7 +35,7 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
 };
 var renderImageIcon = function renderImageIcon(url, testId) {
   if (url) {
-    return /*#__PURE__*/React.createElement(ImageIcon, {
+    return jsx(ImageIcon, {
       testId: testId,
       url: url
     });
@@ -67,15 +68,15 @@ var Badge = function Badge(_ref) {
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     css: iconStyles
-  }, badgeIcon), /*#__PURE__*/React.createElement("span", {
+  }, badgeIcon), jsx("span", {
     css: labelStyles,
     "data-testid": "".concat(testId, "-label")
   }, formattedMessageOrLabel));

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { selectUnit } from '@formatjs/intl-utils';
@@ -65,13 +66,13 @@ var DateTime = function DateTime(_ref) {
       numeric: 'auto'
     });
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element": name,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, text ? "".concat(text, " ").concat(context) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
+  }, text ? "".concat(text, " ").concat(context) : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

package/dist/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -1,8 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 import React, { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
@@ -24,7 +25,7 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   if (icon) {
-    return /*#__PURE__*/React.createElement(AtlaskitIcon, {
+    return jsx(AtlaskitIcon, {
       icon: icon,
       label: label,
       testId: "".concat(testId, "-icon")
@@ -32,14 +33,14 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
-  return /*#__PURE__*/React.createElement(LinkIcon, {
+  return jsx(LinkIcon, {
     label: label,
     testId: "".concat(testId, "-default")
   });
 };
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
   if (url) {
-    return /*#__PURE__*/React.createElement(ImageIcon, {
+    return jsx(ImageIcon, {
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
@@ -74,7 +75,7 @@ var Icon = function Icon(_ref) {
   var width = getIconWidth(size);
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/** @jsx jsx */
 import React, { useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
@@ -40,7 +41,7 @@ var getMaxLines = function getMaxLines(maxLines) {
   return maxLines;
 };
 var withTooltip = function withTooltip(trigger, content, testId) {
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: content,
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
@@ -74,7 +75,7 @@ var Link = function Link(_ref) {
   var hasSpace = useMemo(function () {
     return text ? hasWhiteSpace(text) : false;
   }, [text]);
-  var anchor = /*#__PURE__*/React.createElement("a", _extends({
+  var anchor = jsx("a", _extends({
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element": name,
     "data-smart-element-link": true,
@@ -87,7 +88,7 @@ var Link = function Link(_ref) {
   }, target !== '_self' && {
     target: target
   }), text);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: containerStyles
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };

package/dist/esm/view/FlexibleCard/components/elements/lozenge/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 AtlaskitLozenge from '@atlaskit/lozenge';
 import LozengeAction from './lozenge-action';
 import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
@@ -26,17 +27,17 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
-  var lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
+  var lozenge = action ? jsx(LozengeAction, {
     action: action,
     appearance: appearance,
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
-  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, {
+  }) : jsx(AtlaskitLozenge, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
   }, text);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [styles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/feature-discovery/index.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { useEffect, useMemo, useRef } from 'react';
 import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
 import { getPulseStyles } from './styled';
@@ -37,7 +39,7 @@ var FeatureDiscovery = function FeatureDiscovery(_ref) {
   }, [storageClient, discovered]);
   var component = useMemo(function () {
     if (!discovered) {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         css: getPulseStyles(appearance),
         "data-testid": "".concat(testId, "-discovery")
       }, children);

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import LozengeActionTrigger from './lozenge-action-trigger';
@@ -133,7 +135,7 @@ var LozengeAction = function LozengeAction(_ref) {
     };
   }(), [action.read, analytics, invoke, isLoaded, text]);
   var trigger = useCallback(function (props) {
-    return /*#__PURE__*/React.createElement(LozengeActionTrigger, _extends({}, props, {
+    return jsx(LozengeActionTrigger, _extends({}, props, {
       appearance: selected.appearance,
       isOpen: isOpen,
       showFeatureDiscovery: action === null || action === void 0 ? void 0 : action.showFeatureDiscovery,
@@ -202,7 +204,7 @@ var LozengeAction = function LozengeAction(_ref) {
   }(), [action === null || action === void 0 ? void 0 : action.update, analytics, invoke, linkId, reload, url]);
   var dropdownItemGroup = useMemo(function () {
     if (errorMessage) {
-      return /*#__PURE__*/React.createElement(LozengeActionError, {
+      return jsx(LozengeActionError, {
         errorMessage: errorMessage,
         testId: testId,
         url: url,
@@ -210,14 +212,14 @@ var LozengeAction = function LozengeAction(_ref) {
       });
     }
     if (items && items.length > 0) {
-      return /*#__PURE__*/React.createElement(LozengeActionItemsGroup, {
+      return jsx(LozengeActionItemsGroup, {
         testId: testId,
         items: items,
         onClick: handleItemClick
       });
     }
   }, [errorMessage, handleItemClick, items, previewData, testId, url]);
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx(DropdownMenu, {
     isLoading: isLoading,
     isOpen: isOpen,
     onOpenChange: handleOpenChange,

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -1,6 +1,8 @@
 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 { Fragment, useMemo, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
@@ -37,29 +39,29 @@ var LozengeActionError = function LozengeActionError(_ref) {
     }
   }, [analytics, handlePreviewClose, isPreviewAvailable, previewData]);
   var content = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    return jsx(Fragment, null, jsx("div", {
       css: contentStyles
-    }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    }, jsx(ErrorIcon, {
       testId: "".concat(testId, "-icon"),
       size: "medium",
       primaryColor: "var(--ds-icon-danger, ".concat(R500, ")"),
       secondaryColor: "var(--ds-background-danger, ".concat(R50, ")"),
       label: 'error'
-    }), /*#__PURE__*/React.createElement("span", {
+    }), jsx("span", {
       css: textStyles(maxLineNumber),
       "data-testid": "".concat(testId, "-error-message")
-    }, typeof errorMessage === 'string' ? errorMessage : getFormattedMessage(errorMessage))), isPreviewAvailable ? /*#__PURE__*/React.createElement("div", {
+    }, typeof errorMessage === 'string' ? errorMessage : getFormattedMessage(errorMessage))), isPreviewAvailable ? jsx("div", {
       css: linkStyles
-    }, /*#__PURE__*/React.createElement("a", {
+    }, jsx("a", {
       target: "_blank",
       "data-testid": "".concat(testId, "-open-embed"),
       onClick: handlePreviewOpen
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.open_issue_in_jira))) : null);
+    }, jsx(FormattedMessage, messages.open_issue_in_jira))) : null);
   }, [errorMessage, handlePreviewOpen, isPreviewAvailable, maxLineNumber, testId]);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: dropdownItemGroupStyles,
     "data-testid": "".concat(testId, "-error-item-group")
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+  }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
     testId: "".concat(testId, "-error")
   }, content)));
 };