@atlaskit/smart-card 34.5.0 → 34.5.2

package/dist/es2019/utils/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Loadable from 'react-loadable';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { themeObjectToString } from '@atlaskit/tokens';
-import { IconType } from '../constants';
+import { IconType, SmartLinkSize } from '../constants';
 import extractFileFormatIcon from '../extractors/flexible/icon/extract-file-formatIcon';
 export const isSpecialEvent = evt => evt.isDefaultPrevented() && (isIframe() || isSpecialKey(evt) || isSpecialClick(evt));
 export const isIframe = () => window.parent !== parent;
@@ -105,70 +105,182 @@ const typeToIcon = {
   'application/sketch': ['Sketch', () => import('@atlaskit/icon-file-type/glyph/sketch/16')],
   folder: ['Folder', () => import('@atlaskit/icon-file-type/glyph/folder/16')]
 };
+
+// prettier-ignore
 export const getLazyIcons = () => {
   return {
-    [IconType.Document]: () => import( /* webpackChunkName: "@atlaskit-internal_page-icon" */'../common/ui/icons/page-icon'),
-    [IconType.Blog]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphBlock" */'@atlaskit/icon-object/glyph/blog/16'),
-    [IconType.Audio]: () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon'),
-    [IconType.Code]: () => import( /* webpackChunkName: "@atlaskit-internal_angle-brackets-icon" */'../common/ui/icons/angle-brackets-icon'),
-    [IconType.File]: () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon'),
-    [IconType.Folder]: () => import( /* webpackChunkName: "@atlaskit-internal_folder-icon" */'../common/ui/icons/folder-icon'),
-    [IconType.Generic]: () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon'),
-    [IconType.Image]: () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon'),
-    [IconType.Presentation]: () => import( /* webpackChunkName: "@atlaskit-internal_chart-bar-icon" */'../common/ui/icons/chart-bar-icon'),
-    [IconType.Spreadsheet]: () => import( /* webpackChunkName: "@atlaskit-internal_list-bullet-icon" */'../common/ui/icons/list-bullet-icon'),
-    [IconType.Video]: () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon'),
-    [IconType.Project]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphProject" */'@atlaskit/icon/core/migration/people-group'),
-    [IconType.Template]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphTemplate" */'@atlaskit/icon/core/migration/file--document-filled'),
-    [IconType.Forbidden]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphForbidden" */'@atlaskit/icon/core/migration/lock-locked--lock-filled'),
-    [IconType.Default]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphDefault" */'@atlaskit/icon/core/migration/link'),
-    [IconType.Archive]: () => import( /* webpackChunkName: "glyphArchive" */'@atlaskit/icon-file-type/glyph/archive/16'),
-    [IconType.Executable]: () => import( /* webpackChunkName: "glyphExecutable" */'@atlaskit/icon-file-type/glyph/executable/16'),
-    [IconType.GIF]: () => import( /* webpackChunkName: "glyphGIF" */'@atlaskit/icon-file-type/glyph/gif/16'),
-    [IconType.GoogleDocs]: () => import( /* webpackChunkName: "glyphGoogleDocs" */'@atlaskit/icon-file-type/glyph/google-doc/16'),
-    [IconType.GoogleForms]: () => import( /* webpackChunkName: "glyphGoogleForms" */'@atlaskit/icon-file-type/glyph/google-form/16'),
-    [IconType.GoogleSheets]: () => import( /* webpackChunkName: "glyphGoogleSheets" */'@atlaskit/icon-file-type/glyph/google-sheet/16'),
-    [IconType.GoogleSlides]: () => import( /* webpackChunkName: "glyphGoogleSlides" */'@atlaskit/icon-file-type/glyph/google-slide/16'),
-    [IconType.MSExcel]: () => import( /* webpackChunkName: "glyphMSExcel" */'@atlaskit/icon-file-type/glyph/excel-spreadsheet/16'),
-    [IconType.MSPowerpoint]: () => import( /* webpackChunkName: "glyphMSPowerpoint" */'@atlaskit/icon-file-type/glyph/powerpoint-presentation/16'),
-    [IconType.MSWord]: () => import( /* webpackChunkName: "glyphMSWord" */'@atlaskit/icon-file-type/glyph/word-document/16'),
-    [IconType.PDF]: () => import( /* webpackChunkName: "glyphPDF" */'@atlaskit/icon-file-type/glyph/pdf-document/16'),
-    [IconType.Sketch]: () => import( /* webpackChunkName: "glyphSketch" */'@atlaskit/icon-file-type/glyph/sketch/16'),
+    [IconType.Document]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_page-icon" */'../common/ui/icons/page-icon')
+    },
+    [IconType.Blog]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphBlock" */'../common/ui/icons/blog-icon')
+    },
+    [IconType.Audio]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon')
+    },
+    [IconType.Code]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_angle-brackets-icon" */'../common/ui/icons/angle-brackets-icon')
+    },
+    [IconType.File]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon')
+    },
+    [IconType.Folder]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_folder-icon" */'../common/ui/icons/folder-icon')
+    },
+    [IconType.Generic]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon')
+    },
+    [IconType.Image]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon')
+    },
+    [IconType.Presentation]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_chart-bar-icon" */'../common/ui/icons/chart-bar-icon')
+    },
+    [IconType.Spreadsheet]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_list-bullet-icon" */'../common/ui/icons/list-bullet-icon')
+    },
+    [IconType.Video]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')
+    },
+    [IconType.Project]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphProject" */'@atlaskit/icon/core/migration/people-group')
+    },
+    [IconType.Template]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphTemplate" */'@atlaskit/icon/core/migration/file--document-filled')
+    },
+    [IconType.Forbidden]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphForbidden" */'@atlaskit/icon/core/migration/lock-locked--lock-filled')
+    },
+    [IconType.Default]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphDefault" */'@atlaskit/icon/core/migration/link')
+    },
+    [IconType.Archive]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphArchive" */'@atlaskit/icon-file-type/glyph/archive/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphArchive" */'@atlaskit/icon-file-type/glyph/archive/24')
+    },
+    [IconType.Executable]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphExecutable" */'@atlaskit/icon-file-type/glyph/executable/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphExecutable" */'@atlaskit/icon-file-type/glyph/executable/24')
+    },
+    [IconType.GIF]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGIF" */'@atlaskit/icon-file-type/glyph/gif/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGIF" */'@atlaskit/icon-file-type/glyph/gif/24')
+    },
+    [IconType.GoogleDocs]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleDocs" */'@atlaskit/icon-file-type/glyph/google-doc/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleDocs" */'@atlaskit/icon-file-type/glyph/google-doc/24')
+    },
+    [IconType.GoogleForms]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleForms" */'@atlaskit/icon-file-type/glyph/google-form/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleForms" */'@atlaskit/icon-file-type/glyph/google-form/24')
+    },
+    [IconType.GoogleSheets]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleSheets" */'@atlaskit/icon-file-type/glyph/google-sheet/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleSheets" */'@atlaskit/icon-file-type/glyph/google-sheet/24')
+    },
+    [IconType.GoogleSlides]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleSlides" */'@atlaskit/icon-file-type/glyph/google-slide/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphGoogleSlides" */'@atlaskit/icon-file-type/glyph/google-slide/24')
+    },
+    [IconType.MSExcel]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphMSExcel" */'@atlaskit/icon-file-type/glyph/excel-spreadsheet/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphMSExcel" */'@atlaskit/icon-file-type/glyph/excel-spreadsheet/24')
+    },
+    [IconType.MSPowerpoint]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphMSPowerpoint" */'@atlaskit/icon-file-type/glyph/powerpoint-presentation/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphMSPowerpoint" */'@atlaskit/icon-file-type/glyph/powerpoint-presentation/24')
+    },
+    [IconType.MSWord]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphMSWord" */'@atlaskit/icon-file-type/glyph/word-document/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphMSWord" */'@atlaskit/icon-file-type/glyph/word-document/24')
+    },
+    [IconType.PDF]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphPDF" */'@atlaskit/icon-file-type/glyph/pdf-document/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphPDF" */'@atlaskit/icon-file-type/glyph/pdf-document/24')
+    },
+    [IconType.Sketch]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphSketch" */'@atlaskit/icon-file-type/glyph/sketch/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphSketch" */'@atlaskit/icon-file-type/glyph/sketch/24')
+    },
     // Bitbucket icons
