@atlaskit/smart-card 26.15.2 → 26.15.4

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

@@ -8,6 +8,8 @@ import BlockCardFooter from '../../components/flexible/footer';
 import { RetryAction } from '../../actions/flexible/RetryAction';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 import Text from '../../../FlexibleCard/components/elements/text';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
 /**
  * This view represents a Block Card with an 'Errored' status.
  *
@@ -19,7 +21,6 @@ const FlexibleErroredView = ({
   cardState,
   onAuthorize,
   onError,
-  ui,
   url,
   onClick,
   testId = 'smart-block-errored-view'
@@ -32,7 +33,9 @@ const FlexibleErroredView = ({
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -51,4 +54,4 @@ const FlexibleErroredView = ({
     status: status
   })));
 };
-export default FlexibleErroredView;
+export default withFlexibleUIBlockCardStyle(FlexibleErroredView);

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

@@ -11,6 +11,7 @@ import Text from '../../../FlexibleCard/components/elements/text';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
 import { extractRequestAccessContext } from '../../../../extractors/common/context';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -26,7 +27,6 @@ const FlexibleForbiddenView = ({
   onClick,
   onError,
   testId = 'smart-block-forbidden-view',
-  ui,
   url
 }) => {
   var _details$meta;
@@ -60,7 +60,9 @@ const FlexibleForbiddenView = ({
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -82,4 +84,4 @@ const FlexibleForbiddenView = ({
     status: status
   })));
 };
-export default FlexibleForbiddenView;
+export default withFlexibleUIBlockCardStyle(FlexibleForbiddenView);

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

@@ -7,6 +7,8 @@ import { R300 } from '@atlaskit/theme/colors';
 import BlockCardFooter from '../../components/flexible/footer';
 import Text from '../../../FlexibleCard/components/elements/text';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
 /**
  * This view represents a Block Card with a 'Not_Found' status.
  *
@@ -18,7 +20,6 @@ const FlexibleNotFoundView = ({
   cardState,
   onAuthorize,
   onError,
-  ui,
   url,
   onClick,
   testId = 'smart-block-not-found-view'
@@ -31,7 +32,9 @@ const FlexibleNotFoundView = ({
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -50,4 +53,4 @@ const FlexibleNotFoundView = ({
     status: status
   })));
 };
-export default FlexibleNotFoundView;
+export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);

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

@@ -8,6 +8,7 @@ import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition
 import uuid from 'uuid';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
 /**
  * This view represents a Block card that has an 'Resolved' status.
@@ -23,7 +24,6 @@ const FlexibleResolvedView = ({
   showServerActions,
   anchorTarget,
   testId = 'smart-block-resolved-view',
-  ui,
   url,
   analytics
 }) => {
@@ -46,7 +46,9 @@ const FlexibleResolvedView = ({
     onResolve: onResolve,
     showServerActions: showServerActions,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     position: SmartLinkPosition.Center,
@@ -123,4 +125,4 @@ const FlexibleResolvedView = ({
     }]
   }));
 };
-export default FlexibleResolvedView;
+export default withFlexibleUIBlockCardStyle(FlexibleResolvedView);

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

@@ -11,6 +11,7 @@ import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { css } from '@emotion/react';
 import { tokens } from '../../../../utils/token';
 import { messages } from '../../../../messages';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 const contentStyles = css`
   color: ${tokens.text};
   margin-top: 0.5rem;
@@ -33,7 +34,6 @@ const FlexibleUnauthorisedView = ({
   onClick,
   onError,
   testId = 'smart-block-unauthorized-view',
-  ui,
   url
 }) => {
   var _cardState$details, _extractProvider;
@@ -64,7 +64,9 @@ const FlexibleUnauthorisedView = ({
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -78,4 +80,4 @@ const FlexibleUnauthorisedView = ({
     actionGroupAppearance: "primary"
   })));
 };
-export default FlexibleUnauthorisedView;
+export default withFlexibleUIBlockCardStyle(FlexibleUnauthorisedView);

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

@@ -1,4 +1,7 @@
+import { tokens } from '../../../../utils/token';
 import { css } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // in editor prosemirror adds padding-left so we need to overwrite it
 export const metadataBlockCss = css`
@@ -11,4 +14,16 @@ export const metadataBlockCss = css`
 `;
 export const titleBlockCss = css`
   gap: 0.5em;
-`;
+`;
+const flexibleBlockCardElevationStyle = css`
+  border-radius: 1.5px;
+  box-shadow: ${tokens.elevation};
+  margin: ${"var(--ds-space-025, 2px)"};
+`;
+const refreshedFlexibleBlockCardStyle = css`
+  & > div {
+    border-radius: ${"var(--ds-border-radius-300, 12px)"};
+    border: 1px solid ${`var(--ds-border-input, ${N40})`};
+  }
+`;
+export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

package/dist/es2019/view/BlockCard/views/flexible/{utils.js → utils/index.js}

@@ -1,6 +1,6 @@
-import { ElementName } from '../../../../constants';
-import { extractOwnedBy, extractAssignedTo } from '../../../../extractors/flexible/utils';
-import { getExtensionKey } from '../../../../state/helpers';
+import { ElementName } from '../../../../../constants';
+import { extractOwnedBy, extractAssignedTo } from '../../../../../extractors/flexible/utils';
+import { getExtensionKey } from '../../../../../state/helpers';
 const baseTopMetadata = [{
   name: ElementName.ModifiedOn
 }, {

package/dist/es2019/view/BlockCard/views/flexible/utils/withFlexibleUIBlockCardStyle.js

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { flexibleBlockCardStyle } from '../styled';
+export const withFlexibleUIBlockCardStyle = FlexibleBlockCardView => props => {
+  return jsx("div", {
+    css: flexibleBlockCardStyle
+  }, jsx(FlexibleBlockCardView, props));
+};

package/dist/es2019/view/HoverCard/components/CustomPopupContainer.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React from 'react';
+import { popupContainerStyles } from '../styled';
+import { jsx } from '@emotion/react';
+const CustomPopupContainer = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...props
+}, ref) => jsx("div", _extends({
+  css: popupContainerStyles
+}, props, {
+  ref: ref
+}), children));
+export default CustomPopupContainer;

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -7,12 +7,14 @@ import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkA
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
+import CustomPopupContainer from '../components/CustomPopupContainer';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 import { useSmartCardActions } from '../../../state/actions';
 import { useSmartLinkAnalytics } from '../../../state/analytics';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 const FADE_IN_DELAY = 500;
 const FADE_OUT_DELAY = 300;
@@ -192,7 +194,7 @@ export const HoverCardComponent = ({
     onContextMenu: onContextMenuClick,
     "data-testid": "hover-card-trigger-wrapper"
   }), children)), [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return jsx(Popup, {
+  return jsx(Popup, _extends({
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,
@@ -202,5 +204,7 @@ export const HoverCardComponent = ({
     content: content,
     trigger: trigger,
     zIndex: zIndex
-  });
+  }, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') && {
+    popupComponent: CustomPopupContainer
+  }));
 };

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { layers } from '@atlaskit/theme/constants';
+import { themed } from '@atlaskit/theme/components';
 
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 export const HOVER_CARD_Z_INDEX = layers.modal();
@@ -57,4 +58,15 @@ export const titleBlockCss = css`
 export const getTransitionStyles = snippetHeight => css`
   transition: height 300ms ease-in-out;
   height: ${snippetHeight}px;
+`;
+export const popupContainerStyles = css`
+  border-radius: ${"var(--ds-border-radius-300, 12px)"};
+  background-color: ${themed({
+  light: "var(--ds-surface-raised, white)",
+  dark: "var(--ds-surface-raised, #262B31)"
+})()};
+  box-shadow: ${themed({
+  light: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
+  dark: "var(--ds-shadow-overlay, 0px 0px 0px rgba(188, 214, 240, 0.12),0px 8px 12px rgba(3, 4, 4, 0.36),0px 0px 1px rgba(3, 4, 4, 0.5))"
+})()};
 `;

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

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl-next';
+import { breakWordsCss } from './styled';
+import { jsx } from '@emotion/react';
 import { messages } from '../../../messages';
 const WarningModal = props => {
   const {
@@ -13,29 +16,31 @@ const WarningModal = props => {
     onContinue,
     intl
   } = props;
-  const content = /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+  const content = jsx(ModalTransition, null, isOpen && jsx(Modal, {
     onClose: onClose,
     testId: "link-with-safety-warning"
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, {
     appearance: "warning"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.check_this_link))), /*#__PURE__*/React.createElement(ModalBody, null, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+  }, jsx(FormattedMessage, messages.check_this_link))), jsx(ModalBody, null, jsx("div", {
+    css: breakWordsCss
+  }, url && unsafeLinkText && jsx(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
     values: {
       unsafeLinkText: unsafeLinkText,
-      a: () => /*#__PURE__*/React.createElement("a", {
+      a: () => jsx("a", {
         href: url,
         target: "_blank",
         rel: "noopener noreferrer"
       }, url)
     }
-  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  })))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "subtle",
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.go_back)), /*#__PURE__*/React.createElement(Button, {
+  }, jsx(FormattedMessage, messages.go_back)), jsx(Button, {
     appearance: "warning",
     onClick: onContinue,
     autoFocus: true
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.continue)))));
-  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+  }, jsx(FormattedMessage, messages.continue)))));
+  return intl ? content : jsx(IntlProvider, {
     locale: "en"
   }, content);
 };

