@atlaskit/smart-card 21.1.2 → 21.2.0

package/dist/es2019/view/EmbedModal/components/size-experiment/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Modal from '../../../common/Modal';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from '../../constants';
+
+const withSizeExperiment = Component => props => {
+  const {
+    featureFlags = {},
+    closeLabel = 'Close Preview'
+  } = props;
+  const {
+    embedModalSize
+  } = featureFlags; // Experiment
+
+  if (embedModalSize === 'large' || embedModalSize === 'small') {
+    const size = embedModalSize === 'large' ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+    return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      size: size
+    }));
+  } // Control
+
+
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+    closeLabel: closeLabel
+  }));
+};
+
+export default withSizeExperiment;

package/dist/es2019/view/EmbedModal/components/size-experiment/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -4,6 +4,7 @@ import LinkInfo from './components/link-info';
 import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
+import withSizeExperiment from './components/size-experiment';
 
 const EmbedModal = ({
   download: downloadUrl,
@@ -16,13 +17,14 @@ const EmbedModal = ({
   onViewActionClick,
   providerName,
   showModal,
+  size: defaultSize = MIN_MODAL_SIZE,
   src,
-  testId = 'smart-links-preview-modal',
+  testId = 'smart-embed-preview-modal',
   title,
   url
 }) => {
   const [isOpen, setIsOpen] = useState(showModal);
-  const [size, setSize] = useState(MIN_MODAL_SIZE);
+  const [size, setSize] = useState(defaultSize);
   const handleOnClose = useCallback(() => setIsOpen(false), []);
   const handleOnSizeClick = useCallback(() => {
     const newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
@@ -54,4 +56,4 @@ const EmbedModal = ({
   }))));
 };
 
-export default withErrorBoundary(EmbedModal);
+export default withSizeExperiment(withErrorBoundary(EmbedModal));

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Loadable from 'react-loadable';
 import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
+import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
+import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import { IconType } from '../../../../../constants';
 import { token } from '@atlaskit/tokens'; // prettier-ignore
 
@@ -11,15 +13,9 @@ const importIconMapper = {
   [IconType.Audio]: () => import(
   /* webpackChunkName: "glyphAudio" */
   '@atlaskit/icon-file-type/glyph/audio/16'),
-  [IconType.Blog]: () => import(
-  /* webpackChunkName: "glyphBlog" */
-  '@atlaskit/icon-object/glyph/blog/16'),
   [IconType.Code]: () => import(
   /* webpackChunkName: "glyphCode" */
   '@atlaskit/icon-file-type/glyph/source-code/16'),
-  [IconType.Document]: () => import(
-  /* webpackChunkName: "glyphDocument" */
-  '@atlaskit/icon-file-type/glyph/document/16'),
   [IconType.Executable]: () => import(
   /* webpackChunkName: "glyphExecutable" */
   '@atlaskit/icon-file-type/glyph/executable/16'),
@@ -214,6 +210,21 @@ const AtlaskitIcon = ({
   label,
   testId
 }) => {
+  // Check for synchonously loaded icons first for SSR purposes
+  switch (icon) {
+    case IconType.Document:
+      return /*#__PURE__*/React.createElement(DocumentIcon, {
+        label: label || 'document',
+        testId: testId
+      });
+
+    case IconType.Blog:
+      return /*#__PURE__*/React.createElement(BlogIcon, {
+        label: label || 'blog',
+        testId: testId
+      });
+  }
+
   const importFn = getIconImportFn(icon);
 
   if (!importFn) {

package/dist/esm/extractors/block/index.js

@@ -37,13 +37,14 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
 
 export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform) {
   if (opts) {
-    var handleInvoke = opts.handleInvoke,
+    var featureFlags = opts.featureFlags,
+        handleInvoke = opts.handleInvoke,
         handleAnalytics = opts.handleAnalytics,
         extensionKey = opts.extensionKey,
         source = opts.source,
         testId = opts.testId;
     var actions = extractActions(jsonLd, handleInvoke);
-    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source); // The previewAction should always be the last action
+    var previewAction = extractPreviewAction(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
 
     if (previewAction) {
       actions.push(previewAction);

package/dist/esm/extractors/common/actions/extractPreviewAction.js

@@ -60,6 +60,7 @@ export var extractPreviewAction = function extractPreviewAction() {
   var testId = arguments.length > 5 ? arguments[5] : undefined;
   var platform = arguments.length > 6 ? arguments[6] : undefined;
   var source = arguments.length > 7 ? arguments[7] : undefined;
+  var featureFlags = arguments.length > 8 ? arguments[8] : undefined;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -71,6 +72,7 @@ export var extractPreviewAction = function extractPreviewAction() {
     // Build action using instrumentation hooks.
     var key = extensionKey;
     var previewAction = PreviewAction(_objectSpread(_objectSpread({}, metadata), {}, {
+      featureFlags: featureFlags,
       testId: testId,
       onOpen: function onOpen() {
         handleAnalytics(uiRenderSuccessEvent('preview', 'resolved', key));

package/dist/esm/state/hooks-external/useSmartLinkActions.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useMemo, useState } from 'react';
 import uuid from 'uuid';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { extractBlockProps as extractCardProps } from '../../extractors/block';
 import { useSmartCardActions as useLinkActions } from '../actions';
 import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
@@ -23,13 +24,21 @@ export function useSmartLinkActions(_ref) {
 
   var linkState = useLinkState(url);
   var linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
-  var linkActions = useLinkActions(id, url, linkAnalytics);
+  var linkActions = useLinkActions(id, url, linkAnalytics); // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+
+  var embedModalSize = useFeatureFlag('embedModalSize');
   useEffect(function () {
     if (!linkState.details) {
       return;
     }
 
+    var featureFlags = {
+      embedModalSize: embedModalSize
+    };
     var cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      featureFlags: featureFlags,
       handleInvoke: function handleInvoke(opts) {
         return linkActions.invoke(opts, appearance);
       },
@@ -50,6 +59,6 @@ export function useSmartLinkActions(_ref) {
       };
     });
     setActions(cardActions);
-  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform, embedModalSize]);
   return actions;
 }

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -55,7 +55,7 @@ function _previewFunction() {
             }
 
             _context.next = 5;
-            return import('../../common/Modal');
+            return import('../../EmbedModal');
 
           case 5:
             Modal = _context.sent;

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

@@ -14,6 +14,7 @@ import { ResolvingView as BlockCardResolvingView } from './views/ResolvingView';
 import { UnauthorizedView as BlockCardUnauthorisedView } from './views/UnauthorizedView';
 import { ForbiddenView as BlockCardForbiddenView } from './views/ForbiddenView';
 import { ErroredView as BlockCardErroredView } from './views/ErroredView';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 export { ForbiddenAction, AuthorizeAction, BlockCardResolvedView, BlockCardResolvingView, BlockCardUnauthorisedView, BlockCardForbiddenView, BlockCardErroredView, BlockCardNotFoundView };
 export var BlockCard = function BlockCard(_ref) {
   var _details$meta, _forbiddenViewProps$c;
@@ -35,9 +36,17 @@ export var BlockCard = function BlockCard(_ref) {
       testId = _ref.testId,
       showActions = _ref.showActions,
       platform = _ref.platform;
+  // Actions do not have access to the react tree, so we need to obtain
+  // feature flags here where we still can access SmartLinkContext context
+  // and pass the flags down to the extractor. See PreviewAction.tsx for details.
+  var embedModalSize = useFeatureFlag('embedModalSize');
+  var featureFlags = {
+    embedModalSize: embedModalSize
+  };
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extractorOpts = {
+    featureFlags: featureFlags,
     handleAnalytics: handleAnalytics,
     handleInvoke: handleInvoke,
     extensionKey: getExtensionKey(details)

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

@@ -53,7 +53,7 @@ export function CardWithUrlContent(_ref) {
   var showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
 
   if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = showHoverPreviewFlag;
+    showHoverPreview = Boolean(showHoverPreviewFlag);
   } // Setup UI handlers.
 
 

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -6,7 +6,7 @@ var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { getIframeSandboxAttribute } from '../../../../utils';
-var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 214px);\n"])));
+var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
 
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -65,12 +65,14 @@ var LinkInfo = function LinkInfo(_ref) {
     }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return jsx(LinkInfoButton, {
+    return jsx("span", {
+      className: "smart-link-resize-button"
+    }, jsx(LinkInfoButton, {
       content: jsx(FormattedMessage, message),
       icon: icon,
       onClick: onResizeButtonClick,
       testId: "".concat(testId, "-resize")
-    });
+    }));
   }, [onResizeButtonClick, size, testId]);
   return jsx("div", {
     css: containerStyles

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -20,6 +20,7 @@ var LinkInfoButton = function LinkInfoButton(_ref) {
     href: href,
     iconBefore: icon,
     onClick: onClick,
+    spacing: "none",
     target: target,
     testId: "".concat(testId, "-button")
   }));

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -1,14 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/core';
-import { gs } from '../../../common/utils';
-import { token } from '@atlaskit/tokens';
-import { N100 } from '@atlaskit/theme/colors';
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  padding: ", " ", ";\n"])), gs(2), gs(2), gs(3));
-var iconSize = '32px';
+export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
+var iconSize = '24px';
 export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
-export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n\n    // EDM-42336: UX is not finalised yet.\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 24px;\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: 24px;\n    }\n  }\n"])));
-export var subtitleCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  // EDM-42336: UX is not finalised yet.\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n"])), token('color.text.subtlest', N100));
-export var actionCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
+var height = '20px';
+export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n    font-size: 16px;\n    font-weight: 400;\n    line-height: ", ";\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: ", ";\n    }\n  }\n"])), height, height);
+export var actionCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  gap: 4px;\n  line-height: ", ";\n  span {\n    line-height: ", ";\n  }\n\n  @media only screen and (max-width: 980px) {\n    // Hide resize button if the screen is smaller than the min width\n    // or too small to have enough impact to matter.\n    .smart-link-resize-button {\n      display: none;\n    }\n  }\n"])), height, height);

package/dist/esm/view/EmbedModal/components/size-experiment/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Modal from '../../../common/Modal';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from '../../constants';
+
+var withSizeExperiment = function withSizeExperiment(Component) {
+  return function (props) {
+    var _props$featureFlags = props.featureFlags,
+        featureFlags = _props$featureFlags === void 0 ? {} : _props$featureFlags,
+        _props$closeLabel = props.closeLabel,
+        closeLabel = _props$closeLabel === void 0 ? 'Close Preview' : _props$closeLabel;
+    var embedModalSize = featureFlags.embedModalSize; // Experiment
+
+    if (embedModalSize === 'large' || embedModalSize === 'small') {
+      var size = embedModalSize === 'large' ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+      return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+        size: size
+      }));
+    } // Control
+
+
+    return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
+      closeLabel: closeLabel
+    }));
+  };
+};
+
+export default withSizeExperiment;

package/dist/esm/view/EmbedModal/components/size-experiment/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -5,6 +5,7 @@ import LinkInfo from './components/link-info';
 import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
 import EmbedContent from './components/embed-content';
 import withErrorBoundary from './components/error-boundary';
+import withSizeExperiment from './components/size-experiment';
 
 var EmbedModal = function EmbedModal(_ref) {
   var downloadUrl = _ref.download,
@@ -18,9 +19,11 @@ var EmbedModal = function EmbedModal(_ref) {
       onViewActionClick = _ref.onViewActionClick,
       providerName = _ref.providerName,
       showModal = _ref.showModal,
+      _ref$size = _ref.size,
+      defaultSize = _ref$size === void 0 ? MIN_MODAL_SIZE : _ref$size,
       src = _ref.src,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
+      testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
       title = _ref.title,
       url = _ref.url;
 
@@ -29,7 +32,7 @@ var EmbedModal = function EmbedModal(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var _useState3 = useState(MIN_MODAL_SIZE),
+  var _useState3 = useState(defaultSize),
       _useState4 = _slicedToArray(_useState3, 2),
       size = _useState4[0],
       setSize = _useState4[1];
@@ -67,4 +70,4 @@ var EmbedModal = function EmbedModal(_ref) {
   }))));
 };
 
