@atlaskit/smart-card 26.14.0 → 26.14.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.14.2
+
+### Patch Changes
+
+- [`6a807668da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a807668da6) - [ux] Refreshed design for the Embed Smart Links view added under the FF
+
+## 26.14.1
+
+### Patch Changes
+
+- [`f3cefce58df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f3cefce58df) - Refactor embed modal helper function (internal)
+
 ## 26.14.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/component.js

@@ -224,7 +224,7 @@ function Component(_ref) {
         showAuthTooltip: showAuthTooltip,
         showServerActions: showServerActions
       };
-      return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/_react.default.createElement(_RedesignedInlineCard.InlineCard, inlineProps) : /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, inlineProps);
+      return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? /*#__PURE__*/_react.default.createElement(_RedesignedInlineCard.InlineCard, inlineProps) : /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, inlineProps);
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {
         id: id,

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -5,21 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.cardShadow = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
+exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _constants = require("@atlaskit/theme/constants");
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _utils = require("../../common/utils");
+var _components = require("@atlaskit/theme/components");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 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; }
 var className = 'media-card-frame';
 exports.className = className;
-var cardShadow = "";
-exports.cardShadow = cardShadow;
 var borderRadius = "\n  border-radius: ".concat((0, _constants.borderRadius)(), "px;\n");
 exports.borderRadius = borderRadius;
+var BACKGROUND_COLOR_DARK = '#262B31';
+var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-400, 16px)", ";\n");
+var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n");
 var ellipsis = function ellipsis() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   var unit = typeof maxWidth === 'number' ? 'px' : '';
@@ -51,21 +54,24 @@ function maxWidth(_ref2) {
 function getInteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
     frameStyle = _ref3.frameStyle;
-  return isInteractive ? "\n      &:hover {\n        ".concat(frameStyle !== 'hide' && visibleStyles, "\n      }\n      &:active {\n        background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n      }\n    ") : '';
+  return isInteractive ? "\n      &:hover {\n        ".concat(frameStyle !== 'hide' && visibleStyles, "\n\n      }\n      &:active {\n        background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n      }\n    ") : '';
 }
 function selected(_ref4) {
   var isSelected = _ref4.isSelected,
     frameStyle = _ref4.frameStyle;
-  return isSelected && frameStyle !== 'hide' ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : isSelected && frameStyle === 'hide' ? "\n        box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n        ", borderRadius, "\n      ") : '';
+  return isSelected && frameStyle !== 'hide' ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n    }\n    ") : isSelected && frameStyle === 'hide' ? "\n        ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? contentBorderRadius : "box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n              ", borderRadius), "\n      ") : '';
 }
 var height = function height(_ref5) {
   var inheritDimensions = _ref5.inheritDimensions;
   return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
 };
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n    ").concat(borderRadius, "\n  }\n");
+  return "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
 };
-var visibleStyles = "\n  background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n  &:after {\n    background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+var visibleStyles = "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "outline: 1px solid ".concat("var(--ds-border-input, ".concat(colors.N40, ")"), ";\n           background-color: ", (0, _components.themed)({
+  light: "var(--ds-surface-raised, white)",
+  dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
+})(), ";") : "background: ".concat("var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;"), "\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 function visible(_ref6) {
   var frameStyle = _ref6.frameStyle;
   return frameStyle === 'show' ? visibleStyles : '';
@@ -105,9 +111,9 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n       outline: 1px solid ", "var(--ds-border-input, ".concat(colors.N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
   var isInteractive = _ref9.isInteractive;
-  if (isInteractive) {
+  if (isInteractive && !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
     return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");
   } else {
     return '';

package/dist/cjs/view/EmbedModal/utils.js

@@ -5,53 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.openPreviewModal = void 0;
-exports.previewFunction = previewFunction;
+exports.openEmbedModal = openEmbedModal;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
-var _icon = _interopRequireDefault(require("../FlexibleCard/components/elements/icon"));
-var _constants = require("../../constants");
-var _excluded = ["popupMountPointId", "onClose"];
+var _excluded = ["onClose"];
 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; }
-var openPreviewModal = function openPreviewModal(_ref) {
-  var analytics = _ref.analytics,
-    download = _ref.downloadUrl,
-    isSupportTheming = _ref.isSupportTheming,
-    linkIcon = _ref.linkIcon,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-    providerName = _ref.providerName,
-    src = _ref.src,
-    title = _ref.title,
-    url = _ref.url;
-  var EmbedIcon = {
-    icon: /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({}, linkIcon, {
-      size: _constants.SmartLinkSize.Large
-    })),
-    isFlexibleUi: true
-  };
-  return previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
-    showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
-    onClose: onClose,
-    download: download,
-    icon: EmbedIcon,
-    providerName: providerName || 'Preview',
-    src: src,
-    title: title,
-    url: url,
-    analytics: analytics,
-    origin: 'smartLinkCard',
-    isSupportTheming: isSupportTheming
-  });
-};
+var IFRAME_NAME = 'twp-editor-preview-iframe';
+var POPUP_MOUNT_POINT_ID = 'twp-editor-preview-iframe';
 
 /*
   Explanatory note:
@@ -66,47 +32,55 @@ var openPreviewModal = function openPreviewModal(_ref) {
   you find an elegant solution around this, you should definitely feel free to
   refactor it.
 */
