@atlaskit/smart-card 26.15.5 → 26.15.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.15.6
+
+### Patch Changes
+
+- [`ba101932150`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba101932150) - [ux] Use semibold font-weight for title in flexible smart cards.
+
 ## 26.15.5
 
 ### Patch Changes

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

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

@@ -83,6 +83,8 @@ var _react = require("@emotion/react");
 var _handlers = require("./utils/handlers");
 var _linkProvider = require("@atlaskit/link-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _styled = require("./views/flexible/styled");
+var _constants = require("../../constants");
 var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
 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; } /** @jsx jsx */
@@ -120,7 +122,12 @@ var BlockCard = function BlockCard(_ref) {
   var enableImprovedPreviewAction = Boolean((0, _linkProvider.useFeatureFlag)('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
     var anchorTarget = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
-    var flexibleProps = _objectSpread({
+    var titleBlockProps = _objectSpread({
+      overrideCss: _styled.titleBlockCss
+    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+      size: _constants.SmartLinkSize.Large
+    });
+    var flexibleBlockCardProps = _objectSpread({
       id: id,
       cardState: cardState,
       url: url,
@@ -133,28 +140,29 @@ var BlockCard = function BlockCard(_ref) {
       renderers: renderers,
       showServerActions: showServerActions,
       analytics: analytics,
-      extensionKey: extensionKey
+      extensionKey: extensionKey,
+      titleBlockProps: titleBlockProps
     }, anchorTarget ? {
       anchorTarget: anchorTarget
     } : {});
     switch (status) {
       case 'pending':
       case 'resolving':
-        return (0, _react.jsx)(_FlexibleResolvedView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleResolvedView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
           testId: 'smart-block-resolving-view'
         }));
       case 'resolved':
-        return (0, _react.jsx)(_FlexibleResolvedView.default, flexibleProps);
+        return (0, _react.jsx)(_FlexibleResolvedView.default, flexibleBlockCardProps);
       case 'unauthorized':
-        return (0, _react.jsx)(_FlexibleUnauthorisedView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleUnauthorisedView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return (0, _react.jsx)(_FlexibleForbiddenView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleForbiddenView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':
-        return (0, _react.jsx)(_FlexibleNotFoundView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleNotFoundView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'fallback':
@@ -174,7 +182,7 @@ var BlockCard = function BlockCard(_ref) {
             testId: "".concat(testId, "-").concat(status)
           });
         }
-        return (0, _react.jsx)(_FlexibleErroredView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleErroredView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
     }

package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
 var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
@@ -33,7 +34,8 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     url = _ref.url,
     onClick = _ref.onClick,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId,
+    titleBlockProps = _ref.titleBlockProps;
   var status = cardState.status;
   var actions = (0, _react.useMemo)(function () {
     return onAuthorize ? [(0, _RetryAction.RetryAction)(onAuthorize)] : [];
@@ -48,10 +50,10 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),

package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
@@ -39,7 +40,8 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onError = _ref.onError,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
-    url = _ref.url;
+    url = _ref.url,
+    titleBlockProps = _ref.titleBlockProps;
   var status = cardState.status;
   var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
@@ -72,10 +74,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),

package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
 var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
@@ -29,7 +30,8 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     url = _ref.url,
     onClick = _ref.onClick,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
+    titleBlockProps = _ref.titleBlockProps;
   var status = cardState.status;
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     appearance: "block",
@@ -42,10 +44,10 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: "not-found-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),

package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -36,7 +36,8 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
     url = _ref.url,
-    analytics = _ref.analytics;
+    analytics = _ref.analytics,
+    titleBlockProps = _ref.titleBlockProps;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
@@ -75,10 +76,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }],
     metadataPosition: _constants.SmartLinkPosition.Top,
     anchorTarget: anchorTarget
-  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-    overrideCss: _styled.titleBlockCss,
-    size: _constants.SmartLinkSize.Large
-  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
+  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, (0, _extends2.default)({
     primary: topMetadata,
     maxLines: 1
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -45,7 +45,8 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     onError = _ref.onError,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
-    url = _ref.url;
+    url = _ref.url,
+    titleBlockProps = _ref.titleBlockProps;
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var providerName = (_extractProvider = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
   var handleAuthorize = (0, _react.useCallback)(function () {
@@ -81,10 +82,10 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+  }, titleBlockProps)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
     overrideCss: contentStyles,
     testId: "".concat(testId, "-content")
   }, /*#__PURE__*/_react.default.createElement("div", null, content)), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {

package/dist/cjs/view/BlockCard/views/flexible/styled.js

@@ -14,7 +14,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 // in editor prosemirror adds padding-left so we need to overwrite it
 var metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n"])));
 exports.metadataBlockCss = metadataBlockCss;
-var titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0.5em;\n"])));
+var titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", (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;
 var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
 var refreshedFlexibleBlockCardStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(_colors.N40, ")"));

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

@@ -6,25 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 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;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _index = require("../../index");
 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;
+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
 var HOVER_CARD_Z_INDEX = _constants2.layers.modal();
 exports.HOVER_CARD_Z_INDEX = HOVER_CARD_Z_INDEX;
-var flexibleUiOptions = {
+var flexibleUiOptions = _objectSpread({
   hideBackground: true,
   hideElevation: true,
   size: _constants.SmartLinkSize.Medium,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: _constants.SmartLinkTheme.Black,
   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
+});
 exports.flexibleUiOptions = flexibleUiOptions;
 var CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card
@@ -37,7 +41,7 @@ var separatorCss = (0, _react.css)(_templateObject || (_templateObject = (0, _ta
 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);
 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"])), blockGap, separatorCss, elementGap);
+var titleBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    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;
 var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);

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

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

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

@@ -23,6 +23,8 @@ import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { titleBlockCss } from './views/flexible/styled';
+import { SmartLinkSize } from '../../constants';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export const BlockCard = ({
@@ -62,7 +64,13 @@ export const BlockCard = ({
   const enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
     const anchorTarget = getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
-    const flexibleProps = {
+    const titleBlockProps = {
+      overrideCss: titleBlockCss,
+      ...(getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+        size: SmartLinkSize.Large
+      })
+    };
+    const flexibleBlockCardProps = {
       id,
       cardState,
       url,
@@ -74,6 +82,7 @@ export const BlockCard = ({
       showServerActions,
       analytics,
       extensionKey,
+      titleBlockProps: titleBlockProps,
       ...(anchorTarget ? {
         anchorTarget
       } : {})
@@ -81,21 +90,21 @@ export const BlockCard = ({
     switch (status) {
       case 'pending':
       case 'resolving':
-        return jsx(FlexibleResolvedView, _extends({}, flexibleProps, {
+        return jsx(FlexibleResolvedView, _extends({}, flexibleBlockCardProps, {
           testId: 'smart-block-resolving-view'
         }));
       case 'resolved':
-        return jsx(FlexibleResolvedView, flexibleProps);
+        return jsx(FlexibleResolvedView, flexibleBlockCardProps);
       case 'unauthorized':
-        return jsx(FlexibleUnauthorisedView, _extends({}, flexibleProps, {
+        return jsx(FlexibleUnauthorisedView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return jsx(FlexibleForbiddenView, _extends({}, flexibleProps, {
+        return jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':
-        return jsx(FlexibleNotFoundView, _extends({}, flexibleProps, {
+        return jsx(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'fallback':
@@ -115,7 +124,7 @@ export const BlockCard = ({
             testId: `${testId}-${status}`
           });
         }
-        return jsx(FlexibleErroredView, _extends({}, flexibleProps, {
+        return jsx(FlexibleErroredView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
     }

package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
@@ -23,7 +24,8 @@ const FlexibleErroredView = ({
   onError,
   url,
   onClick,
-  testId = 'smart-block-errored-view'
+  testId = 'smart-block-errored-view',
+  titleBlockProps
 }) => {
   const status = cardState.status;
   const actions = useMemo(() => onAuthorize ? [RetryAction(onAuthorize)] : [], [onAuthorize]);
@@ -37,10 +39,10 @@ const FlexibleErroredView = ({
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: `var(--ds-icon-warning, ${R300})`,

package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
@@ -27,7 +28,8 @@ const FlexibleForbiddenView = ({
   onClick,
   onError,
   testId = 'smart-block-forbidden-view',
-  url
+  url,
+  titleBlockProps
 }) => {
   var _details$meta;
   const status = cardState.status;
@@ -64,10 +66,10 @@ const FlexibleForbiddenView = ({
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: `var(--ds-icon-danger, ${R300})`,

package/dist/es2019/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
@@ -22,7 +23,8 @@ const FlexibleNotFoundView = ({
   onError,
   url,
   onClick,
-  testId = 'smart-block-not-found-view'
+  testId = 'smart-block-not-found-view',
+  titleBlockProps
 }) => {
   const status = cardState.status;
   return /*#__PURE__*/React.createElement(FlexibleCard, {
@@ -36,10 +38,10 @@ const FlexibleNotFoundView = ({
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "not-found-warning-icon",
     size: "small",
     primaryColor: `var(--ds-icon-warning, ${R300})`,

package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { metadataBlockCss, titleBlockCss } from './styled';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../constants';
+import { metadataBlockCss } from './styled';
+import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import uuid from 'uuid';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -25,7 +25,8 @@ const FlexibleResolvedView = ({
   anchorTarget,
   testId = 'smart-block-resolved-view',
   url,
-  analytics
+  analytics,
+  titleBlockProps
 }) => {
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
   useEffect(() => {
@@ -59,10 +60,7 @@ const FlexibleResolvedView = ({
     }],
     metadataPosition: SmartLinkPosition.Top,
     anchorTarget: anchorTarget
-  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-    overrideCss: titleBlockCss,
-    size: SmartLinkSize.Large
-  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topMetadata,
     maxLines: 1
   }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {

package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -34,7 +34,8 @@ const FlexibleUnauthorisedView = ({
   onClick,
   onError,
   testId = 'smart-block-unauthorized-view',
-  url
+  url,
+  titleBlockProps
 }) => {
   var _cardState$details, _extractProvider;
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
@@ -68,10 +69,10 @@ const FlexibleUnauthorisedView = ({
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: contentStyles,
     testId: `${testId}-content`
   }, /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {

package/dist/es2019/view/BlockCard/views/flexible/styled.js

@@ -13,7 +13,10 @@ export const metadataBlockCss = css`
   }
 `;
 export const titleBlockCss = css`
-  gap: 0.5em;
+  ${getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? `gap: 0.5em;` : ``}
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `[data-smart-element="Title"] {
+          font-weight: 600;
+        }` : ``}
 `;
 const flexibleBlockCardElevationStyle = css`
   border-radius: 1.5px;

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

@@ -3,6 +3,7 @@ import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { layers } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 export const HOVER_CARD_Z_INDEX = layers.modal();
@@ -10,11 +11,12 @@ export const flexibleUiOptions = {
   hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black,
   hidePadding: true,
   hideHoverCardPreviewButton: false,
-  zIndex: HOVER_CARD_Z_INDEX + 1
+  zIndex: HOVER_CARD_Z_INDEX + 1,
+  ...(!getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+    theme: SmartLinkTheme.Black
+  })
 };
 export const CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card
@@ -54,6 +56,10 @@ export const titleBlockCss = css`
       }
     }
   }
+
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `[data-smart-element="Title"] {
+          font-weight: 600;
+        }` : ``}
 `;
 export const getTransitionStyles = snippetHeight => css`
   transition: height 300ms ease-in-out;

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.15.5",
+  packageVersion: "26.15.6",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

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

@@ -26,6 +26,8 @@ import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { titleBlockCss } from './views/flexible/styled';
+import { SmartLinkSize } from '../../constants';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export var BlockCard = function BlockCard(_ref) {
@@ -62,7 +64,12 @@ export var BlockCard = function BlockCard(_ref) {
   var enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
     var anchorTarget = getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
-    var flexibleProps = _objectSpread({
+    var titleBlockProps = _objectSpread({
+      overrideCss: titleBlockCss
+    }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+      size: SmartLinkSize.Large
+    });
+    var flexibleBlockCardProps = _objectSpread({
       id: id,
       cardState: cardState,
       url: url,
@@ -75,28 +82,29 @@ export var BlockCard = function BlockCard(_ref) {
       renderers: renderers,
       showServerActions: showServerActions,
       analytics: analytics,
-      extensionKey: extensionKey
+      extensionKey: extensionKey,
+      titleBlockProps: titleBlockProps
     }, anchorTarget ? {
       anchorTarget: anchorTarget
     } : {});
     switch (status) {
       case 'pending':
       case 'resolving':
-        return jsx(FlexibleResolvedView, _extends({}, flexibleProps, {
+        return jsx(FlexibleResolvedView, _extends({}, flexibleBlockCardProps, {
           testId: 'smart-block-resolving-view'
         }));
       case 'resolved':
-        return jsx(FlexibleResolvedView, flexibleProps);
+        return jsx(FlexibleResolvedView, flexibleBlockCardProps);
       case 'unauthorized':
-        return jsx(FlexibleUnauthorisedView, _extends({}, flexibleProps, {
+        return jsx(FlexibleUnauthorisedView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return jsx(FlexibleForbiddenView, _extends({}, flexibleProps, {
+        return jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':
-        return jsx(FlexibleNotFoundView, _extends({}, flexibleProps, {
+        return jsx(FlexibleNotFoundView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'fallback':
@@ -116,7 +124,7 @@ export var BlockCard = function BlockCard(_ref) {
             testId: "".concat(testId, "-").concat(status)
           });
         }
-        return jsx(FlexibleErroredView, _extends({}, flexibleProps, {
+        return jsx(FlexibleErroredView, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
     }

package/dist/esm/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
@@ -24,7 +25,8 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     url = _ref.url,
     onClick = _ref.onClick,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-block-errored-view' : _ref$testId,
+    titleBlockProps = _ref.titleBlockProps;
   var status = cardState.status;
   var actions = useMemo(function () {
     return onAuthorize ? [RetryAction(onAuthorize)] : [];
@@ -39,10 +41,10 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),

package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
@@ -30,7 +31,8 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onError = _ref.onError,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
-    url = _ref.url;
+    url = _ref.url,
+    titleBlockProps = _ref.titleBlockProps;
   var status = cardState.status;
   var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
@@ -63,10 +65,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),

package/dist/esm/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
@@ -23,7 +24,8 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     url = _ref.url,
     onClick = _ref.onClick,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
+    titleBlockProps = _ref.titleBlockProps;
   var status = cardState.status;
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
@@ -36,10 +38,10 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "not-found-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),

package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -4,8 +4,8 @@ import React, { useEffect, useState } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock } from '../../../FlexibleCard/components/blocks';
-import { metadataBlockCss, titleBlockCss } from './styled';
-import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../constants';
+import { metadataBlockCss } from './styled';
+import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition } from '../../../../constants';
 import uuid from 'uuid';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -27,7 +27,8 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
     url = _ref.url,
-    analytics = _ref.analytics;
+    analytics = _ref.analytics,
+    titleBlockProps = _ref.titleBlockProps;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
@@ -66,10 +67,7 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }],
     metadataPosition: SmartLinkPosition.Top,
     anchorTarget: anchorTarget
-  }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
-    overrideCss: titleBlockCss,
-    size: SmartLinkSize.Large
-  })), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
     primary: topMetadata,
     maxLines: 1
   }, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {

package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -35,7 +35,8 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     onError = _ref.onError,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
-    url = _ref.url;
+    url = _ref.url,
+    titleBlockProps = _ref.titleBlockProps;
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
   var handleAuthorize = useCallback(function () {
@@ -71,10 +72,10 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
       hideElevation: true
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, {
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }), /*#__PURE__*/React.createElement(CustomBlock, {
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, {
     overrideCss: contentStyles,
     testId: "".concat(testId, "-content")
   }, /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {

package/dist/esm/view/BlockCard/views/flexible/styled.js

@@ -7,7 +7,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // in editor prosemirror adds padding-left so we need to overwrite it
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n"])));
-export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: 0.5em;\n"])));
+export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? "gap: 0.5em;" : "", getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "[data-smart-element=\"Title\"] {\n          font-weight: 600;\n        }" : "");
 var flexibleBlockCardElevationStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 var refreshedFlexibleBlockCardStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(N40, ")"));
 export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

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

@@ -1,23 +1,27 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { layers } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 export var HOVER_CARD_Z_INDEX = layers.modal();
-export var flexibleUiOptions = {
+export var flexibleUiOptions = _objectSpread({
   hideBackground: true,
   hideElevation: true,
   size: SmartLinkSize.Medium,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  theme: SmartLinkTheme.Black,
   hidePadding: true,
   hideHoverCardPreviewButton: false,
   zIndex: HOVER_CARD_Z_INDEX + 1
-};
+}, !getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
+  theme: SmartLinkTheme.Black
+});
 export var CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card
 export var CARD_GAP_PX = 10;
@@ -25,7 +29,7 @@ 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"])), elementGap);
 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 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"])), blockGap, separatorCss, elementGap);
+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);
 };

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

package/dist/types/view/BlockCard/views/flexible/types.d.ts

@@ -6,6 +6,7 @@ import { OnResolveCallback } from '../../../Card/types';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { AnalyticsFacade } from '../../../../state/analytics';
 import { AnchorTarget } from '../../../FlexibleCard/components/types';
+import { TitleBlockProps } from '../../../FlexibleCard/components/blocks/title-block/types';
 export type FlexibleBlockCardProps = {
     /**
      * An AnalyticsFacade object used for calling analytics.
@@ -75,4 +76,8 @@ export type FlexibleBlockCardProps = {
      * Determines the URL of the Smart Link.
      */
     url: string;
+    /**
+     * Determines a style of the Title Block.
+     */
+    titleBlockProps?: TitleBlockProps;
 };

package/dist/types-ts4.5/view/BlockCard/views/flexible/types.d.ts

@@ -6,6 +6,7 @@ import { OnResolveCallback } from '../../../Card/types';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { AnalyticsFacade } from '../../../../state/analytics';
 import { AnchorTarget } from '../../../FlexibleCard/components/types';
+import { TitleBlockProps } from '../../../FlexibleCard/components/blocks/title-block/types';
 export type FlexibleBlockCardProps = {
     /**
      * An AnalyticsFacade object used for calling analytics.
@@ -75,4 +76,8 @@ export type FlexibleBlockCardProps = {
      * Determines the URL of the Smart Link.
      */
     url: string;
+    /**
+     * Determines a style of the Title Block.
+     */
+    titleBlockProps?: TitleBlockProps;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.15.5",
+  "version": "26.15.6",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/avatar-group": "^9.3.0",
+    "@atlaskit/avatar-group": "^9.4.0",
     "@atlaskit/badge": "^15.1.0",
     "@atlaskit/button": "^16.9.0",
     "@atlaskit/dropdown-menu": "^11.11.0",

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/smart-card",
-	"version": "26.15.5",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/smart-card",
-	"version": "26.15.5",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/smart-card",
-	"version": "26.15.5",
-	"sideEffects": false
-}