@atlaskit/smart-card 26.42.11 → 26.43.0

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { useModal } from '@atlaskit/modal-dialog';
@@ -24,9 +26,9 @@ var LinkInfo = function LinkInfo(_ref) {
     onClose = _useModal.onClose;
   var downloadButton = useMemo(function () {
     if (onDownloadButtonClick) {
-      return /*#__PURE__*/React.createElement(LinkInfoButton, {
-        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
-        icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+      return jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, messages.download),
+        icon: jsx(DownloadIcon, {
           label: messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
@@ -36,10 +38,10 @@ var LinkInfo = function LinkInfo(_ref) {
   }, [onDownloadButtonClick, testId]);
   var urlButton = useMemo(function () {
     if (onViewButtonClick) {
-      var content = providerName ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.viewIn), " ", providerName) : /*#__PURE__*/React.createElement(FormattedMessage, messages.viewOriginal);
-      return /*#__PURE__*/React.createElement(LinkInfoButton, {
+      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
+      return jsx(LinkInfoButton, {
         content: content,
-        icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+        icon: jsx(ShortcutIcon, {
           label: messages.viewOriginal.defaultMessage
         }),
         onClick: onViewButtonClick,
@@ -50,36 +52,36 @@ var LinkInfo = function LinkInfo(_ref) {
   var sizeButton = useMemo(function () {
     var isFullScreen = size === MAX_MODAL_SIZE;
     var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
-    var icon = isFullScreen ? /*#__PURE__*/React.createElement(VidFullScreenOffIcon, {
+    var icon = isFullScreen ? jsx(VidFullScreenOffIcon, {
       label: message.defaultMessage
-    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+    }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       className: "smart-link-resize-button"
-    }, /*#__PURE__*/React.createElement(LinkInfoButton, {
-      content: /*#__PURE__*/React.createElement(FormattedMessage, message),
+    }, jsx(LinkInfoButton, {
+      content: jsx(FormattedMessage, message),
       icon: icon,
       onClick: onResizeButtonClick,
       testId: "".concat(testId, "-resize")
     }));
   }, [onResizeButtonClick, size, testId]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: containerStyles
-  }, icon && /*#__PURE__*/React.createElement("div", {
+  }, icon && jsx("div", {
     css: iconCss,
     "data-testid": "".concat(testId, "-icon")
-  }, /*#__PURE__*/React.createElement(Icon, icon)), /*#__PURE__*/React.createElement("div", {
+  }, jsx(Icon, icon)), jsx("div", {
     css: titleCss
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, jsx("h3", {
     "data-testid": "".concat(testId, "-title")
-  }, title), /*#__PURE__*/React.createElement("span", {
+  }, title), jsx("span", {
     tabIndex: 0
-  })), /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
     css: actionCss
-  }, downloadButton, urlButton, sizeButton, /*#__PURE__*/React.createElement(LinkInfoButton, {
-    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
-    icon: /*#__PURE__*/React.createElement(CrossIcon, {
+  }, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
+    content: jsx(FormattedMessage, messages.preview_close),
+    icon: jsx(CrossIcon, {
       label: messages.preview_close.defaultMessage
     }),
     onClick: onClose,

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

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/** @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';
@@ -39,14 +40,14 @@ var ActionButton = function ActionButton(_ref) {
       handler();
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [getButtonStyle(size, iconOnly), overrideCss],
     "data-testid": "".concat(testId, "-button-wrapper")
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: "".concat(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,
@@ -55,7 +56,7 @@ var ActionButton = function ActionButton(_ref) {
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
     testId: testId
-  }, content) : /*#__PURE__*/React.createElement(Button, {
+  }, content) : jsx(Button, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,

package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/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 { SmartLinkSize } from '../../../../../../constants';
 import { getIconSizeStyles } from '../../../utils';
 var getIconWidth = function getIconWidth(size) {
@@ -23,7 +24,7 @@ var ActionIcon = function ActionIcon(_ref) {
     testId = _ref.testId,
     icon = _ref.icon,
     isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: getIconStyles(size, isDisabled),
     "data-testid": "".concat(testId, "-icon")
   }, icon);

package/dist/esm/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';
@@ -33,7 +35,7 @@ var Action = function Action(_ref) {
   if (!onClick) {
     return null;
   }
-  var actionIcon = icon && /*#__PURE__*/React.createElement(ActionIcon, {
+  var actionIcon = icon && jsx(ActionIcon, {
     isDisabled: isDisabled,
     icon: icon,
     size: size,
@@ -42,7 +44,7 @@ var Action = function Action(_ref) {
   var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
   var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
   if (asDropDownItem) {
-    return /*#__PURE__*/React.createElement(ActionDropdownItem, {
+    return jsx(ActionDropdownItem, {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
@@ -51,7 +53,7 @@ var Action = function Action(_ref) {
       testId: testId
     });
   } else {
-    return /*#__PURE__*/React.createElement(ActionButton, {
+    return jsx(ActionButton, {
       appearance: appearance,
       content: content,
       iconAfter: iconAfter,

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

@@ -4,6 +4,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["name", "hideContent", "hideIcon", "onClick", "isDisabled"];
 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 React, { useCallback } from 'react';
 import * as Actions from '../../../actions';
 import { isJSXElementNull } from '../../utils';
@@ -38,7 +40,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
   if (hideIcon) {
     actionProps.icon = undefined;
   }
-  var action = /*#__PURE__*/React.createElement(Action, _extends({
+  var action = jsx(Action, _extends({
     url: "",
     asDropDownItem: asDropDownItems,
     size: size,

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

@@ -4,9 +4,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["triggerRef"];
 var _templateObject;
+/** @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';
@@ -26,7 +27,7 @@ var renderActionItems = function renderActionItems() {
   var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
   var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
   return items.map(function (item, idx) {
-    return /*#__PURE__*/React.createElement(ActionGroupItem, {
+    return jsx(ActionGroupItem, {
       item: item,
       key: idx,
       size: size,
@@ -84,22 +85,22 @@ var ActionGroup = function ActionGroup(_ref) {
     var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
     if (actionItems.length > 0) {
       var spacing = sizeToButtonSpacing[size];
-      var moreIcon = /*#__PURE__*/React.createElement(MoreIcon, {
+      var moreIcon = jsx(MoreIcon, {
         label: "more"
       });
-      var formatMessage = /*#__PURE__*/React.createElement(FormattedMessage, messages.more_actions);
-      return /*#__PURE__*/React.createElement(DropdownMenu, {
+      var formatMessage = jsx(FormattedMessage, messages.more_actions);
+      return jsx(DropdownMenu, {
         isOpen: isOpen,
         onOpenChange: onOpenChange,
         trigger: function trigger(_ref2) {
           var triggerRef = _ref2.triggerRef,
             props = _objectWithoutProperties(_ref2, _excluded);
-          return /*#__PURE__*/React.createElement(Tooltip, {
+          return 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,
@@ -112,10 +113,10 @@ var ActionGroup = function ActionGroup(_ref) {
     }
     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/esm/view/FlexibleCard/components/blocks/block/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
 import React, { useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 import { messages } from '../../../../../messages';
@@ -86,13 +87,13 @@ var AvatarGroup = function AvatarGroup(_ref) {
   if (!data.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: [getStyles(size), overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
-  }, /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+  }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",

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

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