@atlaskit/smart-card 26.15.3 → 26.15.4

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/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.15.3",
+	"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
 }, {

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

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

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

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+/** @jsx jsx */
+import React from 'react';
+import { popupContainerStyles } from '../styled';
+import { jsx } from '@emotion/react';
+var CustomPopupContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("div", _extends({
+    css: popupContainerStyles
+  }, props, {
+    ref: ref
+  }), children);
+});
+export default CustomPopupContainer;

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

@@ -8,12 +8,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';
 var HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
 var FADE_IN_DELAY = 500;
 var FADE_OUT_DELAY = 300;
@@ -209,7 +211,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       "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,
@@ -219,5 +221,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     content: content,
     trigger: trigger,
     zIndex: zIndex
-  });
+  }, getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') && {
+    popupComponent: CustomPopupContainer
+  }));
 };

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

@@ -1,9 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 var HOVER_CARD_Z_INDEX = layers.modal();
@@ -27,4 +28,11 @@ export var HoverCardContainer = css(_templateObject2 || (_templateObject2 = _tag
 export var titleBlockCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n"])), blockGap, separatorCss, elementGap);
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
-};
+};
+export var popupContainerStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-300, 12px)", themed({
+  light: "var(--ds-surface-raised, white)",
+  dark: "var(--ds-surface-raised, #262B31)"
+})(), 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/types/view/BlockCard/views/flexible/FlexibleErroredView.d.ts

@@ -1,10 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * This view represents a Block Card with an 'Errored' status.
- *
- * @see SmartLinkStatus
- * @see FlexibleCardProps
- */
-declare const FlexibleErroredView: ({ anchorTarget, cardState, onAuthorize, onError, ui, url, onClick, testId, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleErroredView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;

package/dist/types/view/BlockCard/views/flexible/FlexibleForbiddenView.d.ts

@@ -1,11 +1,3 @@
-/// <reference types="react" />
 import { FlexibleBlockCardProps } from './types';
-/**
- * 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
- */
-declare const FlexibleForbiddenView: ({ anchorTarget, cardState, onAuthorize, onClick, onError, testId, ui, url, }: FlexibleBlockCardProps) => JSX.Element;
-export default FlexibleForbiddenView;
+declare const _default: (props: FlexibleBlockCardProps) => import("@emotion/react").jsx.JSX.Element;
+export default _default;