@atlaskit/smart-card 26.34.1 → 26.34.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.34.2
+
+### Patch Changes
+
+- [#41147](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41147) [`38e8635bbf9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/38e8635bbf9) - [ux] Update block card view styling behind cross-join feature flag
+
 ## 26.34.1
 
 ### Patch Changes

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

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.34.1"
+  packageVersion: "26.34.2"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -18,15 +18,14 @@ var _messages = require("../../../../messages");
  * @param content is a message key for a message to be displayed in the action
  * @param context is a variable for a message in case a message contains a placeholder
  */
-var ForbiddenAction = exports.ForbiddenAction = function ForbiddenAction(onClick, content, context) {
+var ForbiddenAction = exports.ForbiddenAction = function ForbiddenAction(onClick, content, context, isDisabled) {
   return {
     name: _constants.ActionName.CustomAction,
     content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[content], {
-      values: {
-        context: context
-      }
+      values: context
     })),
     onClick: onClick,
-    testId: 'smart-action-connect-other-account'
+    testId: 'smart-action-connect-other-account',
+    isDisabled: isDisabled
   };
 };

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

@@ -77,8 +77,9 @@ var _ErroredView = require("./views/ErroredView");
 var _FlexibleResolvedView = _interopRequireDefault(require("./views/flexible/FlexibleResolvedView"));
 var _FlexibleUnauthorisedView = _interopRequireDefault(require("./views/flexible/FlexibleUnauthorisedView"));
 var _FlexibleNotFoundView = _interopRequireDefault(require("./views/flexible/FlexibleNotFoundView"));
-var _FlexibleErroredView = _interopRequireDefault(require("./views/flexible/FlexibleErroredView"));
 var _FlexibleForbiddenView = _interopRequireDefault(require("./views/flexible/FlexibleForbiddenView"));
+var _FlexibleForbiddenViewOld = _interopRequireDefault(require("./views/flexible/FlexibleForbiddenViewOld"));
+var _FlexibleErroredView = _interopRequireDefault(require("./views/flexible/FlexibleErroredView"));
 var _react = require("@emotion/react");
 var _handlers = require("./utils/handlers");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -156,7 +157,9 @@ var BlockCard = exports.BlockCard = function BlockCard(_ref) {
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return (0, _react.jsx)(_FlexibleForbiddenView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
+        return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.cross-join') ? (0, _react.jsx)(_FlexibleForbiddenView.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
+          onAuthorize: handleAuthorize
+        })) : (0, _react.jsx)(_FlexibleForbiddenViewOld.default, (0, _extends2.default)({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':

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

@@ -10,18 +10,21 @@ 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"));
-var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
 var _blocks = require("../../../FlexibleCard/components/blocks");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../../messages");
-var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
 var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
 var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+var _constants = require("../../../../constants");
 var _jsonld = require("../../../../utils/jsonld");
 var _linkExtractors = require("@atlaskit/link-extractors");
-var _context = require("../../../../extractors/common/context");
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
+var _extractAccessContext = require("../../../../extractors/common/context/extractAccessContext");
+var _reactIntlNext = require("react-intl-next");
+var _styled = require("./styled");
+var _extractHostname = _interopRequireDefault(require("../../../../extractors/common/hostname/extractHostname"));
 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; }
 /**
@@ -47,22 +50,34 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
   var provider = (0, _linkExtractors.extractProvider)(details === null || details === void 0 ? void 0 : details.data);
   var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
-  var requestAccessContext = (0, _context.extractRequestAccessContext)({
-    jsonLd: cardMetadata,
-    url: url,
-    context: providerName
-  });
+  var messageContext = (0, _react.useMemo)(function () {
+    var hostname = /*#__PURE__*/_react.default.createElement("b", null, (0, _extractHostname.default)(url));
+    return {
+      product: providerName,
+      hostname: hostname
+    };
+  }, [providerName, url]);
+  var requestAccessContext = (0, _react.useMemo)(function () {
+    return (0, _extractAccessContext.extractRequestAccessContextImproved)({
+      jsonLd: cardMetadata,
+      url: url,
+      product: providerName
+    });
+  }, [cardMetadata, providerName, url]);
   var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  var _ref2 = requestAccessContext !== null && requestAccessContext !== void 0 ? requestAccessContext : {},
