@atlaskit/smart-card 26.42.11 → 26.42.12

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

@@ -1,5 +1,6 @@
+/** @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';
@@ -62,14 +63,14 @@ const ActionButton = ({
     e.preventDefault();
     handler();
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [getButtonStyle(size, iconOnly), overrideCss],
     "data-testid": `${testId}-button-wrapper`
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: `${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,
@@ -78,7 +79,7 @@ const ActionButton = ({
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
     testId: testId
-  }, content) : /*#__PURE__*/React.createElement(Button, {
+  }, content) : jsx(Button, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,

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

@@ -1,5 +1,6 @@
+/** @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';
 const getIconWidth = size => {
@@ -22,7 +23,7 @@ const ActionIcon = ({
   testId,
   icon,
   isDisabled
-}) => /*#__PURE__*/React.createElement("span", {
+}) => jsx("span", {
   css: getIconStyles(size, isDisabled),
   "data-testid": `${testId}-icon`
 }, icon);

package/dist/es2019/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';
@@ -29,7 +31,7 @@ const Action = ({
   if (!onClick) {
     return null;
   }
-  const actionIcon = icon && /*#__PURE__*/React.createElement(ActionIcon, {
+  const actionIcon = icon && jsx(ActionIcon, {
     isDisabled: isDisabled,
     icon: icon,
     size: size,
@@ -38,7 +40,7 @@ const Action = ({
   const iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
   const iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
   if (asDropDownItem) {
-    return /*#__PURE__*/React.createElement(ActionDropdownItem, {
+    return jsx(ActionDropdownItem, {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
@@ -47,7 +49,7 @@ const Action = ({
       testId: testId
     });
   } else {
-    return /*#__PURE__*/React.createElement(ActionButton, {
+    return jsx(ActionButton, {
       appearance: appearance,
       content: content,
       iconAfter: iconAfter,

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

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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 @@ const ActionGroupItem = ({
   if (hideIcon) {
     actionProps.icon = undefined;
   }
-  const action = /*#__PURE__*/React.createElement(Action, _extends({
+  const action = jsx(Action, _extends({
     url: "",
     asDropDownItem: asDropDownItems,
     size: size,

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -29,7 +30,7 @@ const styles = css`
     }
   }
 `;
-const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => /*#__PURE__*/React.createElement(ActionGroupItem, {
+const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => jsx(ActionGroupItem, {
   item: item,
   key: idx,
   size: size,
@@ -78,22 +79,22 @@ const ActionGroup = ({
     const actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
     if (actionItems.length > 0) {
       const spacing = sizeToButtonSpacing[size];
-      const moreIcon = /*#__PURE__*/React.createElement(MoreIcon, {
+      const moreIcon = jsx(MoreIcon, {
         label: "more"
       });
-      const formatMessage = /*#__PURE__*/React.createElement(FormattedMessage, messages.more_actions);
-      return /*#__PURE__*/React.createElement(DropdownMenu, {
+      const formatMessage = jsx(FormattedMessage, messages.more_actions);
+      return jsx(DropdownMenu, {
         isOpen: isOpen,
         onOpenChange: onOpenChange,
         trigger: ({
           triggerRef,
           ...props
-        }) => /*#__PURE__*/React.createElement(Tooltip, {
+        }) => 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,
@@ -105,10 +106,10 @@ const ActionGroup = ({
     }
     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;

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

@@ -1,5 +1,6 @@
+/** @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';
 const getBlockStyles = (direction, size) => css`
@@ -42,7 +43,7 @@ const Block = ({
   useEffect(() => {
     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/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -1,5 +1,6 @@
+/** @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';
@@ -89,7 +90,7 @@ const ElementGroup = ({
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent,
   position = SmartLinkPosition.Center
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
   "data-smart-element-group": true,
   "data-testid": testId

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

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { SmartLinkStatus } from '../../../../../constants';
 import PreviewBlockResolvedView from './resolved';
 
@@ -15,7 +17,7 @@ const PreviewBlock = ({
   overrideUrl,
   ...blockProps
 }) => {
-  return /*#__PURE__*/React.createElement(PreviewBlockResolvedView, _extends({}, blockProps, {
+  return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
     testId: testId,
     overrideUrl: overrideUrl
   }));

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -88,10 +89,10 @@ const PreviewBlockResolvedView = ({
       onError();
     }
   }, [onError]);
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  return jsx(Block, _extends({}, blockProps, {
     overrideCss: styles,
     testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(Preview, {
+  }), jsx(Preview, {
     onError: handleOnError,
     onLoad: handleOnLoad,
     overrideUrl: overrideUrl

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/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, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';

package/dist/es2019/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/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -55,20 +56,20 @@ const TitleBlockErroredView = ({
     size = SmartLinkSize.Medium
   } = blockProps;
   const hasAction = onClick !== undefined;
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  return jsx(Block, _extends({}, blockProps, {
     testId: `${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": `${testId}-errored-view-message`,
     tabIndex: hasAction ? 0 : -1
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, descriptor, {
+  }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);
 };

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

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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 @@ const TitleBlockResolvingView = ({
   } = blockProps;
   const iconWidth = getIconWidth(size);
   const iconStyles = getIconSizeStyles(iconWidth);
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+  return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-resolving-view`
-  }), !hideIcon && /*#__PURE__*/React.createElement("span", {
+  }), !hideIcon && jsx("span", {
     css: iconStyles,
     "data-testid": `${testId}-icon`
-  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  }, jsx(LoadingSkeleton, {
     testId: `${testId}-icon-loading`
   })), title, actionGroup);
 };

package/dist/es2019/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';
 const ImageIcon = ({
@@ -7,12 +9,12 @@ const ImageIcon = ({
   url,
   onError,
   onLoad
-}) => /*#__PURE__*/React.createElement(ImageLoader, {
+}) => jsx(ImageLoader, {
   src: url,
-  loading: /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  loading: jsx(LoadingSkeleton, {
     testId: `${testId}-loading`
   }),
-  loaded: /*#__PURE__*/React.createElement("img", {
+  loaded: jsx("img", {
     src: url,
     "data-testid": `${testId}-image`
   }),

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css, keyframes } from '@emotion/react';
+import { css, jsx, keyframes } from '@emotion/react';
 const LoadingSkeleton = ({
   testId,
   width,
@@ -32,7 +33,7 @@ const LoadingSkeleton = ({
     animation-name: ${animationNameStyles};
     animation-timing-function: linear;
   `;
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: styles,
     "data-testid": testId
   });

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

@@ -1,5 +1,6 @@
+/** @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';
@@ -149,7 +150,7 @@ const getLayeredLink = (testId, context, children, onClick) => {
     anchorTarget: target,
     text
   } = getTitleBlockProps(children) || {};
-  return /*#__PURE__*/React.createElement(LayeredLink, {
+  return jsx(LayeredLink, {
     onClick: onClick,
     target: target,
     testId: testId,
@@ -189,13 +190,13 @@ const Container = ({
   // `retry` object contains action that can be performed on
   // unresolved link (unauthorized, forbidden, not found, etc.)
   const canShowAuthTooltip = showAuthTooltip && status === 'unauthorized' && retry !== undefined;
-  const container = /*#__PURE__*/React.createElement("div", {
+  const 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/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 const styles = css`
   // Stretch the invisible link over the whole of the post.
@@ -49,7 +50,7 @@ const LayeredLink = ({
   url
 }) => {
   const onMouseDown = useMouseDownEvent();
-  return /*#__PURE__*/React.createElement("a", {
+  return jsx("a", {
     className: "layered-link",
     css: styles,
     "data-testid": `${testId}-layered-link`,

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

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
 import AKBadge from '@atlaskit/badge';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 const badgeStyles = css`
   align-items: center;
   display: inline-flex;
@@ -21,12 +22,12 @@ const AtlaskitBadge = ({
   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/es2019/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -1,5 +1,6 @@
+/** @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';
@@ -93,13 +94,13 @@ const AvatarGroup = ({
   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/es2019/view/FlexibleCard/components/elements/badge/index.js

@@ -1,5 +1,6 @@
+/** @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';
@@ -55,7 +56,7 @@ const getFormattedMessageFromIcon = icon => {
 };
 const renderAtlaskitIcon = (icon, testId) => {
   if (icon) {
-    return /*#__PURE__*/React.createElement(AtlaskitIcon, {
+    return jsx(AtlaskitIcon, {
       icon: icon,
       label: icon,
       testId: `${testId}-icon`
@@ -64,7 +65,7 @@ const renderAtlaskitIcon = (icon, testId) => {
 };
 const renderImageIcon = (url, testId) => {
   if (url) {
-    return /*#__PURE__*/React.createElement(ImageIcon, {
+    return jsx(ImageIcon, {
       testId: testId,
       url: url
     });
@@ -97,15 +98,15 @@ const Badge = ({
   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": `${testId}-label`
   }, formattedMessageOrLabel));

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -70,13 +71,13 @@ const DateTime = ({
       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 ? `${text} ${context}` : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
+  }, text ? `${text} ${context}` : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context
     }

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

@@ -1,6 +1,7 @@
+/** @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';
@@ -38,20 +39,20 @@ const getCustomRenderStyles = value => css`
 `;
 const renderAtlaskitIcon = (icon, label, testId) => {
   if (icon) {
-    return /*#__PURE__*/React.createElement(AtlaskitIcon, {
+    return jsx(AtlaskitIcon, {
       icon: icon,
       label: label,
       testId: `${testId}-icon`
     });
   }
 };
-const renderDefaultIcon = (label, testId) => /*#__PURE__*/React.createElement(LinkIcon, {
+const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
   label: label,
   testId: `${testId}-default`
 });
 const renderImageIcon = (defaultIcon, url, testId) => {
   if (url) {
-    return /*#__PURE__*/React.createElement(ImageIcon, {
+    return jsx(ImageIcon, {
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
@@ -83,7 +84,7 @@ const Icon = ({
   const width = getIconWidth(size);
   const styles = getIconStyles(position, width);
   const 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/es2019/view/FlexibleCard/components/elements/link/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -75,7 +76,7 @@ const getMaxLines = maxLines => {
   }
   return maxLines;
 };
-const withTooltip = (trigger, content, testId) => /*#__PURE__*/React.createElement(Tooltip, {
+const withTooltip = (trigger, content, testId) => jsx(Tooltip, {
   content: content,
   testId: `${testId}-tooltip`,
   tag: "span"
@@ -102,7 +103,7 @@ const Link = ({
 }) => {
   const onMouseDown = useMouseDownEvent();
   const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
-  const anchor = /*#__PURE__*/React.createElement("a", _extends({
+  const anchor = jsx("a", _extends({
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element": name,
     "data-smart-element-link": true,
@@ -115,7 +116,7 @@ const Link = ({
   }, target !== '_self' && {
     target
   }), text);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: containerStyles
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -1,5 +1,6 @@
+/** @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 @@ const Lozenge = ({
   if (!text) {
     return null;
   }
-  const lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
+  const 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: `${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/es2019/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';
@@ -34,7 +36,7 @@ const FeatureDiscovery = ({
   }, [storageClient, discovered]);
   const component = useMemo(() => {
     if (!discovered) {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         css: getPulseStyles(appearance),
         "data-testid": `${testId}-discovery`
       }, children);