@atlaskit/smart-card 26.15.11 → 26.16.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 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
+
+- [`b73f38b2588`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b73f38b2588) - Add new FlexUI element - SentOn
+
 ## 26.15.11
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -141,6 +141,7 @@ var ElementName = /*#__PURE__*/function (ElementName) {
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
+  ElementName["SentOn"] = "SentOn";
   return ElementName;
 }({});
 /**

package/dist/cjs/extractors/flexible/index.js

@@ -60,6 +60,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext() {
     provider: (0, _extractProviderIcon.default)(data),
     programmingLanguage: (0, _utils.extractProgrammingLanguage)(data),
     readTime: (0, _utils.extractReadTime)(data),
+    sentOn: (0, _utils.extractSentOn)(data),
     snippet: (0, _primitives.extractSummary)(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: (0, _utils.extractSourceBranch)(data),

package/dist/cjs/extractors/flexible/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSubTasksProgress = exports.extractStoryPoints = exports.extractSourceBranch = exports.extractReadTime = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractPersonAssignedToAsArray = exports.extractOwnedBy = exports.extractModifiedBy = exports.extractLocation = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractChecklistProgress = exports.extractAttachmentCount = exports.extractAssignedTo = void 0;
+exports.extractVoteCount = exports.extractViewCount = exports.extractTargetBranch = exports.extractSubscriberCount = exports.extractSubTasksProgress = exports.extractStoryPoints = exports.extractSourceBranch = exports.extractSentOn = exports.extractReadTime = exports.extractReactCount = exports.extractProgrammingLanguage = exports.extractPersonAssignedToAsArray = exports.extractOwnedBy = exports.extractModifiedBy = exports.extractLocation = exports.extractDueOn = exports.extractCreatedBy = exports.extractCommentCount = exports.extractChecklistProgress = exports.extractAttachmentCount = exports.extractAssignedTo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _linkExtractors = require("@atlaskit/link-extractors");
 var extractLinkName = function extractLinkName(link) {
@@ -114,6 +114,10 @@ var extractReadTime = function extractReadTime(data) {
   return extractValue(data, 'atlassian:readTimeInMinutes');
 };
 exports.extractReadTime = extractReadTime;
+var extractSentOn = function extractSentOn(data) {
+  return extractValue(data, 'dateSent');
+};
+exports.extractSentOn = extractSentOn;
 var extractStoryPoints = function extractStoryPoints(data) {
   return extractValue(data, 'atlassian:storyPoints');
 };

package/dist/cjs/messages.js

@@ -366,6 +366,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Save',
     description: 'Just the "save" word'
   },
+  sent_on_relative: {
+    id: 'fabric.linking.sent_on_relative',
+    defaultMessage: 'Sent {context}',
+    description: 'Indicated when entity was sent (relative form)'
+  },
+  sent_on_absolute: {
+    id: 'fabric.linking.sent_on_absolute',
+    defaultMessage: 'Sent on {context}',
+    description: 'Indicated when entity was sent (absolute form)'
+  },
   status_change_load_error: {
     id: 'fabric.linking.status_change_load_error',
     defaultMessage: 'We couldn’t load the statuses and transitions',

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.15.11"
+  packageVersion: "26.16.1"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

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

@@ -24,7 +24,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; }
 // Determine whether the element can be display as inline/block.
 
-var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AssignedTo, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AssignedToGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Location, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedByGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReadTime, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubTasksProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.StoryPoints, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
+var ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AssignedTo, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AssignedToGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Location, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.OwnedByGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReadTime, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SentOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubTasksProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.StoryPoints, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {

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

@@ -25,6 +25,10 @@ var typeToDescriptorMap = {
   modified: {
     relative: _messages.messages.modified_on_relative,
     absolute: _messages.messages.modified_on_absolute
+  },
+  sent: {
+    relative: _messages.messages.sent_on_relative,
+    absolute: _messages.messages.sent_on_absolute
   }
 };
 
@@ -34,6 +38,7 @@ var typeToDescriptorMap = {
  * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn
+ * @see SentOn
  */
 var DateTime = function DateTime(_ref) {
   var date = _ref.date,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.SubTasksProgress = exports.StoryPoints = exports.State = exports.SourceBranch = exports.Snippet = exports.ReadTime = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.OwnedByGroup = exports.OwnedBy = exports.ModifiedOn = exports.ModifiedBy = exports.Location = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = exports.AssignedToGroup = exports.AssignedTo = void 0;
+exports.VoteCount = exports.ViewCount = exports.Title = exports.TargetBranch = exports.SubscriberCount = exports.SubTasksProgress = exports.StoryPoints = exports.State = exports.SourceBranch = exports.Snippet = exports.SentOn = exports.ReadTime = exports.ReactCount = exports.Provider = exports.ProgrammingLanguage = exports.Priority = exports.Preview = exports.OwnedByGroup = exports.OwnedBy = exports.ModifiedOn = exports.ModifiedBy = exports.Location = exports.LinkIcon = exports.LatestCommit = exports.DueOn = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.ChecklistProgress = exports.AuthorGroup = exports.AttachmentCount = exports.AssignedToGroup = exports.AssignedTo = void 0;
 var _utils = require("./utils");
 var _constants = require("../../../../constants");
 // Attention: Keep the export name and element name the same.
@@ -145,11 +145,17 @@ var ReactCount = (0, _utils.createElement)(_constants.ElementName.ReactCount);
  */
 exports.ReactCount = ReactCount;
 var ReadTime = (0, _utils.createElement)(_constants.ElementName.ReadTime);
+/**
+ * Creates a SentOn DateTime element using the data from SentOn in the Flexible UI Context.
+ * @see DateTime
+ */
+exports.ReadTime = ReadTime;
+var SentOn = (0, _utils.createElement)(_constants.ElementName.SentOn);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
  */
-exports.ReadTime = ReadTime;
+exports.SentOn = SentOn;
 var Snippet = (0, _utils.createElement)(_constants.ElementName.Snippet);
 /**
  * Creates a SourceBranch Text element using the data from sourceBranch in the Flexible UI Context.

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

@@ -102,6 +102,8 @@ var elementMappings = (_elementMappings = {}, (0, _defineProperty2.default)(_ele
   component: _badge.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.ReadTime, {
   component: _text.default
+}), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.SentOn, {
+  component: _dateTime.default
 }), (0, _defineProperty2.default)(_elementMappings, _constants.ElementName.Snippet, {
   component: _text.default,
   props: {
@@ -177,6 +179,8 @@ var getData = function getData(elementName, contextKey, context) {
       return toFormattedTextProps(_messages.messages.modified_by, context.modifiedBy);
     case _constants.ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
+    case _constants.ElementName.SentOn:
+      return toDateTimeProps('sent', context.sentOn);
     case _constants.ElementName.ReadTime:
       return toFormattedTextProps(_messages.messages.read_time, data);
     case _constants.ElementName.Snippet:

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.15.11",
+  packageVersion: "26.16.1",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/constants.js

@@ -133,6 +133,7 @@ export let ElementName = /*#__PURE__*/function (ElementName) {
   ElementName["Title"] = "Title";
   ElementName["ViewCount"] = "ViewCount";
   ElementName["VoteCount"] = "VoteCount";
+  ElementName["SentOn"] = "SentOn";
   return ElementName;
 }({});
 

package/dist/es2019/extractors/flexible/index.js

@@ -1,6 +1,6 @@
 import { extractSummary } from '../common/primitives';
 import { extractLinkIcon } from './icon';
-import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy, extractAssignedTo, extractSubTasksProgress, extractStoryPoints, extractReadTime, extractPersonAssignedToAsArray } from './utils';
+import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn, extractLocation, extractOwnedBy, extractAssignedTo, extractSubTasksProgress, extractStoryPoints, extractReadTime, extractSentOn, extractPersonAssignedToAsArray } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
 import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink, extractPersonOwnedBy } from '@atlaskit/link-extractors';
 import extractPriority from './extract-priority';
