@atlaskit/smart-card 34.5.0 → 34.5.2

package/dist/esm/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/esm/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -7,8 +7,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';
 var iconStyle = {
@@ -17,6 +19,8 @@ var 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"
 };
+var titleBlockGapStyle = null;
+
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
@@ -31,12 +35,29 @@ var TitleBlockResolvingViewNew = function TitleBlockResolvingViewNew(_ref) {
     blockProps = _objectWithoutProperties(_ref, _excluded);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  if (fg('platform-smart-card-icon-migration')) {
+    var iconWidth = getIconWidthNew(size);
+    return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+      testId: "".concat(testId, "-resolving-view"),
+      className: ax(["_zulpu2gc"])
+    }), !hideIcon && /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: iconWidth,
+        height: iconWidth
+      },
+      "data-testid": "".concat(testId, "-icon")
+    }, /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+      width: iconWidth,
+      height: iconWidth,
+      testId: "".concat(testId, "-icon-loading")
+    })), title, actionGroup);
+  }
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
   }), !hideIcon && /*#__PURE__*/React.createElement("span", {
     "data-testid": "".concat(testId, "-icon"),
     className: ax([iconStyle[size]])
-  }, /*#__PURE__*/React.createElement(LoadingSkeleton, {
+  }, /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };

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

@@ -1,14 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _importIconMapperOld;
 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
 var importIconMapperOld = (_importIconMapperOld = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_importIconMapperOld, IconType.Archive, function () {
   return import( /* webpackChunkName: "glyphArchive" */'@atlaskit/icon-file-type/glyph/archive/16');
@@ -143,9 +146,13 @@ var importIconMapperOld = (_importIconMapperOld = {}, _defineProperty(_definePro
 }), _defineProperty(_importIconMapperOld, IconType.SubTasksProgress, function () {
   return import( /* webpackChunkName: "glyphSubtaskProgress" */'@atlaskit/icon/glyph/subtask');
 }));
-var getIconImportFn = function getIconImportFn(icon) {
+var getIconImportFn = function getIconImportFn(icon, size) {
   if (fg('platform-smart-card-icon-migration')) {
-    return getLazyIcons()[icon];
+    var 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];
 };
@@ -164,48 +171,67 @@ var importIcon = function importIcon(importFn) {
 var AtlaskitIcon = function AtlaskitIcon(_ref3) {
   var icon = _ref3.icon,
     label = _ref3.label,
-    testId = _ref3.testId;
+    testId = _ref3.testId,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? SmartLinkSize.Medium : _ref3$size;
+  var DocumentIcon = fg('platform-smart-card-icon-migration') ? DocumentIconNew : DocumentIconOld;
+  var 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: 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: size
+      }));
   }
-  var importFn = getIconImportFn(icon);
+  var importFn = getIconImportFn(icon, size);
   if (!importFn) {
     return null;
   }
   var 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: size,
+        color: "var(--ds-icon-danger, #C9372C)"
+      } : {
         primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
-      });
+      }));
     default:
-      return /*#__PURE__*/React.createElement(ImportedIcon, {
+      return /*#__PURE__*/React.createElement(ImportedIcon, _extends({
         label: label,
         testId: testId
-      });
+      }, fg('platform-smart-card-icon-migration') && {
+        size: size
+      }));
   }
 };
 export default AtlaskitIcon;

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

@@ -1,26 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ImageLoader from 'react-render-image';
-import LoadingSkeleton from '../loading-skeleton';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { LoadingSkeletonNew, LoadingSkeletonOld } from '../loading-skeleton';
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
     testId = _ref.testId,
     url = _ref.url,
+    width = _ref.width,
+    height = _ref.height,
     onError = _ref.onError,
     onLoad = _ref.onLoad;
