@atlaskit/smart-card 34.5.0 → 34.5.1

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

@@ -1,13 +1,17 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TitleBlockErroredViewNew = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../../constants");
@@ -16,6 +20,8 @@ var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _TitleBlockErroredViewOld = _interopRequireDefault(require("./TitleBlockErroredViewOld"));
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon", "hideIcon"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * Represents an Errored TitleBlock view.
  * This will render when a Smart Link did not successfully resolve.
@@ -37,20 +43,22 @@ var TitleBlockErroredViewNew = exports.TitleBlockErroredViewNew = function Title
     onClick = _ref2.onClick,
     values = _ref2.values;
   var hasAction = onClick !== undefined;
-  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-errored-view")
-  }), !hideIcon && /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, {
+  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-errored-view"),
+    className: (0, _runtime.ax)(["_zulpu2gc"])
+  }), !hideIcon && /*#__PURE__*/React.createElement(_elements.LinkIcon, {
     overrideIcon: icon,
     position: position
-  }), title, descriptor && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }), title, descriptor && /*#__PURE__*/React.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  }, /*#__PURE__*/React.createElement(_primitives.Box, {
     onClick: onClick,
     testId: "".concat(testId, "-errored-view-message"),
     tabIndex: hasAction ? 0 : -1
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
     values: values
   })))), actionGroup);
 };
-var _default = exports.default = _TitleBlockErroredViewOld.default;
+var _default = exports.default = _TitleBlockErroredViewOld.default;
+var titleBlockGapStyle = null;

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

@@ -6,50 +6,68 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TitleBlockResolvedViewNew = void 0;
+exports.default = exports.TitleBlockResolvedViewNew = exports.BlockFeatureGated = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
 var _elements = require("../../../elements");
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = require("../../element-group");
 var _utils = require("../../utils");
 var _TitleBlockResolvedViewOld = _interopRequireDefault(require("./TitleBlockResolvedViewOld"));
-var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "icon", "title", "metadataPosition", "hideIcon"];
+var _excluded = ["className"],
+  _excluded2 = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "icon", "title", "metadataPosition", "hideIcon"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var style = null;
+var titleBlockGapStyle = null;
+var BlockFeatureGated = exports.BlockFeatureGated = function BlockFeatureGated(_ref) {
+  var className = _ref.className,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if ((0, _platformFeatureFlags.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.default, (0, _extends2.default)({}, props, {
+      className: className
+    }));
+  }
+  return /*#__PURE__*/React.createElement(_block.default, props);
+};
 
 /**
  * This renders a fully resolved TitleBlock.
  * This should render when a Smart Link returns a valid response.
  * @see TitleBlock
  */
-var TitleBlockResolvedViewNew = exports.TitleBlockResolvedViewNew = function TitleBlockResolvedViewNew(_ref) {
-  var actionGroup = _ref.actionGroup,
-    _ref$metadata = _ref.metadata,
-    metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
-    position = _ref.position,
-    _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
-    testId = _ref.testId,
-    text = _ref.text,
-    icon = _ref.icon,
-    title = _ref.title,
-    metadataPosition = _ref.metadataPosition,
-    hideIcon = _ref.hideIcon,
-    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var TitleBlockResolvedViewNew = exports.TitleBlockResolvedViewNew = function TitleBlockResolvedViewNew(_ref2) {
+  var actionGroup = _ref2.actionGroup,
+    _ref2$metadata = _ref2.metadata,
+    metadata = _ref2$metadata === void 0 ? [] : _ref2$metadata,
+    position = _ref2.position,
+    _ref2$subtitle = _ref2.subtitle,
+    subtitle = _ref2$subtitle === void 0 ? [] : _ref2$subtitle,
+    testId = _ref2.testId,
+    text = _ref2.text,
+    icon = _ref2.icon,
+    title = _ref2.title,
+    metadataPosition = _ref2.metadataPosition,
+    hideIcon = _ref2.hideIcon,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var size = blockProps.size;
   var metadataElements = (0, _utils.renderElementItems)(metadata);
   var subtitleElements = (0, _utils.renderElementItems)(subtitle);
-  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view")
-  }), !hideIcon && /*#__PURE__*/React.createElement(_elements.LinkIcon, {
+  return /*#__PURE__*/React.createElement(BlockFeatureGated, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view"),
+    className: (0, _runtime.ax)(["_zulpu2gc"])
+  }), !hideIcon && /*#__PURE__*/React.createElement(_elements.LinkIcon, (0, _extends2.default)({
     overrideIcon: icon,
     position: position
-  }), /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
+  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+    size: size
+  })), /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible,
     size: blockProps.size,

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

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _constants = require("../../../../../../constants");
-var _loadingSkeleton = _interopRequireDefault(require("../../../common/loading-skeleton"));
+var _loadingSkeleton = require("../../../common/loading-skeleton");
 var _utils = require("../../../utils");
 var _block = _interopRequireDefault(require("../../block"));
 var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