@@ -53,6 +53,7 @@ const extractFlexibleUiContext = ({
     provider: extractProviderIcon(data),
     programmingLanguage: extractProgrammingLanguage(data),
     readTime: extractReadTime(data),
+    sentOn: extractSentOn(data),
     snippet: extractSummary(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: extractSourceBranch(data),

package/dist/es2019/extractors/flexible/utils.js

@@ -68,6 +68,9 @@ export const extractSubTasksProgress = data => {
 export const extractReadTime = data => {
   return extractValue(data, 'atlassian:readTimeInMinutes');
 };
+export const extractSentOn = data => {
+  return extractValue(data, 'dateSent');
+};
 export const extractStoryPoints = data => {
   return extractValue(data, 'atlassian:storyPoints');
 };

package/dist/es2019/messages.js

@@ -360,6 +360,16 @@ export const messages = defineMessages({
     defaultMessage: 'Save',
     description: 'Just the "save" word'
   },
+  sent_on_relative: {
+    id: 'fabric.linking.sent_on_relative',
+    defaultMessage: 'Sent {context}',
+    description: 'Indicated when entity was sent (relative form)'
+  },
+  sent_on_absolute: {
+    id: 'fabric.linking.sent_on_absolute',
+    defaultMessage: 'Sent on {context}',
+    description: 'Indicated when entity was sent (absolute form)'
+  },
   status_change_load_error: {
     id: 'fabric.linking.status_change_load_error',
     defaultMessage: 'We couldn’t load the statuses and transitions',

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.15.11"
+  packageVersion: "26.16.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -35,6 +35,7 @@ export const ElementDisplaySchema = {
   [ElementName.ReadTime]: ['inline'],
   [ElementName.Snippet]: ['block'],
   [ElementName.SourceBranch]: ['inline'],
+  [ElementName.SentOn]: ['inline'],
   [ElementName.State]: ['inline'],
   [ElementName.SubscriberCount]: ['inline'],
   [ElementName.SubTasksProgress]: ['inline'],

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

@@ -21,6 +21,10 @@ const typeToDescriptorMap = {
   modified: {
     relative: messages.modified_on_relative,
     absolute: messages.modified_on_absolute
+  },
+  sent: {
+    relative: messages.sent_on_relative,
+    absolute: messages.sent_on_absolute
   }
 };
 
@@ -30,6 +34,7 @@ const typeToDescriptorMap = {
  * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn
+ * @see SentOn
  */
 const DateTime = ({
   date,

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -117,6 +117,11 @@ export const ReactCount = createElement(ElementName.ReactCount);
  * Creates a ReadTime Text element using the data from readTime in the Flexible UI Context
  */
 export const ReadTime = createElement(ElementName.ReadTime);
+/**
+ * Creates a SentOn DateTime element using the data from SentOn in the Flexible UI Context.
+ * @see DateTime
+ */
+export const SentOn = createElement(ElementName.SentOn);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text

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

@@ -113,6 +113,9 @@ const elementMappings = {
   [ElementName.ReadTime]: {
     component: Text
   },
+  [ElementName.SentOn]: {
+    component: DateTime
+  },
   [ElementName.Snippet]: {
     component: Text,
     props: {
@@ -199,6 +202,8 @@ const getData = (elementName, contextKey, context) => {
       return toFormattedTextProps(messages.modified_by, context.modifiedBy);
     case ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
+    case ElementName.SentOn:
+      return toDateTimeProps('sent', context.sentOn);
     case ElementName.ReadTime:
       return toFormattedTextProps(messages.read_time, data);
     case ElementName.Snippet:

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};
+        }` : ``}
 `;