@atlaskit/smart-card 34.5.1 → 34.6.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/smart-card
 
+## 34.6.0
+
+### Minor Changes
+
+- [#104468](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104468)
+  [`c9ce86c536bd6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c9ce86c536bd6) -
+  [ux] Migrate HoverCard and parts of FlexibleCard to use compiled css under FF
+- [#101634](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101634)
+  [`20e24b9e9c047`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/20e24b9e9c047) -
+  [ux] Migrating `BlockCard` to use `@compiled/react` instead of `@emotion/react`
+
+### Patch Changes
+
+- [#105725](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105725)
+  [`48cd87aaa29fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48cd87aaa29fc) -
+  Remove unused AI loading icon
+- Updated dependencies
+
+## 34.5.2
+
+### Patch Changes
+
+- [#104833](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104833)
+  [`0b0aae2a7e26e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0b0aae2a7e26e) -
+  [ux] Migrate block card unresolved view icons
+
 ## 34.5.1
 
 ### 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: "34.5.1"
+  packageVersion: "34.6.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/utils/flexible.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiFooterBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blocks = _interopRequireWildcard(require("../view/FlexibleCard/components/blocks"));
 var Blocks = _blocks;
 var Elements = _interopRequireWildcard(require("../view/FlexibleCard/components/elements"));
@@ -21,20 +22,136 @@ var isFlexibleUiCard = exports.isFlexibleUiCard = function isFlexibleUiCard(chil
   return false;
 };
 var isFlexibleUiBlock = exports.isFlexibleUiBlock = function isFlexibleUiBlock(node) {
-  return /*#__PURE__*/_react.default.isValidElement(node) && Object.values(Blocks).some(function (type) {
+  var _node$type;
+  if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.isValidElement(node) && Object.values(Blocks).some(function (type) {
+      return type === node.type;
+    });
+  }
+  if (! /*#__PURE__*/_react.default.isValidElement(node)) {
+    return false;
+  }
+  if (typeof node.type !== 'string' && ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === 'StyleCacheProvider') {
+    // Component wrapped with compiled at runtime, check for children
+    var isChildrenValid = true;
+    _react.default.Children.map(node.props.children, function (child) {
+      var _child$type;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+        isChildrenValid = false;
+        return;
+      }
+      if (typeof child.type !== 'string' && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) !== 'Style') {
+        isChildrenValid = isFlexibleUiBlock(child);
+      }
+    });
+    return isChildrenValid;
+  }
+  if (Object.values(Blocks).some(function (type) {
     return type === node.type;
-  });
+  })) {
+    return true;
+  }
+  return false;
 };
 var isFlexibleUiElement = exports.isFlexibleUiElement = function isFlexibleUiElement(node) {
-  return /*#__PURE__*/_react.default.isValidElement(node) && Object.values(Elements).some(function (type) {
+  var _node$type2;
+  if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.isValidElement(node) && Object.values(Elements).some(function (type) {
+      return type === node.type;
+    });
+  }
+  if (! /*#__PURE__*/_react.default.isValidElement(node)) {
+    return false;
+  }
+  if (Object.values(Elements).some(function (type) {
     return type === node.type;
-  });
+  })) {
+    return true;
+  }
+  if (typeof node.type !== 'string' && ((_node$type2 = node.type) === null || _node$type2 === void 0 ? void 0 : _node$type2.name) === 'StyleCacheProvider' && node.props.children) {
+    // Component wrapped with compiled at runtime, check for children
+    var isChildrenValid = true;
+    _react.default.Children.map(node.props.children, function (child) {
+      var _child$type2;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+        isChildrenValid = false;
+        return;
+      }
+      if (typeof child.type !== 'string' && ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) !== 'Style') {
+        isChildrenValid = isFlexibleUiElement(child);
+      }
+    });
+    return isChildrenValid;
+  }
+  return false;
 };
 var isFlexibleUiTitleBlock = exports.isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
-  return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _blocks.TitleBlock;
+  var _node$type3;
+  if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _blocks.TitleBlock;
+  }
+  if (! /*#__PURE__*/_react.default.isValidElement(node)) {
+    return false;
+  }
+  if (node.type === _blocks.TitleBlock) {
+    return true;
+  }
+  if (typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children) {
+    // Component wrapped with compiled at runtime, check for children
+    var isChildrenValid = true;
+    _react.default.Children.map(node.props.children, function (child) {
+      var _child$type3;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+        isChildrenValid = false;
+        return;
+      }
+      if (typeof child.type !== 'string' && ((_child$type3 = child.type) === null || _child$type3 === void 0 ? void 0 : _child$type3.name) !== 'Style') {
+        isChildrenValid = isFlexibleUiTitleBlock(child);
+      }
+    });
+    return isChildrenValid;
+  }
+  return false;
 };
 var isFlexibleUiPreviewBlock = exports.isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
-  return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _blocks.PreviewBlock;
+  var _node$type4;
+  if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _blocks.PreviewBlock;
+  }
+  if (! /*#__PURE__*/_react.default.isValidElement(node)) {
+    return false;
+  }
+  if (node.type === _blocks.PreviewBlock) {
+    return true;
+  }
+  if (typeof node.type !== 'string' && ((_node$type4 = node.type) === null || _node$type4 === void 0 ? void 0 : _node$type4.name) === 'StyleCacheProvider' && node.props.children) {
+    // Component wrapped with compiled at runtime, check for children
+    var isChildrenValid = true;
+    _react.default.Children.map(node.props.children, function (child) {
+      var _child$type4;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+        isChildrenValid = false;
+        return;
+      }
+      if (typeof child.type !== 'string' && ((_child$type4 = child.type) === null || _child$type4 === void 0 ? void 0 : _child$type4.name) !== 'Style') {
+        isChildrenValid = isFlexibleUiPreviewBlock(child);
+      }
+    });
+    return isChildrenValid;
+  }
+  return false;
 };
 var isFlexibleUiFooterBlock = exports.isFlexibleUiFooterBlock = function isFlexibleUiFooterBlock(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _blocks.FooterBlock;

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

@@ -9,7 +9,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
+var _warning2 = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+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"));
@@ -35,7 +37,15 @@ var ErroredView = function ErroredView(_ref) {
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
     actions: actions,
     testId: testId
-  }), /*#__PURE__*/_react.default.createElement(_warning.default, {
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "errored-warning-icon",
+    color: "var(--ds-icon-warning, #E56910)",
+    LEGACY_size: "small",
+    testId: "".concat(testId, "-warning-icon")
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  _react.default.createElement(_warning2.default, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),

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

@@ -12,8 +12,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"));
@@ -85,7 +87,16 @@ var ForbiddenView = function ForbiddenView(_ref) {
     showPreview: true,
     testId: testId,
     title: title
-  }), /*#__PURE__*/_react.default.createElement(_lock.default, {
+  }), (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, ")"),

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

@@ -10,8 +10,10 @@ 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"));
@@ -51,7 +53,16 @@ var NotFoundView = function NotFoundView(_ref) {
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
     testId: testId,
     title: title
-  }), /*#__PURE__*/_react.default.createElement(_lock.default, {
+  }), (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, ")"),

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

@@ -0,0 +1,6 @@
+
+._zulpcxkx{gap:var(--ds-space-100,.5rem)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._1sxbcxkx span[data-smart-element-avatar-group]>ul{margin-right:var(--ds-space-100,.5rem)}
+._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}
+._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

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

@@ -1,3 +1,4 @@
+/* ResolvedView.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,17 +7,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./ResolvedView.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../constants");
 var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
 var _blocks = require("../../FlexibleCard/components/blocks");
-var _styled = require("./styled");
+var _ResolvedViewOld = _interopRequireDefault(require("./ResolvedViewOld"));
 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 titleBlockCss = null;
+var footerBlockCss = null;
+var metadataBlockCss = null;
+
 /**
  * This view represents a Block card that has an 'Resolved' status.
  * @see SmartLinkStatus
@@ -54,7 +63,7 @@ var ResolvedView = function ResolvedView(_ref) {
       hideIcon: true
     }];
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+  return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
     onClick: onClick,
@@ -65,26 +74,40 @@ var ResolvedView = function ResolvedView(_ref) {
     testId: testId,
     ui: _utils.FlexibleCardUiOptions,
     url: url
-  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
+  }, /*#__PURE__*/React.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptions, {
     metadata: titleMetadata,
     subtitle: [{
       name: _constants.ElementName.Location
     }],
-    metadataPosition: _constants.SmartLinkPosition.Top
-  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    metadataPosition: _constants.SmartLinkPosition.Top,
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)(["_zulpcxkx _13mh1pd9"])
+  })), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, {
     primary: topMetadata,
     maxLines: 1,
-    overrideCss: _styled.metadataBlockCss
-  }), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)(["_wwyvidpf _1sxbcxkx"])
+  }), /*#__PURE__*/React.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, {
     primary: bottomMetadata,
     maxLines: 1,
-    overrideCss: _styled.metadataBlockCss
-  }), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)(["_wwyvidpf _1sxbcxkx"])
+  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
-    }
-  })) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, (0, _extends2.default)({}, _utils.FooterBlockOptions, {
-    actions: footerActions
-  })));
+    },
+    status: _constants.SmartLinkStatus.Resolved
+  })) : null, /*#__PURE__*/React.createElement(_blocks.FooterBlock, {
+    actions: footerActions,
+    status: _constants.SmartLinkStatus.Resolved,
+    className: (0, _runtime.ax)(["_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+  }));
+};
+var ResolvedViewExported = function ResolvedViewExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ResolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_ResolvedViewOld.default, props);
+  }
 };
-var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(ResolvedView);
+var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(ResolvedViewExported);

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

@@ -0,0 +1,89 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../constants");
+var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
+var _blocks = require("../../FlexibleCard/components/blocks");
+var _styledOld = require("./styledOld");
+var _utils = require("./utils");
+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 that has an 'Resolved' status.
+ * @see SmartLinkStatus
+ * @see FlexibleCardProps
+ */
+var ResolvedViewOld = function ResolvedViewOld(_ref) {
+  var cardState = _ref.cardState,
+    onClick = _ref.onClick,
+    onError = _ref.onError,
+    onResolve = _ref.onResolve,
+    actionOptions = _ref.actionOptions,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
+    url = _ref.url;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPreviewBlockErrored = _useState2[0],
+    setIsPreviewBlockErrored = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setIsPreviewBlockErrored(false);
+  }, [url, cardState]);
+  var _getSimulatedBetterMe = (0, _utils.getSimulatedBetterMetadata)(cardState.details),
+    titleMetadata = _getSimulatedBetterMe.titleMetadata,
+    topMetadata = _getSimulatedBetterMe.topMetadata,
+    bottomMetadata = _getSimulatedBetterMe.bottomMetadata;
+  var footerActions = (0, _react.useMemo)(function () {
+    return [{
+      name: _constants.ActionName.FollowAction,
+      hideIcon: true
+    }, {
+      name: _constants.ActionName.PreviewAction,
+      hideIcon: true
+    }, {
+      name: _constants.ActionName.DownloadAction,
+      hideIcon: true
+    }];
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onClick: onClick,
+    onError: onError,
+    onResolve: onResolve,
+    origin: "smartLinkCard",
+    actionOptions: actionOptions,
+    testId: testId,
+    ui: _utils.FlexibleCardUiOptions,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptionsOld, {
+    metadata: titleMetadata,
+    subtitle: [{
+      name: _constants.ElementName.Location
+    }],
+    metadataPosition: _constants.SmartLinkPosition.Top
+  })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: topMetadata,
+    maxLines: 1,
+    overrideCss: _styledOld.metadataBlockCss
+  }), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: bottomMetadata,
+    maxLines: 1,
+    overrideCss: _styledOld.metadataBlockCss
+  }), !isPreviewBlockErrored ? /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, (0, _extends2.default)({}, _utils.PreviewBlockOptions, {
+    onError: function onError() {
+      setIsPreviewBlockErrored(true);
+    }
+  })) : null, /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, (0, _extends2.default)({}, _utils.FooterBlockOptionsOld, {
+    actions: footerActions
+  })));
+};
+var _default = exports.default = ResolvedViewOld;

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

@@ -0,0 +1,3 @@
+._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)}

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

@@ -1,14 +1,18 @@
+/* UnauthorisedView.tsx generated by @compiled/babel-plugin v0.35.0 */
 "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;
+require("./UnauthorisedView.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 = require("react");
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
@@ -19,16 +23,9 @@ var _AuthorizeAction = require("../actions/AuthorizeAction");
 var _unresolvedView = _interopRequireDefault(require("./unresolved-view"));
 var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 var _excluded = ["testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var contentStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, #626F86)",
-  marginTop: "var(--ds-space-100, 0.5rem)",
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
+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 contentStyles = null;
 
 /**
  * This view represents a Block card that has an 'Unauthorized' status .
@@ -56,11 +53,11 @@ var UnauthorisedView = function UnauthorisedView(_ref) {
     }
   }, [onAuthorize, fireEvent]);
   var content = (0, _react.useMemo)(function () {
-    return onAuthorize ? (0, _react2.jsx)(_UnauthorisedViewContent.default, {
+    return onAuthorize ? /*#__PURE__*/React.createElement(_UnauthorisedViewContent.default, {
       providerName: providerName,
       isProductIntegrationSupported: isProductIntegrationSupported,
       testId: testId
-    }) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
+    }) : /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
       values: {
         context: providerName
       }
@@ -69,12 +66,12 @@ var UnauthorisedView = function UnauthorisedView(_ref) {
   var actions = (0, _react.useMemo)(function () {
     return onAuthorize ? [(0, _AuthorizeAction.AuthorizeAction)(handleAuthorize, providerName)] : [];
   }, [handleAuthorize, onAuthorize, providerName]);
-  return (0, _react2.jsx)(_unresolvedView.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
     actions: actions,
     testId: testId
-  }), (0, _react2.jsx)("div", {
-    css: contentStyles,
-    "data-testid": "".concat(testId, "-content")
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "".concat(testId, "-content"),
+    className: (0, _runtime.ax)(["_11c8qk37 _syaz131l _19pkcxkx"])
   }, content));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(UnauthorisedView);

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
+var _blocks = require("../../../FlexibleCard/components/blocks");
+var _utils = require("../utils");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var customBlockStyles = (0, _react2.css)({
+  alignItems: 'flex-start'
+});
+var UnresolvedViewOld = function UnresolvedViewOld(_ref) {
+  var actions = _ref.actions,
+    cardState = _ref.cardState,
+    children = _ref.children,
+    onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
+    onError = _ref.onError,
+    _ref$showPreview = _ref.showPreview,
+    showPreview = _ref$showPreview === void 0 ? false : _ref$showPreview,
+    testId = _ref.testId,
+    title = _ref.title,
+    url = _ref.url;
+  return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    origin: "smartLinkCard",
+    testId: testId,
+    ui: _utils.FlexibleCardUiOptions,
+    url: url
+  }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, _utils.titleBlockOptionsOld, {
+    hideIcon: !!title,
+    text: title
+  })), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    overrideCss: customBlockStyles
+  }, children), showPreview && /*#__PURE__*/_react.default.createElement(_blocks.PreviewBlock, _utils.PreviewBlockOptions), /*#__PURE__*/_react.default.createElement(_blocks.InternalFooterBlock, (0, _extends2.default)({}, _utils.FooterBlockOptionsOld, {
+    actions: actions,
+    testId: "smart-block-card-footer"
+  })));
+};
+var _default = exports.default = UnresolvedViewOld;

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

@@ -0,0 +1,5 @@
+
+._zulp1f3t{gap:var(--ds-space-100,.5em)}._13mh1pd9 [data-smart-element=Title]{font-weight:var(--ds-font-weight-semibold,600)}
+._4cvr1y6m{align-items:flex-start}
+._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}