+    titleMessageKey = _ref2.titleMessageKey,
+    buttonDisabled = _ref2.buttonDisabled;
   var actions = (0, _react.useMemo)(function () {
     var actionFromAccessContext = [];
     var tryAnotherAccountAction = onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize, 'try_another_account')] : [];
     if (requestAccessContext) {
       var action = requestAccessContext.action,
         callToActionMessageKey = requestAccessContext.callToActionMessageKey;
-      actionFromAccessContext = action && callToActionMessageKey ? [(0, _ForbiddenAction.ForbiddenAction)(action.promise, callToActionMessageKey, providerName)] : [];
+      actionFromAccessContext = action && callToActionMessageKey ? [(0, _ForbiddenAction.ForbiddenAction)(action.promise, callToActionMessageKey, messageContext, buttonDisabled)] : [];
     }
     return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
-  }, [onAuthorize, requestAccessContext, providerName]);
+  }, [onAuthorize, requestAccessContext, messageContext, buttonDisabled]);
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -71,25 +86,36 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onError: onError,
     testId: testId,
     ui: {
-      hideElevation: true
+      hideElevation: true,
+      size: _constants.SmartLinkSize.Medium
     },
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
+  }, titleMessageKey ? /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: _styled.forbiddenViewTitleStyle,
+    testId: "".concat(testId, "-title")
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    target: anchorTarget,
+    href: url
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[titleMessageKey], {
+    values: messageContext
+  })))) : /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({
     hideRetry: true,
     anchorTarget: anchorTarget
-  }, titleBlockProps)), /*#__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(_lock.default, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    maxLines: 2,
     message: {
       descriptor: _messages.messages[descriptiveMessageKey],
-      values: {
-        context: providerName
-      }
+      values: messageContext
     }
-  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+  })), /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, {
+    placement: _constants.MediaPlacement.Right,
+    ignoreContainerPadding: true
+  }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
     actions: actions,
     status: status
   })));

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _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"));
+var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/components/blocks/title-block"));
+var _blocks = require("../../../FlexibleCard/components/blocks");
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../../../../messages");
+var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
+var _ForbiddenAction = require("../../actions/flexible/ForbiddenAction");
+var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+var _jsonld = require("../../../../utils/jsonld");
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _context = require("../../../../extractors/common/context");
+var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
+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; }
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var _details$meta;
+  var anchorTarget = _ref.anchorTarget,
+    cardState = _ref.cardState,
+    onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
+    onError = _ref.onError,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
+    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;
+  var provider = (0, _linkExtractors.extractProvider)(details === null || details === void 0 ? void 0 : details.data);
+  var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  var requestAccessContext = (0, _context.extractRequestAccessContext)({
+    jsonLd: cardMetadata,
+    url: url,
+    context: providerName
+  });
+  var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  var actions = (0, _react.useMemo)(function () {
+    var actionFromAccessContext = [];
+    var tryAnotherAccountAction = onAuthorize ? [(0, _ForbiddenAction.ForbiddenAction)(onAuthorize, 'try_another_account')] : [];
+    if (requestAccessContext) {
+      var action = requestAccessContext.action,
+        callToActionMessageKey = requestAccessContext.callToActionMessageKey;
+      actionFromAccessContext = action && callToActionMessageKey ? [(0, _ForbiddenAction.ForbiddenAction)(action.promise, callToActionMessageKey, {
+        context: providerName
+      })] : [];
+    }
+    return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
+  }, [onAuthorize, requestAccessContext, providerName]);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: {
+      hideElevation: true
+    },
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
+    hideRetry: true,
+    anchorTarget: anchorTarget
+  }, 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, ")"),
+    testId: "".concat(testId, "-lock-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: {
+      descriptor: _messages.messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_footer.default, {
+    actions: actions,
+    status: status
+  })));
+};
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleForbiddenView);

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

@@ -4,17 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.metadataBlockCss = exports.footerBlockCss = exports.flexibleBlockCardStyle = void 0;
+exports.titleBlockCss = exports.metadataBlockCss = exports.forbiddenViewTitleStyle = exports.footerBlockCss = exports.flexibleBlockCardStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _token = require("../../../../utils/token");
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 // in editor prosemirror adds padding-left so we need to overwrite it
 var metadataBlockCss = exports.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  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])));
 var titleBlockCss = exports.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        }" : "");
 var footerBlockCss = exports.footerBlockCss = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
 var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (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)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"));
-var flexibleBlockCardStyle = exports.flexibleBlockCardStyle = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+var flexibleBlockCardStyle = exports.flexibleBlockCardStyle = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+var forbiddenViewTitleStyle = exports.forbiddenViewTitleStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n"])));

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

@@ -16,6 +16,7 @@ var _linkExtractors = require("@atlaskit/link-extractors");
 var _styled = require("./styled");
 var _styled2 = require("../../../styled");
 var _extractAccessContext = require("../../../../../extractors/common/context/extractAccessContext");
+var _extractHostname = _interopRequireDefault(require("../../../../../extractors/common/hostname/extractHostname"));
 var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
   var flexibleCardProps = _ref.flexibleCardProps,
@@ -26,7 +27,7 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   var product = (_extractProvider$text = (_extractProvider = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  var hostname = /*#__PURE__*/_react.default.createElement("b", null, new URL(url).hostname);
+  var hostname = /*#__PURE__*/_react.default.createElement("b", null, (0, _extractHostname.default)(url));
   var _ref2 = (_extractRequestAccess = (0, _extractAccessContext.extractRequestAccessContextImproved)({
       jsonLd: meta,
       url: url,

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

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

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

package/dist/es2019/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -12,13 +12,12 @@ import { messages } from '../../../../messages';
  * @param content is a message key for a message to be displayed in the action
  * @param context is a variable for a message in case a message contains a placeholder
  */
-export const ForbiddenAction = (onClick, content, context) => ({
+export const ForbiddenAction = (onClick, content, context, isDisabled) => ({
   name: ActionName.CustomAction,
   content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
-    values: {
-      context
-    }
+    values: context
   })),
   onClick,
-  testId: 'smart-action-connect-other-account'
+  testId: 'smart-action-connect-other-account',
+  isDisabled
 });

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

@@ -17,8 +17,9 @@ import { ErroredView as BlockCardErroredView } from './views/ErroredView';
 import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
 import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
 import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
-import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
+import FlexibleForbiddenViewOld from './views/flexible/FlexibleForbiddenViewOld';
+import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -98,7 +99,9 @@ export const BlockCard = ({
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+          onAuthorize: handleAuthorize
+        })) : jsx(FlexibleForbiddenViewOld, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':

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

@@ -1,18 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { CustomBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockIcon from '@atlaskit/icon/glyph/lock';
 import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
+import { MediaPlacement, SmartLinkSize } from '../../../../constants';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
-import { extractRequestAccessContext } from '../../../../extractors/common/context';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
+import { FormattedMessage } from 'react-intl-next';
+import { forbiddenViewTitleStyle } from './styled';
+import extractHostname from '../../../../extractors/common/hostname/extractHostname';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -37,12 +40,25 @@ const FlexibleForbiddenView = ({
   const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
   const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
   const providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
-  const requestAccessContext = extractRequestAccessContext({
-    jsonLd: cardMetadata,
-    url,
-    context: providerName
-  });
+  const messageContext = useMemo(() => {
+    const hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
+    return {
+      product: providerName,
+      hostname
+    };
+  }, [providerName, url]);
+  const requestAccessContext = useMemo(() => {
+    return extractRequestAccessContextImproved({
+      jsonLd: cardMetadata,
+      url,
+      product: providerName
+    });
+  }, [cardMetadata, providerName, url]);
   const descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  const {
+    titleMessageKey,
+    buttonDisabled
+  } = requestAccessContext !== null && requestAccessContext !== void 0 ? requestAccessContext : {};
   const actions = useMemo(() => {
     let actionFromAccessContext = [];
     const tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
@@ -51,10 +67,10 @@ const FlexibleForbiddenView = ({
         action,
         callToActionMessageKey
       } = requestAccessContext;
-      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, providerName)] : [];
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, messageContext, buttonDisabled)] : [];
     }
     return [...tryAnotherAccountAction, ...actionFromAccessContext];
-  }, [onAuthorize, requestAccessContext, providerName]);
+  }, [onAuthorize, requestAccessContext, messageContext, buttonDisabled]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -63,10 +79,19 @@ const FlexibleForbiddenView = ({
     onError: onError,
     testId: testId,
     ui: {
-      hideElevation: true
+      hideElevation: true,
+      size: SmartLinkSize.Medium
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
+  }, titleMessageKey ? /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: forbiddenViewTitleStyle,
+    testId: `${testId}-title`
+  }, /*#__PURE__*/React.createElement("a", {
+    target: anchorTarget,
+    href: url
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
+    values: messageContext
+  })))) : /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
   }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