-exports.openPreviewModal = openPreviewModal;
-function previewFunction(_x) {
-  return _previewFunction.apply(this, arguments);
+function openEmbedModal() {
+  return _openEmbedModal.apply(this, arguments);
 }
-function _previewFunction() {
-  _previewFunction = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
-    var popupMountPointId, onEmbedClose, rest, popupMountPoint, Modal;
+function _openEmbedModal() {
+  _openEmbedModal = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var _ref,
+      _ref$onClose,
+      _onClose,
+      props,
+      popupMountPoint,
+      Modal,
+      _args = arguments;
     return _regenerator.default.wrap(function _callee$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          popupMountPointId = _ref2.popupMountPointId, onEmbedClose = _ref2.onClose, rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-          popupMountPoint = document.getElementById(popupMountPointId);
+          _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+          _ref$onClose = _ref.onClose, _onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose, props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+          popupMountPoint = document.getElementById(POPUP_MOUNT_POINT_ID);
           if (!popupMountPoint) {
             popupMountPoint = document.createElement('div');
-            popupMountPoint.id = popupMountPointId;
+            popupMountPoint.id = POPUP_MOUNT_POINT_ID;
             popupMountPoint.setAttribute('data-testid', 'preview-modal');
             document.body.appendChild(popupMountPoint);
           }
-          _context2.next = 5;
+          _context2.next = 6;
           return Promise.resolve().then(function () {
             return _interopRequireWildcard(require('./index'));
           });
-        case 5:
+        case 6:
           Modal = _context2.sent;
           _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
             locale: "en"
-          }, /*#__PURE__*/_react.default.createElement(Modal.default, (0, _extends2.default)({}, rest, {
+          }, /*#__PURE__*/_react.default.createElement(Modal.default, (0, _extends2.default)({}, props, {
+            iframeName: IFRAME_NAME,
             onClose: function onClose(_context) {
               if (popupMountPoint) {
                 _reactDom.default.unmountComponentAtNode(popupMountPoint);
               }
-              if (onEmbedClose) {
-                onEmbedClose(_context);
+              if (_onClose) {
+                _onClose(_context);
               }
-            }
+            },
+            showModal: true
           }))), popupMountPoint);
-        case 7:
+        case 8:
         case "end":
           return _context2.stop();
       }
     }, _callee);
   }));
-  return _previewFunction.apply(this, arguments);
+  return _openEmbedModal.apply(this, arguments);
 }

package/dist/cjs/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -11,10 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../index"));
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _state = require("../../../../../../state");
-var _utils = require("../../../../../EmbedModal/utils");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../../../../messages");
 var _linkProvider = require("@atlaskit/link-provider");