-    [IconType.Branch]: () => import( /* webpackChunkName: "glyphBranch" */'@atlaskit/icon-object/glyph/branch/16'),
-    [IconType.Commit]: () => import( /* webpackChunkName: "glyphCommit" */'@atlaskit/icon-object/glyph/commit/16'),
-    [IconType.PullRequest]: () => import( /* webpackChunkName: "glyphPullRequest" */'@atlaskit/icon-object/glyph/pull-request/16'),
-    [IconType.Repo]: () => import( /* webpackChunkName: "glyphRepo" */'@atlaskit/icon-object/glyph/code/16'),
+    [IconType.Branch]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphBranch" */'@atlaskit/icon-object/glyph/branch/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphBranch" */'@atlaskit/icon-object/glyph/branch/24')
+    },
+    [IconType.Commit]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphCommit" */'@atlaskit/icon-object/glyph/commit/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphCommit" */'@atlaskit/icon-object/glyph/commit/24')
+    },
+    [IconType.PullRequest]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphPullRequest" */'@atlaskit/icon-object/glyph/pull-request/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphPullRequest" */'@atlaskit/icon-object/glyph/pull-request/24')
+    },
+    [IconType.Repo]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphRepo" */'@atlaskit/icon-object/glyph/code/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphRepo" */'@atlaskit/icon-object/glyph/code/24')
+    },
     // Jira icons