@@ -75,13 +100,15 @@ const FlexibleForbiddenView = ({
     primaryColor: `var(--ds-icon-danger, ${R300})`,
     testId: `${testId}-lock-icon`
   }), /*#__PURE__*/React.createElement(Text, {
+    maxLines: 2,
     message: {
       descriptor: messages[descriptiveMessageKey],
-      values: {
-        context: providerName
-      }
+      values: messageContext
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  })), /*#__PURE__*/React.createElement(PreviewBlock, {
+    placement: MediaPlacement.Right,
+    ignoreContainerPadding: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

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

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { R300 } from '@atlaskit/theme/colors';
+import { messages } from '../../../../messages';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import BlockCardFooter from '../../components/flexible/footer';
+import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
+import Text from '../../../FlexibleCard/components/elements/text';
+import { getForbiddenJsonLd } from '../../../../utils/jsonld';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { extractRequestAccessContext } from '../../../../extractors/common/context';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+const FlexibleForbiddenView = ({
+  anchorTarget,
+  cardState,
+  onAuthorize,
+  onClick,
+  onError,
+  testId = 'smart-block-forbidden-view',
+  url,
+  titleBlockProps
+}) => {
+  var _details$meta;
+  const status = cardState.status;
+  const details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
+  const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
+  const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
+  const providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  const requestAccessContext = extractRequestAccessContext({
+    jsonLd: cardMetadata,
+    url,
+    context: providerName
+  });
+  const descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  const actions = useMemo(() => {
+    let actionFromAccessContext = [];
+    const tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
+    if (requestAccessContext) {
+      const {
+        action,
+        callToActionMessageKey
+      } = requestAccessContext;
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, {
+        context: providerName
+      })] : [];
+    }
+    return [...tryAnotherAccountAction, ...actionFromAccessContext];
+  }, [onAuthorize, requestAccessContext, providerName]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: {
+      hideElevation: true
+    },
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
+    hideRetry: true,
+    anchorTarget: anchorTarget
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
+    label: "forbidden-lock-icon",
+    size: "small",
+    primaryColor: `var(--ds-icon-danger, ${R300})`,
+    testId: `${testId}-lock-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
+    }
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+    actions: actions,
+    status: status
+  })));
+};
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+export default withFlexibleUIBlockCardStyle(FlexibleForbiddenView);

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

@@ -44,4 +44,7 @@ const refreshedFlexibleBlockCardStyle = css`
     border: 1px solid ${`var(--ds-border, ${N40})`};
   }
 `;
-export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+export const forbiddenViewTitleStyle = css`
+  font-weight: 600;
+`;

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

@@ -9,6 +9,7 @@ import { extractProvider } from '@atlaskit/link-extractors';
 import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
 import { getPreviewBlockStyles } from '../../../styled';
 import { extractRequestAccessContextImproved } from '../../../../../extractors/common/context/extractAccessContext';
+import extractHostname from '../../../../../extractors/common/hostname/extractHostname';
 const HoverCardForbiddenView = ({
   flexibleCardProps,
   testId = 'hover-card-forbidden-view'
@@ -21,7 +22,7 @@ const HoverCardForbiddenView = ({
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   const meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   const product = (_extractProvider$text = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  const hostname = /*#__PURE__*/React.createElement("b", null, new URL(url).hostname);
+  const hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
   const {
     action,
     descriptiveMessageKey,

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

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

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

package/dist/esm/view/BlockCard/actions/flexible/ForbiddenAction.js

@@ -12,15 +12,14 @@ import { messages } from '../../../../messages';
  * @param content is a message key for a message to be displayed in the action
  * @param context is a variable for a message in case a message contains a placeholder
  */
-export var ForbiddenAction = function ForbiddenAction(onClick, content, context) {
+export var ForbiddenAction = function ForbiddenAction(onClick, content, context, isDisabled) {
   return {
     name: ActionName.CustomAction,
     content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[content], {
-      values: {
-        context: context
-      }
+      values: context
     })),
     onClick: onClick,
-    testId: 'smart-action-connect-other-account'
+    testId: 'smart-action-connect-other-account',
+    isDisabled: isDisabled
   };
 };

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

@@ -20,8 +20,9 @@ import { ErroredView as BlockCardErroredView } from './views/ErroredView';
 import FlexibleResolvedView from './views/flexible/FlexibleResolvedView';
 import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView';
 import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
-import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
+import FlexibleForbiddenViewOld from './views/flexible/FlexibleForbiddenViewOld';
+import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -98,7 +99,9 @@ export var BlockCard = function BlockCard(_ref) {
           onAuthorize: handleAuthorize
         }));
       case 'forbidden':
-        return jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+        return getBooleanFF('platform.linking-platform.smart-card.cross-join') ? jsx(FlexibleForbiddenView, _extends({}, flexibleBlockCardProps, {
+          onAuthorize: handleAuthorize
+        })) : jsx(FlexibleForbiddenViewOld, _extends({}, flexibleBlockCardProps, {
           onAuthorize: handleAuthorize
         }));
       case 'not_found':

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

@@ -2,18 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
-import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
-import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { CustomBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockIcon from '@atlaskit/icon/glyph/lock';
 import BlockCardFooter from '../../components/flexible/footer';
 import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
 import Text from '../../../FlexibleCard/components/elements/text';
+import { MediaPlacement, SmartLinkSize } from '../../../../constants';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
-import { extractRequestAccessContext } from '../../../../extractors/common/context';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
+import { FormattedMessage } from 'react-intl-next';
+import { forbiddenViewTitleStyle } from './styled';
+import extractHostname from '../../../../extractors/common/hostname/extractHostname';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -38,22 +41,34 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
   var provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
   var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
-  var requestAccessContext = extractRequestAccessContext({
-    jsonLd: cardMetadata,
-    url: url,
-    context: providerName
-  });
+  var messageContext = useMemo(function () {
+    var hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
+    return {
+      product: providerName,
+      hostname: hostname
+    };
+  }, [providerName, url]);
+  var requestAccessContext = useMemo(function () {
+    return extractRequestAccessContextImproved({
+      jsonLd: cardMetadata,
+      url: url,
+      product: providerName
+    });
+  }, [cardMetadata, providerName, url]);
   var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  var _ref2 = requestAccessContext !== null && requestAccessContext !== void 0 ? requestAccessContext : {},
+    titleMessageKey = _ref2.titleMessageKey,
+    buttonDisabled = _ref2.buttonDisabled;
   var actions = useMemo(function () {
     var actionFromAccessContext = [];
     var tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
     if (requestAccessContext) {
       var action = requestAccessContext.action,
         callToActionMessageKey = requestAccessContext.callToActionMessageKey;
-      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, providerName)] : [];
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, messageContext, buttonDisabled)] : [];
     }
     return [].concat(tryAnotherAccountAction, _toConsumableArray(actionFromAccessContext));
-  }, [onAuthorize, requestAccessContext, providerName]);
+  }, [onAuthorize, requestAccessContext, messageContext, buttonDisabled]);
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -62,10 +77,19 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onError: onError,
     testId: testId,
     ui: {
-      hideElevation: true
+      hideElevation: true,
+      size: SmartLinkSize.Medium
     },
     url: url
-  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
+  }, titleMessageKey ? /*#__PURE__*/React.createElement(CustomBlock, {
+    overrideCss: forbiddenViewTitleStyle,
+    testId: "".concat(testId, "-title")
+  }, /*#__PURE__*/React.createElement("a", {
+    target: anchorTarget,
+    href: url
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[titleMessageKey], {
+    values: messageContext
+  })))) : /*#__PURE__*/React.createElement(TitleBlock, _extends({
     hideRetry: true,
     anchorTarget: anchorTarget
   }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
@@ -74,13 +98,15 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
+    maxLines: 2,
     message: {
       descriptor: messages[descriptiveMessageKey],
-      values: {
-        context: providerName
-      }
+      values: messageContext
     }
-  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+  })), /*#__PURE__*/React.createElement(PreviewBlock, {
+    placement: MediaPlacement.Right,
+    ignoreContainerPadding: true
+  }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
     actions: actions,
     status: status
   })));

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

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { useMemo } from 'react';
+import FlexibleCard from '../../../FlexibleCard';
+import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
+import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { R300 } from '@atlaskit/theme/colors';
+import { messages } from '../../../../messages';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import BlockCardFooter from '../../components/flexible/footer';
+import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
+import Text from '../../../FlexibleCard/components/elements/text';
+import { getForbiddenJsonLd } from '../../../../utils/jsonld';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { extractRequestAccessContext } from '../../../../extractors/common/context';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
+  var _details$meta;
+  var anchorTarget = _ref.anchorTarget,
+    cardState = _ref.cardState,
+    onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
+    onError = _ref.onError,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
+    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;
+  var provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
+  var providerName = (provider === null || provider === void 0 ? void 0 : provider.text) || '';
+  var requestAccessContext = extractRequestAccessContext({
+    jsonLd: cardMetadata,
+    url: url,
+    context: providerName
+  });
+  var descriptiveMessageKey = requestAccessContext && requestAccessContext.descriptiveMessageKey ? requestAccessContext.descriptiveMessageKey : 'invalid_permissions_description';
+  var actions = useMemo(function () {
+    var actionFromAccessContext = [];
+    var tryAnotherAccountAction = onAuthorize ? [ForbiddenAction(onAuthorize, 'try_another_account')] : [];
+    if (requestAccessContext) {
+      var action = requestAccessContext.action,
+        callToActionMessageKey = requestAccessContext.callToActionMessageKey;
+      actionFromAccessContext = action && callToActionMessageKey ? [ForbiddenAction(action.promise, callToActionMessageKey, {
+        context: providerName
+      })] : [];
+    }
+    return [].concat(tryAnotherAccountAction, _toConsumableArray(actionFromAccessContext));
+  }, [onAuthorize, requestAccessContext, providerName]);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    testId: testId,
+    ui: {
+      hideElevation: true
+    },
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
+    hideRetry: true,
+    anchorTarget: anchorTarget
+  }, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
+    label: "forbidden-lock-icon",
+    size: "small",
+    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
+    testId: "".concat(testId, "-lock-icon")
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: {
+      descriptor: messages[descriptiveMessageKey],
+      values: {
+        context: providerName
+      }
+    }
+  })), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
+    actions: actions,
+    status: status
+  })));
+};
+
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+export default withFlexibleUIBlockCardStyle(FlexibleForbiddenView);

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { tokens } from '../../../../utils/token';
 import { css } from '@emotion/react';
 import { N40 } from '@atlaskit/theme/colors';
@@ -11,4 +11,5 @@ export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTe
 export var footerBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n\n  .actions-button-group {\n    button,\n    button:hover,\n    button:focus,\n    button:active {\n      font-size: 0.875rem;\n    }\n  }\n"])));
 var flexibleBlockCardElevationStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 var refreshedFlexibleBlockCardStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(N40, ")"));
-export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
+export var forbiddenViewTitleStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-weight: 600;\n"])));

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

@@ -9,6 +9,7 @@ import { extractProvider } from '@atlaskit/link-extractors';
 import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled';
 import { getPreviewBlockStyles } from '../../../styled';
 import { extractRequestAccessContextImproved } from '../../../../../extractors/common/context/extractAccessContext';
+import extractHostname from '../../../../../extractors/common/hostname/extractHostname';
 var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
   var flexibleCardProps = _ref.flexibleCardProps,
@@ -19,7 +20,7 @@ var HoverCardForbiddenView = function HoverCardForbiddenView(_ref) {
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var meta = (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.meta;
   var product = (_extractProvider$text = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text) !== null && _extractProvider$text !== void 0 ? _extractProvider$text : '';
-  var hostname = /*#__PURE__*/React.createElement("b", null, new URL(url).hostname);
+  var hostname = /*#__PURE__*/React.createElement("b", null, extractHostname(url));
   var _ref2 = (_extractRequestAccess = extractRequestAccessContextImproved({
       jsonLd: meta,
       url: url,

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

package/dist/types/view/BlockCard/actions/flexible/ForbiddenAction.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { CustomActionItem } from '../../../FlexibleCard/components/blocks/types';
 import { MessageKey, RequestAccessMessageKey } from '../../../../messages';
 /**
@@ -8,4 +9,4 @@ import { MessageKey, RequestAccessMessageKey } from '../../../../messages';
  * @param content is a message key for a message to be displayed in the action
  * @param context is a variable for a message in case a message contains a placeholder
  */
-export declare const ForbiddenAction: (onClick: () => void, content: RequestAccessMessageKey | MessageKey, context?: string) => CustomActionItem;
+export declare const ForbiddenAction: (onClick: () => void, content: RequestAccessMessageKey | MessageKey, context?: Record<string, ReactNode>, isDisabled?: boolean) => CustomActionItem;

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

@@ -0,0 +1,8 @@
+import { FlexibleBlockCardProps } from './types';
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

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

@@ -2,3 +2,4 @@ export declare const metadataBlockCss: import("@emotion/react").SerializedStyles
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const footerBlockCss: import("@emotion/react").SerializedStyles;
 export declare const flexibleBlockCardStyle: import("@emotion/react").SerializedStyles;
+export declare const forbiddenViewTitleStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 import { MessageDescriptor } from 'react-intl-next';
 export type AnchorTarget = '_blank' | '_self' | '_top' | '_parent';
 export type MessageProps = {
     descriptor: MessageDescriptor;
-    values?: Record<string, string>;
+    values?: Record<string, ReactNode>;
 };

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { CustomActionItem } from '../../../FlexibleCard/components/blocks/types';
 import { MessageKey, RequestAccessMessageKey } from '../../../../messages';
 /**
@@ -8,4 +9,4 @@ import { MessageKey, RequestAccessMessageKey } from '../../../../messages';
  * @param content is a message key for a message to be displayed in the action
  * @param context is a variable for a message in case a message contains a placeholder
  */
-export declare const ForbiddenAction: (onClick: () => void, content: RequestAccessMessageKey | MessageKey, context?: string) => CustomActionItem;
+export declare const ForbiddenAction: (onClick: () => void, content: RequestAccessMessageKey | MessageKey, context?: Record<string, ReactNode>, isDisabled?: boolean) => CustomActionItem;

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

@@ -0,0 +1,8 @@
+import { FlexibleBlockCardProps } from './types';
+/**
+ * @private
+ * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}
+ * @deprecated Replaced by FlexibleForbiddenView
+ */
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

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

@@ -2,3 +2,4 @@ export declare const metadataBlockCss: import("@emotion/react").SerializedStyles
 export declare const titleBlockCss: import("@emotion/react").SerializedStyles;
 export declare const footerBlockCss: import("@emotion/react").SerializedStyles;
 export declare const flexibleBlockCardStyle: import("@emotion/react").SerializedStyles;
+export declare const forbiddenViewTitleStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 import { MessageDescriptor } from 'react-intl-next';
 export type AnchorTarget = '_blank' | '_self' | '_top' | '_parent';
 export type MessageProps = {
     descriptor: MessageDescriptor;
-    values?: Record<string, string>;
+    values?: Record<string, ReactNode>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.34.1",
+  "version": "26.34.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"