@atlaskit/smart-card 34.5.2 → 34.6.1

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

@@ -1,11 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { di } from 'react-magnetic-di';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -42,10 +35,10 @@ const HoverCardWithErrorBoundary = props => {
       errorInfo: info
     });
   }, [analyticsContext, id, fireEvent]);
-  return jsx(ErrorBoundary, {
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, jsx(SmartLinkModalProvider, null, jsx(HoverCardComponent, props, children)));
+  }, /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(HoverCardComponent, props, children)));
 };
 const HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
 
@@ -57,10 +50,10 @@ const HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErro
  * use to configure hover preview behaviour.
  */
 export const HoverCard = props => {
-  return jsx(HoverCardWithoutAnalyticsContext, props);
+  return /*#__PURE__*/React.createElement(HoverCardWithoutAnalyticsContext, props);
 };
 
 /**
  * A standalone hover preview component
  */
-export const StandaloneHoverCard = props => jsx(HoverCard, props);
+export const StandaloneHoverCard = props => /*#__PURE__*/React.createElement(HoverCard, props);

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

@@ -18,6 +18,9 @@ export const CARD_GAP_PX = 10;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const separatorCss = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
@@ -26,6 +29,9 @@ export const separatorCss = css({
   }
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const HoverCardContainer = css`
 	background: none;
@@ -38,6 +44,9 @@ export const HoverCardContainer = css`
 	}
 `;
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const titleBlockCss = css`
 	gap: ${blockGap};
@@ -61,18 +70,29 @@ export const titleBlockCss = css`
 		font-weight: ${"var(--ds-font-weight-semibold, 600)"};
 	}
 `;
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 export const getTransitionStyles = snippetHeight => css({
   transition: 'height 300ms ease-in-out',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: `${snippetHeight}px`
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const popupContainerStyles = css({
   borderRadius: "var(--ds-border-radius-200, 8px)",
   backgroundColor: "var(--ds-surface-overlay, white)",
   boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))"
 });
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 export const getPreviewBlockStyles = previewHeight =>
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 css(previewHeight ? `height: ${previewHeight}px;` : '', {

package/dist/es2019/view/InlineCard/ErroredView/index.js

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
@@ -14,6 +15,9 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButton } from '../styled';
 import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
+const iconWrapperStyles = xcss({
+  marginRight: 'space.negative.025'
+});
 export class InlineCardErroredView extends React.Component {
   constructor(...args) {
     super(...args);
@@ -58,12 +62,20 @@ export class InlineCardErroredView extends React.Component {
       ref: this.frameRef,
       truncateInline: truncateInline
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon || /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+      icon: icon || (fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        xcss: iconWrapperStyles
+      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+        color: "var(--ds-icon-danger, #C9372C)",
+        label: "error",
+        LEGACY_size: "small",
+        testId: "errored-view-default-icon"
+      })) : /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: "error",
         LEGACY_size: "small",
         color: `var(--ds-icon-danger, ${R300})`,
         testId: "errored-view-default-icon"
-      })),
+      }))),
       link: url,
       title: url,
       onClick: onClick,

package/dist/es2019/view/InlineCard/ForbiddenView/index.js

@@ -3,9 +3,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
@@ -17,16 +19,37 @@ import { LozengeWrapper } from '../IconAndTitleLayout/styled';
 import { IconStyledButton } from '../styled';
 import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