-    [IconType.Bug]: () => import( /* webpackChunkName: "glyphBug" */'@atlaskit/icon-object/glyph/bug/16'),
-    [IconType.Change]: () => import( /* webpackChunkName: "glyphChange" */'@atlaskit/icon-object/glyph/changes/16'),
-    [IconType.Epic]: () => import( /* webpackChunkName: "glyphEpic" */'@atlaskit/icon-object/glyph/epic/16'),
-    [IconType.Incident]: () => import( /* webpackChunkName: "glyphIncident" */'@atlaskit/icon-object/glyph/incident/16'),
-    [IconType.Problem]: () => import( /* webpackChunkName: "glyphProblem" */'@atlaskit/icon-object/glyph/problem/16'),
-    [IconType.ServiceRequest]: () => import( /* webpackChunkName: "glyphServiceRequest" */'@atlaskit/icon-object/glyph/issue/16'),
-    [IconType.Story]: () => import( /* webpackChunkName: "glyphStory" */'@atlaskit/icon-object/glyph/story/16'),
-    [IconType.SubTask]: () => import( /* webpackChunkName: "glyphSubTask" */'@atlaskit/icon-object/glyph/subtask/16'),
-    [IconType.Task]: () => import( /* webpackChunkName: "glyphTask" */'@atlaskit/icon-object/glyph/task/16'),
+    [IconType.Bug]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphBug" */'@atlaskit/icon-object/glyph/bug/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphBug" */'@atlaskit/icon-object/glyph/bug/24')
+    },
+    [IconType.Change]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphChange" */'@atlaskit/icon-object/glyph/changes/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphChange" */'@atlaskit/icon-object/glyph/changes/24')
+    },
+    [IconType.Epic]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphEpic" */'@atlaskit/icon-object/glyph/epic/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphEpic" */'@atlaskit/icon-object/glyph/epic/24')
+    },
+    [IconType.Incident]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphIncident" */'@atlaskit/icon-object/glyph/incident/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphIncident" */'@atlaskit/icon-object/glyph/incident/24')
+    },
+    [IconType.Problem]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphProblem" */'@atlaskit/icon-object/glyph/problem/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphProblem" */'@atlaskit/icon-object/glyph/problem/24')
+    },
+    [IconType.ServiceRequest]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphServiceRequest" */'@atlaskit/icon-object/glyph/issue/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphServiceRequest" */'@atlaskit/icon-object/glyph/issue/24')
+    },
+    [IconType.Story]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphStory" */'@atlaskit/icon-object/glyph/story/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphStory" */'@atlaskit/icon-object/glyph/story/24')
+    },
+    [IconType.SubTask]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphSubTask" */'@atlaskit/icon-object/glyph/subtask/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphSubTask" */'@atlaskit/icon-object/glyph/subtask/24')
+    },
+    [IconType.Task]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphTask" */'@atlaskit/icon-object/glyph/task/16'),
+      large: () => import( /* webpackChunkName: "@atlaskit-internal_glyphTask" */'@atlaskit/icon-object/glyph/task/24')
+    },
     // Provider icons