-  return /*#__PURE__*/React.createElement(ImageLoader, {
-    src: url,
-    loading: /*#__PURE__*/React.createElement(LoadingSkeleton, {
-      testId: "".concat(testId, "-loading")
+  return /*#__PURE__*/React.createElement(ImageLoader, _extends({
+    src: url
+  }, fg('platform-smart-card-icon-migration') ? {
+    loading: /*#__PURE__*/React.createElement(LoadingSkeletonNew, {
+      testId: "".concat(testId, "-loading"),
+      width: width,
+      height: height
+    }),
+    loaded: /*#__PURE__*/React.createElement("img", {
+      src: url,
+      "data-testid": "".concat(testId, "-image"),
+      alt: "",
+      style: {
+        width: width,
+        height: height
+      }
     })
+  } : {
+    loading: /*#__PURE__*/React.createElement(LoadingSkeletonOld, {
+      testId: "".concat(testId, "-loading")
+    }),
     // eslint-disable-next-line jsx-a11y/alt-text
-    ,
     loaded: /*#__PURE__*/React.createElement("img", {
       src: url,
       "data-testid": "".concat(testId, "-image")
-    }),
+    })
+  }, {
     errored: defaultIcon,
     onError: onError,
     onLoad: onLoad
-  });
+  }));
 };
 export default ImageIcon;

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -1,12 +1,10 @@
 
 ._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
-._1bsb9a7u{width:var(--_uc2kr6)}
 ._1e0c1o8l{display:inline-block}
 ._1itkx3i8{background-image:var(--_16116mi)}
 ._1lrw6rms{background-size:280% 100%}
 ._1o51q7pw{animation-fill-mode:forwards}
 ._1pglp3kn{animation-timing-function:linear}
-._4t3iaym7{height:var(--_1nl18gq)}
 ._5sag9cwz{animation-duration:1s}
 ._bfhk178v{background-color:var(--ds-skeleton-subtle,#f6f7f8)}
 ._j7hqqkar{animation-name:kc09ee}

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,31 +1,33 @@
 /* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+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 LoadingSkeletonOld from './LoadingSkeletonOld';
+import LoadingSkeletonEmotionOld from './LoadingSkeletonOld';
 var animationNameStyles = null;
+var loadingSkeletonStyle = null;
 var LoadingSkeletonNew = function LoadingSkeletonNew(_ref) {
   var testId = _ref.testId,
     width = _ref.width,
     height = _ref.height;
-  var styles = null;
-
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
-    className: ax(["_2rkoyh40 _1bsb9a7u _4t3iaym7 _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
+    className: ax(["_2rkoyh40 _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
     style: {
-      "--_uc2kr6": ix("".concat(width, "rem")),
-      "--_1nl18gq": ix("".concat(height, "rem")),
+      width: width,
+      height: height,
       "--_16116mi": ix("linear-gradient( to right, transparent 0%, ".concat("var(--ds-skeleton, #edeef1)", " 20%, transparent 40%, transparent 100% )"))
     }
   });
 };
-var LoadingSkeleton = function LoadingSkeleton(props) {
+var LoadingSkeletonOld = function LoadingSkeletonOld(props) {
   if (fg('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(LoadingSkeletonNew, props);
+    return /*#__PURE__*/React.createElement(LoadingSkeletonNew, _extends({}, props, {
+      width: "".concat(props.width, "rem"),
+      height: "".concat(props.height, "rem")
+    }));
   }
-  return /*#__PURE__*/React.createElement(LoadingSkeletonOld, props);
+  return /*#__PURE__*/React.createElement(LoadingSkeletonEmotionOld, props);
 };
-export default LoadingSkeleton;
+export { LoadingSkeletonOld, LoadingSkeletonNew };

package/dist/esm/view/FlexibleCard/components/container/index.compiled.css

@@ -1,15 +1,16 @@
-._18s8v77o{margin:var(--ds-space-025,2px)}
+
 ._19itn8v0{border:var(--_vzvmm2)}
 ._1yt418y6{padding:var(--_1xumd0e)}
 ._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
 ._zulp1jvo{gap:1.25rem 0}
 ._zulp1qos{gap:.5rem 0}
 ._zulpfzsm{gap:.25rem 0}
