@atlaskit/smart-card 26.15.3 → 26.15.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.15.4
+
+### Patch Changes
+
+- [`2e4ceb4b6b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e4ceb4b6b1) - [ux] Refreshed design for flexible block and hover cards.
+
 ## 26.15.3
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -61,7 +61,6 @@ Object.defineProperty(exports, "PreviewAction", {
 });
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _helpers = require("../../state/helpers");
 var _block = require("../../extractors/block");
 var _jsonld = require("../../utils/jsonld");
@@ -80,17 +79,13 @@ var _FlexibleUnauthorisedView = _interopRequireDefault(require("./views/flexible
 var _FlexibleNotFoundView = _interopRequireDefault(require("./views/flexible/FlexibleNotFoundView"));
 var _FlexibleErroredView = _interopRequireDefault(require("./views/flexible/FlexibleErroredView"));
 var _FlexibleForbiddenView = _interopRequireDefault(require("./views/flexible/FlexibleForbiddenView"));
-var _token = require("../../utils/token");
 var _react = require("@emotion/react");
 var _handlers = require("./utils/handlers");
 var _linkProvider = require("@atlaskit/link-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _PreviewAction = _interopRequireDefault(require("./actions/PreviewAction"));
-var _templateObject;
-/** @jsx jsx */
 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) { (0, _defineProperty2.default)(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; }
-var flexibleBlockCardElevationStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: ", ";\n"])), _token.tokens.elevation, "var(--ds-space-025, 2px)");
+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) { (0, _defineProperty2.default)(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 */
 var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
   var id = _ref.id,
@@ -124,9 +119,6 @@ var BlockCard = function BlockCard(_ref) {
   };
   var enableImprovedPreviewAction = Boolean((0, _linkProvider.useFeatureFlag)('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
-    var ui = {
-      hideElevation: true
-    };
     var anchorTarget = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
     var flexibleProps = _objectSpread({
       id: id,
@@ -140,7 +132,6 @@ var BlockCard = function BlockCard(_ref) {
       onResolve: onResolve,
       renderers: renderers,
       showServerActions: showServerActions,
-      ui: ui,
       analytics: analytics,
       extensionKey: extensionKey
     }, anchorTarget ? {
@@ -149,33 +140,23 @@ var BlockCard = function BlockCard(_ref) {
     switch (status) {
       case 'pending':
       case 'resolving':
-        return (0, _react.jsx)("div", {
-          css: flexibleBlockCardElevationStyle
-        }, (0, _react.jsx)(_FlexibleResolvedView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleResolvedView.default, (0, _extends2.default)({}, flexibleProps, {
           testId: 'smart-block-resolving-view'
-        })));
+        }));
       case 'resolved':
-        return (0, _react.jsx)("div", {
-          css: flexibleBlockCardElevationStyle
-        }, (0, _react.jsx)(_FlexibleResolvedView.default, flexibleProps));
+        return (0, _react.jsx)(_FlexibleResolvedView.default, flexibleProps);
       case 'unauthorized':
-        return (0, _react.jsx)("div", {
-          css: flexibleBlockCardElevationStyle
-        }, (0, _react.jsx)(_FlexibleUnauthorisedView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleUnauthorisedView.default, (0, _extends2.default)({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
       case 'forbidden':
-        return (0, _react.jsx)("div", {
-          css: flexibleBlockCardElevationStyle
-        }, (0, _react.jsx)(_FlexibleForbiddenView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleForbiddenView.default, (0, _extends2.default)({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
       case 'not_found':
-        return (0, _react.jsx)("div", {
-          css: flexibleBlockCardElevationStyle
-        }, (0, _react.jsx)(_FlexibleNotFoundView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleNotFoundView.default, (0, _extends2.default)({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
       case 'fallback':
       case 'errored':
       default:
@@ -193,11 +174,9 @@ var BlockCard = function BlockCard(_ref) {
             testId: "".concat(testId, "-").concat(status)
           });
         }
-        return (0, _react.jsx)("div", {
-          css: flexibleBlockCardElevationStyle
-        }, (0, _react.jsx)(_FlexibleErroredView.default, (0, _extends2.default)({}, flexibleProps, {
+        return (0, _react.jsx)(_FlexibleErroredView.default, (0, _extends2.default)({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
     }
   }
   switch (status) {

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

@@ -16,6 +16,7 @@ var _footer = _interopRequireDefault(require("../../components/flexible/footer")
 var _RetryAction = require("../../actions/flexible/RetryAction");
 var _blocks = require("../../../FlexibleCard/components/blocks");
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
+var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -29,7 +30,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,
@@ -44,7 +44,9 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
     hideRetry: true,
@@ -63,5 +65,5 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
     status: status
   })));
 };
-var _default = FlexibleErroredView;
+var _default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleErroredView);
 exports.default = _default;

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

@@ -20,6 +20,7 @@ var _text = _interopRequireDefault(require("../../../FlexibleCard/components/ele
 var _jsonld = require("../../../../utils/jsonld");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _context = require("../../../../extractors/common/context");
+var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -38,7 +39,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;
@@ -68,7 +68,9 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
     hideRetry: true,
@@ -90,5 +92,5 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     status: status
   })));
 };
-var _default = FlexibleForbiddenView;
+var _default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleForbiddenView);
 exports.default = _default;

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

@@ -14,6 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
 var _text = _interopRequireDefault(require("../../../FlexibleCard/components/elements/text"));
 var _blocks = require("../../../FlexibleCard/components/blocks");
+var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 /**
  * This view represents a Block Card with a 'Not_Found' status.
  *
@@ -25,7 +26,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,
@@ -38,7 +38,9 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, {
     hideRetry: true,
@@ -57,5 +59,5 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
     status: status
   })));
 };
-var _default = FlexibleNotFoundView;
+var _default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleNotFoundView);
 exports.default = _default;

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

@@ -17,6 +17,7 @@ var _constants = require("../../../../constants");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("./utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
@@ -34,7 +35,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 = (0, _react.useState)(false),
@@ -62,7 +62,9 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     onResolve: onResolve,
     showServerActions: showServerActions,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/_react.default.createElement(_titleBlock.default, (0, _extends2.default)({
     position: _constants.SmartLinkPosition.Center,
@@ -139,5 +141,5 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }]
   }));
 };
-var _default = FlexibleResolvedView;
+var _default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleResolvedView);
 exports.default = _default;

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

@@ -20,6 +20,7 @@ var _UnauthorisedViewContent = _interopRequireDefault(require("../../../common/U
 var _react2 = require("@emotion/react");
 var _token = require("../../../../utils/token");
 var _messages = require("../../../../messages");
+var _withFlexibleUIBlockCardStyle = require("./utils/withFlexibleUIBlockCardStyle");
 var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -44,7 +45,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 = (0, _linkExtractors.extractProvider)(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
@@ -77,7 +77,9 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     onClick: onClick,
     onError: onError,
     testId: testId,
-    ui: ui,
+    ui: {
+      hideElevation: true
+    },
     url: url
   }, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, {
     hideRetry: true,
@@ -91,5 +93,5 @@ var FlexibleUnauthorisedView = function FlexibleUnauthorisedView(_ref) {
     actionGroupAppearance: "primary"
   })));
 };
-var _default = FlexibleUnauthorisedView;
+var _default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(FlexibleUnauthorisedView);
 exports.default = _default;

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

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

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSimulatedMetadata = exports.getSimulatedBetterMetadata = void 0;
-var _constants = require("../../../../constants");
-var _utils = require("../../../../extractors/flexible/utils");
-var _helpers = require("../../../../state/helpers");
+var _constants = require("../../../../../constants");
+var _utils = require("../../../../../extractors/flexible/utils");
+var _helpers = require("../../../../../state/helpers");
 var baseTopMetadata = [{
   name: _constants.ElementName.ModifiedOn
 }, {

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withFlexibleUIBlockCardStyle = void 0;
+var _react = require("@emotion/react");
+var _styled = require("../styled");
+/** @jsx jsx */
+
+var withFlexibleUIBlockCardStyle = function withFlexibleUIBlockCardStyle(FlexibleBlockCardView) {
+  return function (props) {
+    return (0, _react.jsx)("div", {
+      css: _styled.flexibleBlockCardStyle
+    }, (0, _react.jsx)(FlexibleBlockCardView, props));
+  };
+};
+exports.withFlexibleUIBlockCardStyle = withFlexibleUIBlockCardStyle;

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

@@ -0,0 +1,25 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _styled = require("../styled");
+var _react2 = require("@emotion/react");
+var _excluded = ["children"];
+/** @jsx jsx */
+var CustomPopupContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: _styled.popupContainerStyles
+  }, props, {
+    ref: ref
+  }), children);
+});
+var _default = CustomPopupContainer;
+exports.default = _default;

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

@@ -15,12 +15,14 @@ var _useSmartLinkActions = require("../../../state/hooks-external/useSmartLinkAc
 var _renderers = require("../../../state/renderers");
 var _store = require("../../../state/store");
 var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
+var _CustomPopupContainer = _interopRequireDefault(require("../components/CustomPopupContainer"));
 var _styled = require("../styled");
 var _constants = require("../../../constants");
 var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
 var _actions = require("../../../state/actions");
 var _analytics = require("../../../state/analytics");
 var _linkProvider = require("@atlaskit/link-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
@@ -220,7 +222,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       "data-testid": "hover-card-trigger-wrapper"
     }), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return (0, _react.jsx)(_popup.default, {
+  return (0, _react.jsx)(_popup.default, (0, _extends2.default)({
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,
@@ -230,6 +232,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     content: content,
     trigger: trigger,
     zIndex: zIndex
-  });
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') && {
+    popupComponent: _CustomPopupContainer.default
+  }));
 };
 exports.HoverCardComponent = HoverCardComponent;

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

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.separatorCss = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.separatorCss = exports.popupContainerStyles = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _index = require("../../index");
 var _constants = require("../../constants");
 var _constants2 = require("@atlaskit/theme/constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _components = require("@atlaskit/theme/components");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 var HOVER_CARD_Z_INDEX = _constants2.layers.modal();
 exports.HOVER_CARD_Z_INDEX = HOVER_CARD_Z_INDEX;
@@ -41,4 +42,12 @@ exports.titleBlockCss = titleBlockCss;
 var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transition: height 300ms ease-in-out;\n  height: ", "px;\n"])), snippetHeight);
 };
-exports.getTransitionStyles = getTransitionStyles;
+exports.getTransitionStyles = getTransitionStyles;
+var popupContainerStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n"])), "var(--ds-border-radius-300, 12px)", (0, _components.themed)({
+  light: "var(--ds-surface-raised, white)",
+  dark: "var(--ds-surface-raised, #262B31)"
+})(), (0, _components.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))"
+})());
+exports.popupContainerStyles = popupContainerStyles;

package/dist/es2019/version.json

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

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

@@ -19,18 +19,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 };
-const flexibleBlockCardElevationStyle = css`
-  border-radius: 1.5px;
-  box-shadow: ${tokens.elevation};
-  margin: ${"var(--ds-space-025, 2px)"};
-`;
 export const BlockCard = ({
   id,
   url,
@@ -67,9 +61,6 @@ export const BlockCard = ({
   };
   const enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   if (enableFlexibleBlockCard) {
-    const ui = {
-      hideElevation: true
-    };
     const anchorTarget = getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined;
     const flexibleProps = {
       id,
@@ -81,7 +72,6 @@ export const BlockCard = ({
       onResolve,
       renderers,
       showServerActions,
-      ui,
       analytics,
       extensionKey,
       ...(anchorTarget ? {
@@ -91,33 +81,23 @@ export const BlockCard = ({
     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:
@@ -135,11 +115,9 @@ export const BlockCard = ({
             testId: `${testId}-${status}`
           });
         }
-        return jsx("div", {
-          css: flexibleBlockCardElevationStyle
-        }, jsx(FlexibleErroredView, _extends({}, flexibleProps, {
+        return jsx(FlexibleErroredView, _extends({}, flexibleProps, {
           onAuthorize: handleAuthorize
-        })));
+        }));
     }
   }
   switch (status) {

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);