-export default withErrorBoundary(EmbedModal);
+export default withSizeExperiment(withErrorBoundary(EmbedModal));

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -5,6 +5,8 @@ var _importIconMapper;
 import React from 'react';
 import Loadable from 'react-loadable';
 import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
+import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
+import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import { IconType } from '../../../../../constants';
 import { token } from '@atlaskit/tokens'; // prettier-ignore
 
@@ -16,18 +18,10 @@ var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMappe
   return import(
   /* webpackChunkName: "glyphAudio" */
   '@atlaskit/icon-file-type/glyph/audio/16');
-}), _defineProperty(_importIconMapper, IconType.Blog, function () {
-  return import(
-  /* webpackChunkName: "glyphBlog" */
-  '@atlaskit/icon-object/glyph/blog/16');
 }), _defineProperty(_importIconMapper, IconType.Code, function () {
   return import(
   /* webpackChunkName: "glyphCode" */
   '@atlaskit/icon-file-type/glyph/source-code/16');
-}), _defineProperty(_importIconMapper, IconType.Document, function () {
-  return import(
-  /* webpackChunkName: "glyphDocument" */
-  '@atlaskit/icon-file-type/glyph/document/16');
 }), _defineProperty(_importIconMapper, IconType.Executable, function () {
   return import(
   /* webpackChunkName: "glyphExecutable" */
@@ -281,6 +275,22 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
   var icon = _ref3.icon,
       label = _ref3.label,
       testId = _ref3.testId;
+
+  // Check for synchonously loaded icons first for SSR purposes
+  switch (icon) {
+    case IconType.Document:
+      return /*#__PURE__*/React.createElement(DocumentIcon, {
+        label: label || 'document',
+        testId: testId
+      });
+
+    case IconType.Blog:
+      return /*#__PURE__*/React.createElement(BlogIcon, {
+        label: label || 'blog',
+        testId: testId
+      });
+  }
+
   var importFn = getIconImportFn(icon);
 
   if (!importFn) {

package/dist/types/extractors/block/types.d.ts

@@ -1,3 +1,4 @@
+import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
 import { InvokeHandler } from '../../model/invoke-handler';
 import { AnalyticsHandler } from '../../utils/types';
 import { CardInnerAppearance } from '../../view/Card/types';
@@ -5,6 +6,7 @@ export interface ExtractBlockOpts {
     handleInvoke: InvokeHandler;
     handleAnalytics: AnalyticsHandler;
     extensionKey?: string;
+    featureFlags?: Partial<LinkingPlatformFeatureFlags>;
     source?: CardInnerAppearance;
     testId?: string;
 }

package/dist/types/extractors/common/actions/extractPreviewAction.d.ts

@@ -1,6 +1,7 @@
 import { JsonLd } from 'json-ld-types';
+import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
 import { InvokeHandler } from '../../../model/invoke-handler';
 import { CardInnerAppearance } from '../../../view/Card/types';
 import { AnalyticsHandler } from '../../../utils/types';
 import { BlockCardResolvedViewProps } from '../../../view/BlockCard';
-export declare const extractPreviewAction: (extensionKey: string | undefined, viewProps: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, handleInvoke: InvokeHandler, handleAnalytics: AnalyticsHandler, testId?: string | undefined, platform?: JsonLd.Primitives.Platforms | undefined, source?: CardInnerAppearance | undefined) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;
+export declare const extractPreviewAction: (extensionKey: string | undefined, viewProps: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, handleInvoke: InvokeHandler, handleAnalytics: AnalyticsHandler, testId?: string | undefined, platform?: JsonLd.Primitives.Platforms | undefined, source?: CardInnerAppearance | undefined, featureFlags?: Partial<LinkingPlatformFeatureFlags> | undefined) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;

package/dist/types/view/BlockCard/actions/PreviewAction.d.ts

@@ -1,9 +1,10 @@
 import React, { ErrorInfo } from 'react';
-import { ModalProps } from '../../common/Modal';
+import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
+import { EmbedModalWithExperimentProps } from '../../EmbedModal/types';
 import { ActionProps } from '../components/Action';
 import { IconProps } from '../../common/Icon';
 import { MetadataProps } from '../../common/Metadata';
-export interface PreviewFunctionArg extends ModalProps {
+export interface PreviewFunctionArg extends EmbedModalWithExperimentProps {
     popupMountPointId: string;
 }
 export declare function previewFunction({ popupMountPointId, onClose, ...rest }: PreviewFunctionArg): Promise<void>;
@@ -21,6 +22,7 @@ declare type PreviewInfo = {
     onDownloadActionClick?: () => void;
     onOpen?: () => void;
     onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
+    featureFlags?: Partial<LinkingPlatformFeatureFlags>;
 };
 declare const _default: ({ details, ...rest }: PreviewInfo) => ActionProps;
 export default _default;

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "placeholder" | "onError" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "showHoverPreview" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "data" | "appearance" | "testId" | "isSelected" | "inheritDimensions" | "id" | "placeholder" | "onError" | "onClick" | "analyticsContext" | "key" | "url" | "ui" | "showHoverPreview" | "showActions" | "onResolve" | "platform" | "isFrameVisible" | "embedIframeRef" | "inlinePreloaderStyle" | "importer" | "container" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/EmbedModal/components/link-info/styled.d.ts

@@ -1,5 +1,4 @@
 export declare const containerStyles: import("@emotion/utils").SerializedStyles;
 export declare const iconCss: import("@emotion/utils").SerializedStyles;
 export declare const titleCss: import("@emotion/utils").SerializedStyles;
-export declare const subtitleCss: import("@emotion/utils").SerializedStyles;
 export declare const actionCss: import("@emotion/utils").SerializedStyles;

package/dist/types/view/EmbedModal/components/size-experiment/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ModalProps } from '../../../common/Modal';
+import { EmbedModalProps } from '../../types';
+import { WithSizeExperimentProps } from './types';
+declare const withSizeExperiment: (Component: React.ComponentType<EmbedModalProps>) => React.FC<(EmbedModalProps | ModalProps) & WithSizeExperimentProps>;
+export default withSizeExperiment;

package/dist/types/view/EmbedModal/components/size-experiment/types.d.ts

@@ -0,0 +1,4 @@
+import { LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
+export declare type WithSizeExperimentProps = {
+    featureFlags?: Partial<LinkingPlatformFeatureFlags>;
+};

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { EmbedModalProps } from './types';
-declare const _default: React.FC<EmbedModalProps>;
+declare const _default: React.FC<(import("../common/Modal").ModalProps | EmbedModalProps) & import("./components/size-experiment/types").WithSizeExperimentProps>;
 export default _default;

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

@@ -1,5 +1,7 @@
 import { ErrorInfo } from 'react';
 import { IconProps } from '../common/Icon';
+import { WithSizeExperimentProps } from './components/size-experiment/types';
+import { ModalProps } from '../common/Modal';
 export declare type EmbedModalProps = {
     closeLabel?: string;
     download?: string;
@@ -13,8 +15,10 @@ export declare type EmbedModalProps = {
     onViewActionClick?: () => void;
     providerName?: string;
     showModal?: boolean;
+    size?: string;
     src?: string;
     testId?: string;
     title?: string;
     url?: string;
 };
+export declare type EmbedModalWithExperimentProps = EmbedModalProps & ModalProps & WithSizeExperimentProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "21.1.2",
+  "version": "21.2.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/linking-common": "^1.5.0",
+    "@atlaskit/linking-common": "^1.6.0",
     "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-common": "^2.16.0",
@@ -58,7 +58,7 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/link-provider": "^1.2.0",
+    "@atlaskit/link-provider": "^1.2.4",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
@@ -109,8 +109,8 @@
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-test-renderer": "^16.8.0",
-    "ts-jest": "24.3.0",
-    "typescript": "4.2.4",
+    "ts-jest": "26.5.6",
+    "typescript": "4.3.5",
     "xhr-mock": "^2.4.0"
   },
   "af:exports": {

package/report.api.md

@@ -263,12 +263,12 @@ export declare const Card: React_2.ForwardRefExoticComponent<
     | 'key'
     | 'url'
     | 'ui'
+    | 'showHoverPreview'
     | 'showActions'
     | 'onResolve'
     | 'platform'
     | 'isFrameVisible'
     | 'embedIframeRef'
-    | 'showHoverPreview'
     | 'inlinePreloaderStyle'
     | 'importer'
     | 'container'