@atlaskit/smart-card 26.42.9 → 26.42.11

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

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

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

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Tooltip from '@atlaskit/tooltip';
 import DropdownMenu from '@atlaskit/dropdown-menu';
@@ -30,7 +29,7 @@ const styles = css`
     }
   }
 `;
-const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => jsx(ActionGroupItem, {
+const renderActionItems = (items = [], size = SmartLinkSize.Medium, appearance, asDropDownItems, onActionItemClick) => items.map((item, idx) => /*#__PURE__*/React.createElement(ActionGroupItem, {
   item: item,
   key: idx,
   size: size,
@@ -79,22 +78,22 @@ const ActionGroup = ({
     const actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
     if (actionItems.length > 0) {
       const spacing = sizeToButtonSpacing[size];
-      const moreIcon = jsx(MoreIcon, {
+      const moreIcon = /*#__PURE__*/React.createElement(MoreIcon, {
         label: "more"
       });
-      const formatMessage = jsx(FormattedMessage, messages.more_actions);
-      return jsx(DropdownMenu, {
+      const formatMessage = /*#__PURE__*/React.createElement(FormattedMessage, messages.more_actions);
+      return /*#__PURE__*/React.createElement(DropdownMenu, {
         isOpen: isOpen,
         onOpenChange: onOpenChange,
         trigger: ({
           triggerRef,
           ...props
-        }) => jsx(Tooltip, {
+        }) => /*#__PURE__*/React.createElement(Tooltip, {
           content: formatMessage,
           hideTooltipOnClick: true,
           testId: "action-group-more-button-tooltip",
           tag: "span"
-        }, jsx(Button, _extends({}, props, {
+        }, /*#__PURE__*/React.createElement(Button, _extends({}, props, {
           spacing: spacing,
           testId: "action-group-more-button",
           iconBefore: moreIcon,
@@ -106,10 +105,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 ? jsx("div", {
+  return renderableActionItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
     css: styles,
     className: "actions-button-group",
     "data-action-open": isOpen
-  }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
 };
 export default ActionGroup;

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React, { useEffect } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
 const getBlockStyles = (direction, size) => css`
@@ -43,7 +42,7 @@ const Block = ({
   useEffect(() => {
     onRender && onRender();
   }, [onRender]);
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("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,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 import { getMaxLineHeight, getTruncateStyles } from '../../utils';
@@ -90,7 +89,7 @@ const ElementGroup = ({
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent,
   position = SmartLinkPosition.Center
-}) => jsx("div", {
+}) => /*#__PURE__*/React.createElement("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,7 +1,5 @@
 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';
 
@@ -17,7 +15,7 @@ const PreviewBlock = ({
   overrideUrl,
   ...blockProps
 }) => {
-  return jsx(PreviewBlockResolvedView, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(PreviewBlockResolvedView, _extends({}, blockProps, {
     testId: testId,
     overrideUrl: overrideUrl
   }));

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
 import React, { useCallback, useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { MediaPlacement } from '../../../../../../constants';
 import Block from '../../block';
 import { Preview } from '../../../elements';
@@ -89,10 +88,10 @@ const PreviewBlockResolvedView = ({
       onError();
     }
   }, [onError]);
-  return jsx(Block, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     overrideCss: styles,
     testId: `${testId}-resolved-view`
-  }), jsx(Preview, {
+  }), /*#__PURE__*/React.createElement(Preview, {
     onError: handleOnError,
     onLoad: handleOnLoad,
     overrideUrl: overrideUrl

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

@@ -1,3 +1,5 @@
+/* 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,3 +1,5 @@
+/* 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,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
@@ -56,20 +55,20 @@ const TitleBlockErroredView = ({
     size = SmartLinkSize.Medium
   } = blockProps;
   const hasAction = onClick !== undefined;
-  return jsx(Block, _extends({}, blockProps, {
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-errored-view`
-  }), !hideIcon && jsx(LinkIcon, {
+  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
     position: position
-  }), title, descriptor && jsx(ElementGroup, {
+  }), title, descriptor && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
-  }, jsx("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": `${testId}-errored-view-message`,
     tabIndex: hasAction ? 0 : -1
-  }, jsx(FormattedMessage, _extends({}, descriptor, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, descriptor, {
     values: values
   })))), actionGroup);
 };

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React, { useContext } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
@@ -150,7 +149,7 @@ const getLayeredLink = (testId, context, children, onClick) => {
     anchorTarget: target,
     text
   } = getTitleBlockProps(children) || {};
-  return jsx(LayeredLink, {
+  return /*#__PURE__*/React.createElement(LayeredLink, {
     onClick: onClick,
     target: target,
     testId: testId,
@@ -190,13 +189,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 = jsx("div", {
+  const container = /*#__PURE__*/React.createElement("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 jsx(HoverCardControl, {
+    return /*#__PURE__*/React.createElement(HoverCardControl, {
       hideHoverCardPreviewButton: hideHoverCardPreviewButton,
       isHoverPreview: canShowHoverPreview,
       isAuthTooltip: canShowAuthTooltip,

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

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

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

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import React from 'react';
 import AKBadge from '@atlaskit/badge';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 const badgeStyles = css`
   align-items: center;
   display: inline-flex;
@@ -22,12 +21,12 @@ const AtlaskitBadge = ({
   if (!value) {
     return null;
   }
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-atlaskit-badge": true,
     "data-testid": testId
-  }, jsx(AKBadge, null, value));
+  }, /*#__PURE__*/React.createElement(AKBadge, null, value));
 };
 export default AtlaskitBadge;

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React, { useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 import { messages } from '../../../../../messages';
@@ -94,13 +93,13 @@ const AvatarGroup = ({
   if (!data.length) {
     return null;
   }
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     css: [getStyles(size), overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
-  }, jsx(AtlaskitAvatarGroup, {
+  }, /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { tokens } from '../../../../../utils/token';
 import { getFormattedMessage, getIconSizeStyles } from '../../utils';
 import { IconType } from '../../../../../constants';
@@ -56,7 +55,7 @@ const getFormattedMessageFromIcon = icon => {
 };
 const renderAtlaskitIcon = (icon, testId) => {
   if (icon) {
-    return jsx(AtlaskitIcon, {
+    return /*#__PURE__*/React.createElement(AtlaskitIcon, {
       icon: icon,
       label: icon,
       testId: `${testId}-icon`
@@ -65,7 +64,7 @@ const renderAtlaskitIcon = (icon, testId) => {
 };
 const renderImageIcon = (url, testId) => {
   if (url) {
-    return jsx(ImageIcon, {
+    return /*#__PURE__*/React.createElement(ImageIcon, {
       testId: testId,
       url: url
     });
@@ -98,15 +97,15 @@ const Badge = ({
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
-  }, jsx("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     css: iconStyles
-  }, badgeIcon), jsx("span", {
+  }, badgeIcon), /*#__PURE__*/React.createElement("span", {
     css: labelStyles,
     "data-testid": `${testId}-label`
   }, formattedMessageOrLabel));

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

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

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

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

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

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

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

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

@@ -1,13 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @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';
@@ -17,6 +13,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';
 const validateItems = (items = [], text) => {
   return items.filter(item => item.text !== text);
 };
@@ -84,7 +81,7 @@ const LozengeAction = ({
       setErrorMessage(undefined);
     }
   }, [action.read, analytics, invoke, isLoaded, text]);
-  const trigger = useCallback(props => jsx(LozengeActionTrigger, _extends({}, props, {
+  const trigger = useCallback(props => /*#__PURE__*/React.createElement(LozengeActionTrigger, _extends({}, props, {
     appearance: selected.appearance,
     isOpen: isOpen,
     showFeatureDiscovery: action === null || action === void 0 ? void 0 : action.showFeatureDiscovery,
@@ -127,7 +124,7 @@ const LozengeAction = ({
   }, [action === null || action === void 0 ? void 0 : action.update, analytics, invoke, linkId, reload, url]);
   const dropdownItemGroup = useMemo(() => {
     if (errorMessage) {
-      return jsx(LozengeActionError, {
+      return /*#__PURE__*/React.createElement(LozengeActionError, {
         errorMessage: errorMessage,
         testId: testId,
         url: url,
@@ -135,17 +132,14 @@ const LozengeAction = ({
       });
     }
     if (items && items.length > 0) {
-      return jsx("span", {
-        css: dropdownItemGroupStyles,
-        "data-testid": `${testId}-item-group`
-      }, jsx(DropdownItemGroup, null, items.map((item, idx) => jsx(LozengeActionItem, _extends({}, item, {
-        key: idx,
-        onClick: handleItemClick,
-        testId: `${testId}-item-${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,