@atlaskit/smart-card 34.4.0 → 34.5.1

package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js

@@ -40,22 +40,22 @@ var positionStyle = {
 };
 var horizontalStyleBase = null;
 var horizontalStyleByHeight = {
-  'xlarge': "_1e0ccj1k _102k1m1q",
-  'large': "_1e0ccj1k _102k1m1q",
-  'medium': "_1e0ccj1k _102k1k8s",
-  'small': "_1e0ccj1k _102k1k8s"
+  xlarge: "_1e0ccj1k _102k1m1q",
+  large: "_1e0ccj1k _102k1m1q",
+  medium: "_1e0ccj1k _102k1k8s",
+  small: "_1e0ccj1k _102k1k8s"
 };
 var gapStylesLeft = {
-  'xlarge': "_7yhb147b _m6ukidpf",
-  'large': "_7yhb1e9d _m6ukidpf",
-  'medium': "_7yhbcxkx _m6ukidpf",
-  'small': "_7yhbpdf9 _m6ukidpf"
+  xlarge: "_7yhb147b _m6ukidpf",
+  large: "_7yhb1e9d _m6ukidpf",
+  medium: "_7yhbcxkx _m6ukidpf",
+  small: "_7yhbpdf9 _m6ukidpf"
 };
 var gapStylesRight = {
-  'xlarge': "_24rc147b _3dveidpf",
-  'large': "_24rc1e9d _3dveidpf",
-  'medium': "_24rccxkx _3dveidpf",
-  'small': "_24rcpdf9 _3dveidpf"
+  xlarge: "_24rc147b _3dveidpf",
+  large: "_24rc1e9d _3dveidpf",
+  medium: "_24rccxkx _3dveidpf",
+  small: "_24rcpdf9 _3dveidpf"
 };
 
 /**

package/dist/cjs/view/FlexibleCard/components/blocks/metadata-block/MetadataBlockOld.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _constants = require("../../../../../constants");
+var _utils = require("../../utils");
+var _block = _interopRequireDefault(require("../block"));
+var _elementGroup = _interopRequireDefault(require("../element-group"));
+var _utils2 = require("../utils");
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // We need the height of the line to be equal on both left and right
+  // sides so they line up nicely.
+  var lineHeight = (0, _utils.getMaxLineHeight)(size);
+  return (0, _react2.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+    lineHeight: "".concat(lineHeight, "rem")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  (0, _utils.getTruncateStyles)(maxLines, lineHeight + 'rem'));
+};
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+
+/**
+ * Represents a MetadataBlock, designed to contain groups of metadata in the form of elements.
+ * Accepts an array of elements to be shown either primary (left hand side) or secondary (right hand side).
+ * @public
+ * @param {MetadataBlockProps} MetadataBlockProps
+ * @see Block
+ */
+var MetadataBlockOld = function MetadataBlockOld(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? _constants.SmartLinkStatus.Fallback : _ref$status,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+    _ref$primary = _ref.primary,
+    primary = _ref$primary === void 0 ? [] : _ref$primary,
+    _ref$secondary = _ref.secondary,
+    secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+    blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
+    return null;
+  }
+  var primaryElements = (0, _utils2.renderElementItems)(primary);
+  var secondaryElements = (0, _utils2.renderElementItems)(secondary);
+  var _blockProps$size = blockProps.size,
+    size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Left,
+    overrideCss: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    align: _constants.SmartLinkAlignment.Right,
+    overrideCss: elementGroupStyles,
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+var _default = exports.default = MetadataBlockOld;

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

@@ -0,0 +1,10 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjkb7n{-webkit-line-clamp:1}
+._sudp1e54{-webkit-box-orient:vertical}
+@supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}}

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

@@ -1,35 +1,38 @@
+/* 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 = 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 _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
-var _utils = require("../../utils");
 var _block = _interopRequireDefault(require("../block"));
-var _elementGroup = _interopRequireDefault(require("../element-group"));
-var _utils2 = require("../utils");
-var _excluded = ["maxLines", "status", "testId", "primary", "secondary"]; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _elementGroup = require("../element-group");
+var _utils = require("../utils");
+var _MetadataBlockOld = _interopRequireDefault(require("./MetadataBlockOld"));
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+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 DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
-  // MetadataBlock allows metadata elements to be displayed in
-  // multiple lines, with maximum of 2 lines.
-  // We need the height of the line to be equal on both left and right
-  // sides so they line up nicely.
-  var lineHeight = (0, _utils.getMaxLineHeight)(size);
-  return (0, _react2.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-    lineHeight: "".concat(lineHeight, "rem")
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  (0, _utils.getTruncateStyles)(maxLines, lineHeight + 'rem'));
+var truncateStyles = {
+  '1': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54",
+  '2': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjcs5v _sudp1e54"
+};
+var sizeStyles = {
+  xlarge: "_11c81oud _102k1k7u",
+  large: "_11c81oud _102k1k7u",
+  medium: "_11c81oud _102k1wto",
+  small: "_11c81oud _102k1wto"
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
@@ -63,23 +66,30 @@ var MetadataBlock = function MetadataBlock(_ref) {
   if (primary.length === 0 && secondary.length === 0 || status !== _constants.SmartLinkStatus.Resolved) {
     return null;
   }
-  var primaryElements = (0, _utils2.renderElementItems)(primary);
-  var secondaryElements = (0, _utils2.renderElementItems)(secondary);
+  var primaryElements = (0, _utils.renderElementItems)(primary);
+  var secondaryElements = (0, _utils.renderElementItems)(secondary);
   var _blockProps$size = blockProps.size,
     size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
-  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
-  return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+  var maxLinesTotal = getMaxLines(maxLines);
+  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
-  }), primaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }), primaryElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
     align: _constants.SmartLinkAlignment.Left,
-    overrideCss: elementGroupStyles,
     direction: _constants.SmartLinkDirection.Horizontal,
-    width: _constants.SmartLinkWidth.Flexible
-  }, primaryElements), secondaryElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    width: _constants.SmartLinkWidth.Flexible,
+    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], sizeStyles[size]])
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
     align: _constants.SmartLinkAlignment.Right,
-    overrideCss: elementGroupStyles,
     direction: _constants.SmartLinkDirection.Horizontal,
-    width: _constants.SmartLinkWidth.Flexible
+    width: _constants.SmartLinkWidth.Flexible,
+    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, secondaryElements));
 };
-var _default = exports.default = MetadataBlock;
+var MetadataBlockExported = function MetadataBlockExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(MetadataBlock, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_MetadataBlockOld.default, props);
+  }
+};
+var _default = exports.default = MetadataBlockExported;

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"];
@@ -21,11 +23,13 @@ var _excluded = ["actionGroup", "testId", "title", "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 iconStyle = {
-  'xlarge': "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
-  'large': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
-  '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"
+  xlarge: "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
+  large: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  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;