@atlaskit/smart-card 22.2.1 → 22.3.0

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -32,23 +32,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n"])));
+var containerStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n"])));
 
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
-      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
 
     case _constants.SmartLinkTheme.Link:
     default:
-      return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blueLink, _token.tokens.blueLinkPressed, _token.tokens.blueLink);
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blueLink, _token.tokens.blueLinkPressed, _token.tokens.blueLink);
   }
 };
 
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {
@@ -64,7 +64,7 @@ var getMaxLines = function getMaxLines(maxLines) {
 };
 
 var withTooltip = function withTooltip(trigger, content, testId) {
-  return (0, _core.jsx)(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: content,
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
@@ -97,7 +97,7 @@ var Link = function Link(_ref) {
   var hasSpace = (0, _react.useMemo)(function () {
     return text ? (0, _utils.hasWhiteSpace)(text) : false;
   }, [text]);
-  var anchor = (0, _core.jsx)("a", {
+  var anchor = (0, _react2.jsx)("a", {
     css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element": name,
     "data-smart-element-link": true,
@@ -106,7 +106,7 @@ var Link = function Link(_ref) {
     href: url,
     target: target || '_blank'
   }, text);
-  return (0, _core.jsx)("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

@@ -11,13 +11,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
+var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
 /**
  * A base element that displays a Lozenge.
  * @internal
@@ -38,13 +38,13 @@ var Lozenge = function Lozenge(_ref) {
     return null;
   }
 
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     css: [styles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId
-  }, (0, _core.jsx)(_lozenge.default, {
+  }, (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
     testId: "".concat(testId, "-lozenge")
   }, text));

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 
@@ -27,7 +27,7 @@ var _templateObject;
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img,\n  > span {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img,\n  > span {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 /**
  * A base element that displays a Media.
  * @internal
@@ -48,12 +48,12 @@ var Media = function Media(_ref) {
     return null;
   }
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
     "data-smart-element-media": true,
     "data-testid": testId
-  }, (0, _core.jsx)(_imageIcon.default, {
+  }, (0, _react2.jsx)(_imageIcon.default, {
     testId: "".concat(testId, "-image"),
     url: url,
     onError: onError,

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _utils = require("../../utils");
 
@@ -20,7 +20,7 @@ var _token = require("../../../../../utils/token");
 var _templateObject;
 
 var getStyles = function getStyles(maxLines) {
-  return (0, _core.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)(maxLines));
+  return (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)(maxLines));
 };
 /**
  * A base element that displays some Text.
@@ -44,7 +44,7 @@ var Text = function Text(_ref) {
     return null;
   }
 
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
     "data-smart-element": name,

package/dist/cjs/view/FlexibleCard/components/elements/utils.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../constants");
 
@@ -108,7 +108,7 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _text.default,
   props: {
     maxLines: SNIPPET_DEFAULT_MAX_LINES,
-    overrideCss: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n      "])), _token.tokens.snippet)
+    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n      "])), _token.tokens.snippet)
   }
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SourceBranch, {
   component: _text.default

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -39,12 +39,12 @@ var getFormattedMessage = function getFormattedMessage(message) {
 exports.getFormattedMessage = getFormattedMessage;
 
 var getIconDimensionStyles = function getIconDimensionStyles(value) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n"])), value, value, value, value, value, value);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n"])), value, value, value, value, value, value);
 };
 
 var getIconSizeStyles = function getIconSizeStyles(width) {
   var sizeStyles = getIconDimensionStyles(width);
-  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
 };
 
 exports.getIconSizeStyles = getIconSizeStyles;
@@ -86,15 +86,15 @@ exports.getLinkLineHeight = getLinkLineHeight;
 var getLinkSizeStyles = function getLinkSizeStyles(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
-      return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 1.25rem;\n        font-weight: 400;\n        letter-spacing: -0.008em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 1.25rem;\n        font-weight: 400;\n        letter-spacing: -0.008em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
 
     case _constants.SmartLinkSize.Large:
     case _constants.SmartLinkSize.Medium:
-      return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.875rem;\n        font-weight: 400;\n        letter-spacing: -0.003em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.875rem;\n        font-weight: 400;\n        letter-spacing: -0.003em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
 
     case _constants.SmartLinkSize.Small:
     default:
-      return (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 400;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+      return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 400;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
   }
 };
 
@@ -134,7 +134,7 @@ exports.getMaxLines = getMaxLines;
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
-  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: calc(", " * ", ");\n    }\n  "])), wordBreak, maxLines, maxLines, lineHeight);
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: calc(", " * ", ");\n    }\n  "])), wordBreak, maxLines, maxLines, lineHeight);
 };
 
 exports.getTruncateStyles = getTruncateStyles;

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

@@ -15,9 +15,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _useSmartLinkActions = require("../../../state/hooks-external/useSmartLinkActions");
 
@@ -46,22 +46,22 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       analytics = _ref.analytics;
   var delay = 300;
 
-  var _React$useState = _react.default.useState(false),
+  var _React$useState = _react2.default.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  var fadeOutTimeoutId = (0, _react.useRef)();
-  var fadeInTimeoutId = (0, _react.useRef)();
-  var cardOpenTime = (0, _react.useRef)();
-  var mousePos = (0, _react.useRef)();
-  var popupOffset = (0, _react.useRef)();
-  var parentSpan = (0, _react.useRef)(null);
+  var fadeOutTimeoutId = (0, _react2.useRef)();
+  var fadeInTimeoutId = (0, _react2.useRef)();
+  var cardOpenTime = (0, _react2.useRef)();
+  var mousePos = (0, _react2.useRef)();
+  var popupOffset = (0, _react2.useRef)();
+  var parentSpan = (0, _react2.useRef)(null);
   var renderers = (0, _renderers.useSmartLinkRenderers)();
   var linkState = (0, _store.useSmartCardState)(url);
   var hoverDisplay = 'card';
   var invokeMethod = 'mouse_hover';
-  var setMousePosition = (0, _react.useCallback)(function (event) {
+  var setMousePosition = (0, _react2.useCallback)(function (event) {
     if (isOpen) {
       return;
     }
@@ -71,7 +71,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       y: event.clientY
     };
   }, [isOpen]);
-  var hideCard = (0, _react.useCallback)(function () {
+  var hideCard = (0, _react2.useCallback)(function () {
     //Check its previously open to avoid firing events when moving between the child and hover card components
     if (isOpen === true && cardOpenTime.current) {
       var hoverTime = Date.now() - cardOpenTime.current;
@@ -84,7 +84,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
 
     setIsOpen(false);
   }, [analytics.ui, isOpen]);
-  var initHideCard = (0, _react.useCallback)(function () {
+  var initHideCard = (0, _react2.useCallback)(function () {
     if (fadeInTimeoutId.current) {
       clearTimeout(fadeInTimeoutId.current);
     }
@@ -93,7 +93,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       return hideCard();
     }, delay);
   }, [hideCard]);
-  var initShowCard = (0, _react.useCallback)(function (event) {
+  var initShowCard = (0, _react2.useCallback)(function (event) {
     if (fadeOutTimeoutId.current) {
       clearTimeout(fadeOutTimeoutId.current);
     } //Set mouse position in the case it's not already set by onMouseMove, as in the case of scrolling
@@ -128,16 +128,16 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     analyticsHandler: analyticsHandler,
     origin: 'smartLinkPreviewHoverCard'
   });
-  var onActionClick = (0, _react.useCallback)(function (actionId) {
+  var onActionClick = (0, _react2.useCallback)(function (actionId) {
     if (actionId === 'preview-content') {
       hideCard();
     }
   }, [hideCard]); // Stop hover preview content to propagate event to parent.
 
-  var onClick = (0, _react.useCallback)(function (e) {
+  var onClick = (0, _react2.useCallback)(function (e) {
     return e.stopPropagation();
   }, []);
-  return (0, _core.jsx)(_popup.default, {
+  return (0, _react.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen,
     onClose: hideCard,
@@ -146,14 +146,14 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     autoFocus: false,
     content: function content(_ref2) {
       var update = _ref2.update;
-      return (0, _core.jsx)("div", {
+      return (0, _react.jsx)("div", {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
         onClick: onClick,
         css: _styled.HoverCardContainer // class name for trello to exclude click events
         ,
         className: hoverCardClassName
-      }, (0, _core.jsx)(_HoverCardContent.default, {
+      }, (0, _react.jsx)(_HoverCardContent.default, {
         analytics: analytics,
         cardActions: linkActions,
         cardState: linkState,
@@ -164,9 +164,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       }));
     },
     trigger: function trigger(triggerProps) {
-      return (0, _core.jsx)("span", {
+      return (0, _react.jsx)("span", {
         ref: parentSpan
-      }, (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+      }, (0, _react.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,
         onMouseLeave: initHideCard,
         onMouseMove: setMousePosition

package/dist/cjs/view/HoverCard/components/HoverCardLoadingView.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _loadingSkeleton = _interopRequireDefault(require("../../FlexibleCard/components/common/loading-skeleton"));
 
@@ -25,18 +25,18 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
       titleBlockProps = _ref.titleBlockProps;
   var lineHeightRem = 1.25;
   var skeletonWidth = _styled.CARD_WIDTH_REM - 2;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: _styled.loadingViewContainer,
     "data-testid": "hover-card-loading-view"
-  }, (0, _core.jsx)(_FlexibleCard.default, flexibleCardProps, (0, _core.jsx)(_blocks.TitleBlock, titleBlockProps)), (0, _core.jsx)("div", {
+  }, (0, _react.jsx)(_FlexibleCard.default, flexibleCardProps, (0, _react.jsx)(_blocks.TitleBlock, titleBlockProps)), (0, _react.jsx)("div", {
     css: _styled.skeletonContainer
-  }, (0, _core.jsx)("span", null), (0, _core.jsx)(_loadingSkeleton.default, {
+  }, (0, _react.jsx)("span", null), (0, _react.jsx)(_loadingSkeleton.default, {
     width: skeletonWidth,
     height: lineHeightRem
-  }), (0, _core.jsx)(_loadingSkeleton.default, {
+  }), (0, _react.jsx)(_loadingSkeleton.default, {
     width: skeletonWidth,
     height: lineHeightRem * 3
-  }), (0, _core.jsx)(_loadingSkeleton.default, {
+  }), (0, _react.jsx)(_loadingSkeleton.default, {
     width: skeletonWidth,
     height: lineHeightRem
   })));

package/dist/cjs/view/HoverCard/components/SnippetOrPreview.js

@@ -15,7 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
 
@@ -49,7 +49,7 @@ var SnippetOrPreview = function SnippetOrPreview(_ref) {
   var onPreviewRender = (0, _react.useCallback)(function () {
     var _previewBlockRef$curr;
 
-    previewBlockRef.current && setPreviewCss((0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+    previewBlockRef.current && setPreviewCss((0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), (_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
   }, []); // On error set Preview to Snippet height with transition
 
   var onPreviewError = (0, _react.useCallback)(function () {

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

@@ -11,9 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = require("react");
+var _react2 = require("react");
 
 var _reactErrorBoundary = require("react-error-boundary");
 
@@ -31,11 +31,11 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
       id = props.id,
       children = props.children,
       createAnalyticsEvent = props.createAnalyticsEvent;
-  var analyticsHandler = (0, _react.useCallback)(function (analyticsPayload) {
+  var analyticsHandler = (0, _react2.useCallback)(function (analyticsPayload) {
     (0, _analytics2.fireSmartLinkEvent)(analyticsPayload, createAnalyticsEvent);
   }, [createAnalyticsEvent]);
   var analytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
-  var onError = (0, _react.useCallback)(function (error, info) {
+  var onError = (0, _react2.useCallback)(function (error, info) {
     analytics.ui.renderFailedEvent({
       display: _utils.SMART_CARD_ANALYTICS_DISPLAY,
       id: id,
@@ -43,10 +43,10 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
       errorInfo: info
     });
   }, [analytics.ui, id]);
-  return (0, _core.jsx)(_reactErrorBoundary.ErrorBoundary, {
+  return (0, _react.jsx)(_reactErrorBoundary.ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, (0, _core.jsx)(_HoverCardComponent.HoverCardComponent, (0, _extends2.default)({}, props, {
+  }, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, (0, _extends2.default)({}, props, {
     analyticsHandler: analyticsHandler,
     analytics: analytics
   }), children));

package/dist/cjs/view/HoverCard/styled.js

@@ -9,7 +9,7 @@ exports.titleBlockCss = exports.skeletonContainer = exports.metadataBlockCss = e
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _index = require("../../index");
 
@@ -32,24 +32,24 @@ var CARD_GAP_PX = 10;
 exports.CARD_GAP_PX = CARD_GAP_PX;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
-var separatorCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
-var HoverCardContainer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
+var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n"])), elementGap);
+var HoverCardContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  padding: 1rem;\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
-var titleBlockCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
+var titleBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 exports.titleBlockCss = titleBlockCss;
-var metadataBlockCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
+var metadataBlockCss = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n"])), separatorCss, elementGap, elementGap);
 exports.metadataBlockCss = metadataBlockCss;
-var footerBlockCss = (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
+var footerBlockCss = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0.25rem;\n"])));
 exports.footerBlockCss = footerBlockCss;
-var loadingViewContainer = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var loadingViewContainer = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.loadingViewContainer = loadingViewContainer;
-var skeletonContainer = (0, _core.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+var skeletonContainer = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
 exports.skeletonContainer = skeletonContainer;
-var hiddenSnippetStyles = (0, _core.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
+var hiddenSnippetStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
 exports.hiddenSnippetStyles = hiddenSnippetStyles;
 
 var getTransitionStyles = function getTransitionStyles(snippetHeight) {
-  return (0, _core.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
 };
 
 exports.getTransitionStyles = getTransitionStyles;

package/dist/cjs/view/InlineCard/Icon.js

@@ -11,13 +11,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _tokens = require("@atlaskit/tokens");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // TODO: Figure out a more scalable/responsive solution
+var placeholderShimmer = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Byline = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -19,7 +19,7 @@ var Byline = function Byline(_ref) {
       children = _ref.children,
       testId = _ref.testId,
       className = _ref.className;
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     css: (0, _utils.mq)({
       fontSize: (0, _utils.gs)(1.5),
       lineHeight: (0, _utils.gs)(2.5),

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockCardIconImageClassName = exports.Icon = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 
@@ -27,14 +27,14 @@ var Icon = function Icon(_ref) {
       defaultIcon = _ref.defaultIcon,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId;
-  var placeholder = defaultIcon || (0, _core.jsx)(_link.default, {
+  var placeholder = defaultIcon || (0, _react.jsx)(_link.default, {
     label: "link",
     size: "small",
     testId: "".concat(testId, "-default")
   });
-  var image = url && (0, _core.jsx)(_reactRenderImage.default, {
+  var image = url && (0, _react.jsx)(_reactRenderImage.default, {
     src: url,
-    loaded: (0, _core.jsx)("img", {
+    loaded: (0, _react.jsx)("img", {
       css: {
         height: (0, _utils.gs)(2),
         width: (0, _utils.gs)(2)
@@ -44,7 +44,7 @@ var Icon = function Icon(_ref) {
     }),
     errored: placeholder
   });
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     css: {
       height: (0, _utils.gs)(2.5),
       width: (0, _utils.gs)(2),

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Metadata = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -26,7 +26,7 @@ var Metadata = function Metadata(_ref) {
   var metadataIcon = icon || null;
 
   if (!metadataIcon && iconUrl) {
-    metadataIcon = (0, _core.jsx)("img", {
+    metadataIcon = (0, _react.jsx)("img", {
       src: iconUrl,
       css: {
         width: (0, _utils.gs)(1),
@@ -35,13 +35,13 @@ var Metadata = function Metadata(_ref) {
     });
   }
 
-  var metadata = (0, _core.jsx)("div", {
+  var metadata = (0, _react.jsx)("div", {
     css: {
       display: 'flex',
       alignItems: 'center',
       marginRight: (0, _utils.gs)(0.5)
     }
-  }, metadataIcon, (0, _core.jsx)("span", {
+  }, metadataIcon, (0, _react.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(1.5),
       color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N300)),
@@ -51,7 +51,7 @@ var Metadata = function Metadata(_ref) {
   }, text));
 
   if (tooltip) {
-    return (0, _core.jsx)(_tooltip.default, {
+    return (0, _react.jsx)(_tooltip.default, {
       content: tooltip
     }, metadata);
   }

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

@@ -9,7 +9,7 @@ exports.metadataListClassName = exports.MetadataList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _Metadata = require("./Metadata");
 
@@ -22,7 +22,7 @@ exports.metadataListClassName = metadataListClassName;
 var MetadataList = function MetadataList(_ref) {
   var items = _ref.items,
       testId = _ref.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: {
       display: 'flex',
       marginTop: (0, _utils.gs)(0.5),
@@ -34,7 +34,7 @@ var MetadataList = function MetadataList(_ref) {
     "data-testid": testId,
     className: metadataListClassName
   }, items.map(function (item) {
-    return (0, _core.jsx)(_Metadata.Metadata, (0, _extends2.default)({
+    return (0, _react.jsx)(_Metadata.Metadata, (0, _extends2.default)({
       key: item.text
     }, item));
   }));