@atlaskit/smart-card 35.1.2 → 35.1.4

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

@@ -227,10 +227,10 @@ var previewOnLeftStyleMapOld = {
   small: "_19bv1ltm _y5vk6mu8"
 };
 var previewOnLeftStyleMap = {
-  xlarge: "_19bv16ru _y5vkv47k",
-  large: "_19bv1g7w _y5vk1eak",
-  medium: "_19bvlbes _y5vku2gc",
-  small: "_19bv1ugb _y5vk1b66"
+  xlarge: "_19bver0k _y5vk1ejb",
+  large: "_19bv16ru _y5vkv47k",
+  medium: "_19bv1g7w _y5vk1eak",
+  small: "_19bvlbes _y5vku2gc"
 };
 
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
@@ -241,10 +241,10 @@ var previewOnRightStyleMapOld = {
   small: "_u5f31ltm _1yob6mu8"
 };
 var previewOnRightStyleMap = {
-  xlarge: "_u5f316ru _1yobv47k",
-  large: "_u5f31g7w _1yob1eak",
-  medium: "_u5f3lbes _1yobu2gc",
-  small: "_u5f31ugb _1yob1b66"
+  xlarge: "_u5f3er0k _1yob1ejb",
+  large: "_u5f316ru _1yobv47k",
+  medium: "_u5f31g7w _1yob1eak",
+  small: "_u5f3lbes _1yobu2gc"
 };
 
 /**

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

@@ -39,7 +39,7 @@ var ImagePreviewNew = function ImagePreviewNew(_ref) {
       setDynamicStyles(_objectSpread({
         borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
         borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
-        marginBottom: '0.5rem'
+        marginBottom: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "var(--ds-space-100, 8px)" : '0.5rem'
       }, previewHeight ? {
         height: "".concat(previewHeight, "px")
       } : {}));

package/dist/cjs/view/HoverCard/components/views/forbidden/index.compiled.css

@@ -6,5 +6,6 @@
 ._1e0c1nu9{display:inline}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
 ._otyrcxkx{margin-bottom:var(--ds-space-100,.5rem)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
 ._qrwqpd34{border-top-right-radius:var(--ds-border-radius-200,8px)}
 ._y3gn1h6o{text-align:center}

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

@@ -25,9 +25,13 @@ var _blocks = require("../../../../FlexibleCard/components/blocks");
 var _HoverCardForbiddenViewOld = _interopRequireDefault(require("./HoverCardForbiddenViewOld"));
 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 titleBlockStylesOld = null;
 var titleBlockStyles = null;
+var mainTextStylesOld = null;
 var mainTextStyles = null;
+var connectButtonStylesOld = null;
 var connectButtonStyles = null;
+var basePreviewStylesOld = null;
 var basePreviewStyles = null;
 var HoverCardForbiddenViewNew = function HoverCardForbiddenViewNew(_ref) {
   var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
@@ -61,11 +65,11 @@ var HoverCardForbiddenViewNew = function HoverCardForbiddenViewNew(_ref) {
     ignoreContainerPadding: true,
     testId: testId,
     status: _constants.SmartLinkStatus.Forbidden,
-    className: (0, _runtime.ax)(["_13lipd34 _qrwqpd34 _otyrcxkx"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_13lipd34 _qrwqpd34 _otyru2gc" : "_13lipd34 _qrwqpd34 _otyrcxkx"])
   }), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
     testId: "".concat(testId, "-title"),
     status: _constants.SmartLinkStatus.Forbidden,
-    className: (0, _runtime.ax)(["_1bah1h6o _k48p1pd9 _19pku2gc"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_1bah1h6o _k48p1pd9 _19pku2gc" : "_1bah1h6o _k48p1pd9 _19pku2gc"])
   }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[titleMessageKey], {
     values: {
       product: product
@@ -73,7 +77,7 @@ var HoverCardForbiddenViewNew = function HoverCardForbiddenViewNew(_ref) {
   }))), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
     testId: "".concat(testId, "-content"),
     status: _constants.SmartLinkStatus.Forbidden,
-    className: (0, _runtime.ax)(["_11c8qk37 _1e0c1nu9 _1bah1h6o _19pkze3t _y3gn1h6o"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c8qk37 _1e0c1nu9 _1bah1h6o _19pkze3t _y3gn1h6o" : "_11c8qk37 _1e0c1nu9 _1bah1h6o _19pkze3t _y3gn1h6o"])
   }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {
     values: {
       product: product,
@@ -81,7 +85,7 @@ var HoverCardForbiddenViewNew = function HoverCardForbiddenViewNew(_ref) {
     }
   }))), action && /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
     status: _constants.SmartLinkStatus.Forbidden,
-    className: (0, _runtime.ax)(["_1bah1h6o _19pku2gc"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_1bah1h6o _19pku2gc" : "_1bah1h6o _19pku2gc"])
   }, /*#__PURE__*/React.createElement(_button.default, {
     testId: "".concat(testId, "-button"),
     onClick: action === null || action === void 0 ? void 0 : action.promise,

package/dist/cjs/view/HoverCard/components/views/resolved/index.compiled.css

@@ -1,14 +1,17 @@
 
 ._2aco1vlj [data-smart-element-group]{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._quenui7n [data-smart-element-group]{gap:.06rem}
+._quenze3t [data-smart-element-group]{gap:var(--ds-space-0,0)}
 ._zulpidpf{gap:0}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
 ._1ljqu2gc [data-separator]+[data-separator]:before{margin-right:var(--ds-space-100,8px)}
 ._3tmpcxkx [data-smart-element-group]:nth-of-type(2)>span{margin-left:var(--ds-space-100,.5rem)}
 ._3um015vq{visibility:hidden}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._fmt31ohn [data-smart-element-group]:first-of-type{flex-grow:7}
 ._ia0l11wp [data-smart-element-group]:nth-of-type(2){flex-grow:3}
 ._kqswstnw{position:absolute}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._oebj1txw [data-smart-element-group]{display:flex}
 ._w3mucxkx [data-smart-element-group]:first-of-type>span{margin-right:var(--ds-space-100,.5rem)}
 ._x7z0u2gc [data-smart-element-group]>[data-smart-element-group]>span{margin-right:var(--ds-space-100,8px)}

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

@@ -23,12 +23,15 @@ var _HoverCardResolvedViewOld = _interopRequireDefault(require("./HoverCardResol
 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 hiddenSnippetStyles = null;
-var metadataBlockCss = null;
+var metadataBlockCssOld = null;
 
 /**
  * Moved from HoverCardContent.tsx due to CompiledCSS migration.
  */
-var titleBlockStyle = null;
+var titleBlockStyleOld = null;
+var titleBlockStyles = null;
+var snippetBlockCss = null;
+var actionBlockCss = null;
 var HoverCardResolvedViewNew = function HoverCardResolvedViewNew(_ref) {
   var _cardState$details;
   var cardState = _ref.cardState,
@@ -73,20 +76,21 @@ var HoverCardResolvedViewNew = function HoverCardResolvedViewNew(_ref) {
     fallbackElementHeight: snippetHeight.current
   });
   var snippet = imagePreview ? null : /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
-    status: _constants.SmartLinkStatus.Resolved
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_ca0q1b66"])
   });
   var aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
     metadataPosition: _constants.SmartLinkPosition.Top,
     status: _constants.SmartLinkStatus.Resolved,
-    className: (0, _runtime.ax)(["_zulpu2gc _quenui7n _oebj1txw _x7z0u2gc _1ljqu2gc _13mh1pd9"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulpu2gc _quenze3t _oebj1txw _13mh1pd9" : "_zulpu2gc _quenui7n _oebj1txw _x7z0u2gc _1ljqu2gc _13mh1pd9"])
   })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: primary,
     secondary: secondary,
     maxLines: 1,
     size: _constants.SmartLinkSize.Medium,
     status: _constants.SmartLinkStatus.Resolved,
-    className: (0, _runtime.ax)(["_zulpidpf _2aco1vlj _fmt31ohn _yklxcxkx _w3mucxkx _ia0l11wp _3tmpcxkx"])
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_zulpidpf _2aco1vlj _fmt31ohn _yklxcxkx _w3mucxkx _ia0l11wp _3tmpcxkx"])
   }), isAISummaryEnabled ? /*#__PURE__*/_react.default.createElement(_blocks.AISummaryBlock, {
     aiSummaryMinHeight: aiSummaryMinHeight,
     placeholder: snippet,
@@ -99,7 +103,8 @@ var HoverCardResolvedViewNew = function HoverCardResolvedViewNew(_ref) {
     className: (0, _runtime.ax)(["_3um015vq _kqswstnw"])
   }), /*#__PURE__*/_react.default.createElement(_blocks.ActionBlock, {
     onClick: onActionClick,
-    spaceInline: "space.100"
+    spaceInline: "space.100",
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_n3td1b66"])
   }), /*#__PURE__*/_react.default.createElement(_blocks.AIFooterBlock, null));
 };
 var HoverCardResolvedView = function HoverCardResolvedView(props) {

package/dist/cjs/view/HoverCard/components/views/unauthorised/index.compiled.css

@@ -1,5 +1,8 @@
 ._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)}
 ._zulp5l1i{gap:.5rem .5rem}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
 ._19pkcxkx{margin-top:var(--ds-space-100,.5rem)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bahesu3{justify-content:flex-end}
 ._bpsp1wq8 a{font-weight:var(--ds-font-weight-medium,500)}

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

@@ -28,8 +28,11 @@ var _elements = require("../../../../FlexibleCard/components/elements");
 var _HoverCardUnauthorisedViewOld = _interopRequireDefault(require("./HoverCardUnauthorisedViewOld"));
 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 connectButtonStylesOld = null;
 var connectButtonStyles = null;
+var titleBlockStylesOld = null;
 var titleBlockStyles = null;
+var mainTextStylesOld = null;
 var mainTextStyles = null;
 var HoverCardUnauthorisedViewNew = function HoverCardUnauthorisedViewNew(_ref) {
   var _cardState$details, _extractProvider;
@@ -68,20 +71,20 @@ var HoverCardUnauthorisedViewNew = function HoverCardUnauthorisedViewNew(_ref) {
     testId: testId
   }), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
     testId: "".concat(testId, "-title"),
-    className: (0, _runtime.ax)(["_zulp5l1i _bpsp1wq8"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9" : "_zulp5l1i _bpsp1wq8"])
   }, /*#__PURE__*/React.createElement(_elements.LinkIcon, null), /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
     values: {
       context: providerName
     }
   }))), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
     testId: "".concat(testId, "-content"),
