@atlaskit/smart-card 26.42.9 → 26.42.11

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

@@ -1,10 +1,9 @@
 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, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { selectUnit } from '@formatjs/intl-utils';
@@ -66,13 +65,13 @@ var DateTime = function DateTime(_ref) {
       numeric: 'auto'
     });
   }
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("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) : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
+  }, text ? "".concat(text, " ").concat(context) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

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

@@ -1,9 +1,8 @@
 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, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
@@ -25,7 +24,7 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   if (icon) {
-    return jsx(AtlaskitIcon, {
+    return /*#__PURE__*/React.createElement(AtlaskitIcon, {
       icon: icon,
       label: label,
       testId: "".concat(testId, "-icon")
@@ -33,14 +32,14 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
-  return jsx(LinkIcon, {
+  return /*#__PURE__*/React.createElement(LinkIcon, {
     label: label,
     testId: "".concat(testId, "-default")
   });
 };
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
   if (url) {
-    return jsx(ImageIcon, {
+    return /*#__PURE__*/React.createElement(ImageIcon, {
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
@@ -75,7 +74,7 @@ var Icon = function Icon(_ref) {
   var width = getIconWidth(size);
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("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,9 +1,8 @@
 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, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
@@ -41,7 +40,7 @@ var getMaxLines = function getMaxLines(maxLines) {
   return maxLines;
 };
 var withTooltip = function withTooltip(trigger, content, testId) {
-  return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
@@ -75,7 +74,7 @@ var Link = function Link(_ref) {
   var hasSpace = useMemo(function () {
     return text ? hasWhiteSpace(text) : false;
   }, [text]);
-  var anchor = jsx("a", _extends({
+  var anchor = /*#__PURE__*/React.createElement("a", _extends({
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element": name,
     "data-smart-element-link": true,
@@ -88,7 +87,7 @@ var Link = function Link(_ref) {
   }, target !== '_self' && {
     target: target
   }), text);
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     css: containerStyles
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };

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

@@ -1,8 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import LozengeAction from './lozenge-action';
 import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
@@ -27,17 +26,17 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
-  var lozenge = action ? jsx(LozengeAction, {
+  var lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
     action: action,
     appearance: appearance,
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
-  }) : jsx(AtlaskitLozenge, {
+  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
   }, text);
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("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,5 +1,3 @@
-/** @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';
@@ -39,7 +37,7 @@ var FeatureDiscovery = function FeatureDiscovery(_ref) {
   }, [storageClient, discovered]);
   var component = useMemo(function () {
     if (!discovered) {
-      return jsx("span", {
+      return /*#__PURE__*/React.createElement("span", {
         css: getPulseStyles(appearance),
         "data-testid": "".concat(testId, "-discovery")
       }, children);

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

@@ -2,15 +2,11 @@ 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, { DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import LozengeActionItem from './lozenge-action-item';
+import DropdownMenu from '@atlaskit/dropdown-menu';
 import LozengeActionTrigger from './lozenge-action-trigger';
 import LozengeActionError from './lozenge-action-error';
 import withErrorBoundary from './error-boundary';
-import { dropdownItemGroupStyles } from './styled';
 import useInvoke from '../../../../../../state/hooks/use-invoke';
 import extractLozengeActionItems from '../../../../../../extractors/action/extract-lozenge-action-items';
 import createStatusUpdateRequest from '../../../../../../utils/actions/create-status-update-request';
@@ -20,6 +16,7 @@ import { isInvokeCustomError } from '../../../../../../state/hooks/use-invoke/ut
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { TrackQuickActionType } from '../../../../../../utils/analytics/analytics';
 import { permissionLoadErrorAnalyticsPayload, unknownLoadErrorAnalyticsPayload, unknownUpdateErrorAnalyticsPayload, validationUpdateErrorAnalyticsPayload } from './lozenge-action-analytics';
+import LozengeActionItemsGroup from './lozenge-action-items-group';
 var validateItems = function validateItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var text = arguments.length > 1 ? arguments[1] : undefined;
@@ -136,7 +133,7 @@ var LozengeAction = function LozengeAction(_ref) {
     };
   }(), [action.read, analytics, invoke, isLoaded, text]);
   var trigger = useCallback(function (props) {
-    return jsx(LozengeActionTrigger, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(LozengeActionTrigger, _extends({}, props, {
       appearance: selected.appearance,
       isOpen: isOpen,
       showFeatureDiscovery: action === null || action === void 0 ? void 0 : action.showFeatureDiscovery,
@@ -205,7 +202,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 jsx(LozengeActionError, {
+      return /*#__PURE__*/React.createElement(LozengeActionError, {
         errorMessage: errorMessage,
         testId: testId,
         url: url,
@@ -213,19 +210,14 @@ var LozengeAction = function LozengeAction(_ref) {
       });
     }
     if (items && items.length > 0) {
-      return jsx("span", {
-        css: dropdownItemGroupStyles,
-        "data-testid": "".concat(testId, "-item-group")
-      }, jsx(DropdownItemGroup, null, items.map(function (item, idx) {
-        return jsx(LozengeActionItem, _extends({}, item, {
-          key: idx,
-          onClick: handleItemClick,
-          testId: "".concat(testId, "-item-").concat(idx)
-        }));
-      })));
+      return /*#__PURE__*/React.createElement(LozengeActionItemsGroup, {
+        testId: testId,
+        items: items,
+        onClick: handleItemClick
+      });
     }
   }, [errorMessage, handleItemClick, items, previewData, testId, url]);
-  return jsx(DropdownMenu, {
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
     isLoading: isLoading,
     isOpen: isOpen,
     onOpenChange: handleOpenChange,

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

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

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

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import LozengeActionItem from '../lozenge-action-item';
+import { dropdownItemGroupStyles } from '../styled';
+import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
+var LozengeActionItemsGroup = function LozengeActionItemsGroup(_ref) {
+  var items = _ref.items,
+    testId = _ref.testId,
+    onClick = _ref.onClick;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    React.createElement("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, {
+        key: idx,
+        onClick: onClick,
+        testId: "".concat(testId, "-item-").concat(idx)
+      }));
+    })))
+  );
+};
+export default LozengeActionItemsGroup;

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

@@ -0,0 +1 @@
+export {};

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

@@ -2,8 +2,6 @@ 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';
@@ -28,17 +26,17 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     return setIsBold(false);
   }, []);
   var lozenge = useMemo(function () {
-    return jsx(Lozenge, {
+    return /*#__PURE__*/React.createElement(Lozenge, {
       appearance: appearance,
       isBold: isBold
-    }, jsx("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       css: triggerLozengeStyles
-    }, jsx("span", null, text), jsx(ChevronDownIcon, {
+    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: "options",
       size: "medium"
     })));
   }, [appearance, isBold, text]);
-  return jsx("button", _extends({
+  return /*#__PURE__*/React.createElement("button", _extends({
     type: "button"
   }, props, {
     css: triggerButtonStyles,
@@ -47,7 +45,7 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     ref: triggerRef
-  }), showFeatureDiscovery ? jsx(FeatureDiscovery, {
+  }), showFeatureDiscovery ? /*#__PURE__*/React.createElement(FeatureDiscovery, {
     appearance: appearance,
     testId: testId
   }, lozenge) : lozenge);

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

@@ -1,8 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import ImageIcon from '../../common/image-icon';
 /**
  * Media: Image
@@ -34,12 +33,12 @@ var Media = function Media(_ref) {
   if (!type || !url) {
     return null;
   }
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
     "data-smart-element-media": type,
     "data-testid": testId
-  }, jsx(ImageIcon, {
+  }, /*#__PURE__*/React.createElement(ImageIcon, {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,

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

@@ -1,9 +1,7 @@
 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';
@@ -19,6 +17,6 @@ var Preview = function Preview(props) {
   if (!data) {
     return null;
   }
-  return jsx(Media, _extends({}, rest, data));
+  return /*#__PURE__*/React.createElement(Media, _extends({}, rest, data));
 };
 export default Preview;

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

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["content", "maxLines", "overrideCss"];
 var _templateObject;
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import React, { useContext } from 'react';
 import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import Text from '../text';
@@ -20,7 +19,7 @@ var SnippetElement = function SnippetElement() {
     overrideCss = _ref.overrideCss,
     props = _objectWithoutProperties(_ref, _excluded);
   var context = useContext(FlexibleUiContext);
-  return jsx(Text, _extends({
+  return /*#__PURE__*/React.createElement(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,8 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 var getStyles = function getStyles(maxLines) {
@@ -27,7 +26,7 @@ var Text = function Text(_ref) {
   if (!message && !content) {
     return null;
   }
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element": name,

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

@@ -1,14 +1,12 @@
 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 jsx("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     css: popupContainerStyles
   }, props, {
     ref: ref

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

@@ -1,8 +1,6 @@
 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';
@@ -201,17 +199,17 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       url: url,
       id: id
     };
-    return jsx(SmartLinkAnalyticsContext, {
+    return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
       url: url,
       display: CardDisplay.HoverCardPreview,
       id: id,
       source: HOVER_CARD_SOURCE
-    }, jsx(HoverCardContent, hoverCardContentProps));
+    }, /*#__PURE__*/React.createElement(HoverCardContent, hoverCardContentProps));
   }, [initShowCard, initHideCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url, id]);
   var trigger = useCallback(function (triggerProps) {
-    return jsx("span", {
+    return /*#__PURE__*/React.createElement("span", {
       ref: parentSpan
-    }, jsx("span", _extends({}, triggerProps, {
+    }, /*#__PURE__*/React.createElement("span", _extends({}, triggerProps, {
       onMouseOver: initShowCard,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
@@ -220,7 +218,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       "data-testid": "hover-card-trigger-wrapper"
     }), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return jsx(Popup, {
+  return /*#__PURE__*/React.createElement(Popup, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,

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

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

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

@@ -1,6 +1,4 @@
 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';
@@ -15,35 +13,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 && jsx(ActionGroup, {
+  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, {
     items: actions,
     visibleButtonsNum: 2
   });
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: loadingViewContainer,
     "data-testid": testId
-  }, jsx("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     css: skeletonContainer
-  }, jsx(CustomBlock, _extends({}, titleBlockProps, {
+  }, /*#__PURE__*/React.createElement(CustomBlock, _extends({}, titleBlockProps, {
     overrideCss: titleBlockStyles,
     testId: "".concat(testId, "-title-block")
-  }), jsx(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, {
     render: function render() {
-      return jsx(LoadingSkeleton, null);
+      return /*#__PURE__*/React.createElement(LoadingSkeleton, null);
     },
     size: size
-  }), jsx("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     css: getTitleStyles(lineHeightRem),
     "data-testid": "".concat(testId, "-title")
-  }, jsx(LoadingSkeleton, {
+  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
     height: lineHeightRem
-  })), actionGroup), jsx(LoadingSkeleton, {
+  })), actionGroup), /*#__PURE__*/React.createElement(LoadingSkeleton, {
     width: skeletonWidth,
     height: lineHeightRem
-  }), jsx(LoadingSkeleton, {
+  }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
     width: skeletonWidth,
     height: lineHeightRem * 3
-  }), jsx(LoadingSkeleton, {
+  }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
     width: skeletonWidth,
     height: lineHeightRem
   })));

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

@@ -11,6 +11,7 @@ import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group
 import { LinkIcon } from '../../../../FlexibleCard/components/elements';
 import { ActionName, CardDisplay } from '../../../../../constants';
 import { useSmartCardActions } from '../../../../../state/actions';
+import { hasAuthScopeOverrides } from '../../../../../state/helpers';
 var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
   var _cardState$details, _extractProvider;
   var analytics = _ref.analytics,
@@ -24,6 +25,7 @@ var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
   var cardState = flexibleCardProps.cardState;
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
+  var isProductIntegrationSupported = hasAuthScopeOverrides(cardState.details);
   var _useSmartCardActions = useSmartCardActions(id, url, analytics),
     authorize = _useSmartCardActions.authorize;
   var handleAuthorize = useCallback(function () {
@@ -59,6 +61,7 @@ var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
     testId: "".concat(testId, "-content")
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
     providerName: providerName,
+    isProductIntegrationSupported: isProductIntegrationSupported,
     analytics: analytics
   }))), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: connectButtonStyles,