@atlaskit/smart-card 26.42.11 → 26.42.12

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

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import LozengeActionItem from '../lozenge-action-item';
 import { dropdownItemGroupStyles } from '../styled';
 import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
@@ -7,13 +9,12 @@ var LozengeActionItemsGroup = function LozengeActionItemsGroup(_ref) {
     testId = _ref.testId,
     onClick = _ref.onClick;
   return (
-    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
-    React.createElement("span", {
+    jsx("span", {
       css: dropdownItemGroupStyles,
       "data-testid": "".concat(testId, "-item-group")
-    }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, items.map(function (item, idx) {
-      return /*#__PURE__*/React.createElement(LozengeActionItem, _extends({}, item, {
+    }, jsx(DropdownItemGroup, null, items.map(function (item, idx) {
+      return jsx(LozengeActionItem, _extends({}, item, {
         key: idx,
         onClick: onClick,
         testId: "".concat(testId, "-item-").concat(idx)

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

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["appearance", "isOpen", "showFeatureDiscovery", "testId", "text", "triggerRef"];
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { useCallback, useMemo, useState } from 'react';
 import Lozenge from '@atlaskit/lozenge';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -26,17 +28,17 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     return setIsBold(false);
   }, []);
   var lozenge = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Lozenge, {
+    return jsx(Lozenge, {
       appearance: appearance,
       isBold: isBold
-    }, /*#__PURE__*/React.createElement("span", {
+    }, jsx("span", {
       css: triggerLozengeStyles
-    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    }, jsx("span", null, text), jsx(ChevronDownIcon, {
       label: "options",
       size: "medium"
     })));
   }, [appearance, isBold, text]);
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return jsx("button", _extends({
     type: "button"
   }, props, {
     css: triggerButtonStyles,
@@ -45,7 +47,7 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     ref: triggerRef
-  }), showFeatureDiscovery ? /*#__PURE__*/React.createElement(FeatureDiscovery, {
+  }), showFeatureDiscovery ? jsx(FeatureDiscovery, {
     appearance: appearance,
     testId: testId
   }, lozenge) : lozenge);

package/dist/esm/view/FlexibleCard/components/elements/media/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 ImageIcon from '../../common/image-icon';
 /**
  * Media: Image
@@ -33,12 +34,12 @@ var Media = function Media(_ref) {
   if (!type || !url) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
     "data-smart-element-media": type,
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement(ImageIcon, {
+  }, jsx(ImageIcon, {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["overrideUrl"];
+/** @jsx jsx */
 import React, { useContext } from 'react';
+import { jsx } from '@emotion/react';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { MediaType } from '../../../../../constants';
 import Media from '../media';
@@ -17,6 +19,6 @@ var Preview = function Preview(props) {
   if (!data) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Media, _extends({}, rest, data));
+  return jsx(Media, _extends({}, rest, data));
 };
 export default Preview;

package/dist/esm/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -3,7 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["content", "maxLines", "overrideCss"];
 var _templateObject;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import React, { useContext } from 'react';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import Text from '../text';
@@ -19,7 +20,7 @@ var SnippetElement = function SnippetElement() {
     overrideCss = _ref.overrideCss,
     props = _objectWithoutProperties(_ref, _excluded);
   var context = useContext(FlexibleUiContext);
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return jsx(Text, _extends({
     content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
     maxLines: maxLines,
     overrideCss: getSnippetStyles(overrideCss)

package/dist/esm/view/FlexibleCard/components/elements/text/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 { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 var getStyles = function getStyles(maxLines) {
@@ -26,7 +27,7 @@ var Text = function Text(_ref) {
   if (!message && !content) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element": name,

package/dist/esm/view/HoverCard/components/CustomPopupContainer.js

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
+/** @jsx jsx */
 import React from 'react';
 import { popupContainerStyles } from '../styled';
+import { jsx } from '@emotion/react';
 var CustomPopupContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: popupContainerStyles
   }, props, {
     ref: ref

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
 import Popup from '@atlaskit/popup';
+import { jsx } from '@emotion/react';
 import React, { useCallback, useMemo, useRef, useEffect } from 'react';
 import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
@@ -199,17 +201,17 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       url: url,
       id: id
     };
-    return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+    return jsx(SmartLinkAnalyticsContext, {
       url: url,
       display: CardDisplay.HoverCardPreview,
       id: id,
       source: HOVER_CARD_SOURCE
-    }, /*#__PURE__*/React.createElement(HoverCardContent, hoverCardContentProps));
+    }, jsx(HoverCardContent, hoverCardContentProps));
   }, [initShowCard, initHideCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   var trigger = useCallback(function (triggerProps) {
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       ref: parentSpan
-    }, /*#__PURE__*/React.createElement("span", _extends({}, triggerProps, {
+    }, jsx("span", _extends({}, triggerProps, {
       onMouseOver: initShowCard,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
@@ -218,7 +220,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       "data-testid": "hover-card-trigger-wrapper"
     }), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,

package/dist/esm/view/HoverCard/components/HoverCardContent.js

@@ -1,5 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -23,7 +25,7 @@ export var hoverCardClassName = 'smart-links-hover-preview';
 export var getCopyAction = function getCopyAction(url) {
   return {
     name: ActionName.CustomAction,
-    icon: /*#__PURE__*/React.createElement(CopyIcon, {
+    icon: jsx(CopyIcon, {
       label: "copy url",
       size: "medium"
     }),
@@ -48,7 +50,7 @@ export var getCopyAction = function getCopyAction(url) {
       }
       return onClick;
     }(),
-    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.copy_url_to_clipboard),
+    tooltipMessage: jsx(FormattedMessage, messages.copy_url_to_clipboard),
     testId: 'hover-card-copy-button'
   };
 };
@@ -155,13 +157,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
   }, []);
   var getCardView = function getCardView(cardState) {
     if (cardState.metadataStatus === 'pending') {
-      return /*#__PURE__*/React.createElement(HoverCardLoadingView, {
+      return jsx(HoverCardLoadingView, {
         flexibleCardProps: flexibleCardProps,
         titleBlockProps: titleBlockProps
       });
     }
     if (cardState.status === 'unauthorized' && services !== null && services !== void 0 && services.length) {
-      return /*#__PURE__*/React.createElement(HoverCardUnauthorisedView, {
+      return jsx(HoverCardUnauthorisedView, {
         analytics: analytics,
         extensionKey: extensionKey,
         id: id,
@@ -171,13 +173,13 @@ var HoverCardContent = function HoverCardContent(_ref) {
     }
     if (getBooleanFF('platform.linking-platform.smart-card.cross-join')) {
       if (cardState.status === 'forbidden' || cardState.status === 'not_found') {
-        return /*#__PURE__*/React.createElement(HoverCardForbiddenView, {
+        return jsx(HoverCardForbiddenView, {
           flexibleCardProps: flexibleCardProps
         });
       }
     }
     if (cardState.status === 'resolved') {
-      return /*#__PURE__*/React.createElement(HoverCardResolvedView, {
+      return jsx(HoverCardResolvedView, {
         id: id,
         url: url,
         extensionKey: extensionKey,
@@ -192,7 +194,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     return null;
   };
   var cardView = getCardView(cardState);
-  return cardView ? /*#__PURE__*/React.createElement("div", {
+  return cardView ? jsx("div", {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,

package/dist/esm/view/HoverCard/components/views/resolving/index.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import LoadingSkeleton from '../../../../FlexibleCard/components/common/loading-skeleton';
 import { CARD_WIDTH_REM } from '../../../styled';
@@ -13,35 +15,35 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
   var skeletonWidth = CARD_WIDTH_REM - 2;
   var size = titleBlockProps.size,
     actions = titleBlockProps.actions;
-  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+  var actionGroup = (actions === null || actions === void 0 ? void 0 : actions.length) && (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && jsx(ActionGroup, {
     items: actions,
     visibleButtonsNum: 2
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: loadingViewContainer,
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: skeletonContainer
-  }, /*#__PURE__*/React.createElement(CustomBlock, _extends({}, titleBlockProps, {
+  }, jsx(CustomBlock, _extends({}, titleBlockProps, {
     overrideCss: titleBlockStyles,
     testId: "".concat(testId, "-title-block")
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), jsx(Icon, {
     render: function render() {
-      return /*#__PURE__*/React.createElement(LoadingSkeleton, null);
+      return jsx(LoadingSkeleton, null);
     },
     size: size
-  }), /*#__PURE__*/React.createElement("span", {
+  }), jsx("span", {
     css: getTitleStyles(lineHeightRem),
     "data-testid": "".concat(testId, "-title")
-  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  }, jsx(LoadingSkeleton, {
     height: lineHeightRem
-  })), actionGroup), /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  })), actionGroup), jsx(LoadingSkeleton, {
     width: skeletonWidth,
     height: lineHeightRem
-  }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  }), jsx(LoadingSkeleton, {
     width: skeletonWidth,
     height: lineHeightRem * 3
-  }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  }), jsx(LoadingSkeleton, {
     width: skeletonWidth,
     height: lineHeightRem
   })));

package/dist/esm/view/HoverCard/index.js

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { jsx } from '@emotion/react';
 import { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
@@ -17,10 +19,10 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
       errorInfo: info
     });
   }, [analytics.ui, id]);
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+  return jsx(ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, /*#__PURE__*/React.createElement(HoverCardComponent, props, children));
+  }, jsx(HoverCardComponent, props, children));
 };
 var HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
 
@@ -32,12 +34,12 @@ var HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorB
  * use to configure hover preview behaviour.
  */
 export var HoverCard = function HoverCard(props) {
-  return /*#__PURE__*/React.createElement(HoverCardWithoutAnalyticsContext, props);
+  return jsx(HoverCardWithoutAnalyticsContext, props);
 };
 
 /**
  * A standalone hover preview component
  */
 export var StandaloneHoverCard = function StandaloneHoverCard(props) {
-  return /*#__PURE__*/React.createElement(HoverCard, props);
+  return jsx(HoverCard, props);
 };

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

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
 import { breakWordsCss } from './styled';
+import { jsx } from '@emotion/react';
 import { messages } from '../../../messages';
 var WarningModal = function WarningModal(props) {
   var isOpen = props.isOpen,
@@ -12,33 +14,33 @@ var WarningModal = function WarningModal(props) {
     onClose = props.onClose,
     onContinue = props.onContinue,
     intl = props.intl;
-  var content = /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+  var content = jsx(ModalTransition, null, isOpen && jsx(Modal, {
     onClose: onClose,
     testId: "link-with-safety-warning"
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, {
     appearance: "warning"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.check_this_link))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx(FormattedMessage, messages.check_this_link))), jsx(ModalBody, null, jsx("div", {
     css: breakWordsCss
-  }, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+  }, url && unsafeLinkText && jsx(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
     values: {
       unsafeLinkText: unsafeLinkText,
       a: function a() {
-        return /*#__PURE__*/React.createElement("a", {
+        return jsx("a", {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer"
         }, url);
       }
     }
-  })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  })))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "subtle",
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.go_back)), /*#__PURE__*/React.createElement(Button, {
+  }, jsx(FormattedMessage, messages.go_back)), jsx(Button, {
     appearance: "warning",
     onClick: onContinue,
     autoFocus: true
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.continue)))));
-  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+  }, jsx(FormattedMessage, messages.continue)))));
+  return intl ? content : jsx(IntlProvider, {
     locale: "en"
   }, content);
 };

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

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.42.11",
+  packageVersion: "26.42.12",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs, mq } from './utils';
 export var Byline = function Byline(_ref) {
@@ -5,7 +7,7 @@ export var Byline = function Byline(_ref) {
     children = _ref.children,
     testId = _ref.testId,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: mq({
       fontSize: gs(1.5),
       lineHeight: gs(2.5),

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

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/glyph/link';
@@ -26,21 +27,21 @@ export var 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__*/React.createElement(LinkIcon, {
+  var placeholder = defaultIcon || jsx(LinkIcon, {
     label: "link",
     size: "small",
     testId: "".concat(testId, "-default")
   });
-  var image = url && /*#__PURE__*/React.createElement(ImageLoader, {
+  var image = url && jsx(ImageLoader, {
     src: url,
-    loaded: /*#__PURE__*/React.createElement("img", {
+    loaded: jsx("img", {
       css: getImageStyles(isFlexibleUi),
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: getSpanStyles(isFlexibleUi),
     "data-testid": testId,
     className: blockCardIconImageClassName

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { N300 } from '@atlaskit/theme/colors';
 export var Metadata = function Metadata(_ref) {
@@ -7,7 +9,7 @@ export var Metadata = function Metadata(_ref) {
     tooltip = _ref.tooltip;
   var metadataIcon = icon || null;
   if (!metadataIcon && iconUrl) {
-    metadataIcon = /*#__PURE__*/React.createElement("img", {
+    metadataIcon = jsx("img", {
       src: iconUrl,
       css: {
         width: "var(--ds-space-100, 8px)",
@@ -15,13 +17,13 @@ export var Metadata = function Metadata(_ref) {
       }
     });
   }
-  var metadata = /*#__PURE__*/React.createElement("div", {
+  var metadata = jsx("div", {
     css: {
       display: 'flex',
       alignItems: 'center',
       marginRight: "var(--ds-space-050, 4px)"
     }
-  }, metadataIcon, /*#__PURE__*/React.createElement("span", {
+  }, metadataIcon, jsx("span", {
     css: {
       fontSize: "var(--ds-space-150, 12px)",
       color: "".concat("var(--ds-text-subtlest, ".concat(N300, ")")),
@@ -30,7 +32,7 @@ export var Metadata = function Metadata(_ref) {
     }
   }, text));
   if (tooltip) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: tooltip
     }, metadata);
   }

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

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Metadata } from './Metadata';
 import { gs } from './utils';
 export var metadataListClassName = 'smart-link-metadata-list';
 export var MetadataList = function MetadataList(_ref) {
   var items = _ref.items,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: {
       display: 'flex',
       marginTop: gs(0.5),
@@ -17,7 +19,7 @@ export var MetadataList = function MetadataList(_ref) {
     "data-testid": testId,
     className: metadataListClassName
   }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(Metadata, _extends({
+    return jsx(Metadata, _extends({
       key: item.text
     }, item));
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.42.11",
+  "version": "26.42.12",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"