+var _utils = require("../../../utils");
 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 PreviewAction = function PreviewAction(props) {
@@ -35,7 +35,7 @@ var PreviewAction = function PreviewAction(props) {
   var previewText = enableImprovedPreviewAction ? _messages.messages.preview_improved : _messages.messages.preview;
   if (src && url) {
     var embedModal = function embedModal() {
-      return (0, _utils.openPreviewModal)({
+      return (0, _utils.openEmbedModalWithFlexibleUiIcon)({
         title: title,
         providerName: providerName,
         downloadUrl: downloadUrl,

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -16,7 +16,6 @@ var _styled = require("./styled");
 var _utils = require("../../../../utils");
 var _messages = require("../../../../../../../messages");
 var _flexibleUiContext = require("../../../../../../../state/flexible-ui-context");
-var _utils2 = require("../../../../../../EmbedModal/utils");
 var _useResolve = _interopRequireDefault(require("../../../../../../../state/hooks/use-resolve"));
 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; } /** @jsx jsx */
@@ -39,7 +38,7 @@ var LozengeActionError = function LozengeActionError(_ref) {
   var handlePreviewOpen = (0, _react2.useCallback)(function () {
     if (isPreviewAvailable) {
       analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
-      return (0, _utils2.openPreviewModal)(_objectSpread(_objectSpread({}, previewData), {}, {
+      return (0, _utils.openEmbedModalWithFlexibleUiIcon)(_objectSpread(_objectSpread({}, previewData), {}, {
         analytics: analytics,
         onClose: handlePreviewClose
       }));

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToButtonSpacing = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -12,6 +12,8 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../../constants");
+var _icon = _interopRequireDefault(require("./elements/icon"));
+var _utils = require("../../EmbedModal/utils");
 var _sizeToButtonSpacing, _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var sizeToButtonSpacing = (_sizeToButtonSpacing = {}, (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToButtonSpacing);
 exports.sizeToButtonSpacing = sizeToButtonSpacing;
@@ -105,4 +107,37 @@ exports.getTruncateStyles = getTruncateStyles;
 var hasWhiteSpace = function hasWhiteSpace(str) {
   return str.search(/\s/) >= 0;
 };
-exports.hasWhiteSpace = hasWhiteSpace;
+exports.hasWhiteSpace = hasWhiteSpace;
+var openEmbedModalWithFlexibleUiIcon = function openEmbedModalWithFlexibleUiIcon(_ref) {
+  var analytics = _ref.analytics,
+    downloadUrl = _ref.downloadUrl,
+    linkIcon = _ref.linkIcon,
+    onClose = _ref.onClose,
+    providerName = _ref.providerName,
+    src = _ref.src,
+    title = _ref.title,
+    url = _ref.url,
+    isSupportTheming = _ref.isSupportTheming;
+  var icon = {
+    icon: /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({}, linkIcon, {
+      size: _constants.SmartLinkSize.Large
+    })),
+    isFlexibleUi: true
+  };
+  return (0, _utils.openEmbedModal)({
+    analytics: analytics,
+    download: downloadUrl,
+    icon: icon,
+    // Flex should not send origin as block card. It should be able to support
+    // its internal parent components like hover card, block card and
+    // itself as a standalone. To be investigated and fix in EDM-7520.
+    origin: 'smartLinkCard',
+    providerName: providerName,
+    onClose: onClose,
+    src: src,
+    title: title,
+    url: url,
+    isSupportTheming: isSupportTheming
+  });
+};
+exports.openEmbedModalWithFlexibleUiIcon = openEmbedModalWithFlexibleUiIcon;

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -211,7 +211,7 @@ function Component({
         showAuthTooltip: showAuthTooltip,
         showServerActions: showServerActions
       };
-      return getBooleanFF('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
+      return getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {
         id: id,

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -2,11 +2,20 @@ import styled from '@emotion/styled';
 import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { gs as gridSize } from '../../common/utils';
+import { N40 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const className = 'media-card-frame';
-export const cardShadow = ``;
 export const borderRadius = `
   border-radius: ${akBorderRadius()}px;
 `;
+const BACKGROUND_COLOR_DARK = '#262B31';
+const wrapperBorderRadius = `
+  border-radius: ${"var(--ds-border-radius-400, 16px)"};
+`;
+const contentBorderRadius = `
+  border-radius: ${"var(--ds-border-radius-300, 12px)"};
+`;
 export const ellipsis = (maxWidth = '100%') => {
   const unit = typeof maxWidth === 'number' ? 'px' : '';
   return `
@@ -48,6 +57,7 @@ function getInteractiveStyles({
   return isInteractive ? `
       &:hover {
         ${frameStyle !== 'hide' && visibleStyles}
+
       }
       &:active {
         background-color: ${`var(--ds-background-selected, ${colors.B50})`};
@@ -69,18 +79,18 @@ function selected({
       height: 100%;
       width: 100%;
       left: 0;
-      ${borderRadius}
+      ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius}
     }
     ` : isSelected && frameStyle === 'hide' ? `
-        box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
-        ${borderRadius}
+        ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? contentBorderRadius : `box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
+              ${borderRadius}`}
       ` : '';
 }
 const height = ({
   inheritDimensions
 }) => inheritDimensions ? 'height: 100%;' : `height: ${gridSize(54)}`;
 const wrapperStyles = props => `
-  ${borderRadius}
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius}
   ${minWidth(props)}
   ${maxWidth(props)}
   ${getInteractiveStyles(props)}
@@ -99,20 +109,24 @@ const wrapperStyles = props => `
 
   &:after {
     content: '';
-    background: transparent;
     transition: background 0.3s, box-shadow 0.3s;
     position: absolute;
     width: calc(100% + ${"var(--ds-space-200, 16px)"});
     height: calc(100% + ${"var(--ds-space-100, 8px)"});
     left: calc(-1 * ${"var(--ds-space-100, 8px)"});
-    ${borderRadius}
+    ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : `background: transparent;
+           ${borderRadius}`}
   }
 `;
 const visibleStyles = `
-  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N30})`};
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `` : `background-color: ${`var(--ds-background-neutral-subtle, ${colors.N30})`};`}
 
   &:after {
-    background: ${`var(--ds-background-neutral, ${colors.N30})`} !important;
+    ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `outline: 1px solid ${`var(--ds-border-input, ${N40})`};
+           background-color: ${themed({
+  light: "var(--ds-surface-raised, white)",
+  dark: `var(--ds-surface-raised, ${BACKGROUND_COLOR_DARK})`
+})()};` : `background: ${`var(--ds-background-neutral, ${colors.N30})`} !important;`}
   }
   .embed-header {
     opacity: 1;
@@ -183,8 +197,8 @@ export const TextWrapper = styled.div`
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 export const Content = styled.div`
-  ${borderRadius}
-  ${cardShadow}
+  ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? `${contentBorderRadius};
+       outline: 1px solid ${`var(--ds-border-input, ${N40})`};` : borderRadius}
   background-color: ${"var(--ds-surface-raised, white)"};
   position: absolute;
   z-index: 1;
@@ -205,7 +219,7 @@ export const Content = styled.div`
   ${({
   isInteractive
 }) => {
-  if (isInteractive) {
+  if (isInteractive && !getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
     return `
           .${className}:hover & {
             box-shadow: ${"var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))"};

package/dist/es2019/view/EmbedModal/utils.js

@@ -2,41 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
-import Icon from '../FlexibleCard/components/elements/icon';
-import { SmartLinkSize } from '../../constants';
-export const openPreviewModal = ({
-  analytics,
-  downloadUrl: download,
-  isSupportTheming,
-  linkIcon,
-  onClose = () => {},
-  providerName,
-  src,
-  title,
-  url
-}) => {
-  const EmbedIcon = {
-    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
-      size: SmartLinkSize.Large
-    })),
-    isFlexibleUi: true
-  };
-  return previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
-    showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
-    onClose,
-    download,
-    icon: EmbedIcon,
-    providerName: providerName || 'Preview',
-    src,
-    title,
-    url,
-    analytics,
-    origin: 'smartLinkCard',
-    isSupportTheming
-  });
-};
+const IFRAME_NAME = 'twp-editor-preview-iframe';
+const POPUP_MOUNT_POINT_ID = 'twp-editor-preview-iframe';
 
 /*
   Explanatory note:
@@ -51,30 +18,31 @@ export const openPreviewModal = ({
   you find an elegant solution around this, you should definitely feel free to
   refactor it.
 */
-export async function previewFunction({
-  popupMountPointId,
-  onClose: onEmbedClose,
-  ...rest
-}) {
+export async function openEmbedModal({
+  onClose = () => {},
+  ...props
+} = {}) {
   let popupMountPoint;
-  popupMountPoint = document.getElementById(popupMountPointId);
+  popupMountPoint = document.getElementById(POPUP_MOUNT_POINT_ID);
   if (!popupMountPoint) {
     popupMountPoint = document.createElement('div');
-    popupMountPoint.id = popupMountPointId;
+    popupMountPoint.id = POPUP_MOUNT_POINT_ID;
     popupMountPoint.setAttribute('data-testid', 'preview-modal');
     document.body.appendChild(popupMountPoint);
   }
   let Modal = await import('./index');
   ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
-  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, props, {
+    iframeName: IFRAME_NAME,
     onClose: _context => {
       if (popupMountPoint) {
         ReactDOM.unmountComponentAtNode(popupMountPoint);
       }
-      if (onEmbedClose) {
-        onEmbedClose(_context);
+      if (onClose) {
+        onClose(_context);
       }
-    }
+    },
+    showModal: true
   }))), popupMountPoint);
 }

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -3,10 +3,10 @@ import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { useSmartLinkAnalytics } from '../../../../../../state';
-import { openPreviewModal } from '../../../../../EmbedModal/utils';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
 const PreviewAction = props => {
   const {
     appearance,
@@ -26,7 +26,7 @@ const PreviewAction = props => {
   const enableImprovedPreviewAction = Boolean(useFeatureFlag('enableImprovedPreviewAction'));
   const previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   if (src && url) {
-    const embedModal = () => openPreviewModal({
+    const embedModal = () => openEmbedModalWithFlexibleUiIcon({
       title,
       providerName,
       downloadUrl,

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -6,10 +6,9 @@ import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { R50, R500 } from '@atlaskit/theme/colors';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { dropdownItemGroupStyles, contentStyles, linkStyles, textStyles } from './styled';
-import { getFormattedMessage } from '../../../../utils';
+import { getFormattedMessage, openEmbedModalWithFlexibleUiIcon } from '../../../../utils';
 import { messages } from '../../../../../../../messages';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../../state/flexible-ui-context';
-import { openPreviewModal } from '../../../../../../EmbedModal/utils';
 import useResolve from '../../../../../../../state/hooks/use-resolve';
 const MAX_LINE_NUMBER = 8;
 const LozengeActionError = ({
@@ -30,7 +29,7 @@ const LozengeActionError = ({
   const handlePreviewOpen = useCallback(() => {
     if (isPreviewAvailable) {
       analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
-      return openPreviewModal({
+      return openEmbedModalWithFlexibleUiIcon({
         ...previewData,
         analytics,
         onClose: handlePreviewClose

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -3,6 +3,8 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
+import Icon from './elements/icon';
+import { openEmbedModal } from '../../EmbedModal/utils';
 export const sizeToButtonSpacing = {
   [SmartLinkSize.Small]: 'none',
   [SmartLinkSize.Medium]: 'compact',
@@ -130,4 +132,37 @@ export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'br
   `;
 export const hasWhiteSpace = str => {
   return str.search(/\s/) >= 0;
+};
+export const openEmbedModalWithFlexibleUiIcon = ({
+  analytics,
+  downloadUrl,
+  linkIcon,
+  onClose,
+  providerName,
+  src,
+  title,
+  url,
+  isSupportTheming
+}) => {
+  const icon = {
+    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+      size: SmartLinkSize.Large
+    })),
+    isFlexibleUi: true
+  };
+  return openEmbedModal({
+    analytics,
+    download: downloadUrl,
+    icon,
+    // Flex should not send origin as block card. It should be able to support
+    // its internal parent components like hover card, block card and
+    // itself as a standalone. To be investigated and fix in EDM-7520.
+    origin: 'smartLinkCard',
+    providerName,
+    onClose,
+    src,
+    title,
+    url,
+    isSupportTheming
+  });
 };

package/dist/esm/version.json

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

package/dist/esm/view/CardWithUrl/component.js

@@ -214,7 +214,7 @@ function Component(_ref) {
         showAuthTooltip: showAuthTooltip,
         showServerActions: showServerActions
       };
-      return getBooleanFF('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
+      return getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {
         id: id,

package/dist/esm/view/EmbedCard/components/styled.js

@@ -4,9 +4,14 @@ import styled from '@emotion/styled';
 import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { gs as gridSize } from '../../common/utils';
+import { N40 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var className = 'media-card-frame';
-export var cardShadow = "";
 export var borderRadius = "\n  border-radius: ".concat(akBorderRadius(), "px;\n");
+var BACKGROUND_COLOR_DARK = '#262B31';
+var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-400, 16px)", ";\n");
+var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-300, 12px)", ";\n");
 export var ellipsis = function ellipsis() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   var unit = typeof maxWidth === 'number' ? 'px' : '';
@@ -36,21 +41,24 @@ function maxWidth(_ref2) {
 function getInteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
     frameStyle = _ref3.frameStyle;
-  return isInteractive ? "\n      &:hover {\n        ".concat(frameStyle !== 'hide' && visibleStyles, "\n      }\n      &:active {\n        background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n      }\n    ") : '';
+  return isInteractive ? "\n      &:hover {\n        ".concat(frameStyle !== 'hide' && visibleStyles, "\n\n      }\n      &:active {\n        background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n      }\n    ") : '';
 }
 function selected(_ref4) {
   var isSelected = _ref4.isSelected,
     frameStyle = _ref4.frameStyle;
-  return isSelected && frameStyle !== 'hide' ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : isSelected && frameStyle === 'hide' ? "\n        box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n        ", borderRadius, "\n      ") : '';
+  return isSelected && frameStyle !== 'hide' ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n    }\n    ") : isSelected && frameStyle === 'hide' ? "\n        ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? contentBorderRadius : "box-shadow: 0 0 0 3px ".concat("var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n              ", borderRadius), "\n      ") : '';
 }
 var height = function height(_ref5) {
   var inheritDimensions = _ref5.inheritDimensions;
   return inheritDimensions ? 'height: 100%;' : "height: ".concat(gridSize(54));
 };
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n    ").concat(borderRadius, "\n  }\n");
+  return "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
 };
-var visibleStyles = "\n  background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n  &:after {\n    background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+var visibleStyles = "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "outline: 1px solid ".concat("var(--ds-border-input, ".concat(N40, ")"), ";\n           background-color: ", themed({
+  light: "var(--ds-surface-raised, white)",
+  dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
+})(), ";") : "background: ".concat("var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;"), "\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 function visible(_ref6) {
   var frameStyle = _ref6.frameStyle;
   return frameStyle === 'show' ? visibleStyles : '';
@@ -84,9 +92,9 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "".concat(contentBorderRadius, ";\n       outline: 1px solid ", "var(--ds-border-input, ".concat(N40, ")"), ";") : borderRadius, "var(--ds-surface-raised, white)", function (_ref9) {
   var isInteractive = _ref9.isInteractive;
-  if (isInteractive) {
+  if (isInteractive && !getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design')) {
     return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");
   } else {
     return '';

package/dist/esm/view/EmbedModal/utils.js

@@ -1,46 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["popupMountPointId", "onClose"];
+var _excluded = ["onClose"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl-next';
-import Icon from '../FlexibleCard/components/elements/icon';
-import { SmartLinkSize } from '../../constants';
-export var openPreviewModal = function openPreviewModal(_ref) {
-  var analytics = _ref.analytics,
-    download = _ref.downloadUrl,
-    isSupportTheming = _ref.isSupportTheming,
-    linkIcon = _ref.linkIcon,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-    providerName = _ref.providerName,
-    src = _ref.src,
-    title = _ref.title,
-    url = _ref.url;
-  var EmbedIcon = {
-    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
-      size: SmartLinkSize.Large
-    })),
-    isFlexibleUi: true
-  };
-  return previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
-    showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
-    onClose: onClose,
-    download: download,
-    icon: EmbedIcon,
-    providerName: providerName || 'Preview',
-    src: src,
-    title: title,
-    url: url,
-    analytics: analytics,
-    origin: 'smartLinkCard',
-    isSupportTheming: isSupportTheming
-  });
-};
+var IFRAME_NAME = 'twp-editor-preview-iframe';
+var POPUP_MOUNT_POINT_ID = 'twp-editor-preview-iframe';
 
 /*
   Explanatory note:
@@ -55,44 +22,53 @@ export var openPreviewModal = function openPreviewModal(_ref) {
   you find an elegant solution around this, you should definitely feel free to
   refactor it.
 */
-export function previewFunction(_x) {
-  return _previewFunction.apply(this, arguments);
+export function openEmbedModal() {
+  return _openEmbedModal.apply(this, arguments);
 }
-function _previewFunction() {
-  _previewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
-    var popupMountPointId, onEmbedClose, rest, popupMountPoint, Modal;
+function _openEmbedModal() {
+  _openEmbedModal = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref,
+      _ref$onClose,
+      _onClose,
+      props,
+      popupMountPoint,
+      Modal,
+      _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          popupMountPointId = _ref2.popupMountPointId, onEmbedClose = _ref2.onClose, rest = _objectWithoutProperties(_ref2, _excluded);
-          popupMountPoint = document.getElementById(popupMountPointId);
+          _ref = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+          _ref$onClose = _ref.onClose, _onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose, props = _objectWithoutProperties(_ref, _excluded);
+          popupMountPoint = document.getElementById(POPUP_MOUNT_POINT_ID);
           if (!popupMountPoint) {
             popupMountPoint = document.createElement('div');
-            popupMountPoint.id = popupMountPointId;
+            popupMountPoint.id = POPUP_MOUNT_POINT_ID;
             popupMountPoint.setAttribute('data-testid', 'preview-modal');
             document.body.appendChild(popupMountPoint);
           }
-          _context2.next = 5;
+          _context2.next = 6;
           return import('./index');
-        case 5:
+        case 6:
           Modal = _context2.sent;
           ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
             locale: "en"
-          }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+          }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, props, {
+            iframeName: IFRAME_NAME,
             onClose: function onClose(_context) {
               if (popupMountPoint) {
                 ReactDOM.unmountComponentAtNode(popupMountPoint);
               }
-              if (onEmbedClose) {
-                onEmbedClose(_context);
+              if (_onClose) {
+                _onClose(_context);
               }
-            }
+            },
+            showModal: true
           }))), popupMountPoint);
-        case 7:
+        case 8:
         case "end":
           return _context2.stop();
       }
     }, _callee);
   }));
-  return _previewFunction.apply(this, arguments);
+  return _openEmbedModal.apply(this, arguments);
 }

package/dist/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -6,10 +6,10 @@ import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
 import { useSmartLinkAnalytics } from '../../../../../../state';
-import { openPreviewModal } from '../../../../../EmbedModal/utils';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../../../messages';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
 var PreviewAction = function PreviewAction(props) {
   var appearance = props.appearance,
     asDropDownItem = props.asDropDownItem,
@@ -28,7 +28,7 @@ var PreviewAction = function PreviewAction(props) {
   var previewText = enableImprovedPreviewAction ? messages.preview_improved : messages.preview;
   if (src && url) {
     var embedModal = function embedModal() {
-      return openPreviewModal({
+      return openEmbedModalWithFlexibleUiIcon({
         title: title,
         providerName: providerName,
         downloadUrl: downloadUrl,

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -9,10 +9,9 @@ import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { R50, R500 } from '@atlaskit/theme/colors';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { dropdownItemGroupStyles, contentStyles, linkStyles, textStyles } from './styled';
-import { getFormattedMessage } from '../../../../utils';
+import { getFormattedMessage, openEmbedModalWithFlexibleUiIcon } from '../../../../utils';
 import { messages } from '../../../../../../../messages';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../../state/flexible-ui-context';
-import { openPreviewModal } from '../../../../../../EmbedModal/utils';
 import useResolve from '../../../../../../../state/hooks/use-resolve';
 var MAX_LINE_NUMBER = 8;
 var LozengeActionError = function LozengeActionError(_ref) {
@@ -33,7 +32,7 @@ var LozengeActionError = function LozengeActionError(_ref) {
   var handlePreviewOpen = useCallback(function () {
     if (isPreviewAvailable) {
       analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
-      return openPreviewModal(_objectSpread(_objectSpread({}, previewData), {}, {
+      return openEmbedModalWithFlexibleUiIcon(_objectSpread(_objectSpread({}, previewData), {}, {
         analytics: analytics,
         onClose: handlePreviewClose
       }));

package/dist/esm/view/FlexibleCard/components/utils.js

@@ -6,6 +6,8 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
+import Icon from './elements/icon';
+import { openEmbedModal } from '../../EmbedModal/utils';
 export var sizeToButtonSpacing = (_sizeToButtonSpacing = {}, _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.XLarge, 'default'), _sizeToButtonSpacing);
 export var getFormattedMessage = function getFormattedMessage(message) {
   if (message) {
@@ -88,4 +90,36 @@ export var getTruncateStyles = function getTruncateStyles(maxLines) {
 };
 export var hasWhiteSpace = function hasWhiteSpace(str) {
   return str.search(/\s/) >= 0;
+};
+export var openEmbedModalWithFlexibleUiIcon = function openEmbedModalWithFlexibleUiIcon(_ref) {
+  var analytics = _ref.analytics,
+    downloadUrl = _ref.downloadUrl,
+    linkIcon = _ref.linkIcon,
+    onClose = _ref.onClose,
+    providerName = _ref.providerName,
+    src = _ref.src,
+    title = _ref.title,
+    url = _ref.url,
+    isSupportTheming = _ref.isSupportTheming;
+  var icon = {
+    icon: /*#__PURE__*/React.createElement(Icon, _extends({}, linkIcon, {
+      size: SmartLinkSize.Large
+    })),
+    isFlexibleUi: true
+  };
+  return openEmbedModal({
+    analytics: analytics,
+    download: downloadUrl,
+    icon: icon,
+    // Flex should not send origin as block card. It should be able to support
+    // its internal parent components like hover card, block card and
+    // itself as a standalone. To be investigated and fix in EDM-7520.
+    origin: 'smartLinkCard',
+    providerName: providerName,
+    onClose: onClose,
+    src: src,
+    title: title,
+    url: url,
+    isSupportTheming: isSupportTheming
+  });
 };

package/dist/types/view/EmbedCard/components/styled.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { FrameStyle } from '../types';
 export declare const className = "media-card-frame";
-export declare const cardShadow = "";
 export interface WrapperProps {
     minWidth?: number;
     maxWidth?: number;

package/dist/types/view/EmbedModal/utils.d.ts

@@ -1,10 +1,2 @@
-import { PreviewFunctionProps } from '../FlexibleCard/components/actions/action/preview-action/types';
-import { PreviewActionData } from '../../state/flexible-ui-context/types';
-import { AnalyticsFacade } from '../../state/analytics';
-type PreviewModalProps = {
-    analytics?: AnalyticsFacade;
-    onClose?: () => void;
-} & PreviewActionData;
-export declare const openPreviewModal: ({ analytics, downloadUrl: download, isSupportTheming, linkIcon, onClose, providerName, src, title, url, }: PreviewModalProps) => Promise<void>;
-export declare function previewFunction({ popupMountPointId, onClose: onEmbedClose, ...rest }: PreviewFunctionProps): Promise<void>;
-export {};
+import { EmbedModalProps } from './types';
+export declare function openEmbedModal({ onClose, ...props }?: Partial<EmbedModalProps>): Promise<void>;

package/dist/types/view/FlexibleCard/components/actions/action/preview-action/types.d.ts

@@ -1,5 +1,4 @@
 import { Icon } from '../../../../../../state/flexible-ui-context/types';
-import { EmbedModalProps } from '../../../../../../view/EmbedModal/types';
 import { ActionProps } from '../types';
 export type PreviewActionProps = ActionProps & FlexibleEmbedProps;
 export type FlexibleEmbedProps = {
@@ -11,6 +10,3 @@ export type FlexibleEmbedProps = {
     url: string;
     isSupportTheming?: boolean;
 };
-export interface PreviewFunctionProps extends EmbedModalProps {
-    popupMountPointId: string;
-}

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -3,6 +3,8 @@ import { SerializedStyles } from '@emotion/react';
 import { Spacing } from '@atlaskit/button';
 import { SmartLinkSize } from '../../../constants';
 import { MessageProps } from './types';
+import { AnalyticsFacade } from '../../../state/analytics';
+import { PreviewActionData } from '../../../state/flexible-ui-context/types';
 export declare const sizeToButtonSpacing: Record<SmartLinkSize, Spacing>;
 export declare const getFormattedMessage: (message?: MessageProps) => JSX.Element | undefined;
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
@@ -13,3 +15,65 @@ export declare const getMaxLineHeight: (size: SmartLinkSize) => 1.5 | 1.75;
 export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
 export declare const getTruncateStyles: (maxLines: number, lineHeight?: string, wordBreak?: 'break-word' | 'break-all') => SerializedStyles;
 export declare const hasWhiteSpace: (str: string) => boolean;
+export declare const openEmbedModalWithFlexibleUiIcon: ({ analytics, downloadUrl, linkIcon, onClose, providerName, src, title, url, isSupportTheming, }: PreviewActionData & {
+    analytics?: {
+        ui: {
+            authEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiAuthEventProps) => void;
+            authAlternateAccountEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiAuthAlternateAccountEventProps) => void;
+            buttonClickedEvent: (data: Partial<import("../../..").AnalyticsPayload> & {
+                actionSubjectId: string;
+            }) => void;
+            cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: import("../../../utils/analytics/types").UiCardClickedEventProps) => void;
+            iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: import("../../../utils/analytics/types").UiIframeDwelledEventProps) => void;
+            iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: import("../../../utils/analytics/types").UiIframeFocusedEventProps) => void;
+            actionClickedEvent: ({ id, actionType, display, invokeType, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiActionClickedEventProps) => void;
+            hoverCardOpenLinkClickedEvent: ({ previewDisplay, definitionId, extensionKey, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: import("../../../utils/analytics/types").UiHoverCardOpenLinkClickedEventProps) => void;
+            closedAuthEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiClosedAuthEventProps) => void;
+            modalClosedEvent: (data: Partial<import("../../..").AnalyticsPayload> & {
+                actionSubjectId: string;
+            }) => void;
+            renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiRenderSuccessEventProps) => void;
+            renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiRenderFailedEventProps) => void;
+            hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
+            hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+            learnMoreClickedEvent: () => void;
+            smartLinkLozengeActionClickedEvent: () => void;
+            smartLinkLozengeActionListItemClickedEvent: () => void;
+            smartLinkLozengeActionErrorOpenPreviewClickedEvent: () => void;
+        };
+        operational: {
+            invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").InvokeSucceededEventProps) => void;
+            invokeFailedEvent: ({ id, actionType, display, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").InvokeFailedEventProps) => void;
+            connectSucceededEvent: ({ id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").ConnectSucceededEventProps) => void;
+            connectFailedEvent: ({ id, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").ConnectFailedEventProps) => void;
+            instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: import("../../../utils/analytics/types").InstrumentEventProps) => void;
+            chunkloadFailedEvent: ({ display, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiRenderFailedEventProps) => void;
+        };
+        track: {
+            appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").CommonEventProps) => void;
+            appAccountAuthStarted: ({ extensionKey, location, }: import("../../../utils/analytics/types").CommonEventProps) => void;
+            linkUpdated: (props: import("../../../utils/analytics/types").CommonEventProps & {
+                [key: string]: any;
+            }) => void;
+            smartLinkQuickActionStarted: (props: {
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../../utils/analytics/analytics").TrackQuickActionType;
+            }) => void;
+            smartLinkQuickActionSuccess: (props: {
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../../utils/analytics/analytics").TrackQuickActionType;
+            }) => void;
+            smartLinkQuickActionFailed: (props: {
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../../utils/analytics/analytics").TrackQuickActionType;
+                reason?: import("../../../utils/analytics/analytics").TrackQuickActionFailureReason | undefined;
+                step?: string | undefined;
+            }) => void;
+            hoverCardResolutionStarted: () => void;
+        };
+        screen: {
+            authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").CommonEventProps) => void;
+            modalViewedEvent: (data: Partial<import("../../..").AnalyticsPayload> & {
+                name: "embedPreviewModal";
+            }) => void;
+        };
+    } | undefined;
+    onClose?: (() => void) | undefined;
+}) => Promise<void>;

package/dist/types-ts4.5/view/EmbedCard/components/styled.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { FrameStyle } from '../types';
 export declare const className = "media-card-frame";
-export declare const cardShadow = "";
 export interface WrapperProps {
     minWidth?: number;
     maxWidth?: number;

package/dist/types-ts4.5/view/EmbedModal/utils.d.ts

@@ -1,10 +1,2 @@
-import { PreviewFunctionProps } from '../FlexibleCard/components/actions/action/preview-action/types';
-import { PreviewActionData } from '../../state/flexible-ui-context/types';
-import { AnalyticsFacade } from '../../state/analytics';
-type PreviewModalProps = {
-    analytics?: AnalyticsFacade;
-    onClose?: () => void;
-} & PreviewActionData;
-export declare const openPreviewModal: ({ analytics, downloadUrl: download, isSupportTheming, linkIcon, onClose, providerName, src, title, url, }: PreviewModalProps) => Promise<void>;
-export declare function previewFunction({ popupMountPointId, onClose: onEmbedClose, ...rest }: PreviewFunctionProps): Promise<void>;
-export {};
+import { EmbedModalProps } from './types';
+export declare function openEmbedModal({ onClose, ...props }?: Partial<EmbedModalProps>): Promise<void>;

package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/preview-action/types.d.ts

@@ -1,5 +1,4 @@
 import { Icon } from '../../../../../../state/flexible-ui-context/types';
-import { EmbedModalProps } from '../../../../../../view/EmbedModal/types';
 import { ActionProps } from '../types';
 export type PreviewActionProps = ActionProps & FlexibleEmbedProps;
 export type FlexibleEmbedProps = {
@@ -11,6 +10,3 @@ export type FlexibleEmbedProps = {
     url: string;
     isSupportTheming?: boolean;
 };
-export interface PreviewFunctionProps extends EmbedModalProps {
-    popupMountPointId: string;
-}

package/dist/types-ts4.5/view/FlexibleCard/components/utils.d.ts

@@ -3,6 +3,8 @@ import { SerializedStyles } from '@emotion/react';
 import { Spacing } from '@atlaskit/button';
 import { SmartLinkSize } from '../../../constants';
 import { MessageProps } from './types';
+import { AnalyticsFacade } from '../../../state/analytics';
+import { PreviewActionData } from '../../../state/flexible-ui-context/types';
 export declare const sizeToButtonSpacing: Record<SmartLinkSize, Spacing>;
 export declare const getFormattedMessage: (message?: MessageProps) => JSX.Element | undefined;
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
@@ -13,3 +15,65 @@ export declare const getMaxLineHeight: (size: SmartLinkSize) => 1.5 | 1.75;
 export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
 export declare const getTruncateStyles: (maxLines: number, lineHeight?: string, wordBreak?: 'break-word' | 'break-all') => SerializedStyles;
 export declare const hasWhiteSpace: (str: string) => boolean;
+export declare const openEmbedModalWithFlexibleUiIcon: ({ analytics, downloadUrl, linkIcon, onClose, providerName, src, title, url, isSupportTheming, }: PreviewActionData & {
+    analytics?: {
+        ui: {
+            authEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiAuthEventProps) => void;
+            authAlternateAccountEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiAuthAlternateAccountEventProps) => void;
+            buttonClickedEvent: (data: Partial<import("../../..").AnalyticsPayload> & {
+                actionSubjectId: string;
+            }) => void;
+            cardClickedEvent: ({ id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct, actionSubjectId, }: import("../../../utils/analytics/types").UiCardClickedEventProps) => void;
+            iframeDwelledEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, dwellTime, dwellPercentVisible, }: import("../../../utils/analytics/types").UiIframeDwelledEventProps) => void;
+            iframeFocusedEvent: ({ id, display, status, definitionId, extensionKey, location, destinationProduct, destinationSubproduct, }: import("../../../utils/analytics/types").UiIframeFocusedEventProps) => void;
+            actionClickedEvent: ({ id, actionType, display, invokeType, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiActionClickedEventProps) => void;
+            hoverCardOpenLinkClickedEvent: ({ previewDisplay, definitionId, extensionKey, destinationProduct, destinationSubproduct, location, previewInvokeMethod, }: import("../../../utils/analytics/types").UiHoverCardOpenLinkClickedEventProps) => void;
+            closedAuthEvent: ({ display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiClosedAuthEventProps) => void;
+            modalClosedEvent: (data: Partial<import("../../..").AnalyticsPayload> & {
+                actionSubjectId: string;
+            }) => void;
+            renderSuccessEvent: ({ display, status, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiRenderSuccessEventProps) => void;
+            renderFailedEvent: ({ display, id, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiRenderFailedEventProps) => void;
+            hoverCardViewedEvent: ({ previewDisplay, previewInvokeMethod, id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../../utils/analytics/types").UiHoverCardViewedEventProps) => void;
+            hoverCardDismissedEvent: ({ id, previewDisplay, hoverTime, previewInvokeMethod, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, status, }: import("../../../utils/analytics/types").UiHoverCardDismissedEventProps) => void;
+            learnMoreClickedEvent: () => void;
+            smartLinkLozengeActionClickedEvent: () => void;
+            smartLinkLozengeActionListItemClickedEvent: () => void;
+            smartLinkLozengeActionErrorOpenPreviewClickedEvent: () => void;
+        };
+        operational: {
+            invokeSucceededEvent: ({ id, actionType, display, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").InvokeSucceededEventProps) => void;
+            invokeFailedEvent: ({ id, actionType, display, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").InvokeFailedEventProps) => void;
+            connectSucceededEvent: ({ id, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").ConnectSucceededEventProps) => void;
+            connectFailedEvent: ({ id, reason, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").ConnectFailedEventProps) => void;
+            instrument: ({ id, status, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, error, }: import("../../../utils/analytics/types").InstrumentEventProps) => void;
+            chunkloadFailedEvent: ({ display, error, errorInfo, extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").UiRenderFailedEventProps) => void;
+        };
+        track: {
+            appAccountConnected: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").CommonEventProps) => void;
+            appAccountAuthStarted: ({ extensionKey, location, }: import("../../../utils/analytics/types").CommonEventProps) => void;
+            linkUpdated: (props: import("../../../utils/analytics/types").CommonEventProps & {
+                [key: string]: any;
+            }) => void;
+            smartLinkQuickActionStarted: (props: {
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../../utils/analytics/analytics").TrackQuickActionType;
+            }) => void;
+            smartLinkQuickActionSuccess: (props: {
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../../utils/analytics/analytics").TrackQuickActionType;
+            }) => void;
+            smartLinkQuickActionFailed: (props: {
+                smartLinkActionType: import("@atlaskit/linking-types").SmartLinkActionType | import("../../../utils/analytics/analytics").TrackQuickActionType;
+                reason?: import("../../../utils/analytics/analytics").TrackQuickActionFailureReason | undefined;
+                step?: string | undefined;
+            }) => void;
+            hoverCardResolutionStarted: () => void;
+        };
+        screen: {
+            authPopupEvent: ({ extensionKey, definitionId, resourceType, destinationProduct, destinationSubproduct, location, }: import("../../../utils/analytics/types").CommonEventProps) => void;
+            modalViewedEvent: (data: Partial<import("../../..").AnalyticsPayload> & {
+                name: "embedPreviewModal";
+            }) => void;
+        };
+    } | undefined;
+    onClose?: (() => void) | undefined;
+}) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.14.0",
+  "version": "26.14.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -140,7 +140,7 @@
     "platform.linking-platform.smart-card.should-call-onclick-in-warning-modal-only-when-safe": {
       "type": "boolean"
     },
-    "platform.linking-platform.smart-card.show-inline-card-refreshed-design": {
+    "platform.linking-platform.smart-card.show-smart-links-refreshed-design": {
       "type": "boolean"
     },
     "platform.linking-platform.smart-card.enable-better-metadata_iojwg": {