@@ -41,7 +41,7 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   (0, _react.jsx)("span", {
     css: iconStyles,
     "data-testid": "".concat(testId, "-icon")
-  }, (0, _react.jsx)(_loadingSkeleton.default, {
+  }, (0, _react.jsx)(_loadingSkeleton.LoadingSkeletonOld, {
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };

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

@@ -12,8 +12,10 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
-var _loadingSkeleton = _interopRequireDefault(require("../../../common/loading-skeleton"));
+var _loadingSkeleton = require("../../../common/loading-skeleton");
+var _utils = require("../../../utils");
 var _block = _interopRequireDefault(require("../../block"));
 var _TitleBlockResolvingViewOld = _interopRequireDefault(require("./TitleBlockResolvingViewOld"));
 var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
@@ -26,6 +28,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.
@@ -40,12 +44,29 @@ var TitleBlockResolvingViewNew = exports.TitleBlockResolvingViewNew = function T
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
+    var iconWidth = (0, _utils.getIconWidthNew)(size);
+    return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+      testId: "".concat(testId, "-resolving-view"),
+      className: (0, _runtime.ax)(["_zulpu2gc"])
+    }), !hideIcon && /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: iconWidth,
+        height: iconWidth
+      },
+      "data-testid": "".concat(testId, "-icon")
+    }, /*#__PURE__*/React.createElement(_loadingSkeleton.LoadingSkeletonNew, {
+      width: iconWidth,
+      height: iconWidth,
+      testId: "".concat(testId, "-icon-loading")
+    })), title, actionGroup);
+  }
   return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
   }), !hideIcon && /*#__PURE__*/React.createElement("span", {
     "data-testid": "".concat(testId, "-icon"),
     className: (0, _runtime.ax)([iconStyle[size]])
-  }, /*#__PURE__*/React.createElement(_loadingSkeleton.default, {
+  }, /*#__PURE__*/React.createElement(_loadingSkeleton.LoadingSkeletonOld, {
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
@@ -14,6 +15,8 @@ var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/blog/16"));
 var _logo = require("@atlaskit/logo");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _blogIcon = _interopRequireDefault(require("../../../../../common/ui/icons/blog-icon"));
+var _pageIcon = _interopRequireDefault(require("../../../../../common/ui/icons/page-icon"));
 var _constants = require("../../../../../constants");
 var _utils = require("../../../../../utils");
 var _importIconMapperOld;
@@ -275,9 +278,13 @@ var importIconMapperOld = (_importIconMapperOld = {}, (0, _defineProperty2.defau
     return _interopRequireWildcard(require( /* webpackChunkName: "glyphSubtaskProgress" */'@atlaskit/icon/glyph/subtask'));
   });
 }));
-var getIconImportFn = function getIconImportFn(icon) {
+var getIconImportFn = function getIconImportFn(icon, size) {
   if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
-    return (0, _utils.getLazyIcons)()[icon];
+    var item = (0, _utils.getLazyIcons)()[icon];
+    if ((0, _utils.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];
 };
@@ -296,48 +303,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 ? _constants.SmartLinkSize.Medium : _ref3$size;
+  var DocumentIcon = (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? _pageIcon.default : _.default;
+  var BlogIcon = (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? _blogIcon.default : _2.default;
+
   // Check for synchonously loaded icons first for SSR purposes
   switch (icon) {
     case _constants.IconType.Document:
-      return /*#__PURE__*/_react.default.createElement(_.default, {
+      return /*#__PURE__*/_react.default.createElement(DocumentIcon, (0, _extends2.default)({
         label: label || 'document',
         testId: testId
-      });
+      }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+        size: size
+      }));
     case _constants.IconType.Blog:
-      return /*#__PURE__*/_react.default.createElement(_2.default, {
+      return /*#__PURE__*/_react.default.createElement(BlogIcon, (0, _extends2.default)({
         label: label || 'blog',
         testId: testId
-      });
+      }, (0, _platformFeatureFlags.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 _constants.IconType.Confluence:
-      return /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, {
+      return /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, (0, _extends2.default)({
         appearance: "brand",
         testId: testId
-      });
+      }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+        size: size === _constants.SmartLinkSize.Large ? 'small' : 'xsmall'
+      }));
     case _constants.IconType.Jira:
-      return /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, {
+      return /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, (0, _extends2.default)({
         appearance: "brand",
         testId: testId
-      });
+      }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+        size: size === _constants.SmartLinkSize.Large ? 'small' : 'xsmall'
+      }));
     case _constants.IconType.Error:
     case _constants.IconType.Forbidden:
-      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
+      return /*#__PURE__*/_react.default.createElement(ImportedIcon, (0, _extends2.default)({
         label: label,
-        testId: testId,
+        testId: testId
+      }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? {
+        size: size,
+        color: "var(--ds-icon-danger, #C9372C)"
+      } : {
         primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
-      });
+      }));
     default:
-      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
+      return /*#__PURE__*/_react.default.createElement(ImportedIcon, (0, _extends2.default)({
         label: label,
         testId: testId
-      });
+      }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+        size: size
+      }));
   }
 };
 var _default = exports.default = AtlaskitIcon;

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

@@ -5,29 +5,49 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
-var _loadingSkeleton = _interopRequireDefault(require("../loading-skeleton"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _loadingSkeleton = require("../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.default.createElement(_reactRenderImage.default, {
-    src: url,
-    loading: /*#__PURE__*/_react.default.createElement(_loadingSkeleton.default, {
-      testId: "".concat(testId, "-loading")
+  return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, (0, _extends2.default)({
+    src: url
+  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? {
+    loading: /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonNew, {
+      testId: "".concat(testId, "-loading"),
+      width: width,
+      height: height
+    }),
+    loaded: /*#__PURE__*/_react.default.createElement("img", {
+      src: url,
+      "data-testid": "".concat(testId, "-image"),
+      alt: "",
+      style: {
+        width: width,
+        height: height
+      }
     })
+  } : {
+    loading: /*#__PURE__*/_react.default.createElement(_loadingSkeleton.LoadingSkeletonOld, {
+      testId: "".concat(testId, "-loading")
+    }),
     // eslint-disable-next-line jsx-a11y/alt-text
-    ,
     loaded: /*#__PURE__*/_react.default.createElement("img", {
       src: url,
       "data-testid": "".concat(testId, "-image")
-    }),
+    })
+  }, {
     errored: defaultIcon,
     onError: onError,
     onLoad: onLoad
-  });
+  }));
 };
 var _default = exports.default = ImageIcon;

