@atlaskit/smart-card 35.1.2 → 35.1.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 35.1.4
+
+### Patch Changes
+
+- [#119985](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119985)
+  [`7f921d5d72c34`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f921d5d72c34) -
+  [ux] Hovercard token ui redesign under FF
+- Updated dependencies
+
+## 35.1.3
+
+### Patch Changes
+
+- [#119983](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119983)
+  [`7b2a5d6ec9bb3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b2a5d6ec9bb3) -
+  [ux] Block card UI refresh token and override css changes
+
 ## 35.1.2
 
 ### Patch Changes

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

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

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

@@ -45,7 +45,7 @@ var BlockCard = exports.BlockCard = function BlockCard(_ref) {
     case 'pending':
     case 'resolving':
       return /*#__PURE__*/_react.default.createElement(_ResolvedView.default, (0, _extends2.default)({}, blockCardProps, {
-        testId: 'smart-block-resolving-view'
+        testId: "smart-block-resolving-view"
       }));
     case 'resolved':
       return /*#__PURE__*/_react.default.createElement(_ResolvedView.default, blockCardProps);

package/dist/cjs/view/BlockCard/views/ForbiddenView.compiled.css

@@ -0,0 +1 @@
+._syaz1fxt{color:var(--ds-text,#172b4d)}

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

@@ -1,3 +1,4 @@
+/* ForbiddenView.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./ForbiddenView.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
@@ -24,11 +28,14 @@ var _intlUtils = require("../../../utils/intl-utils");
 var _jsonld = require("../../../utils/jsonld");
 var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
 var _ForbiddenAction = require("../actions/ForbiddenAction");
+var _ForbiddenViewOld = require("./ForbiddenViewOld");
 var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 var _excluded = ["testId"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var textStyles = null;
+
 /**
  * This view represent a Block Card with the 'Forbidden' status.
  * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
@@ -36,7 +43,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-var ForbiddenView = function ForbiddenView(_ref) {
+var ForbiddenViewNew = function ForbiddenViewNew(_ref) {
   var _details$meta;
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
@@ -52,7 +59,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
   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 messageContext = (0, _react.useMemo)(function () {
-    var hostname = /*#__PURE__*/_react.default.createElement("b", null, (0, _extractHostname.default)(url));
+    var hostname = /*#__PURE__*/React.createElement("b", null, (0, _extractHostname.default)(url));
     return {
       product: providerName,
       hostname: hostname
@@ -82,12 +89,12 @@ var ForbiddenView = function ForbiddenView(_ref) {
     }
     return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
   }, [onAuthorize, requestAccessContext, messageContext]);
-  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
     actions: actions,
     showPreview: true,
     testId: testId,
     title: title
-  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(_lockLocked.default, {
     label: "forbidden-lock-icon",
     color: "var(--ds-icon-danger, #C9372C)",
     LEGACY_fallbackIcon: _lock.default,
@@ -96,17 +103,25 @@ var ForbiddenView = function ForbiddenView(_ref) {
   }) :
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-  _react.default.createElement(_lock.default, {
+  React.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, {
+  }), /*#__PURE__*/React.createElement(_text.default, {
     maxLines: 3,
     message: {
       descriptor: (0, _intlUtils.toMessage)(_messages.messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
       values: messageContext
-    }
+    },
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_syaz1fxt"])
   }));
 };
+var ForbiddenView = function ForbiddenView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ForbiddenViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_ForbiddenViewOld.ForbiddenViewOld, props);
+  }
+};
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(ForbiddenView);

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

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ForbiddenViewOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
+var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _extractAccessContext = require("../../../extractors/common/context/extractAccessContext");
+var _extractHostname = _interopRequireDefault(require("../../../extractors/common/hostname/extractHostname"));
+var _messages = require("../../../messages");
+var _intlUtils = require("../../../utils/intl-utils");
+var _jsonld = require("../../../utils/jsonld");
+var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
+var _ForbiddenAction = require("../actions/ForbiddenAction");
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
+var _excluded = ["testId"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * This view represent a Block Card with the 'Forbidden' status.
+ * It should have a "Try another account" button that will allow a user to connect another account and view the block card.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var ForbiddenViewOld = exports.ForbiddenViewOld = function ForbiddenViewOld(_ref) {
+  var _details$meta;
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var cardState = props.cardState,
+    onAuthorize = props.onAuthorize,
+    url = props.url;
+  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 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,
+      createAnalyticsEvent: createAnalyticsEvent
+    });
+  }, [cardMetadata, providerName, url, createAnalyticsEvent]);
+  var title = (0, _react.useMemo)(function () {
+    var descriptor = (0, _intlUtils.toMessage)(_messages.messages.invalid_permissions, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.titleMessageKey);
+    return intl.formatMessage(descriptor, {
+      product: providerName
+    });
+  }, [intl, providerName, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.titleMessageKey]);
+  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, messageContext, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.buttonDisabled)] : [];
+    }
+    return [].concat(tryAnotherAccountAction, (0, _toConsumableArray2.default)(actionFromAccessContext));
+  }, [onAuthorize, requestAccessContext, messageContext]);
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+    actions: actions,
+    showPreview: true,
+    testId: testId,
+    title: title
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+    label: "forbidden-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: _lock.default,
+    LEGACY_size: "small",
+    testId: "".concat(testId, "-lock-icon")
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  _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: 3,
+    message: {
+      descriptor: (0, _intlUtils.toMessage)(_messages.messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
+      values: messageContext
+    }
+  }));
+};

package/dist/cjs/view/BlockCard/views/NotFoundView.compiled.css

@@ -0,0 +1 @@
+._syaz1fxt{color:var(--ds-text,#172b4d)}

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

@@ -1,3 +1,4 @@
+/* NotFoundView.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,9 +7,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./NotFoundView.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
 var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
@@ -17,18 +21,21 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
+var _NotFoundViewOld = require("./NotFoundViewOld");
 var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 var _excluded = ["testId"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var textStyles = null;
+
 /**
  * This view represents a Block Card with a 'Not_Found' status.
  *
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-var NotFoundView = function NotFoundView(_ref) {
+var NotFoundViewNew = function NotFoundViewNew(_ref) {
   var _cardState$details2;
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
@@ -50,10 +57,10 @@ var NotFoundView = function NotFoundView(_ref) {
       descriptor: _messages.messages.not_found_description
     };
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
     testId: testId,
     title: title
-  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(_lockLocked.default, {
     label: "not-found-lock-icon",
     color: "var(--ds-icon-danger, #C9372C)",
     LEGACY_fallbackIcon: _lock.default,
@@ -62,15 +69,23 @@ var NotFoundView = function NotFoundView(_ref) {
   }) :
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-  _react.default.createElement(_lock.default, {
+  React.createElement(_lock.default, {
     label: "not-found-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     testId: "".concat(testId, "-lock-icon")
-  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+  }), /*#__PURE__*/React.createElement(_text.default, {
     message: description,
     testId: "".concat(testId, "-message"),
-    maxLines: 3
+    maxLines: 3,
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_syaz1fxt"])
   }));
 };
+var NotFoundView = function NotFoundView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(NotFoundViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_NotFoundViewOld.NotFoundViewOld, props);
+  }
+};
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(NotFoundView);

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotFoundViewOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
+var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../../../messages");
+var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
+var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
+var _excluded = ["testId"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var NotFoundViewOld = exports.NotFoundViewOld = function NotFoundViewOld(_ref) {
+  var _cardState$details2;
+  var _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-not-found-view' : _ref$testId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var intl = (0, _reactIntlNext.useIntl)();
+  var cardState = props.cardState;
+  var product = (0, _react.useMemo)(function () {
+    var _cardState$details, _provider$text;
+    var provider = (0, _linkExtractors.extractProvider)(cardState === null || cardState === void 0 || (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data);
+    return (_provider$text = provider === null || provider === void 0 ? void 0 : provider.text) !== null && _provider$text !== void 0 ? _provider$text : '';
+  }, [cardState === null || cardState === void 0 || (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data]);
+  var title = (0, _react.useMemo)(function () {
+    return intl.formatMessage(_messages.messages.not_found_title, {
+      product: product
+    });
+  }, [intl, product]);
+  var description = (0, _react.useMemo)(function () {
+    return {
+      descriptor: _messages.messages.not_found_description
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
+    testId: testId,
+    title: title
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+    label: "not-found-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: _lock.default,
+    LEGACY_size: "small",
+    testId: "".concat(testId, "-lock-icon")
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  _react.default.createElement(_lock.default, {
+    label: "not-found-lock-icon",
+    size: "small",
+    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+    testId: "".concat(testId, "-lock-icon")
+  }), /*#__PURE__*/_react.default.createElement(_text.default, {
+    message: description,
+    testId: "".concat(testId, "-message"),
+    maxLines: 3
+  }));
+};

package/dist/cjs/view/BlockCard/views/ResolvedView.compiled.css

@@ -1,6 +1,12 @@
 
-._zulpcxkx{gap:var(--ds-space-100,.5rem)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._zulpcxkx{gap:var(--ds-space-100,.5rem)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
 ._1sxbcxkx span[data-smart-element-avatar-group]>ul{margin-right:var(--ds-space-100,.5rem)}
+._1wpz1fhb{align-self:stretch}
+._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
+._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._i8d01j6v [data-smart-element-group]{line-height:1rem}

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

@@ -22,9 +22,11 @@ var _utils = require("./utils");
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var titleBlockCssOld = null;
 var titleBlockCss = null;
+var footerBlockCssOld = null;
 var footerBlockCss = null;
-var metadataBlockCss = null;
+var metadataBlockCssOld = null;
 
 /**
  * This view represents a Block card that has an 'Resolved' status.
@@ -82,17 +84,17 @@ var ResolvedView = function ResolvedView(_ref) {
     }],
     metadataPosition: _constants.SmartLinkPosition.Top,
     status: status,
-    className: (0, _runtime.ax)(["_zulpcxkx _13mh1pd9"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulpcxkx _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, {
     primary: topMetadata,
     maxLines: 1,
     status: _constants.SmartLinkStatus.Resolved,
-    className: (0, _runtime.ax)(["_wwyvidpf _1sxbcxkx _i8d01j6v"])
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_wwyvidpf _1sxbcxkx _i8d01j6v"])
   }), /*#__PURE__*/React.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, {
     primary: bottomMetadata,
     maxLines: 1,
     status: _constants.SmartLinkStatus.Resolved,
-    className: (0, _runtime.ax)(["_wwyvidpf _1sxbcxkx _i8d01j6v"])
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_wwyvidpf _1sxbcxkx _i8d01j6v"])
   }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
@@ -101,7 +103,7 @@ var ResolvedView = function ResolvedView(_ref) {
   })) : null, /*#__PURE__*/React.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     status: _constants.SmartLinkStatus.Resolved,
-    className: (0, _runtime.ax)(["_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
   }));
 };
 var ResolvedViewExported = function ResolvedViewExported(props) {

package/dist/cjs/view/BlockCard/views/UnauthorisedView.compiled.css

@@ -1,3 +1,5 @@
 ._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._19pkcxkx{margin-top:var(--ds-space-100,.5rem)}
-._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}

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

@@ -15,6 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactIntlNext = require("react-intl-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _messages = require("../../../messages");
 var _helpers = require("../../../state/helpers");
@@ -25,6 +26,7 @@ var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyl
 var _excluded = ["testId"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var contentStylesOld = null;
 var contentStyles = null;
 
 /**
@@ -71,7 +73,7 @@ var UnauthorisedView = function UnauthorisedView(_ref) {
     testId: testId
   }), /*#__PURE__*/React.createElement("div", {
     "data-testid": "".concat(testId, "-content"),
-    className: (0, _runtime.ax)(["_11c8qk37 _syaz131l _19pkcxkx"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c8qk37 _syaz1fxt _19pku2gc" : "_11c8qk37 _syaz131l _19pkcxkx"])
   }, content));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(UnauthorisedView);

package/dist/cjs/view/BlockCard/views/unresolved-view/index.compiled.css

@@ -1,5 +1,14 @@
 
-._zulp1f3t{gap:var(--ds-space-100,.5em)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulp1f3t{gap:var(--ds-space-100,.5em)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._1wpz1fhb{align-self:stretch}
+._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
 ._4cvr1y6m{align-items:flex-start}
+._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
-._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
+._7yjtidpf >div{margin-top:0}
+._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
+._ngc01fxt >div{color:var(--ds-text,#172b4d)}

package/dist/cjs/view/BlockCard/views/unresolved-view/index.js

@@ -18,8 +18,11 @@ var _utils = require("../utils");
 var _UnresolvedViewOld = _interopRequireDefault(require("./UnresolvedViewOld"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var customBlockStylesOld = null;
 var customBlockStyles = null;
+var titleBlockCssOld = null;
 var titleBlockCss = null;
+var footerBlockCssOld = null;
 var footerBlockCss = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
@@ -47,17 +50,17 @@ var UnresolvedView = function UnresolvedView(_ref) {
     hideIcon: !!title,
     text: title,
     status: cardState.status,
-    className: (0, _runtime.ax)(["_zulp1f3t _13mh1pd9"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulp1f3t _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
     status: cardState.status,
-    className: (0, _runtime.ax)(["_4cvr1y6m"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulp1b66 _1e0c1txw _4cvr1y6m _1wpz1fhb _7yjtidpf _ngc01fxt" : "_4cvr1y6m"])
   }, children), showPreview && /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
     status: cardState.status
   })), /*#__PURE__*/React.createElement(_blocks.InternalFooterBlock, {
     actions: actions,
     testId: "smart-block-card-footer",
     status: cardState.status,
-    className: (0, _runtime.ax)(["_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
   }));
 };
 var UnresolvedViewExported = exports.UnresolvedViewExported = function UnresolvedViewExported(props) {

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

@@ -59,6 +59,7 @@ var ActionBlockNew = function ActionBlockNew(_ref) {
     onClickCallback = _ref.onClick,
     size = _ref.size,
     spaceInline = _ref.spaceInline,
+    className = _ref.className,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-action' : _ref$testId;
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
@@ -111,8 +112,10 @@ var ActionBlockNew = function ActionBlockNew(_ref) {
   }, [context === null || context === void 0 ? void 0 : context.actions, _onClick, onError, padding, size, spaceInline, isLoading, onLoadingChange]);
   return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
-    "data-testid": testId,
-    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb129b _18u01ivi _2hwxc10g"])
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb129b _18u01ivi _2hwxc10g" : "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g", className])
   }, actions, /*#__PURE__*/React.createElement(_actionFooter.ActionFooter, {
     message: message,
     testId: testId

package/dist/cjs/view/FlexibleCard/components/container/index.compiled.css

@@ -16,7 +16,7 @@
 ._19bv16ru{padding-left:calc(var(--preview-block-width) + var(--ds-space-250, 20px))}
 ._19bv1g7w{padding-left:calc(var(--preview-block-width) + var(--ds-space-200, 1pc))}
 ._19bv1ltm{padding-left:calc(var(--preview-block-width) + .25rem)}
-._19bv1ugb{padding-left:calc(var(--preview-block-width) + var(--ds-space-050, 4px))}
+._19bver0k{padding-left:calc(var(--preview-block-width) + var(--ds-space-300, 24px))}
 ._19bvf557{padding-left:calc(var(--preview-block-width) + 1rem)}
 ._19bvlbes{padding-left:calc(var(--preview-block-width) + var(--ds-space-100, 8px))}
 ._19bvqox2{padding-left:calc(var(--preview-block-width) + .5rem)}
@@ -26,8 +26,8 @@
 ._1reo15vq{overflow-x:hidden}
 ._1t4ckb7n .has-action, ._1nxdkb7n a, ._xnbykb7n button{z-index:1}
 ._1ul9idpf{min-width:0}
-._1yob1b66{--container-gap-right:var(--ds-space-050,4px)}
 ._1yob1eak{--container-gap-right:var(--ds-space-200,16px)}
+._1yob1ejb{--container-gap-right:var(--ds-space-300,24px)}
 ._1yob1j6v{--container-gap-right:1rem}
 ._1yob1k92{--container-gap-right:1.25rem}
 ._1yob1kwk{--container-gap-right:.5rem}
@@ -47,13 +47,13 @@
 ._u5f316ru{padding-right:calc(var(--preview-block-width) + var(--ds-space-250, 20px))}
 ._u5f31g7w{padding-right:calc(var(--preview-block-width) + var(--ds-space-200, 1pc))}
 ._u5f31ltm{padding-right:calc(var(--preview-block-width) + .25rem)}
-._u5f31ugb{padding-right:calc(var(--preview-block-width) + var(--ds-space-050, 4px))}
+._u5f3er0k{padding-right:calc(var(--preview-block-width) + var(--ds-space-300, 24px))}
 ._u5f3f557{padding-right:calc(var(--preview-block-width) + 1rem)}
 ._u5f3lbes{padding-right:calc(var(--preview-block-width) + var(--ds-space-100, 8px))}
 ._u5f3qox2{padding-right:calc(var(--preview-block-width) + .5rem)}
 ._y5vk167t{--container-gap-left:var(--_73mooq)}
-._y5vk1b66{--container-gap-left:var(--ds-space-050,4px)}
 ._y5vk1eak{--container-gap-left:var(--ds-space-200,16px)}
+._y5vk1ejb{--container-gap-left:var(--ds-space-300,24px)}
 ._y5vk1j6v{--container-gap-left:1rem}
 ._y5vk1k92{--container-gap-left:1.25rem}
 ._y5vk1kwk{--container-gap-left:.5rem}