+const iconWrapperStyles = xcss({
+  marginRight: 'space.negative.025'
+});
 const fallbackForbiddenIcon = () => {
   if (fg('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
       label: "error",
       size: "small",
       primaryColor: `var(--ds-icon-danger, ${R400})`,
       testId: "forbidden-view-fallback-icon"
     }));
   } else {
-    return /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LockIcon, {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
       label: "error",
       size: "small",
       primaryColor: `var(--ds-icon-danger, ${R400})`,

package/dist/es2019/view/InlineCard/Icon-emotion.js

@@ -21,9 +21,9 @@ export const Icon = styled.img({
   transform: 'translate(-50%, -50%)'
 });
 
+// TODO: Remove on platform-smart-card-icon-migration or bandicoots-compiled-migration-smartcard cleanup
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
-// TODO: Replace this override with proper AtlasKit solution.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const AKIconWrapper = styled.span({
   marginRight: "var(--ds-space-negative-025, -2px)"

package/dist/es2019/view/InlineCard/Icon.js

@@ -23,9 +23,9 @@ export const Icon = forwardRef(({
   }));
 });
 
+// TODO: Remove on platform-smart-card-icon-migration cleanup
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
-// TODO: Replace this override with proper AtlasKit solution.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
   Icon.displayName = 'Icon';

package/dist/es2019/view/InlineCard/UnauthorisedView/index.js

@@ -2,8 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
@@ -15,15 +17,34 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButton } from '../styled';
 import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
