@atlaskit/smart-card 34.5.0 → 34.5.2

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

@@ -9,7 +9,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
+var _warning2 = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
@@ -35,7 +37,15 @@ var ErroredView = function ErroredView(_ref) {
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
     actions: actions,
     testId: testId
-  }), /*#__PURE__*/_react.default.createElement(_warning.default, {
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_warning.default, {
+    label: "errored-warning-icon",
+    color: "var(--ds-icon-warning, #E56910)",
+    LEGACY_size: "small",
+    testId: "".concat(testId, "-warning-icon")
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  _react.default.createElement(_warning2.default, {
     label: "errored-warning-icon",
     size: "small",
     primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),

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

@@ -12,8 +12,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
 var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _extractAccessContext = require("../../../extractors/common/context/extractAccessContext");
 var _extractHostname = _interopRequireDefault(require("../../../extractors/common/hostname/extractHostname"));
@@ -85,7 +87,16 @@ var ForbiddenView = function ForbiddenView(_ref) {
     showPreview: true,
     testId: testId,
     title: title
-  }), /*#__PURE__*/_react.default.createElement(_lock.default, {
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+    label: "forbidden-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: _lock.default,
+    LEGACY_size: "small",
+    testId: "".concat(testId, "-lock-icon")
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  _react.default.createElement(_lock.default, {
     label: "forbidden-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),

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

@@ -10,8 +10,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
 var _lock = _interopRequireDefault(require("@atlaskit/icon/glyph/lock"));
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _text = _interopRequireDefault(require("../../FlexibleCard/components/elements/text"));
@@ -51,7 +53,16 @@ var NotFoundView = function NotFoundView(_ref) {
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, props, {
     testId: testId,
     title: title
-  }), /*#__PURE__*/_react.default.createElement(_lock.default, {
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+    label: "not-found-lock-icon",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: _lock.default,
+    LEGACY_size: "small",
+    testId: "".concat(testId, "-lock-icon")
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
+  _react.default.createElement(_lock.default, {
     label: "not-found-lock-icon",
     size: "small",
     primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),

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

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

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/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/cjs/view/FlexibleCard/components/container/index.js

@@ -200,7 +200,7 @@ var ContainerNew = function ContainerNew(_ref3) {
   var container = /*#__PURE__*/_react.default.createElement("div", {
     "data-smart-link-container": true,
     "data-testid": testId,
-    className: (0, _runtime.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: (0, _runtime.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": (0, _runtime.ix)(padding),
       "--_73mooq": (0, _runtime.ix)(previewOnLeft ? gap : padding),