@atlaskit/smart-card 22.2.1 → 22.3.0

package/dist/cjs/view/BlockCard/views/ResolvingView.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockCardResolvingViewClassName = exports.ResolvingView = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/document-filled"));
 
@@ -35,23 +35,23 @@ var ResolvingView = function ResolvingView(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'block-card-resolving-view' : _ref$testId,
       inheritDimensions = _ref.inheritDimensions;
-  return (0, _core.jsx)(_Frame.Frame, {
+  return (0, _react.jsx)(_Frame.Frame, {
     inheritDimensions: inheritDimensions,
     compact: true,
     isSelected: isSelected,
     testId: testId,
     className: blockCardResolvingViewClassName
-  }, (0, _core.jsx)(_documentFilled.default, {
+  }, (0, _react.jsx)(_documentFilled.default, {
     size: "small",
     primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N50),
     label: "document-icon"
-  }), (0, _core.jsx)("span", {
+  }), (0, _react.jsx)("span", {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
       color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
       marginLeft: (0, _utils.gs)(0.5)
     }
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));
 };
 
 exports.ResolvingView = ResolvingView;

package/dist/cjs/view/BlockCard/views/UnauthorizedView.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -63,29 +63,29 @@ var UnauthorizedView = function UnauthorizedView(_ref) {
     return (0, _handlers.handleClickCommon)(event, onClick);
   };
 
-  return (0, _core.jsx)(_Frame.Frame, {
+  return (0, _react.jsx)(_Frame.Frame, {
     isSelected: isSelected,
     testId: testId,
     isFluidHeight: true
-  }, (0, _core.jsx)(_Content.Content, {
+  }, (0, _react.jsx)(_Content.Content, {
     isCompact: true
-  }, (0, _core.jsx)("div", null, (0, _core.jsx)(_ContentHeader.ContentHeader, {
+  }, (0, _react.jsx)("div", null, (0, _react.jsx)(_ContentHeader.ContentHeader, {
     onClick: handleClick,
     link: link
-  }, (0, _core.jsx)(_Link.Link, {
+  }, (0, _react.jsx)(_Link.Link, {
     url: link,
     testId: testId
-  })), (0, _core.jsx)(_Byline.Byline, {
+  })), (0, _react.jsx)(_Byline.Byline, {
     testId: testId ? "".concat(testId, "-byline") : undefined,
-    text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, textBylineProps, {
+    text: (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, textBylineProps, {
       values: {
         context: context.text
       }
     }))
-  })), (0, _core.jsx)(_ContentFooter.ContentFooter, null, (0, _core.jsx)(_Provider.Provider, {
+  })), (0, _react.jsx)(_ContentFooter.ContentFooter, null, (0, _react.jsx)(_Provider.Provider, {
     name: context.text,
     icon: context.icon
-  }), showActions && (0, _core.jsx)(_ActionList.ActionList, {
+  }), showActions && (0, _react.jsx)(_ActionList.ActionList, {
     items: actions
   }))));
 };

package/dist/cjs/view/EmbedCard/components/Frame.js

@@ -11,9 +11,9 @@ exports.Frame = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _utils = require("../../../utils");
 
@@ -22,13 +22,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /** @jsx jsx */
-var Frame = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
+var Frame = /*#__PURE__*/_react2.default.forwardRef(function (_ref, iframeRef) {
   var url = _ref.url,
       _ref$isTrusted = _ref.isTrusted,
       isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
       testId = _ref.testId;
 
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isIframeLoaded = _useState2[0],
       setIframeLoaded = _useState2[1];
@@ -37,7 +37,7 @@ var Frame = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
     return null;
   }
 
-  return (0, _core.jsx)("iframe", {
+  return (0, _react.jsx)("iframe", {
     ref: iframeRef,
     src: url,
     "data-testid": "".concat(testId, "-frame"),

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmbedCardErroredView = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -35,16 +35,16 @@ var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'embed-card-errored-view' : _ref$testId,
       inheritDimensions = _ref.inheritDimensions;
-  return (0, _core.jsx)(_Frame.Frame, {
+  return (0, _react.jsx)(_Frame.Frame, {
     inheritDimensions: inheritDimensions,
     compact: true,
     isSelected: isSelected,
     testId: testId
-  }, (0, _core.jsx)(_error.default, {
+  }, (0, _react.jsx)(_error.default, {
     size: "small",
     primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
     label: "error-icon"
-  }), (0, _core.jsx)("span", {
+  }), (0, _react.jsx)("span", {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
       marginLeft: (0, _utils.gs)(0.5),
@@ -57,12 +57,12 @@ var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
       // Fallback options.
       maxHeight: (0, _utils.gs)(3)
     }
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link)), (0, _core.jsx)(_customThemeButton.default, {
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link)), (0, _react.jsx)(_customThemeButton.default, {
     testId: "err-view-retry",
     appearance: "link",
     spacing: "none",
     onClick: onRetry
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.try_again)));
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.try_again)));
 };
 
 exports.EmbedCardErroredView = EmbedCardErroredView;

package/dist/cjs/view/EmbedCard/views/ResolvedView.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmbedCardResolvedView = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 
@@ -20,7 +20,7 @@ var _ImageIcon = require("../components/ImageIcon");
 var _Frame = require("../components/Frame");
 
 /** @jsx jsx */
-var EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
+var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
       context = _ref.context,
       onClick = _ref.onClick,
@@ -36,26 +36,26 @@ var EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_re
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
 
-  var linkGlyph = _react.default.useMemo(function () {
-    return (0, _core.jsx)(_link.default, {
+  var linkGlyph = _react2.default.useMemo(function () {
+    return (0, _react.jsx)(_link.default, {
       label: "icon",
       size: "small",
       testId: "embed-card-fallback-icon"
     });
   }, []);
 
-  var icon = _react.default.useMemo(function () {
-    if ( /*#__PURE__*/_react.default.isValidElement(iconFromContext)) {
+  var icon = _react2.default.useMemo(function () {
+    if ( /*#__PURE__*/_react2.default.isValidElement(iconFromContext)) {
       return iconFromContext;
     }
 
-    return (0, _core.jsx)(_ImageIcon.ImageIcon, {
+    return (0, _react.jsx)(_ImageIcon.ImageIcon, {
       src: src,
       default: linkGlyph
     });
   }, [src, linkGlyph, iconFromContext]);
 
-  return (0, _core.jsx)(_ExpandedFrame.ExpandedFrame, {
+  return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
     href: link,
@@ -64,7 +64,7 @@ var EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_re
     text: text,
     onClick: onClick,
     inheritDimensions: inheritDimensions
-  }, (0, _core.jsx)(_Frame.Frame, {
+  }, (0, _react.jsx)(_Frame.Frame, {
     url: preview === null || preview === void 0 ? void 0 : preview.src,
     isTrusted: isTrusted,
     testId: testId,

package/dist/cjs/view/EmbedCard/views/UnresolvedView.js

@@ -9,7 +9,7 @@ exports.EmbedCardUnresolvedView = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -30,7 +30,7 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       context = _ref.context,
       onClick = _ref.onClick,
       testId = _ref.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: {
       display: 'flex',
       flexDirection: 'column',
@@ -40,24 +40,24 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       paddingBottom: (0, _utils.gs)(6)
     },
     "data-testid": "".concat(testId, "-unresolved-container")
-  }, (0, _core.jsx)("img", {
+  }, (0, _react.jsx)("img", {
     src: image,
     css: {
       height: (0, _utils.gs)(14),
       marginBottom: (0, _utils.gs)(4)
     }
-  }), (0, _core.jsx)("span", {
+  }), (0, _react.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(2.5),
       marginBottom: (0, _utils.gs)(1.5),
       width: (0, _utils.gs)(50),
       textAlign: 'center'
     }
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[title], {
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[title], {
     values: {
       context: context
     }
-  }))), (0, _core.jsx)("span", {
+  }))), (0, _react.jsx)("span", {
     css: {
       fontSize: (0, _constants.fontSize)(),
       marginBottom: (0, _utils.gs)(2.5),
@@ -65,15 +65,15 @@ var EmbedCardUnresolvedView = function EmbedCardUnresolvedView(_ref) {
       width: (0, _utils.gs)(50),
       lineHeight: (0, _utils.gs)(3)
     }
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[description], {
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[description], {
     values: {
       context: context
     }
-  }))), button && (0, _core.jsx)(_customThemeButton.default, {
+  }))), button && (0, _react.jsx)(_customThemeButton.default, {
     testId: "button-".concat(button.testId || testId),
     appearance: button.appearance,
     onClick: onClick
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[button.text], {
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[button.text], {
     values: {
       context: context
     }

package/dist/cjs/view/EmbedModal/components/embed-content/index.js

@@ -9,13 +9,13 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _utils = require("../../../../utils");
 
 var _templateObject;
 
-var iframeCss = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
+var iframeCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
 
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,
@@ -31,7 +31,7 @@ var EmbedContent = function EmbedContent(_ref) {
     src: src,
     'data-testid': "".concat(testId, "-embed")
   };
-  return (0, _core.jsx)("iframe", props);
+  return (0, _react.jsx)("iframe", props);
 };
 
 var _default = EmbedContent;

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

@@ -9,9 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -57,12 +57,12 @@ var LinkInfo = function LinkInfo(_ref) {
   var _useModal = (0, _modalDialog.useModal)(),
       onClose = _useModal.onClose;
 
-  var downloadButton = (0, _react.useMemo)(function () {
+  var downloadButton = (0, _react2.useMemo)(function () {
     if (downloadUrl) {
-      return (0, _core.jsx)(_linkInfoButton.default, {
-        content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download),
+      return (0, _react.jsx)(_linkInfoButton.default, {
+        content: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download),
         href: downloadUrl,
-        icon: (0, _core.jsx)(_download.default, {
+        icon: (0, _react.jsx)(_download.default, {
           label: _messages.messages.download.defaultMessage
         }),
         onClick: onDownloadButtonClick,
@@ -70,13 +70,13 @@ var LinkInfo = function LinkInfo(_ref) {
       });
     }
   }, [downloadUrl, onDownloadButtonClick, testId]);
-  var urlButton = (0, _react.useMemo)(function () {
+  var urlButton = (0, _react2.useMemo)(function () {
     if (url) {
-      var content = providerName ? (0, _core.jsx)(_react.default.Fragment, null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
-      return (0, _core.jsx)(_linkInfoButton.default, {
+      var content = providerName ? (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
+      return (0, _react.jsx)(_linkInfoButton.default, {
         content: content,
         href: url,
-        icon: (0, _core.jsx)(_shortcut.default, {
+        icon: (0, _react.jsx)(_shortcut.default, {
           label: _messages.messages.viewOriginal.defaultMessage
         }),
         onClick: onViewButtonClick,
@@ -85,39 +85,39 @@ var LinkInfo = function LinkInfo(_ref) {
       });
     }
   }, [onViewButtonClick, providerName, testId, url]);
-  var sizeButton = (0, _react.useMemo)(function () {
+  var sizeButton = (0, _react2.useMemo)(function () {
     var isFullScreen = size === _constants.MAX_MODAL_SIZE;
     var message = isFullScreen ? _messages.messages.preview_min_size : _messages.messages.preview_max_size;
-    var icon = isFullScreen ? (0, _core.jsx)(_vidFullScreenOff.default, {
+    var icon = isFullScreen ? (0, _react.jsx)(_vidFullScreenOff.default, {
       label: message.defaultMessage
-    }) : (0, _core.jsx)(_vidFullScreenOn.default, {
+    }) : (0, _react.jsx)(_vidFullScreenOn.default, {
       label: message.defaultMessage
     });
-    return (0, _core.jsx)("span", {
+    return (0, _react.jsx)("span", {
       className: "smart-link-resize-button"
-    }, (0, _core.jsx)(_linkInfoButton.default, {
-      content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, message),
+    }, (0, _react.jsx)(_linkInfoButton.default, {
+      content: (0, _react.jsx)(_reactIntlNext.FormattedMessage, message),
       icon: icon,
       onClick: onResizeButtonClick,
       testId: "".concat(testId, "-resize")
     }));
   }, [onResizeButtonClick, size, testId]);
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: _styled.containerStyles
-  }, icon && (0, _core.jsx)("div", {
+  }, icon && (0, _react.jsx)("div", {
     css: _styled.iconCss,
     "data-testid": "".concat(testId, "-icon")
-  }, (0, _core.jsx)(_Icon.Icon, icon)), (0, _core.jsx)("div", {
+  }, (0, _react.jsx)(_Icon.Icon, icon)), (0, _react.jsx)("div", {
     css: _styled.titleCss
-  }, (0, _core.jsx)("h3", {
+  }, (0, _react.jsx)("h3", {
     "data-testid": "".concat(testId, "-title")
-  }, title), (0, _core.jsx)("span", {
+  }, title), (0, _react.jsx)("span", {
     tabIndex: 0
-  })), (0, _core.jsx)("div", {
+  })), (0, _react.jsx)("div", {
     css: _styled.actionCss
-  }, downloadButton, urlButton, sizeButton, (0, _core.jsx)(_linkInfoButton.default, {
-    content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.preview_close),
-    icon: (0, _core.jsx)(_cross.default, {
+  }, downloadButton, urlButton, sizeButton, (0, _react.jsx)(_linkInfoButton.default, {
+    content: (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.preview_close),
+    icon: (0, _react.jsx)(_cross.default, {
       label: _messages.messages.preview_close.defaultMessage
     }),
     onClick: onClose,

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -9,17 +9,17 @@ exports.titleCss = exports.iconCss = exports.containerStyles = exports.actionCss
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+var containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
 exports.containerStyles = containerStyles;
 var iconSize = '24px';
-var iconCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
+var iconCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
 exports.iconCss = iconCss;
 var height = '20px';
-var titleCss = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
+var titleCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
 exports.titleCss = titleCss;
-var actionCss = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
+var actionCss = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);
 exports.actionCss = actionCss;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/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 _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -32,10 +32,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var getButtonStyle = function getButtonStyle(size, iconOnly) {
   switch (size) {
     case _constants.SmartLinkSize.Large:
-      return iconOnly ? (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+      return iconOnly ? (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
 
     case _constants.SmartLinkSize.Small:
-      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
 
     case _constants.SmartLinkSize.XLarge:
     case _constants.SmartLinkSize.Medium:
@@ -65,15 +65,15 @@ var ActionButton = function ActionButton(_ref) {
     // Stop button on click event from propagate into parent container.
     e.stopPropagation();
   }, []);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [getButtonStyle(size, iconOnly), overrideCss],
     "data-testid": "".concat(testId, "-button-wrapper"),
     onClick: onContainerClick
-  }, (0, _core.jsx)(_tooltip.default, {
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: "".concat(testId, "-tooltip")
-  }, (0, _core.jsx)(_customThemeButton.default, {
+  }, (0, _react2.jsx)(_customThemeButton.default, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/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 _constants = require("../../../../../../constants");
 
@@ -35,14 +35,14 @@ var getIconWidth = function getIconWidth(size) {
 };
 
 var getIconStyles = function getIconStyles(size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getIconWidth(size)));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getIconWidth(size)));
 };
 
 var ActionIcon = function ActionIcon(_ref) {
   var size = _ref.size,
       testId = _ref.testId,
       icon = _ref.icon;
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     css: getIconStyles(size),
     "data-testid": "".concat(testId, "-icon")
   }, icon);

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../../constants");
 
@@ -49,7 +49,7 @@ var Action = function Action(_ref) {
     return null;
   }
 
-  var actionIcon = icon && (0, _core.jsx)(_actionIcon.default, {
+  var actionIcon = icon && (0, _react2.jsx)(_actionIcon.default, {
     icon: icon,
     size: size,
     testId: testId
@@ -58,7 +58,7 @@ var Action = function Action(_ref) {
   var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
 
   if (asDropDownItem) {
-    return (0, _core.jsx)(_actionDropdownItem.default, {
+    return (0, _react2.jsx)(_actionDropdownItem.default, {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
@@ -66,7 +66,7 @@ var Action = function Action(_ref) {
       testId: testId
     });
   } else {
-    return (0, _core.jsx)(_actionButton.default, {
+    return (0, _react2.jsx)(_actionButton.default, {
       appearance: appearance,
       content: content,
       iconAfter: iconAfter,

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

@@ -19,7 +19,7 @@ var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
@@ -45,7 +45,7 @@ var _excluded = ["triggerRef"];
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), _token.tokens.focus);
+var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), _token.tokens.focus);
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
@@ -98,25 +98,25 @@ var ActionGroup = function ActionGroup(_ref) {
       });
     }
   }, [isOpen, onOpenChange]);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
+  }, (0, _react2.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? (0, _react2.jsx)(_dropdownMenu.default, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,
     trigger: function trigger(_ref2) {
       var triggerRef = _ref2.triggerRef,
           props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return (0, _core.jsx)(_tooltip.default, {
-        content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
+      return (0, _react2.jsx)(_tooltip.default, {
+        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
         hideTooltipOnClick: true,
         testId: "action-group-more-button-tooltip",
         tag: "span"
-      }, (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+      }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
         spacing: _utils2.sizeToButtonSpacing[size],
         testId: "action-group-more-button",
-        iconBefore: (0, _core.jsx)(_more.default, {
+        iconBefore: (0, _react2.jsx)(_more.default, {
           label: "more"
         }),
         ref: triggerRef

package/dist/cjs/view/FlexibleCard/components/blocks/block/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 _constants = require("../../../../../constants");
 
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 getBlockStyles = function getBlockStyles(direction, size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };
 /**
  * A block represents a collection of elements and actions that are arranged
@@ -52,7 +52,7 @@ var Block = function Block(_ref) {
   (0, _react.useEffect)(function () {
     onRender && onRender();
   }, [onRender]);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
     "data-testid": testId,