-    [IconType.Confluence]: () => import( /* webpackChunkName: "glyphConfluence" */'@atlaskit/logo/confluence-icon').then(({
-      ConfluenceIcon
-    }) => ({
-      default: ConfluenceIcon
-    })),
-    [IconType.Jira]: () => import( /* webpackChunkName: "glyphJira" */'@atlaskit/logo/jira-icon').then(({
-      JiraIcon
-    }) => ({
-      default: JiraIcon
-    }))
+    [IconType.Confluence]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphConfluence" */'@atlaskit/logo/confluence-icon').then(({
+        ConfluenceIcon
+      }) => ({
+        default: ConfluenceIcon
+      }))
+    },
+    [IconType.Jira]: {
+      default: () => import( /* webpackChunkName: "@atlaskit-internal_glyphJira" */'@atlaskit/logo/jira-icon').then(({
+        JiraIcon
+      }) => ({
+        default: JiraIcon
+      }))
+    }
   };
 };
 const getTypeToIconMap = fileFormat => {
+  var _lazyIcons$iconDescri;
   const iconDescriptor = extractFileFormatIcon(fileFormat);
   if (!(iconDescriptor !== null && iconDescriptor !== void 0 && iconDescriptor.icon) || !iconDescriptor.label) {
     return null;
   }
   const lazyIcons = getLazyIcons();
-  return [iconDescriptor.label, lazyIcons[iconDescriptor.icon]];
+  return [iconDescriptor.label, (_lazyIcons$iconDescri = lazyIcons[iconDescriptor.icon]) === null || _lazyIcons$iconDescri === void 0 ? void 0 : _lazyIcons$iconDescri.default];
 };
 export const getIframeSandboxAttribute = isTrusted => {
   if (isTrusted) {
@@ -241,4 +353,5 @@ export const getPreviewUrlWithTheme = (previewUrl, themeState) => {
   } catch {
     return previewUrl;
   }
-};
+};
+export const isIconSizeLarge = size => size && [SmartLinkSize.Large, SmartLinkSize.XLarge].includes(size);