package/dist/cjs/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/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -6,36 +6,37 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.LoadingSkeletonOld = exports.LoadingSkeletonNew = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _LoadingSkeletonOld = _interopRequireDefault(require("./LoadingSkeletonOld"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var animationNameStyles = null;
-var LoadingSkeletonNew = function LoadingSkeletonNew(_ref) {
+var loadingSkeletonStyle = null;
+var LoadingSkeletonNew = exports.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: (0, _runtime.ax)(["_2rkoyh40 _1bsb9a7u _4t3iaym7 _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
+    className: (0, _runtime.ax)(["_2rkoyh40 _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
     style: {
-      "--_uc2kr6": (0, _runtime.ix)("".concat(width, "rem")),
-      "--_1nl18gq": (0, _runtime.ix)("".concat(height, "rem")),
+      width: width,
+      height: height,
       "--_16116mi": (0, _runtime.ix)("linear-gradient( to right, transparent 0%, ".concat("var(--ds-skeleton, #edeef1)", " 20%, transparent 40%, transparent 100% )"))
     }
   });
 };
-var LoadingSkeleton = function LoadingSkeleton(props) {
+var LoadingSkeletonOld = exports.LoadingSkeletonOld = function LoadingSkeletonOld(props) {
   if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(LoadingSkeletonNew, props);
+    return /*#__PURE__*/React.createElement(LoadingSkeletonNew, (0, _extends2.default)({}, props, {
+      width: "".concat(props.width, "rem"),
+      height: "".concat(props.height, "rem")
+    }));
   }
   return /*#__PURE__*/React.createElement(_LoadingSkeletonOld.default, props);
-};
-var _default = exports.default = LoadingSkeleton;
+};

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

@@ -6,9 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../constants");
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
@@ -63,11 +66,14 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
   );
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.SmartLinkSize.Medium;
   if (icon) {
-    return (0, _react2.jsx)(_atlaskitIcon.default, {
+    return (0, _react2.jsx)(_atlaskitIcon.default, (0, _extends2.default)({
       icon: icon,
       testId: "".concat(testId, "-icon")
-    });
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+      size: size
+    }));
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
@@ -78,12 +84,17 @@ var renderDefaultIcon = function renderDefaultIcon(label, testId) {
   });
 };
 var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
+  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants.SmartLinkSize.Medium;
+  var width = size === _constants.SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
-    return (0, _react2.jsx)(_imageIcon.default, {
+    return (0, _react2.jsx)(_imageIcon.default, (0, _extends2.default)({
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
-    });
+    }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
+      width: width,
+      height: width
+    }));
   }
 };
 
@@ -110,18 +121,34 @@ var Icon = function Icon(_ref) {
     url = _ref.url;
   var element = (0, _react.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, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
+  }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = (0, _utils.getIconWidth)(size);
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return (0, _react2.jsx)("div", {
+    css: [
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    css: [styles, renderStyles, overrideCss],
+    !(0, _platformFeatureFlags.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);
+  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? (0, _react2.jsx)(_primitives.Box, {
+    xcss: iconWrapperStyle,
+    style: {
+      width: width,
+      height: width
+    }
+  }, element) : element);
 };
+var iconWrapperStyle = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 var _default = exports.default = Icon;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToButtonSpacing = exports.importIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getPrimitivesPaddingSpaceBySize = exports.getPrimitivesInlineSpaceBySize = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
+exports.sizeToButtonSpacing = exports.importIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getPrimitivesPaddingSpaceBySize = exports.getPrimitivesInlineSpaceBySize = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidthOld = exports.getIconWidthNew = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../constants");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var sizeToButtonSpacing = exports.sizeToButtonSpacing = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.SmartLinkSize.Small, 'none'), _constants.SmartLinkSize.Medium, 'compact'), _constants.SmartLinkSize.Large, 'compact'), _constants.SmartLinkSize.XLarge, 'default');
@@ -59,7 +60,9 @@ var getIconSizeStyles = exports.getIconSizeStyles = function getIconSizeStyles(w
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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);
 };
-var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+var getIconWidthOld = exports.getIconWidthOld = function getIconWidthOld(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
       return '2rem';
@@ -72,6 +75,24 @@ var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
       return '.75rem';
   }
 };
+
+// TODO Rename to getIconWidth when cleaning platform-smart-card-icon-migration
+var getIconWidthNew = exports.getIconWidthNew = function getIconWidthNew(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return "var(--ds-space-300, 24px)";
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return "var(--ds-space-200, 16px)";
+  }
+};
+
+// TODO Delete when cleaning platform-smart-card-icon-migration
+var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
+  return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? getIconWidthNew(size) : getIconWidthOld(size);
+};
 var importIcon = exports.importIcon = function importIcon(importFn) {
   return (0, _reactLoadable.default)({
     loader: function loader() {