-    className: (0, _runtime.ax)(["_11c8qk37 _19pkcxkx"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c8qk37 _19pku2gc" : "_11c8qk37 _19pkcxkx"])
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_UnauthorisedViewContent.default, {
     providerName: providerName,
     isProductIntegrationSupported: isProductIntegrationSupported
   }))), /*#__PURE__*/React.createElement(_blocks.CustomBlock, {
     testId: "".concat(testId, "-button"),
-    className: (0, _runtime.ax)(["_1bahesu3 _19pkcxkx"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_1bahesu3 _19pku2gc" : "_1bahesu3 _19pkcxkx"])
   }, /*#__PURE__*/React.createElement(_actionGroup.default, {
     items: actions,
     appearance: "primary"

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

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

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

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

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

@@ -39,7 +39,7 @@ export const BlockCard = ({
     case 'pending':
     case 'resolving':
       return /*#__PURE__*/React.createElement(ResolvedView, _extends({}, blockCardProps, {
-        testId: 'smart-block-resolving-view'
+        testId: "smart-block-resolving-view"
       }));
     case 'resolved':
       return /*#__PURE__*/React.createElement(ResolvedView, blockCardProps);

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

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

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

@@ -1,5 +1,9 @@
+/* ForbiddenView.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import "./ForbiddenView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
@@ -14,8 +18,10 @@ import { toMessage } from '../../../utils/intl-utils';
 import { getForbiddenJsonLd } from '../../../utils/jsonld';
 import Text from '../../FlexibleCard/components/elements/text';
 import { ForbiddenAction } from '../actions/ForbiddenAction';
+import { ForbiddenViewOld } from './ForbiddenViewOld';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+const textStyles = null;
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -24,7 +30,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-const ForbiddenView = ({
+const ForbiddenViewNew = ({
   testId = 'smart-block-forbidden-view',
   ...props
 }) => {
@@ -99,7 +105,15 @@ const ForbiddenView = ({
     message: {
       descriptor: toMessage(messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
       values: messageContext
-    }
+    },
+    className: ax([fg('platform-linking-visual-refresh-v1') && "_syaz1fxt"])
   }));
 };
+const ForbiddenView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ForbiddenViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ForbiddenViewOld, props);
+  }
+};
 export default withFlexibleUIBlockCardStyle(ForbiddenView);

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

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { R300 } from '@atlaskit/theme/colors';
+import { extractRequestAccessContextImproved } from '../../../extractors/common/context/extractAccessContext';
+import extractHostname from '../../../extractors/common/hostname/extractHostname';
+import { messages } from '../../../messages';
+import { toMessage } from '../../../utils/intl-utils';
+import { getForbiddenJsonLd } from '../../../utils/jsonld';
+import Text from '../../FlexibleCard/components/elements/text';
+import { ForbiddenAction } from '../actions/ForbiddenAction';
+import UnresolvedView from './unresolved-view';
+
+/**
+ * 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
+ */
+export const ForbiddenViewOld = ({
+  testId = 'smart-block-forbidden-view',
+  ...props
+}) => {
+  var _details$meta;
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const intl = useIntl();
+  const {
+    cardState,
+    onAuthorize,
+    url
+  } = props;
+  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 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,
+      createAnalyticsEvent
+    });
+  }, [cardMetadata, providerName, url, createAnalyticsEvent]);
+  const title = useMemo(() => {
+    const descriptor = toMessage(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]);
+  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, messageContext, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.buttonDisabled)] : [];
+    }
+    return [...tryAnotherAccountAction, ...actionFromAccessContext];
+  }, [onAuthorize, requestAccessContext, messageContext]);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    actions: actions,
+    showPreview: true,
+    testId: testId,
+    title: title
+  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LockLockedIcon, {
+    label: "forbidden-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: LegacyLockIcon,
+    LEGACY_size: "small",
+    testId: `${testId}-lock-icon`
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  React.createElement(LegacyLockIcon, {
+    label: "forbidden-lock-icon",
+    size: "small",
+    primaryColor: `var(--ds-icon-danger, ${R300})`,
+    testId: `${testId}-lock-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    maxLines: 3,
+    message: {
+      descriptor: toMessage(messages.invalid_permissions_description, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.descriptiveMessageKey),
+      values: messageContext
+    }
+  }));
+};

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

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

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

@@ -1,5 +1,9 @@
+/* NotFoundView.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import "./NotFoundView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
@@ -8,8 +12,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import Text from '../../FlexibleCard/components/elements/text';
+import { NotFoundViewOld } from './NotFoundViewOld';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+const textStyles = null;
 
 /**
  * This view represents a Block Card with a 'Not_Found' status.
@@ -17,7 +23,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
  * @see SmartLinkStatus
  * @see FlexibleCardProps
  */
-const NotFoundView = ({
+const NotFoundViewNew = ({
   testId = 'smart-block-not-found-view',
   ...props
 }) => {
@@ -57,7 +63,15 @@ const NotFoundView = ({
   }), /*#__PURE__*/React.createElement(Text, {
     message: description,
     testId: `${testId}-message`,
-    maxLines: 3
+    maxLines: 3,
+    className: ax([fg('platform-linking-visual-refresh-v1') && "_syaz1fxt"])
   }));
 };
+const NotFoundView = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(NotFoundViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(NotFoundViewOld, props);
+  }
+};
 export default withFlexibleUIBlockCardStyle(NotFoundView);

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

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
+import { extractProvider } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { R300 } from '@atlaskit/theme/colors';
+import { messages } from '../../../messages';
+import Text from '../../FlexibleCard/components/elements/text';
+import UnresolvedView from './unresolved-view';
+
+/**
+ * This view represents a Block Card with a 'Not_Found' status.
+ *
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+export const NotFoundViewOld = ({
+  testId = 'smart-block-not-found-view',
+  ...props
+}) => {
+  var _cardState$details2;
+  const intl = useIntl();
+  const {
+    cardState
+  } = props;
+  const product = useMemo(() => {
+    var _cardState$details, _provider$text;
+    const provider = extractProvider(cardState === null || cardState === void 0 ? 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 ? void 0 : (_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.data]);
+  const title = useMemo(() => intl.formatMessage(messages.not_found_title, {
+    product
+  }), [intl, product]);
+  const description = useMemo(() => ({
+    descriptor: messages.not_found_description
+  }), []);
+  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
+    testId: testId,
+    title: title
+  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LockLockedIcon, {
+    label: "not-found-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: LegacyLockIcon,
+    LEGACY_size: "small",
+    testId: `${testId}-lock-icon`
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  React.createElement(LegacyLockIcon, {
+    label: "not-found-lock-icon",
+    size: "small",
+    primaryColor: `var(--ds-icon-danger, ${R300})`,
+    testId: `${testId}-lock-icon`
+  }), /*#__PURE__*/React.createElement(Text, {
+    message: description,
+    testId: `${testId}-message`,
+    maxLines: 3
+  }));
+};

package/dist/es2019/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/es2019/view/BlockCard/views/ResolvedView.js

@@ -11,9 +11,11 @@ import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } fr
 import ResolvedViewOld from './ResolvedViewOld';
 import { FlexibleCardUiOptions, getSimulatedBetterMetadata, PreviewBlockOptions, titleBlockOptions } from './utils';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+const titleBlockCssOld = null;
 const titleBlockCss = null;
+const footerBlockCssOld = null;
 const footerBlockCss = null;
-const metadataBlockCss = null;
+const metadataBlockCssOld = null;
 
 /**
  * This view represents a Block card that has an 'Resolved' status.
@@ -67,17 +69,17 @@ const ResolvedView = ({
     }],
     metadataPosition: SmartLinkPosition.Top,
     status: status,
-    className: ax(["_zulpcxkx _13mh1pd9"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulpcxkx _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: topMetadata,
     maxLines: 1,
     status: SmartLinkStatus.Resolved,
-    className: ax(["_wwyvidpf _1sxbcxkx _i8d01j6v"])
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_wwyvidpf _1sxbcxkx _i8d01j6v"])
   }), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomMetadata,
     maxLines: 1,
     status: SmartLinkStatus.Resolved,
-    className: ax(["_wwyvidpf _1sxbcxkx _i8d01j6v"])
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_wwyvidpf _1sxbcxkx _i8d01j6v"])
   }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
     onError: () => {
       setIsPreviewBlockErrored(true);
@@ -86,7 +88,7 @@ const ResolvedView = ({
   })) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     status: SmartLinkStatus.Resolved,
-    className: ax(["_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
   }));
 };
 const ResolvedViewExported = props => {

package/dist/es2019/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/es2019/view/BlockCard/views/UnauthorisedView.js

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { extractProvider } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
 import { hasAuthScopeOverrides } from '../../../state/helpers';
@@ -13,6 +14,7 @@ import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
 import { AuthorizeAction } from '../actions/AuthorizeAction';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+const contentStylesOld = null;
 const contentStyles = null;
 
 /**
@@ -58,7 +60,7 @@ const UnauthorisedView = ({
     testId: testId
   }), /*#__PURE__*/React.createElement("div", {
     "data-testid": `${testId}-content`,
-    className: ax(["_11c8qk37 _syaz131l _19pkcxkx"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c8qk37 _syaz1fxt _19pku2gc" : "_11c8qk37 _syaz131l _19pkcxkx"])
   }, content));
 };
 export default withFlexibleUIBlockCardStyle(UnauthorisedView);

package/dist/es2019/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)}