-._zulph3jc{gap:1rem 0}
+._zulph3jc{gap:1rem 0}._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bv15sf{padding-left:calc(var(--preview-block-width) + 1.25rem)}
 ._19bv1ltm{padding-left:calc(var(--preview-block-width) + .25rem)}
 ._19bvf557{padding-left:calc(var(--preview-block-width) + 1rem)}
 ._19bvqox2{padding-left:calc(var(--preview-block-width) + .5rem)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1e0c1txw{display:flex}
 ._1pcmkb7n:hover~.actions-button-group{opacity:1}
 ._1reo15vq{overflow-x:hidden}
@@ -20,11 +21,13 @@
 ._1yob1kwk{--container-gap-right:.5rem}
 ._1yob1wow{--container-gap-right:var(--_12k13bg)}
 ._1yob6mu8{--container-gap-right:.25rem}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._2lx21bp4{flex-direction:column}
 ._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
 ._jb7v18y6{--container-padding:var(--_1xumd0e)}
 ._kqswh2mm{position:relative}
 ._nqwih2mm .has-action, ._18ywh2mm a, ._1nq3h2mm button{position:relative}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
 ._r37x1r5k{--preview-block-width:30%}
 ._u5f315sf{padding-right:calc(var(--preview-block-width) + 1.25rem)}
 ._u5f31ltm{padding-right:calc(var(--preview-block-width) + .25rem)}

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -185,7 +185,7 @@ var ContainerNew = function ContainerNew(_ref3) {
   var container = /*#__PURE__*/React.createElement("div", {
     "data-smart-link-container": true,
     "data-testid": testId,
-    className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19itn8v0 _2rkopd34 _18s8v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
+    className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19itn8v0 _2rkopd34 _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
     style: {
       "--_1xumd0e": ix(padding),
       "--_73mooq": ix(previewOnLeft ? gap : padding),

package/dist/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,6 +8,8 @@ import React, { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
@@ -52,11 +55,14 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
   );
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SmartLinkSize.Medium;
   if (icon) {
-    return jsx(AtlaskitIcon, {
+    return jsx(AtlaskitIcon, _extends({
       icon: icon,
       testId: "".concat(testId, "-icon")
-    });
+    }, fg('platform-smart-card-icon-migration') && {
+      size: size
+    }));
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
@@ -67,12 +73,17 @@ var renderDefaultIcon = function renderDefaultIcon(label, testId) {
   });
 };
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
+  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : SmartLinkSize.Medium;
+  var width = size === SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
-    return jsx(ImageIcon, {
+    return jsx(ImageIcon, _extends({
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
-    });
+    }, fg('platform-smart-card-icon-migration') && {
+      width: width,
+      height: width
+    }));
   }
 };
 
@@ -99,18 +110,34 @@ var Icon = function Icon(_ref) {
     url = _ref.url;
   var element = useMemo(function () {
     var defaultIcon = renderDefaultIcon(label, testId);
-    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId) || renderAtlaskitIcon(icon, testId) || defaultIcon;
-  }, [overrideIcon, icon, label, render, testId, url]);
+    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
+  }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = getIconWidth(size);
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {
+    css: [
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    css: [styles, renderStyles, overrideCss],
+    !fg('platform-smart-card-icon-migration') && styles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    renderStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-icon": true,
     "data-testid": testId
-  }, element);
+  }, fg('platform-smart-card-icon-migration') ? jsx(Box, {
+    xcss: iconWrapperStyle,
+    style: {
+      width: width,
+      height: width
+    }
+  }, element) : element);
 };
