@atlaskit/smart-card 26.42.11 → 26.43.0

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

@@ -6,20 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _loadingSkeleton = _interopRequireDefault(require("../loading-skeleton"));
+/** @jsx jsx */
+
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
     testId = _ref.testId,
     url = _ref.url,
     onError = _ref.onError,
     onLoad = _ref.onLoad;
-  return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+  return (0, _react2.jsx)(_reactRenderImage.default, {
     src: url,
-    loading: /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, {
+    loading: (0, _react2.jsx)(_loadingSkeleton.default, {
       testId: "".concat(testId, "-loading")
     }),
-    loaded: /*#__PURE__*/_react.default.createElement("img", {
+    loaded: (0, _react2.jsx)("img", {
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),

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

@@ -9,13 +9,14 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
     width = _ref.width,
     height = _ref.height;
   var animationNameStyles = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
   var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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.default.createElement("span", {
+  return (0, _react2.jsx)("span", {
     css: styles,
     "data-testid": testId
   });

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

@@ -18,6 +18,7 @@ var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
 var _utils = require("../../../../state/flexible-ui-context/utils");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  margin: ", ";\n"])), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-space-025, 2px)");
@@ -118,7 +119,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
   var _ref2 = getTitleBlockProps(children) || {},
     target = _ref2.anchorTarget,
     text = _ref2.text;
-  return /*#__PURE__*/_react.default.createElement(_layeredLink.default, {
+  return (0, _react2.jsx)(_layeredLink.default, {
     onClick: onClick,
     target: target,
     testId: testId,
@@ -168,13 +169,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.default.createElement("div", {
+  var container = (0, _react2.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.default.createElement(_hoverCardControl.default, {
+    return (0, _react2.jsx)(_hoverCardControl.default, {
       hideHoverCardPreviewButton: hideHoverCardPreviewButton,
       isHoverPreview: canShowHoverPreview,
       isAuthTooltip: canShowAuthTooltip,

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

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var _templateObject;
+/** @jsx jsx */
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
 
 /**
@@ -24,7 +25,7 @@ var LayeredLink = function LayeredLink(_ref) {
     text = _ref.text,
     url = _ref.url;
   var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
-  return /*#__PURE__*/_react.default.createElement("a", {
+  return (0, _react2.jsx)("a", {
     className: "layered-link",
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),

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

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _react2 = require("@emotion/react");
 var _templateObject;
+/** @jsx jsx */
 var badgeStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n"])));
 
 /**
@@ -27,12 +28,12 @@ var AtlaskitBadge = function AtlaskitBadge(_ref) {
   if (!value) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.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.default.createElement(_badge.default, null, value));
+  }, (0, _react2.jsx)(_badge.default, null, value));
 };
 var _default = exports.default = AtlaskitBadge;

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

@@ -16,6 +16,7 @@ var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
 var _utils = require("../../utils");
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -95,13 +96,13 @@ var AvatarGroup = function AvatarGroup(_ref) {
   if (!data.length) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.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.default.createElement(_avatarGroup.default, {
+  }, (0, _react2.jsx)(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",

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

@@ -16,6 +16,7 @@ var _messages = require("../../../../../messages");
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
 var _templateObject, _templateObject2, _templateObject3, _messageMapper;
+/** @jsx jsx */
 var badgeStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
 var iconStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), _token.tokens.badgeIcon, (0, _utils.getIconSizeStyles)('1rem'));
 var labelStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), _token.tokens.badgeText);
@@ -32,7 +33,7 @@ var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   if (icon) {
-    return /*#__PURE__*/_react.default.createElement(_atlaskitIcon.default, {
+    return (0, _react2.jsx)(_atlaskitIcon.default, {
       icon: icon,
       label: icon,
       testId: "".concat(testId, "-icon")
@@ -41,7 +42,7 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
 };
 var renderImageIcon = function renderImageIcon(url, testId) {
   if (url) {
-    return /*#__PURE__*/_react.default.createElement(_imageIcon.default, {
+    return (0, _react2.jsx)(_imageIcon.default, {
       testId: testId,
       url: url
     });
@@ -74,15 +75,15 @@ var Badge = function Badge(_ref) {
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.jsx)("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _react2.jsx)("span", {
     css: iconStyles
-  }, badgeIcon), /*#__PURE__*/_react.default.createElement("span", {
+  }, badgeIcon), (0, _react2.jsx)("span", {
     css: labelStyles,
     "data-testid": "".concat(testId, "-label")
   }, formattedMessageOrLabel));

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

@@ -15,6 +15,7 @@ var _token = require("../../../../../utils/token");
 var _intlUtils = require("@formatjs/intl-utils");
 var _messages = require("../../../../../messages");
 var _templateObject;
+/** @jsx jsx */
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
 var typeToDescriptorMap = {
   created: {
@@ -72,13 +73,13 @@ var DateTime = function DateTime(_ref) {
       numeric: 'auto'
     });
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.jsx)("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) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
+  }, text ? "".concat(text, " ").concat(context) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

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

@@ -15,6 +15,7 @@ var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon")
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 var _utils = require("../../utils");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var getPositionStyles = function getPositionStyles(position) {
@@ -34,7 +35,7 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   if (icon) {
-    return /*#__PURE__*/_react.default.createElement(_atlaskitIcon.default, {
+    return (0, _react2.jsx)(_atlaskitIcon.default, {
       icon: icon,
       label: label,
       testId: "".concat(testId, "-icon")
@@ -42,14 +43,14 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
-  return /*#__PURE__*/_react.default.createElement(_link.default, {
+  return (0, _react2.jsx)(_link.default, {
     label: label,
     testId: "".concat(testId, "-default")
   });
 };
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
   if (url) {
-    return /*#__PURE__*/_react.default.createElement(_imageIcon.default, {
+    return (0, _react2.jsx)(_imageIcon.default, {
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
@@ -84,7 +85,7 @@ var Icon = function Icon(_ref) {
   var width = (0, _utils.getIconWidth)(size);
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -16,6 +16,7 @@ var _utils = require("../../utils");
 var _token = require("../../../../../utils/token");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var DEFAULT_MAX_LINES = 2;
@@ -50,7 +51,7 @@ var getMaxLines = function getMaxLines(maxLines) {
   return maxLines;
 };
 var withTooltip = function withTooltip(trigger, content, testId) {
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: content,
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
@@ -84,7 +85,7 @@ var Link = function Link(_ref) {
   var hasSpace = (0, _react.useMemo)(function () {
     return text ? (0, _utils.hasWhiteSpace)(text) : false;
   }, [text]);
-  var anchor = /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
+  var anchor = (0, _react2.jsx)("a", (0, _extends2.default)({
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element": name,
     "data-smart-element-link": true,
@@ -97,7 +98,7 @@ var Link = function Link(_ref) {
   }, target !== '_self' && {
     target: target
   }), text);
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.jsx)("span", {
     css: containerStyles
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };

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

@@ -12,6 +12,7 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _lozengeAction = _interopRequireDefault(require("./lozenge-action"));
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _templateObject;
+/** @jsx jsx */
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
 
 /**
@@ -33,17 +34,17 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
-  var lozenge = action ? /*#__PURE__*/_react.default.createElement(_lozengeAction.default, {
+  var lozenge = action ? (0, _react2.jsx)(_lozengeAction.default, {
     action: action,
     appearance: appearance,
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
-  }) : /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+  }) : (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
   }, text);
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.jsx)("span", {
     css: [styles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/feature-discovery/index.js

@@ -4,9 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _storageClient = require("@atlaskit/frontend-utilities/storage-client");
 var _styled = require("./styled");
+/** @jsx jsx */
+
 var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
 var LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-status';
 var LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
@@ -23,14 +26,14 @@ var FeatureDiscovery = function FeatureDiscovery(_ref) {
   var appearance = _ref.appearance,
     children = _ref.children,
     testId = _ref.testId;
-  var renderedTime = (0, _react.useRef)();
-  var storageClient = (0, _react.useMemo)(function () {
+  var renderedTime = (0, _react2.useRef)();
+  var storageClient = (0, _react2.useMemo)(function () {
     return new _storageClient.StorageClient(LOCAL_STORAGE_CLIENT_KEY);
   }, []);
-  var discovered = (0, _react.useMemo)(function () {
+  var discovered = (0, _react2.useMemo)(function () {
     return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
   }, [storageClient]);
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     renderedTime.current = Date.now();
     return function () {
       if (!discovered && renderedTime.current) {
@@ -41,9 +44,9 @@ var FeatureDiscovery = function FeatureDiscovery(_ref) {
       }
     };
   }, [storageClient, discovered]);
-  var component = (0, _react.useMemo)(function () {
+  var component = (0, _react2.useMemo)(function () {
     if (!discovered) {
-      return /*#__PURE__*/React.createElement("span", {
+      return (0, _react.jsx)("span", {
         css: (0, _styled.getPulseStyles)(appearance),
         "data-testid": "".concat(testId, "-discovery")
       }, children);

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

@@ -9,7 +9,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
 var _lozengeActionTrigger = _interopRequireDefault(require("./lozenge-action-trigger"));
 var _lozengeActionError = _interopRequireDefault(require("./lozenge-action-error"));
@@ -24,6 +25,8 @@ var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _analytics = require("../../../../../../utils/analytics/analytics");
 var _lozengeActionAnalytics = require("./lozenge-action-analytics");
 var _lozengeActionItemsGroup = _interopRequireDefault(require("./lozenge-action-items-group"));
+/** @jsx jsx */
+
 var validateItems = function validateItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var text = arguments.length > 1 ? arguments[1] : undefined;
@@ -39,30 +42,30 @@ var LozengeAction = function LozengeAction(_ref) {
     testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
     text = _ref.text,
     zIndex = _ref.zIndex;
-  var _useState = (0, _react.useState)({
+  var _useState = (0, _react2.useState)({
       appearance: appearance,
       text: text
     }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react2.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isLoaded = _useState4[0],
     setIsLoaded = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react2.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     isLoading = _useState6[0],
     setIsLoading = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react2.useState)(false),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isOpen = _useState8[0],
     setIsOpen = _useState8[1];
-  var _useState9 = (0, _react.useState)(),
+  var _useState9 = (0, _react2.useState)(),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     items = _useState10[0],
     setItems = _useState10[1];
-  var _useState11 = (0, _react.useState)(),
+  var _useState11 = (0, _react2.useState)(),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
     errorMessage = _useState12[0],
     setErrorMessage = _useState12[1];
@@ -70,7 +73,7 @@ var LozengeAction = function LozengeAction(_ref) {
   //TODO EDM-6583 Replace usage of useFlexibleUiAnalyticsContext with linking platform analytics context from find team.
   var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
   var invoke = (0, _useInvoke.default)();
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     setSelected({
       text: text,
       appearance: appearance
@@ -80,7 +83,7 @@ var LozengeAction = function LozengeAction(_ref) {
     url = _ref2.url,
     linkId = _ref2.id,
     previewData = _ref2.previewData;
-  var handleOpenChange = (0, _react.useCallback)( /*#__PURE__*/function () {
+  var handleOpenChange = (0, _react2.useCallback)( /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(args) {
       var responseItems, validItems;
       return _regenerator.default.wrap(function _callee$(_context) {
@@ -139,8 +142,8 @@ var LozengeAction = function LozengeAction(_ref) {
       return _ref3.apply(this, arguments);
     };
   }(), [action.read, analytics, invoke, isLoaded, text]);
-  var trigger = (0, _react.useCallback)(function (props) {
-    return /*#__PURE__*/React.createElement(_lozengeActionTrigger.default, (0, _extends2.default)({}, props, {
+  var trigger = (0, _react2.useCallback)(function (props) {
+    return (0, _react.jsx)(_lozengeActionTrigger.default, (0, _extends2.default)({}, props, {
       appearance: selected.appearance,
       isOpen: isOpen,
       showFeatureDiscovery: action === null || action === void 0 ? void 0 : action.showFeatureDiscovery,
@@ -148,7 +151,7 @@ var LozengeAction = function LozengeAction(_ref) {
       text: selected.text
     }));
   }, [selected.appearance, selected.text, isOpen, action === null || action === void 0 ? void 0 : action.showFeatureDiscovery, testId]);
-  var handleItemClick = (0, _react.useCallback)( /*#__PURE__*/function () {
+  var handleItemClick = (0, _react2.useCallback)( /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, text, appearance) {
       var updateAction, request;
       return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -207,9 +210,9 @@ var LozengeAction = function LozengeAction(_ref) {
       return _ref4.apply(this, arguments);
     };
   }(), [action === null || action === void 0 ? void 0 : action.update, analytics, invoke, linkId, reload, url]);
-  var dropdownItemGroup = (0, _react.useMemo)(function () {
+  var dropdownItemGroup = (0, _react2.useMemo)(function () {
     if (errorMessage) {
-      return /*#__PURE__*/React.createElement(_lozengeActionError.default, {
+      return (0, _react.jsx)(_lozengeActionError.default, {
         errorMessage: errorMessage,
         testId: testId,
         url: url,
@@ -217,14 +220,14 @@ var LozengeAction = function LozengeAction(_ref) {
       });
     }
     if (items && items.length > 0) {
-      return /*#__PURE__*/React.createElement(_lozengeActionItemsGroup.default, {
+      return (0, _react.jsx)(_lozengeActionItemsGroup.default, {
         testId: testId,
         items: items,
         onClick: handleItemClick
       });
     }
   }, [errorMessage, handleItemClick, items, previewData, testId, url]);
-  return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
+  return (0, _react.jsx)(_dropdownMenu.default, {
     isLoading: isLoading,
     isOpen: isOpen,
     onOpenChange: handleOpenChange,

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

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
 var _colors = require("@atlaskit/theme/colors");
@@ -17,7 +18,7 @@ var _messages = require("../../../../../../../messages");
 var _flexibleUiContext = require("../../../../../../../state/flexible-ui-context");
 var _useResolve = _interopRequireDefault(require("../../../../../../../state/hooks/use-resolve"));
 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) { (0, _defineProperty2.default)(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; }
+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) { (0, _defineProperty2.default)(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 */
 var MAX_LINE_NUMBER = 8;
 var LozengeActionError = function LozengeActionError(_ref) {
   var errorMessage = _ref.errorMessage,
@@ -29,12 +30,12 @@ var LozengeActionError = function LozengeActionError(_ref) {
   var reload = (0, _useResolve.default)();
   var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)();
   var isPreviewAvailable = previewData && previewData.src !== undefined;
-  var handlePreviewClose = (0, _react.useCallback)(function () {
+  var handlePreviewClose = (0, _react2.useCallback)(function () {
     if (url) {
       reload(url, true);
     }
   }, [reload, url]);
-  var handlePreviewOpen = (0, _react.useCallback)(function () {
+  var handlePreviewOpen = (0, _react2.useCallback)(function () {
     if (isPreviewAvailable) {
       analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
       return (0, _utils.openEmbedModalWithFlexibleUiIcon)(_objectSpread(_objectSpread({}, previewData), {}, {
@@ -43,30 +44,30 @@ var LozengeActionError = function LozengeActionError(_ref) {
       }));
     }
   }, [analytics, handlePreviewClose, isPreviewAvailable, previewData]);
-  var content = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  var content = (0, _react2.useMemo)(function () {
+    return (0, _react.jsx)(_react2.Fragment, null, (0, _react.jsx)("div", {
       css: _styled.contentStyles
-    }, /*#__PURE__*/React.createElement(_error.default, {
+    }, (0, _react.jsx)(_error.default, {
       testId: "".concat(testId, "-icon"),
       size: "medium",
       primaryColor: "var(--ds-icon-danger, ".concat(_colors.R500, ")"),
       secondaryColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
       label: 'error'
-    }), /*#__PURE__*/React.createElement("span", {
+    }), (0, _react.jsx)("span", {
       css: (0, _styled.textStyles)(maxLineNumber),
       "data-testid": "".concat(testId, "-error-message")
-    }, typeof errorMessage === 'string' ? errorMessage : (0, _utils.getFormattedMessage)(errorMessage))), isPreviewAvailable ? /*#__PURE__*/React.createElement("div", {
+    }, typeof errorMessage === 'string' ? errorMessage : (0, _utils.getFormattedMessage)(errorMessage))), isPreviewAvailable ? (0, _react.jsx)("div", {
       css: _styled.linkStyles
-    }, /*#__PURE__*/React.createElement("a", {
+    }, (0, _react.jsx)("a", {
       target: "_blank",
       "data-testid": "".concat(testId, "-open-embed"),
       onClick: handlePreviewOpen
-    }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.messages.open_issue_in_jira))) : null);
+    }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.open_issue_in_jira))) : null);
   }, [errorMessage, handlePreviewOpen, isPreviewAvailable, maxLineNumber, testId]);
-  return /*#__PURE__*/React.createElement("span", {
+  return (0, _react.jsx)("span", {
     css: _styled.dropdownItemGroupStyles,
     "data-testid": "".concat(testId, "-error-item-group")
-  }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
+  }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, (0, _react.jsx)(_dropdownMenu.DropdownItem, {
     testId: "".concat(testId, "-error")
   }, content)));
 };

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

@@ -6,21 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
 var _lozengeActionItem = _interopRequireDefault(require("../lozenge-action-item"));
 var _styled = require("../styled");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
+/** @jsx jsx */
+
 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", {
+    (0, _react.jsx)("span", {
       css: _styled.dropdownItemGroupStyles,
       "data-testid": "".concat(testId, "-item-group")
-    }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, null, items.map(function (item, idx) {
-      return /*#__PURE__*/React.createElement(_lozengeActionItem.default, (0, _extends2.default)({}, item, {
+    }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, items.map(function (item, idx) {
+      return (0, _react.jsx)(_lozengeActionItem.default, (0, _extends2.default)({}, item, {
         key: idx,
         onClick: onClick,
         testId: "".concat(testId, "-item-").concat(idx)