@atlaskit/smart-card 26.16.0 → 26.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.17.0
+
+### Minor Changes
+
+- [`efc2669bc13`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efc2669bc13) - We are testing adding a prefix to the Avatar name tooltip in the Hover Card behind the "platform.linking-platform.smart-card.enable-better-metadata_iojwg" feature flag. You can turn it on by passing new showNamePrefix prop to the Flexible UI elements such us AssignedToGroup, OwnedByGroup and AuthorGroup. If this fix is successful it will be available in a later release.
+
+## 26.16.1
+
+### Patch Changes
+
+- [`8e0d75e3666`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e0d75e3666) - Update Image preview styles for Hover Card
+
 ## 26.16.0
 
 ### Minor Changes

package/dist/cjs/extractors/hover/extractMetadata.js

@@ -1,18 +1,26 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractMetadata = exports.elementNamesToItems = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("../../constants");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var AvatarGroupsWithNamePrefix = [_constants.ElementName.AssignedToGroup, _constants.ElementName.OwnedByGroup, _constants.ElementName.AuthorGroup];
 var elementNamesToItems = function elementNamesToItems(elementNames) {
   return elementNames.filter(function (element) {
     return element in _constants.ElementName;
   }).map(function (elementName) {
-    return {
+    return _objectSpread({
       name: elementName,
       testId: "".concat(elementName.toLowerCase(), "-metadata-element")
-    };
+    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && AvatarGroupsWithNamePrefix.includes(elementName) && {
+      showNamePrefix: true
+    });
   });
 };
 exports.elementNamesToItems = elementNamesToItems;

package/dist/cjs/utils/analytics/analytics.js

@@ -21,7 +21,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0"
+  packageVersion: "26.17.0"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

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

@@ -1,17 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _constants = require("../../../../../constants");
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
   var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
@@ -26,6 +35,18 @@ var getStyles = function getStyles(size) {
       return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
+var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {
+  switch (elementName) {
+    case _constants.ElementName.AssignedToGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.assigned_to, personName);
+    case _constants.ElementName.OwnedByGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.owned_by, personName);
+    case _constants.ElementName.AuthorGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.created_by, personName);
+    default:
+      return personName;
+  }
+};
 
 /**
  * A base element that displays a group of avatars.
@@ -44,8 +65,21 @@ var AvatarGroup = function AvatarGroup(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
-  if (!items.length) {
+    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId,
+    _ref$showNamePrefix = _ref.showNamePrefix,
+    showNamePrefix = _ref$showNamePrefix === void 0 ? false : _ref$showNamePrefix;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var data = (0, _react.useMemo)(function () {
+    if (name && showNamePrefix) {
+      return items.map(function (person) {
+        return _objectSpread(_objectSpread({}, person), {}, {
+          name: getPersonNameWithPrefix(name, person.name, intl) || person.name
+        });
+      });
+    }
+    return items;
+  }, [name, items, showNamePrefix, intl]);
+  if (!data.length) {
     return null;
   }
   return (0, _react2.jsx)("span", {
@@ -58,7 +92,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
-    data: items,
+    data: data,
     testId: testId
   }));
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -27,6 +27,13 @@ var getFormattedMessage = function getFormattedMessage(message) {
   }
 };
 exports.getFormattedMessage = getFormattedMessage;
+var getFormattedMessageAsString = function getFormattedMessageAsString(intl, message, context) {
+  var formatMessage = intl.formatMessage;
+  return message ? formatMessage(message, {
+    context: context
+  }) : null;
+};
+exports.getFormattedMessageAsString = getFormattedMessageAsString;
 var getIconDimensionStyles = function getIconDimensionStyles(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);
 };

package/dist/cjs/view/HoverCard/components/{SnippetOrPreview.js → ImagePreview.js}

@@ -6,25 +6,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _extractPreview = _interopRequireDefault(require("../../../extractors/flexible/extract-preview"));
 var _blocks = require("../../FlexibleCard/components/blocks");
 var _styled = require("../styled");
-var _templateObject;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 SnippetOrPreview = function SnippetOrPreview(_ref) {
+var ImagePreview = function ImagePreview(_ref) {
   var data = _ref.data,
-    snippetHeight = _ref.snippetHeight;
+    fallbackElementHeight = _ref.fallbackElementHeight;
   var transitionStarted = (0, _react.useRef)(false);
   var previewBlockRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showSnippet = _useState2[0],
-    setShowSnippet = _useState2[1];
+    showPreview = _useState2[0],
+    setShowPreview = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     previewCss = _useState4[0],
@@ -33,26 +32,29 @@ var SnippetOrPreview = function SnippetOrPreview(_ref) {
   // Set Preview to a fixed height to enable transitions
   var onPreviewRender = (0, _react.useCallback)(function () {
     var _previewBlockRef$curr;
-    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));
+    previewBlockRef.current && setPreviewCss((0, _styled.getPreviewBlockStyles)((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
   }, []);
 
-  // On error set Preview to Snippet height with transition
+  // On error set Preview to Fallback height with transition
   var onPreviewError = (0, _react.useCallback)(function () {
     if (transitionStarted.current === false) {
-      setPreviewCss((0, _styled.getTransitionStyles)(snippetHeight));
+      setPreviewCss((0, _styled.getTransitionStyles)(fallbackElementHeight));
       transitionStarted.current = true;
     }
-  }, [snippetHeight]);
+  }, [fallbackElementHeight]);
   var onPreviewTransitionEnd = (0, _react.useCallback)(function () {
-    setShowSnippet(true);
+    setShowPreview(false);
   }, []);
-  return !showSnippet && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
-    onError: onPreviewError,
+  return showPreview && data && (0, _extractPreview.default)(data) ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, (0, _extends2.default)({
+    onError: onPreviewError
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    ignoreContainerPadding: true
+  }, {
     overrideCss: previewCss,
     onTransitionEnd: onPreviewTransitionEnd,
     blockRef: previewBlockRef,
     onRender: onPreviewRender
-  }) : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null);
+  })) : null;
 };
-var _default = SnippetOrPreview;
+var _default = ImagePreview;
 exports.default = _default;

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -13,7 +13,7 @@ var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _styled = require("./styled");
 var _FlexibleCard = _interopRequireDefault(require("../../../../FlexibleCard"));
 var _utils = require("../../../utils");
-var _SnippetOrPreview = _interopRequireDefault(require("../../SnippetOrPreview"));
+var _ImagePreview = _interopRequireDefault(require("../../ImagePreview"));
 var _extractMetadata = require("../../../../../extractors/hover/extractMetadata");
 var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
@@ -100,11 +100,11 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
-  var body = (0, _SnippetOrPreview.default)({
+  var imagePreview = (0, _ImagePreview.default)({
     data: data,
-    snippetHeight: snippetHeight.current
+    fallbackElementHeight: snippetHeight.current
   });
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
     metadataPosition: _constants.SmartLinkPosition.Top
   })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
     primary: topPrimary,
@@ -114,7 +114,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     size: _constants.SmartLinkSize.Large
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     size: _constants.SmartLinkSize.Medium
-  })), body, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+  })), !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,

package/dist/cjs/view/HoverCard/components/views/resolving/styled.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.titleBlockStyles = exports.skeletonContainer = exports.loadingViewContainer = exports.getTitleStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var loadingViewContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var loadingViewContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "");
 exports.loadingViewContainer = loadingViewContainer;
 var skeletonContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
 exports.skeletonContainer = skeletonContainer;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.separatorCss = exports.popupContainerStyles = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.separatorCss = exports.popupContainerStyles = exports.getTransitionStyles = exports.getPreviewBlockStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
@@ -13,7 +13,7 @@ var _constants = require("../../constants");
 var _constants2 = require("@atlaskit/theme/constants");
 var _components = require("@atlaskit/theme/components");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
@@ -23,11 +23,11 @@ var flexibleUiOptions = _objectSpread({
   hideBackground: true,
   hideElevation: true,
   size: _constants.SmartLinkSize.Medium,
-  hidePadding: true,
   hideHoverCardPreviewButton: false,
   zIndex: HOVER_CARD_Z_INDEX + 1
 }, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-  theme: _constants.SmartLinkTheme.Black
+  theme: _constants.SmartLinkTheme.Black,
+  hidePadding: true
 });
 exports.flexibleUiOptions = flexibleUiOptions;
 var CARD_WIDTH_REM = 24;
@@ -39,7 +39,7 @@ var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n  ", "\n"])), elementGap, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? " [data-smart-element-avatar-group] + [data-separator]:before {\n      content: '\u2022';\n      margin-right: ".concat(elementGap, ";\n    }") : "");
 exports.separatorCss = separatorCss;
-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);
+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  ", "\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "", _index.loadingPlaceholderClassName);
 exports.HoverCardContainer = HoverCardContainer;
 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    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), blockGap, separatorCss, elementGap, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 exports.titleBlockCss = titleBlockCss;
@@ -54,4 +54,8 @@ var popupContainerStyles = (0, _react.css)(_templateObject5 || (_templateObject5
   light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
 })());
-exports.popupContainerStyles = popupContainerStyles;
+exports.popupContainerStyles = popupContainerStyles;
+var getPreviewBlockStyles = function getPreviewBlockStyles(snippetHeight) {
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  ", "\n"])), snippetHeight, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-300, 12px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
+};
+exports.getPreviewBlockStyles = getPreviewBlockStyles;

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

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0",
+  packageVersion: "26.17.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/extractors/hover/extractMetadata.js

@@ -1,8 +1,13 @@
 import { ElementName } from '../../constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+const AvatarGroupsWithNamePrefix = [ElementName.AssignedToGroup, ElementName.OwnedByGroup, ElementName.AuthorGroup];
 export const elementNamesToItems = elementNames => {
   return elementNames.filter(element => element in ElementName).map(elementName => ({
     name: elementName,
-    testId: `${elementName.toLowerCase()}-metadata-element`
+    testId: `${elementName.toLowerCase()}-metadata-element`,
+    ...(getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && AvatarGroupsWithNamePrefix.includes(elementName) && {
+      showNamePrefix: true
+    })
   }));
 };
 export const extractMetadata = jsonLd => {

package/dist/es2019/utils/analytics/analytics.js

@@ -3,7 +3,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0"
+  packageVersion: "26.17.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,8 +1,12 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useIntl } from 'react-intl-next';
+import { ElementName } from '../../../../../constants';
+import { getFormattedMessageAsString } from '../../utils';
 const MAX_COUNT = 4;
 const getStyles = size => {
   const styles = css`
@@ -33,6 +37,18 @@ const getStyles = size => {
       `;
   }
 };
+const getPersonNameWithPrefix = (elementName, personName, intl) => {
+  switch (elementName) {
+    case ElementName.AssignedToGroup:
+      return getFormattedMessageAsString(intl, messages.assigned_to, personName);
+    case ElementName.OwnedByGroup:
+      return getFormattedMessageAsString(intl, messages.owned_by, personName);
+    case ElementName.AuthorGroup:
+      return getFormattedMessageAsString(intl, messages.created_by, personName);
+    default:
+      return personName;
+  }
+};
 
 /**
  * A base element that displays a group of avatars.
@@ -47,9 +63,22 @@ const AvatarGroup = ({
   name,
   overrideCss,
   size = SmartLinkSize.Medium,
-  testId = 'smart-element-avatar-group'
+  testId = 'smart-element-avatar-group',
+  showNamePrefix = false
 }) => {
-  if (!items.length) {
+  const intl = useIntl();
+  const data = useMemo(() => {
+    if (name && showNamePrefix) {
+      return items.map(person => {
+        return {
+          ...person,
+          name: getPersonNameWithPrefix(name, person.name, intl) || person.name
+        };
+      });
+    }
+    return items;
+  }, [name, items, showNamePrefix, intl]);
+  if (!data.length) {
     return null;
   }
   return jsx("span", {
@@ -62,7 +91,7 @@ const AvatarGroup = ({
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
-    data: items,
+    data: data,
     testId: testId
   }));
 };

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

@@ -22,6 +22,14 @@ export const getFormattedMessage = message => {
     }));
   }
 };
+export const getFormattedMessageAsString = (intl, message, context) => {
+  const {
+    formatMessage
+  } = intl;
+  return message ? formatMessage(message, {
+    context
+  }) : null;
+};
 const getIconDimensionStyles = value => css`
   height: ${value};
   min-height: ${value};

package/dist/es2019/view/HoverCard/components/ImagePreview.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState, useRef } from 'react';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles, getPreviewBlockStyles } from '../styled';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+const ImagePreview = ({
+  data,
+  fallbackElementHeight
+}) => {
+  const transitionStarted = useRef(false);
+  const previewBlockRef = useRef(null);
+  const [showPreview, setShowPreview] = useState(true);
+  const [previewCss, setPreviewCss] = useState();
+
+  // Set Preview to a fixed height to enable transitions
+  const onPreviewRender = useCallback(() => {
+    var _previewBlockRef$curr;
+    previewBlockRef.current && setPreviewCss(getPreviewBlockStyles((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []);
+
+  // On error set Preview to Fallback height with transition
+  const onPreviewError = useCallback(() => {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(fallbackElementHeight));
+      transitionStarted.current = true;
+    }
+  }, [fallbackElementHeight]);
+  const onPreviewTransitionEnd = useCallback(() => {
+    setShowPreview(false);
+  }, []);
+  return showPreview && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({
+    onError: onPreviewError
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    ignoreContainerPadding: true
+  }, {
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  })) : null;
+};
+export default ImagePreview;

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -5,7 +5,7 @@ import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../.
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
-import SnippetOrPreview from '../../SnippetOrPreview';
+import ImagePreview from '../../ImagePreview';
 import { extractMetadata, elementNamesToItems } from '../../../../../extractors/hover/extractMetadata';
 import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
@@ -87,11 +87,11 @@ const HoverCardResolvedView = ({
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
-  const body = SnippetOrPreview({
+  const imagePreview = ImagePreview({
     data: data,
-    snippetHeight: snippetHeight.current
+    fallbackElementHeight: snippetHeight.current
   });
-  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topPrimary,
@@ -101,7 +101,7 @@ const HoverCardResolvedView = ({
     size: SmartLinkSize.Large
   }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     size: SmartLinkSize.Medium
-  })), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+  })), !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, null), !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,

package/dist/es2019/view/HoverCard/components/views/resolving/styled.js

@@ -1,7 +1,9 @@
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const loadingViewContainer = css`
   display: flex;
   flex-direction: column;
+  ${getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `padding: 1rem;` : ``}
 `;
 export const skeletonContainer = css`
   display: flex;

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

@@ -11,11 +11,11 @@ export const flexibleUiOptions = {
   hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
-  hidePadding: true,
   hideHoverCardPreviewButton: false,
   zIndex: HOVER_CARD_Z_INDEX + 1,
   ...(!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-    theme: SmartLinkTheme.Black
+    theme: SmartLinkTheme.Black,
+    hidePadding: true
   })
 };
 export const CARD_WIDTH_REM = 24;
@@ -37,7 +37,7 @@ export const HoverCardContainer = css`
   border-width: 0;
   box-sizing: border-box;
   width: ${CARD_WIDTH_REM}rem;
-  padding: 1rem;
+  ${!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `padding: 1rem;` : ``}
 
   .${loadingPlaceholderClassName} {
     display: none;
@@ -79,4 +79,11 @@ export const popupContainerStyles = css`
   light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
 })()};
+`;
+export const getPreviewBlockStyles = snippetHeight => css`
+  height: ${snippetHeight}px;
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `  border-top-left-radius: ${"var(--ds-border-radius-300, 12px)"};
+         border-top-right-radius: ${"var(--ds-border-radius-300, 12px)"};
+         margin-bottom: ${blockGap};
+        }` : ``}
 `;

package/dist/es2019/view/LinkUrl/index.js

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0",
+  packageVersion: "26.17.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/extractors/hover/extractMetadata.js

@@ -1,12 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { ElementName } from '../../constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+var AvatarGroupsWithNamePrefix = [ElementName.AssignedToGroup, ElementName.OwnedByGroup, ElementName.AuthorGroup];
 export var elementNamesToItems = function elementNamesToItems(elementNames) {
   return elementNames.filter(function (element) {
     return element in ElementName;
   }).map(function (elementName) {
-    return {
+    return _objectSpread({
       name: elementName,
       testId: "".concat(elementName.toLowerCase(), "-metadata-element")
-    };
+    }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && AvatarGroupsWithNamePrefix.includes(elementName) && {
+      showNamePrefix: true
+    });
   });
 };
 export var extractMetadata = function extractMetadata(jsonLd) {

package/dist/esm/utils/analytics/analytics.js

@@ -13,7 +13,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0"
+  packageVersion: "26.17.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,10 +1,17 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useIntl } from 'react-intl-next';
+import { ElementName } from '../../../../../constants';
+import { getFormattedMessageAsString } from '../../utils';
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
   var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
@@ -19,6 +26,18 @@ var getStyles = function getStyles(size) {
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
+var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {
+  switch (elementName) {
+    case ElementName.AssignedToGroup:
+      return getFormattedMessageAsString(intl, messages.assigned_to, personName);
+    case ElementName.OwnedByGroup:
+      return getFormattedMessageAsString(intl, messages.owned_by, personName);
+    case ElementName.AuthorGroup:
+      return getFormattedMessageAsString(intl, messages.created_by, personName);
+    default:
+      return personName;
+  }
+};
 
 /**
  * A base element that displays a group of avatars.
@@ -37,8 +56,21 @@ var AvatarGroup = function AvatarGroup(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
-  if (!items.length) {
+    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId,
+    _ref$showNamePrefix = _ref.showNamePrefix,
+    showNamePrefix = _ref$showNamePrefix === void 0 ? false : _ref$showNamePrefix;
+  var intl = useIntl();
+  var data = useMemo(function () {
+    if (name && showNamePrefix) {
+      return items.map(function (person) {
+        return _objectSpread(_objectSpread({}, person), {}, {
+          name: getPersonNameWithPrefix(name, person.name, intl) || person.name
+        });
+      });
+    }
+    return items;
+  }, [name, items, showNamePrefix, intl]);
+  if (!data.length) {
     return null;
   }
   return jsx("span", {
@@ -51,7 +83,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
-    data: items,
+    data: data,
     testId: testId
   }));
 };

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

@@ -18,6 +18,12 @@ export var getFormattedMessage = function getFormattedMessage(message) {
     }));
   }
 };
+export var getFormattedMessageAsString = function getFormattedMessageAsString(intl, message, context) {
+  var formatMessage = intl.formatMessage;
+  return message ? formatMessage(message, {
+    context: context
+  }) : null;
+};
 var getIconDimensionStyles = function getIconDimensionStyles(value) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n"])), value, value, value, value, value, value);
 };

package/dist/esm/view/HoverCard/components/ImagePreview.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState, useRef } from 'react';
+import extractPreview from '../../../extractors/flexible/extract-preview';
+import { PreviewBlock } from '../../FlexibleCard/components/blocks';
+import { getTransitionStyles, getPreviewBlockStyles } from '../styled';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+var ImagePreview = function ImagePreview(_ref) {
+  var data = _ref.data,
+    fallbackElementHeight = _ref.fallbackElementHeight;
+  var transitionStarted = useRef(false);
+  var previewBlockRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPreview = _useState2[0],
+    setShowPreview = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewCss = _useState4[0],
+    setPreviewCss = _useState4[1];
+
+  // Set Preview to a fixed height to enable transitions
+  var onPreviewRender = useCallback(function () {
+    var _previewBlockRef$curr;
+    previewBlockRef.current && setPreviewCss(getPreviewBlockStyles((_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height));
+  }, []);
+
+  // On error set Preview to Fallback height with transition
+  var onPreviewError = useCallback(function () {
+    if (transitionStarted.current === false) {
+      setPreviewCss(getTransitionStyles(fallbackElementHeight));
+      transitionStarted.current = true;
+    }
+  }, [fallbackElementHeight]);
+  var onPreviewTransitionEnd = useCallback(function () {
+    setShowPreview(false);
+  }, []);
+  return showPreview && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({
+    onError: onPreviewError
+  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    ignoreContainerPadding: true
+  }, {
+    overrideCss: previewCss,
+    onTransitionEnd: onPreviewTransitionEnd,
+    blockRef: previewBlockRef,
+    onRender: onPreviewRender
+  })) : null;
+};
+export default ImagePreview;

package/dist/esm/view/HoverCard/components/views/resolved/index.js

@@ -5,7 +5,7 @@ import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../.
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
-import SnippetOrPreview from '../../SnippetOrPreview';
+import ImagePreview from '../../ImagePreview';
 import { extractMetadata, elementNamesToItems } from '../../../../../extractors/hover/extractMetadata';
 import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
@@ -89,11 +89,11 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
-  var body = SnippetOrPreview({
+  var imagePreview = ImagePreview({
     data: data,
-    snippetHeight: snippetHeight.current
+    fallbackElementHeight: snippetHeight.current
   });
-  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topPrimary,
@@ -103,7 +103,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     size: SmartLinkSize.Large
   }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
     size: SmartLinkSize.Medium
-  })), body, /*#__PURE__*/React.createElement(SnippetBlock, {
+  })), !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, null), !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && imagePreview, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,