+const iconWrapperStyles = xcss({
+  marginRight: 'space.negative.025'
+});
 const fallbackUnauthorizedIcon = () => {
   if (fg('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
       label: "error",
       size: "small",
       primaryColor: `var(--ds-icon-danger, ${R400})`
     }));
   } else {
-    return /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LockIcon, {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
       label: "error",
       size: "small",
       primaryColor: `var(--ds-icon-danger, ${R400})`

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

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.5.2",
+  packageVersion: "34.6.1",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

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

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

package/dist/esm/utils/flexible.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import * as Blocks from '../view/FlexibleCard/components/blocks';
 import { FooterBlock, PreviewBlock, TitleBlock } from '../view/FlexibleCard/components/blocks';
 import * as Elements from '../view/FlexibleCard/components/elements';
@@ -11,20 +12,136 @@ export var isFlexibleUiCard = function isFlexibleUiCard(children) {
   return false;
 };
 export var isFlexibleUiBlock = function isFlexibleUiBlock(node) {
-  return /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(function (type) {
+  var _node$type;
+  if (!fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.isValidElement(node) && Object.values(Blocks).some(function (type) {
+      return type === node.type;
+    });
+  }
+  if (! /*#__PURE__*/React.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.Children.map(node.props.children, function (child) {
+      var _child$type;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/React.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;
 };
 export var isFlexibleUiElement = function isFlexibleUiElement(node) {
-  return /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(function (type) {
+  var _node$type2;
+  if (!fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.isValidElement(node) && Object.values(Elements).some(function (type) {
+      return type === node.type;
+    });
+  }
+  if (! /*#__PURE__*/React.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.Children.map(node.props.children, function (child) {
+      var _child$type2;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/React.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;
 };
 export var isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
-  return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+  var _node$type3;
+  if (!fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
+  }
+  if (! /*#__PURE__*/React.isValidElement(node)) {
+    return false;
+  }
+  if (node.type === 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.Children.map(node.props.children, function (child) {
+      var _child$type3;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/React.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;
 };
 export var isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
-  return /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
+  var _node$type4;
+  if (!fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.isValidElement(node) && node.type === PreviewBlock;
+  }
+  if (! /*#__PURE__*/React.isValidElement(node)) {
+    return false;
+  }
+  if (node.type === 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.Children.map(node.props.children, function (child) {
+      var _child$type4;
+      if (!isChildrenValid) {
+        return;
+      }
+      if (! /*#__PURE__*/React.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;
 };
 export var isFlexibleUiFooterBlock = function isFlexibleUiFooterBlock(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === FooterBlock;

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

@@ -1,12 +1,20 @@
+/* ResolvedView.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useMemo, useState } from 'react';
-import { ActionName, ElementName, SmartLinkPosition } from '../../../constants';
+import "./ResolvedView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ActionName, ElementName, SmartLinkPosition, SmartLinkStatus } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
 import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
-import { metadataBlockCss } from './styled';
-import { FlexibleCardUiOptions, FooterBlockOptions, getSimulatedBetterMetadata, PreviewBlockOptions, titleBlockOptions } from './utils';
+import ResolvedViewOld from './ResolvedViewOld';
+import { FlexibleCardUiOptions, getSimulatedBetterMetadata, PreviewBlockOptions, titleBlockOptions } from './utils';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+var titleBlockCss = null;
+var footerBlockCss = null;
+var metadataBlockCss = null;
 
 /**
  * This view represents a Block card that has an 'Resolved' status.
@@ -61,21 +69,35 @@ var ResolvedView = function ResolvedView(_ref) {
     subtitle: [{
       name: ElementName.Location
     }],
-    metadataPosition: SmartLinkPosition.Top
+    metadataPosition: SmartLinkPosition.Top,
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_zulpcxkx _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: topMetadata,
     maxLines: 1,
-    overrideCss: metadataBlockCss
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_wwyvidpf _1sxbcxkx"])
   }), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomMetadata,
     maxLines: 1,
-    overrideCss: metadataBlockCss
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_wwyvidpf _1sxbcxkx"])
   }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
     onError: function onError() {
       setIsPreviewBlockErrored(true);
-    }
-  })) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, FooterBlockOptions, {
-    actions: footerActions
-  })));
+    },
+    status: SmartLinkStatus.Resolved
+  })) : null, /*#__PURE__*/React.createElement(FooterBlock, {
+    actions: footerActions,
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+  }));
 };
-export default withFlexibleUIBlockCardStyle(ResolvedView);
+var ResolvedViewExported = function ResolvedViewExported(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ResolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ResolvedViewOld, props);
+  }
+};
+export default withFlexibleUIBlockCardStyle(ResolvedViewExported);

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

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useMemo, useState } from 'react';
+import { ActionName, ElementName, SmartLinkPosition } from '../../../constants';
+import FlexibleCard from '../../FlexibleCard';
+import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../FlexibleCard/components/blocks';
+import { metadataBlockCss } from './styledOld';
+import { FlexibleCardUiOptions, FooterBlockOptionsOld, getSimulatedBetterMetadata, PreviewBlockOptions, titleBlockOptionsOld } from './utils';
+
+/**
+ * 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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPreviewBlockErrored = _useState2[0],
+    setIsPreviewBlockErrored = _useState2[1];
+  useEffect(function () {
+    setIsPreviewBlockErrored(false);
+  }, [url, cardState]);
+  var _getSimulatedBetterMe = getSimulatedBetterMetadata(cardState.details),
+    titleMetadata = _getSimulatedBetterMe.titleMetadata,
+    topMetadata = _getSimulatedBetterMe.topMetadata,
+    bottomMetadata = _getSimulatedBetterMe.bottomMetadata;
+  var footerActions = useMemo(function () {
+    return [{
+      name: ActionName.FollowAction,
+      hideIcon: true
+    }, {
+      name: ActionName.PreviewAction,
+      hideIcon: true
+    }, {
+      name: ActionName.DownloadAction,
+      hideIcon: true
+    }];
+  }, []);
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onClick: onClick,
+    onError: onError,
+    onResolve: onResolve,
+    origin: "smartLinkCard",
+    actionOptions: actionOptions,
+    testId: testId,
+    ui: FlexibleCardUiOptions,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptionsOld, {
+    metadata: titleMetadata,
+    subtitle: [{
+      name: ElementName.Location
+    }],
+    metadataPosition: SmartLinkPosition.Top
+  })), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: topMetadata,
+    maxLines: 1,
+    overrideCss: metadataBlockCss
+  }), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: bottomMetadata,
+    maxLines: 1,
+    overrideCss: metadataBlockCss
+  }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
+    onError: function onError() {
+      setIsPreviewBlockErrored(true);
+    }
+  })) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, FooterBlockOptionsOld, {
+    actions: footerActions
+  })));
+};
+export default ResolvedViewOld;

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