package/dist/es2019/view/LinkUrl/LinkWarningModal/styled.js

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+export const breakWordsCss = css`
+  white-space: pre-line;
+  word-break: break-all;
+`;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.15.2",
+	"version": "26.15.4",
 	"sideEffects": false
 }

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

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
@@ -24,14 +22,12 @@ import FlexibleUnauthorisedView from './views/flexible/FlexibleUnauthorisedView'
 import FlexibleNotFoundView from './views/flexible/FlexibleNotFoundView';
 import FlexibleErroredView from './views/flexible/FlexibleErroredView';
 import FlexibleForbiddenView from './views/flexible/FlexibleForbiddenView';
-import { tokens } from '../../utils/token';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { handleClickCommon } from './utils/handlers';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export { default as PreviewAction } from './actions/PreviewAction';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
-var flexibleBlockCardElevationStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
   var id = _ref.id,
@@ -65,9 +61,6 @@ export var BlockCard = function BlockCard(_ref) {
   };
   var enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
-    var ui = {
-      hideElevation: true
-    };
     var anchorTarget = getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
     var flexibleProps = _objectSpread({
       id: id,
@@ -81,7 +74,6 @@ export var BlockCard = function BlockCard(_ref) {
       onResolve: onResolve,
       renderers: renderers,
       showServerActions: showServerActions,
-      ui: ui,
       analytics: analytics,
       extensionKey: extensionKey
     }, anchorTarget ? {
@@ -90,33 +82,23 @@ export var BlockCard = function BlockCard(_ref) {
     switch (status) {
       case 'pending':
       case 'resolving':
-        return jsx("div", {
-          css: flexibleBlockCardElevationStyle
-        }, jsx(FlexibleResolvedView, _extends({}, flexibleProps, {
+        return jsx(FlexibleResolvedView, _extends({}, flexibleProps, {
           testId: 'smart-block-resolving-view'
-        })));
+        }));
       case 'resolved':
-        return jsx("div", {
-          css: flexibleBlockCardElevationStyle
-        }, jsx(FlexibleResolvedView, flexibleProps));
+        return jsx(FlexibleResolvedView, flexibleProps);
       case 'unauthorized':
-        return jsx("div", {
-          css: flexibleBlockCardElevationStyle
-        }, jsx(FlexibleUnauthorisedView, _extends({}, flexibleProps, {
+        return jsx(FlexibleUnauthorisedView, _extends({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
       case 'forbidden':
-        return jsx("div", {
-          css: flexibleBlockCardElevationStyle
-        }, jsx(FlexibleForbiddenView, _extends({}, flexibleProps, {
+        return jsx(FlexibleForbiddenView, _extends({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
       case 'not_found':
-        return jsx("div", {
-          css: flexibleBlockCardElevationStyle
-        }, jsx(FlexibleNotFoundView, _extends({}, flexibleProps, {
+        return jsx(FlexibleNotFoundView, _extends({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
       case 'fallback':
       case 'errored':
       default:
@@ -134,11 +116,9 @@ export var BlockCard = function BlockCard(_ref) {
             testId: "".concat(testId, "-").concat(status)
           });
         }
-        return jsx("div", {
-          css: flexibleBlockCardElevationStyle
-        }, jsx(FlexibleErroredView, _extends({}, flexibleProps, {
+        return jsx(FlexibleErroredView, _extends({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
     }
   }
   switch (status) {

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

@@ -8,6 +8,8 @@ import BlockCardFooter from '../../components/flexible/footer';
 import { RetryAction } from '../../actions/flexible/RetryAction';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
 import Text from '../../../FlexibleCard/components/elements/text';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
 /**
  * This view represents a Block Card with an 'Errored' status.
  *
@@ -19,7 +21,6 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     cardState = _ref.cardState,
     onAuthorize = _ref.onAuthorize,
     onError = _ref.onError,
-    ui = _ref.ui,
     url = _ref.url,
     onClick = _ref.onClick,
     _ref$testId = _ref.testId,
@@ -34,7 +35,9 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -53,4 +56,4 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     status: status
   })));
 };
-export default FlexibleErroredView;
+export default withFlexibleUIBlockCardStyle(FlexibleErroredView);

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

@@ -12,6 +12,7 @@ import Text from '../../../FlexibleCard/components/elements/text';
 import { getForbiddenJsonLd } from '../../../../utils/jsonld';
 import { extractProvider } from '@atlaskit/link-extractors';
 import { extractRequestAccessContext } from '../../../../extractors/common/context';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -29,7 +30,6 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onError = _ref.onError,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
-    ui = _ref.ui,
     url = _ref.url;
   var status = cardState.status;
   var details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
@@ -59,7 +59,9 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -81,4 +83,4 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     status: status
   })));
 };
-export default FlexibleForbiddenView;
+export default withFlexibleUIBlockCardStyle(FlexibleForbiddenView);

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

@@ -7,6 +7,8 @@ import { R300 } from '@atlaskit/theme/colors';
 import BlockCardFooter from '../../components/flexible/footer';
 import Text from '../../../FlexibleCard/components/elements/text';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
+
 /**
  * This view represents a Block Card with a 'Not_Found' status.
  *
@@ -18,7 +20,6 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     cardState = _ref.cardState,
     onAuthorize = _ref.onAuthorize,
     onError = _ref.onError,
-    ui = _ref.ui,
     url = _ref.url,
     onClick = _ref.onClick,
     _ref$testId = _ref.testId,
@@ -31,7 +32,9 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -50,4 +53,4 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     status: status
   })));
 };
-export default FlexibleNotFoundView;
+export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);

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

@@ -9,6 +9,7 @@ import { ActionName, CardDisplay, ElementName, MediaPlacement, SmartLinkPosition
 import uuid from 'uuid';
 import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 
 /**
  * This view represents a Block card that has an 'Resolved' status.
@@ -25,7 +26,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     anchorTarget = _ref.anchorTarget,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-resolved-view' : _ref$testId,
-    ui = _ref.ui,
     url = _ref.url,
     analytics = _ref.analytics;
   var _useState = useState(false),
@@ -53,7 +53,9 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     onResolve: onResolve,
     showServerActions: showServerActions,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, _extends({
     position: SmartLinkPosition.Center,
@@ -130,4 +132,4 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }]
   }));
 };
-export default FlexibleResolvedView;
+export default withFlexibleUIBlockCardStyle(FlexibleResolvedView);

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

@@ -13,6 +13,7 @@ import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { css } from '@emotion/react';
 import { tokens } from '../../../../utils/token';
 import { messages } from '../../../../messages';
+import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
 var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), tokens.text);
 
 /**
@@ -34,7 +35,6 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     onError = _ref.onError,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-unauthorized-view' : _ref$testId,
-    ui = _ref.ui,
     url = _ref.url;
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
   var providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
@@ -67,7 +67,9 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/React.createElement(TitleBlock, {
     hideRetry: true,
@@ -81,4 +83,4 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     actionGroupAppearance: "primary"
   })));
 };
-export default FlexibleUnauthorisedView;
+export default withFlexibleUIBlockCardStyle(FlexibleUnauthorisedView);

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

@@ -1,7 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { tokens } from '../../../../utils/token';
 import { css } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 // in editor prosemirror adds padding-left so we need to overwrite it
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* primary element group */\n  span[data-smart-element-avatar-group] {\n    > ul {\n      padding-left: 0px;\n    }\n  }\n"])));
-export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: 0.5em;\n"])));
+export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: 0.5em;\n"])));
+var flexibleBlockCardElevationStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), tokens.elevation, "var(--ds-space-025, 2px)");
+var refreshedFlexibleBlockCardStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  & > div {\n    border-radius: ", ";\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border-radius-300, 12px)", "var(--ds-border-input, ".concat(N40, ")"));
+export var flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;

package/dist/esm/view/BlockCard/views/flexible/{utils.js → utils/index.js}

@@ -1,6 +1,6 @@
-import { ElementName } from '../../../../constants';
-import { extractOwnedBy, extractAssignedTo } from '../../../../extractors/flexible/utils';
-import { getExtensionKey } from '../../../../state/helpers';
+import { ElementName } from '../../../../../constants';
+import { extractOwnedBy, extractAssignedTo } from '../../../../../extractors/flexible/utils';
+import { getExtensionKey } from '../../../../../state/helpers';
 var baseTopMetadata = [{
   name: ElementName.ModifiedOn
 }, {