package/dist/esm/view/HoverCard/components/views/resolving/styled.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "");
 export var skeletonContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
 export var getTitleStyles = function getTitleStyles(height) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 1 0 auto;\n    height: ", "rem;\n\n    span {\n      width: 100%;\n    }\n  "])), height);

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { css } from '@emotion/react';
@@ -16,11 +16,11 @@ export var flexibleUiOptions = _objectSpread({
   hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
-  hidePadding: true,
   hideHoverCardPreviewButton: false,
   zIndex: HOVER_CARD_Z_INDEX + 1
 }, !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-  theme: SmartLinkTheme.Black
+  theme: SmartLinkTheme.Black,
+  hidePadding: true
 });
 export var CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card
@@ -28,7 +28,7 @@ export var CARD_GAP_PX = 10;
 var blockGap = '0.5rem';
 var elementGap = '0.5rem';
 export var separatorCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-separator] + [data-separator]:before {\n    margin-right: ", ";\n  }\n  ", "\n"])), elementGap, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? " [data-smart-element-avatar-group] + [data-separator]:before {\n      content: '\u2022';\n      margin-right: ".concat(elementGap, ";\n    }") : "");
-export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, loadingPlaceholderClassName);
+export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n  ", "\n\n  .", " {\n    display: none;\n  }\n"])), CARD_WIDTH_REM, !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "padding: 1rem;" : "", loadingPlaceholderClassName);
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n\n  ", "\n"])), blockGap, separatorCss, elementGap, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
@@ -39,4 +39,7 @@ export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _t
 })(), themed({
   light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
   dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
-})());
+})());
+export var getPreviewBlockStyles = function getPreviewBlockStyles(snippetHeight) {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: ", "px;\n  ", "\n"])), snippetHeight, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "  border-top-left-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n         border-top-right-radius: ", "var(--ds-border-radius-300, 12px)", ";\n         margin-bottom: ", blockGap, ";\n        }") : "");
+};