+var iconWrapperStyle = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 export default Icon;

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Loadable from 'react-loadable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkSize } from '../../../constants';
 export var sizeToButtonSpacing = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, SmartLinkSize.Small, 'none'), SmartLinkSize.Medium, 'compact'), SmartLinkSize.Large, 'compact'), SmartLinkSize.XLarge, 'default');
 export var getFormattedMessage = function getFormattedMessage(message) {
@@ -54,7 +55,9 @@ export var getIconSizeStyles = function getIconSizeStyles(width) {
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\tflex: 0 0 auto;\n\t\t", "\n\t\tspan,\n    svg,\n    img {\n\t\t\t", "\n\t\t}\n\t\tsvg {\n\t\t\tpadding: 0;\n\t\t}\n\t"])), sizeStyles, sizeStyles);
 };
-export var getIconWidth = function getIconWidth(size) {
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+export var getIconWidthOld = function getIconWidthOld(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '2rem';
@@ -67,6 +70,24 @@ export var getIconWidth = function getIconWidth(size) {
       return '.75rem';
   }
 };
+
+// TODO Rename to getIconWidth when cleaning platform-smart-card-icon-migration
+export var getIconWidthNew = function getIconWidthNew(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return "var(--ds-space-300, 24px)";
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return "var(--ds-space-200, 16px)";
+  }
+};
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+export var getIconWidth = function getIconWidth(size) {
+  return fg('platform-smart-card-icon-migration') ? getIconWidthNew(size) : getIconWidthOld(size);
+};
 export var importIcon = function importIcon(importFn) {
   return Loadable({
     loader: function loader() {

package/dist/esm/view/HoverCard/components/views/resolving/index.js

@@ -3,11 +3,14 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
-import LoadingSkeleton from '../../../../FlexibleCard/components/common/loading-skeleton';
+import { LoadingSkeletonNew, LoadingSkeletonOld } from '../../../../FlexibleCard/components/common/loading-skeleton';
 import Icon from '../../../../FlexibleCard/components/elements/icon';
 import { CARD_WIDTH_REM } from '../../../styled';
 import { getTitleStyles, loadingViewContainer, skeletonContainer, titleBlockStyles } from './styled';
@@ -22,6 +25,7 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
     items: actions,
     visibleButtonsNum: 2
   });
+  var LoadingSkeleton = fg('platform-smart-card-icon-migration') ? LoadingSkeletonNew : LoadingSkeletonOld;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {
@@ -40,18 +44,29 @@ var HoverCardLoadingView = function HoverCardLoadingView(_ref) {
     }), jsx("span", {
       css: getTitleStyles(lineHeightRem),
       "data-testid": "".concat(testId, "-title")
-    }, jsx(LoadingSkeleton, {
+    }, fg('platform-smart-card-icon-migration') ? jsx(LoadingSkeletonNew, {
+      height: "".concat(lineHeightRem, "rem")
+    }) : jsx(LoadingSkeletonOld, {
       height: lineHeightRem
-    })), actionGroup), jsx(LoadingSkeleton, {
+    })), actionGroup), fg('platform-smart-card-icon-migration') ? jsx(React.Fragment, null, jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    }), jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem * 3, "rem")
+    }), jsx(LoadingSkeletonNew, {
+      width: "".concat(skeletonWidth, "rem"),
+      height: "".concat(lineHeightRem, "rem")
+    })) : jsx(React.Fragment, null, jsx(LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem
-    }), jsx(LoadingSkeleton, {
+    }), jsx(LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem * 3
-    }), jsx(LoadingSkeleton, {
+    }), jsx(LoadingSkeletonOld, {
       width: skeletonWidth,
       height: lineHeightRem
-    })))
+    }))))
   );
 };
 export default HoverCardLoadingView;

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

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.5.0",
+  packageVersion: "34.5.2",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/dist/types/common/ui/icons/angle-brackets-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
-declare const AngleBracketsIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof AngleBracketsIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const AngleBracketsIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default AngleBracketsIconWithColor;

package/dist/types/common/ui/icons/audio-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import AudioIcon from '@atlaskit/icon/core/audio';
-declare const AudioIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof AudioIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const AudioIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default AudioIconWithColor;

package/dist/types/common/ui/icons/blog-icon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const BlogIconWithColor: import("react").FC<{
+    label: string;
+    testId?: string | undefined;
+} & {
+    size?: import("../../..").SmartLinkSize | undefined;
+}>;
+export default BlogIconWithColor;

package/dist/types/common/ui/icons/chart-bar-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import ChartBarIcon from '@atlaskit/icon/core/chart-bar';
-declare const ChartBarIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof ChartBarIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const ChartBarIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default ChartBarIconWithColor;

package/dist/types/common/ui/icons/file-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import FileIcon from '@atlaskit/icon/core/file';
-declare const FileIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof FileIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const FileIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default FileIconWithColor;

package/dist/types/common/ui/icons/folder-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import FolderClosedIcon from '@atlaskit/icon/core/folder-closed';
-declare const FolderClosedIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof FolderClosedIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const FolderClosedIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default FolderClosedIconWithColor;

package/dist/types/common/ui/icons/image-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import ImageIcon from '@atlaskit/icon/core/image';
-declare const ImageIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof ImageIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const ImageIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default ImageIconWithColor;

package/dist/types/common/ui/icons/list-bullet-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
-declare const ListBulletedIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof ListBulletedIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const ListBulletedIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default ListBulletedIconWithColor;

package/dist/types/common/ui/icons/page-icon.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import PageIcon from '@atlaskit/icon/core/page';
-declare const PageIconWithColor: {
-    (props: ComponentPropsWithoutRef<typeof PageIcon>): JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+declare const PageIconWithColor: import("react").FC<import("./types").AtlaskitIconTileProps>;
 export default PageIconWithColor;