package/dist/es2019/view/BlockCard/views/ErroredView.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
+import WarningIcon from '@atlaskit/icon/core/migration/warning';
+import LegacyWarningIcon from '@atlaskit/icon/glyph/warning';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import Text from '../../FlexibleCard/components/elements/text';
@@ -22,7 +24,15 @@ const ErroredView = ({
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
     actions: actions,
     testId: testId
-  }), /*#__PURE__*/React.createElement(WarningIcon, {
+  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(WarningIcon, {
+    label: "errored-warning-icon",
+    color: "var(--ds-icon-warning, #E56910)",
+    LEGACY_size: "small",
+    testId: `${testId}-warning-icon`
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  React.createElement(LegacyWarningIcon, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: `var(--ds-icon-warning, ${R300})`,

package/dist/es2019/view/BlockCard/views/ForbiddenView.js

@@ -2,8 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import LockIcon from '@atlaskit/icon/glyph/lock';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
 import { extractProvider } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R300 } from '@atlaskit/theme/colors';
 import { extractRequestAccessContextImproved } from '../../../extractors/common/context/extractAccessContext';
 import extractHostname from '../../../extractors/common/hostname/extractHostname';
@@ -78,7 +80,16 @@ const ForbiddenView = ({
     showPreview: true,
     testId: testId,
     title: title
-  }), /*#__PURE__*/React.createElement(LockIcon, {
+  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LockLockedIcon, {
+    label: "forbidden-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: LegacyLockIcon,
+    LEGACY_size: "small",
+    testId: `${testId}-lock-icon`
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  React.createElement(LegacyLockIcon, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: `var(--ds-icon-danger, ${R300})`,

package/dist/es2019/view/BlockCard/views/NotFoundView.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
-import LockIcon from '@atlaskit/icon/glyph/lock';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock';
 import { extractProvider } from '@atlaskit/link-extractors';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import Text from '../../FlexibleCard/components/elements/text';
@@ -38,7 +40,16 @@ const NotFoundView = ({
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
     testId: testId,
     title: title
-  }), /*#__PURE__*/React.createElement(LockIcon, {
+  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(LockLockedIcon, {
+    label: "not-found-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: LegacyLockIcon,
+    LEGACY_size: "small",
+    testId: `${testId}-lock-icon`
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  React.createElement(LegacyLockIcon, {
     label: "not-found-lock-icon",
     size: "small",
     primaryColor: `var(--ds-icon-danger, ${R300})`,

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.compiled.css

@@ -0,0 +1 @@
+._zulpu2gc{gap:var(--ds-space-100,8px)}

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,5 +1,8 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
 import { Box } from '@atlaskit/primitives';
 import { SmartLinkAlignment, SmartLinkDirection } from '../../../../../../constants';
@@ -32,7 +35,8 @@ const TitleBlockErroredViewNew = ({
   } = retry || {};
   const hasAction = onClick !== undefined;
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: `${testId}-errored-view`
+    testId: `${testId}-errored-view`,
+    className: ax(["_zulpu2gc"])
   }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
     overrideIcon: icon,
     position: position
@@ -48,4 +52,5 @@ const TitleBlockErroredViewNew = ({
   })))), actionGroup);
 };
 export default TitleBlockErroredViewOld;
-export { TitleBlockErroredViewNew };
+export { TitleBlockErroredViewNew };
+const titleBlockGapStyle = null;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.compiled.css

@@ -1 +1,2 @@
-._zulppdf9{gap:var(--ds-space-050,.25rem)}
+._zulppdf9{gap:var(--ds-space-050,.25rem)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkWidth } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';
@@ -10,6 +11,19 @@ import { ElementGroupNew as ElementGroup } from '../../element-group';
 import { renderElementItems } from '../../utils';
 import TitleBlockResolvedViewOld from './TitleBlockResolvedViewOld';
 const style = null;
+const titleBlockGapStyle = null;
+export const BlockFeatureGated = ({
+  className,
+  ...props
+}) => {
+  if (fg('platform-smart-card-icon-migration')) {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- This will be deleted when cleaning the gate
+    return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+      className: className
+    }));
+  }
+  return /*#__PURE__*/React.createElement(Block, props);
+};
 
 /**
  * This renders a fully resolved TitleBlock.
@@ -29,14 +43,20 @@ const TitleBlockResolvedViewNew = ({
   hideIcon,
   ...blockProps
 }) => {
+  const {
+    size
+  } = blockProps;
   const metadataElements = renderElementItems(metadata);
   const subtitleElements = renderElementItems(subtitle);
-  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: `${testId}-resolved-view`
-  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
+  return /*#__PURE__*/React.createElement(BlockFeatureGated, _extends({}, blockProps, {
+    testId: `${testId}-resolved-view`,
+    className: ax(["_zulpu2gc"])
+  }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, _extends({
     overrideIcon: icon,
     position: position
-  }), /*#__PURE__*/React.createElement(ElementGroup, {
+  }, fg('platform-smart-card-icon-migration') && {
+    size
+  })), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible,
     size: blockProps.size,

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolving/TitleBlockResolvingViewOld.js

@@ -7,7 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { SmartLinkSize } from '../../../../../../constants';
-import LoadingSkeleton from '../../../common/loading-skeleton';
+import { LoadingSkeletonOld } from '../../../common/loading-skeleton';
 import { getIconSizeStyles, getIconWidth } from '../../../utils';
 import Block from '../../block';
 /**
@@ -35,7 +35,7 @@ const TitleBlockResolvingView = ({
   jsx("span", {
     css: iconStyles,
     "data-testid": `${testId}-icon`
-  }, jsx(LoadingSkeleton, {
+  }, jsx(LoadingSkeletonOld, {
     testId: `${testId}-icon-loading`
   })), title, actionGroup);
 };

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.compiled.css

@@ -1,4 +1,5 @@
-._16jlidpf{flex-grow:0}
+
+._zulpu2gc{gap:var(--ds-space-100,8px)}._16jlidpf{flex-grow:0}
 ._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
 ._19l31k8s img, ._1pr21k8s span, ._1u5t1k8s svg{max-height:1.5rem}
 ._19l3oqnp img, ._1pr2oqnp span, ._1u5toqnp svg{max-height:.75rem}

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -5,8 +5,10 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkSize } from '../../../../../../constants';
-import LoadingSkeleton from '../../../common/loading-skeleton';
+import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../common/loading-skeleton';
+import { getIconWidthNew } from '../../../utils';
 import Block from '../../block';
 import TitleBlockResolvingViewOld from './TitleBlockResolvingViewOld';
 const iconStyle = {
@@ -15,6 +17,8 @@ const iconStyle = {
   medium: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
   small: "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
 };
+const titleBlockGapStyle = null;
+
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
@@ -31,12 +35,29 @@ const TitleBlockResolvingViewNew = ({
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
+  if (fg('platform-smart-card-icon-migration')) {
+    const iconWidth = getIconWidthNew(size);
+    return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+      testId: `${testId}-resolving-view`,
+      className: ax(["_zulpu2gc"])
+    }), !hideIcon && /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: iconWidth,
+        height: iconWidth
+      },
+      "data-testid": `${testId}-icon`
+    }, /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+      width: iconWidth,
+      height: iconWidth,
+      testId: `${testId}-icon-loading`
+    })), title, actionGroup);
+  }
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolving-view`
   }), !hideIcon && /*#__PURE__*/React.createElement("span", {
     "data-testid": `${testId}-icon`,
     className: ax([iconStyle[size]])
-  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  }, /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
     testId: `${testId}-icon-loading`
   })), title, actionGroup);
 };

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

@@ -1,12 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Loadable from 'react-loadable';
-import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
-import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
+import DocumentIconOld from '@atlaskit/icon-file-type/glyph/document/16';
+import BlogIconOld from '@atlaskit/icon-object/glyph/blog/16';
 import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { R400 } from '@atlaskit/theme/colors';
-import { IconType } from '../../../../../constants';
-import { getLazyIcons } from '../../../../../utils';
+import BlogIconNew from '../../../../../common/ui/icons/blog-icon';
+import DocumentIconNew from '../../../../../common/ui/icons/page-icon';
+import { IconType, SmartLinkSize } from '../../../../../constants';
+import { getLazyIcons, isIconSizeLarge } from '../../../../../utils';
 // prettier-ignore
 const importIconMapperOld = {
   [IconType.Archive]: () => import( /* webpackChunkName: "glyphArchive" */'@atlaskit/icon-file-type/glyph/archive/16'),
@@ -84,9 +87,13 @@ const importIconMapperOld = {
   [IconType.Subscriber]: () => import( /* webpackChunkName: "glyphSubscriber" */'@atlaskit/icon/glyph/people'),
   [IconType.SubTasksProgress]: () => import( /* webpackChunkName: "glyphSubtaskProgress" */'@atlaskit/icon/glyph/subtask')
 };
-const getIconImportFn = icon => {
+const getIconImportFn = (icon, size) => {
   if (fg('platform-smart-card-icon-migration')) {
-    return getLazyIcons()[icon];
+    const item = getLazyIcons()[icon];
+    if (isIconSizeLarge(size) && item !== null && item !== void 0 && item.large) {
+      return item.large;
+    }
+    return item === null || item === void 0 ? void 0 : item.default;
   }
   return importIconMapperOld[icon];
 };
@@ -99,49 +106,67 @@ const importIcon = importFn => {
 const AtlaskitIcon = ({
   icon,
   label,
-  testId
+  testId,
+  size = SmartLinkSize.Medium
 }) => {
+  const DocumentIcon = fg('platform-smart-card-icon-migration') ? DocumentIconNew : DocumentIconOld;
+  const BlogIcon = fg('platform-smart-card-icon-migration') ? BlogIconNew : BlogIconOld;
+
   // Check for synchonously loaded icons first for SSR purposes
   switch (icon) {
     case IconType.Document:
-      return /*#__PURE__*/React.createElement(DocumentIcon, {
+      return /*#__PURE__*/React.createElement(DocumentIcon, _extends({
         label: label || 'document',
         testId: testId
-      });
+      }, fg('platform-smart-card-icon-migration') && {
+        size
+      }));
     case IconType.Blog:
-      return /*#__PURE__*/React.createElement(BlogIcon, {
+      return /*#__PURE__*/React.createElement(BlogIcon, _extends({
         label: label || 'blog',
         testId: testId
-      });
+      }, fg('platform-smart-card-icon-migration') && {
+        size
+      }));
   }
-  const importFn = getIconImportFn(icon);
+  const importFn = getIconImportFn(icon, size);
   if (!importFn) {
     return null;
   }
   const ImportedIcon = importIcon(importFn);
   switch (icon) {
     case IconType.Confluence:
-      return /*#__PURE__*/React.createElement(ConfluenceIcon, {
+      return /*#__PURE__*/React.createElement(ConfluenceIcon, _extends({
         appearance: "brand",
         testId: testId
-      });
+      }, fg('platform-smart-card-icon-migration') && {
+        size: size === SmartLinkSize.Large ? 'small' : 'xsmall'
+      }));
     case IconType.Jira:
-      return /*#__PURE__*/React.createElement(JiraIcon, {
+      return /*#__PURE__*/React.createElement(JiraIcon, _extends({
         appearance: "brand",
         testId: testId
-      });
+      }, fg('platform-smart-card-icon-migration') && {
+        size: size === SmartLinkSize.Large ? 'small' : 'xsmall'
+      }));
     case IconType.Error:
     case IconType.Forbidden:
-      return /*#__PURE__*/React.createElement(ImportedIcon, {
+      return /*#__PURE__*/React.createElement(ImportedIcon, _extends({
         label: label,
-        testId: testId,
+        testId: testId
+      }, fg('platform-smart-card-icon-migration') ? {
+        size,
+        color: "var(--ds-icon-danger, #C9372C)"
+      } : {
         primaryColor: `var(--ds-icon-danger, ${R400})`
-      });
+      }));
     default:
-      return /*#__PURE__*/React.createElement(ImportedIcon, {
+      return /*#__PURE__*/React.createElement(ImportedIcon, _extends({
         label: label,
         testId: testId
-      });
+      }, fg('platform-smart-card-icon-migration') && {
+        size
+      }));
   }
 };
 export default AtlaskitIcon;