package/dist/esm/view/LinkUrl/index.js

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.16.0",
+  packageVersion: "26.17.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -182,6 +182,10 @@ export type AttachmentCount = {
  */
 export type AuthorGroup = {
     name: ElementName.AuthorGroup;
+    /**
+     * Shows a name prefix Created by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an OwnedByGroup element.
@@ -189,6 +193,10 @@ export type AuthorGroup = {
  */
 export type OwnedByGroup = {
     name: ElementName.OwnedByGroup;
+    /**
+     * Shows a name prefix Owned by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an AssignedToGroup element.
@@ -196,6 +204,10 @@ export type OwnedByGroup = {
  */
 export type AssignedToGroup = {
     name: ElementName.AssignedToGroup;
+    /**
+     * Shows a name prefix Assigned To in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an ChecklistProgress element.

package/dist/types/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -18,4 +18,8 @@ export type AvatarGroupProps = ElementProps & {
      * The maximum number of Avatars to show in the AvatarGroup
      */
     maxCount?: number;
+    /**
+     * Shows a name prefix in the Avatar tooltip (Created by, Assigned To, Owned by)
+     */
+    showNamePrefix?: boolean;
 };

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -5,8 +5,10 @@ import { SmartLinkSize } from '../../../constants';
 import { MessageProps } from './types';
 import { AnalyticsFacade } from '../../../state/analytics';
 import { PreviewActionData } from '../../../state/flexible-ui-context/types';
+import { IntlShape, MessageDescriptor } from 'react-intl-next';
 export declare const sizeToButtonSpacing: Record<SmartLinkSize, Spacing>;
 export declare const getFormattedMessage: (message?: MessageProps) => JSX.Element | undefined;
+export declare const getFormattedMessageAsString: (intl: IntlShape, message: MessageDescriptor, context?: string) => string | null;
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getIconWidth: (size?: SmartLinkSize) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;

package/dist/types/view/HoverCard/components/ImagePreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImagePreviewProps } from '../types';
+declare const ImagePreview: React.FC<ImagePreviewProps>;
+export default ImagePreview;

package/dist/types/view/HoverCard/styled.d.ts

@@ -8,3 +8,4 @@ export declare const HoverCardContainer: import("@emotion/react").SerializedStyl
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
 export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const getPreviewBlockStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;

package/dist/types/view/HoverCard/types.d.ts

@@ -92,7 +92,7 @@ export type HoverCardContentProps = {
     onMouseLeave?: MouseEventHandler;
     showServerActions?: boolean;
 };
-export type SnippetOrPreviewProps = {
+export type ImagePreviewProps = {
     data: JsonLd.Data.BaseData;
-    snippetHeight: number;
+    fallbackElementHeight: number;
 };

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/types.d.ts

@@ -182,6 +182,10 @@ export type AttachmentCount = {
  */
 export type AuthorGroup = {
     name: ElementName.AuthorGroup;
+    /**
+     * Shows a name prefix Created by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an OwnedByGroup element.
@@ -189,6 +193,10 @@ export type AuthorGroup = {
  */
 export type OwnedByGroup = {
     name: ElementName.OwnedByGroup;
+    /**
+     * Shows a name prefix Owned by in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an AssignedToGroup element.
@@ -196,6 +204,10 @@ export type OwnedByGroup = {
  */
 export type AssignedToGroup = {
     name: ElementName.AssignedToGroup;
+    /**
+     * Shows a name prefix Assigned To in the Avatar tooltip.
+     */
+    showNamePrefix?: boolean;
 };
 /**
  * Represents the props available for an ChecklistProgress element.

package/dist/types-ts4.5/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -18,4 +18,8 @@ export type AvatarGroupProps = ElementProps & {
      * The maximum number of Avatars to show in the AvatarGroup
      */
     maxCount?: number;
+    /**
+     * Shows a name prefix in the Avatar tooltip (Created by, Assigned To, Owned by)
+     */
+    showNamePrefix?: boolean;
 };

package/dist/types-ts4.5/view/FlexibleCard/components/utils.d.ts

@@ -5,8 +5,10 @@ import { SmartLinkSize } from '../../../constants';
 import { MessageProps } from './types';
 import { AnalyticsFacade } from '../../../state/analytics';
 import { PreviewActionData } from '../../../state/flexible-ui-context/types';
+import { IntlShape, MessageDescriptor } from 'react-intl-next';
 export declare const sizeToButtonSpacing: Record<SmartLinkSize, Spacing>;
 export declare const getFormattedMessage: (message?: MessageProps) => JSX.Element | undefined;
+export declare const getFormattedMessageAsString: (intl: IntlShape, message: MessageDescriptor, context?: string) => string | null;
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getIconWidth: (size?: SmartLinkSize) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;

package/dist/types-ts4.5/view/HoverCard/components/ImagePreview.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImagePreviewProps } from '../types';
+declare const ImagePreview: React.FC<ImagePreviewProps>;
+export default ImagePreview;

package/dist/types-ts4.5/view/HoverCard/styled.d.ts

@@ -8,3 +8,4 @@ export declare const HoverCardContainer: import("@emotion/react").SerializedStyl
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const getTransitionStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;
 export declare const popupContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const getPreviewBlockStyles: (snippetHeight: number) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/view/HoverCard/types.d.ts

@@ -92,7 +92,7 @@ export type HoverCardContentProps = {
     onMouseLeave?: MouseEventHandler;
     showServerActions?: boolean;
 };
-export type SnippetOrPreviewProps = {
+export type ImagePreviewProps = {
     data: JsonLd.Data.BaseData;
-    snippetHeight: number;
+    fallbackElementHeight: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.16.0",
+  "version": "26.17.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/popup": "^1.9.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/tokens": "^1.17.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",

package/report.api.md

@@ -156,6 +156,7 @@ type AssignedTo = {
 // @public
 type AssignedToGroup = {
   name: ElementName.AssignedToGroup;
+  showNamePrefix?: boolean;
 };
 
 // @public
@@ -166,6 +167,7 @@ type AttachmentCount = {
 // @public
 type AuthorGroup = {
   name: ElementName.AuthorGroup;
+  showNamePrefix?: boolean;
 };
 
 // @public
@@ -738,6 +740,7 @@ type OwnedBy = {
 // @public
 type OwnedByGroup = {
   name: ElementName.OwnedByGroup;
+  showNamePrefix?: boolean;
 };
 
 // @public

package/tmp/api-report-tmp.d.ts

@@ -109,6 +109,7 @@ type AssignedTo = {
 // @public
 type AssignedToGroup = {
     name: ElementName.AssignedToGroup;
+    showNamePrefix?: boolean;
 };
 
 // @public
@@ -119,6 +120,7 @@ type AttachmentCount = {
 // @public
 type AuthorGroup = {
     name: ElementName.AuthorGroup;
+    showNamePrefix?: boolean;
 };
 
 // @public
@@ -590,6 +592,7 @@ type OwnedBy = {
 // @public
 type OwnedByGroup = {
     name: ElementName.OwnedByGroup;
+    showNamePrefix?: boolean;
 };
 
 // @public

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

@@ -1,41 +0,0 @@
-import React, { useCallback, useState, useRef } from 'react';
-import { css } from '@emotion/react';
-import extractPreview from '../../../extractors/flexible/extract-preview';
-import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
-import { getTransitionStyles } from '../styled';
-const SnippetOrPreview = ({
-  data,
-  snippetHeight
-}) => {
-  const transitionStarted = useRef(false);
-  const previewBlockRef = useRef(null);
-  const [showSnippet, setShowSnippet] = useState(false);
-  const [previewCss, setPreviewCss] = useState();
-
-  // Set Preview to a fixed height to enable transitions
-  const onPreviewRender = useCallback(() => {
-    var _previewBlockRef$curr;
-    previewBlockRef.current && setPreviewCss(css`
-        height: ${(_previewBlockRef$curr = previewBlockRef.current) === null || _previewBlockRef$curr === void 0 ? void 0 : _previewBlockRef$curr.getBoundingClientRect().height}px;
-      `);
-  }, []);
-
-  // On error set Preview to Snippet height with transition
-  const onPreviewError = useCallback(() => {
-    if (transitionStarted.current === false) {
-      setPreviewCss(getTransitionStyles(snippetHeight));
-      transitionStarted.current = true;
-    }
-  }, [snippetHeight]);
-  const onPreviewTransitionEnd = useCallback(() => {
-    setShowSnippet(true);
-  }, []);
-  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
-    onError: onPreviewError,
-    overrideCss: previewCss,
-    onTransitionEnd: onPreviewTransitionEnd,
-    blockRef: previewBlockRef,
-    onRender: onPreviewRender
-  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-};
-export default SnippetOrPreview;

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

@@ -1,47 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
-import React, { useCallback, useState, useRef } from 'react';
-import { css } from '@emotion/react';
-import extractPreview from '../../../extractors/flexible/extract-preview';
-import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
-import { getTransitionStyles } from '../styled';
-var SnippetOrPreview = function SnippetOrPreview(_ref) {
-  var data = _ref.data,
-    snippetHeight = _ref.snippetHeight;
-  var transitionStarted = useRef(false);
-  var previewBlockRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showSnippet = _useState2[0],
-    setShowSnippet = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    previewCss = _useState4[0],
-    setPreviewCss = _useState4[1];
-
-  // Set Preview to a fixed height to enable transitions
-  var onPreviewRender = useCallback(function () {
-    var _previewBlockRef$curr;
-    previewBlockRef.current && setPreviewCss(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = useCallback(function () {
-    if (transitionStarted.current === false) {
-      setPreviewCss(getTransitionStyles(snippetHeight));
-      transitionStarted.current = true;
-    }
-  }, [snippetHeight]);
-  var onPreviewTransitionEnd = useCallback(function () {
-    setShowSnippet(true);
-  }, []);
-  return !showSnippet && data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, {
-    onError: onPreviewError,
-    overrideCss: previewCss,
-    onTransitionEnd: onPreviewTransitionEnd,
-    blockRef: previewBlockRef,
-    onRender: onPreviewRender
-  }) : /*#__PURE__*/React.createElement(SnippetBlock, null);
-};
-export default SnippetOrPreview;

package/dist/types/view/HoverCard/components/SnippetOrPreview.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SnippetOrPreviewProps } from '../types';
-declare const SnippetOrPreview: React.FC<SnippetOrPreviewProps>;
-export default SnippetOrPreview;

package/dist/types-ts4.5/view/HoverCard/components/SnippetOrPreview.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SnippetOrPreviewProps } from '../types';
-declare const SnippetOrPreview: React.FC<SnippetOrPreviewProps>;
-export default SnippetOrPreview;