@atlaskit/smart-card 34.5.2 → 34.6.1

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

@@ -19,29 +19,28 @@ var _constants = require("../../../../../constants");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var _elements = require("../../elements");
 var _actionGroup = _interopRequireDefault(require("../action-group"));
-var _errored = require("./errored");
-var _resolved = require("./resolved");
-var _resolving = require("./resolving");
+var _errored = _interopRequireDefault(require("./errored"));
+var _resolved = _interopRequireDefault(require("./resolved"));
+var _resolving = _interopRequireDefault(require("./resolving"));
 var _TitleBlockOld = _interopRequireDefault(require("./TitleBlockOld"));
 var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "status", "showActionOnHover", "testId", "text", "icon", "theme", "hideRetry", "metadataPosition", "hideIcon", "className"];
 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 styles = null;
 var actionStyles = null;
 var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
   switch (status) {
     case _constants.SmartLinkStatus.Pending:
     case _constants.SmartLinkStatus.Resolving:
-      return _resolving.TitleBlockResolvingViewNew;
+      return _resolving.default;
     case _constants.SmartLinkStatus.Resolved:
-      return _resolved.TitleBlockResolvedViewNew;
+      return _resolved.default;
     case _constants.SmartLinkStatus.Unauthorized:
     case _constants.SmartLinkStatus.Forbidden:
     case _constants.SmartLinkStatus.NotFound:
     case _constants.SmartLinkStatus.Errored:
     case _constants.SmartLinkStatus.Fallback:
     default:
-      return _errored.TitleBlockErroredViewNew;
+      return _errored.default;
   }
 };
 
@@ -112,19 +111,17 @@ var TitleBlockNew = function TitleBlockNew(_ref) {
     theme: theme
   }, overrideText));
   var Component = getTitleBlockViewComponent(status);
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)([showActionOnHover && !actionDropdownOpen && "_1bfhidpf _wn5xkb7n _h157kb7n"])
-  }, /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, props, {
     actionGroup: actionGroup
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: className,
+    className: (0, _runtime.ax)([showActionOnHover && !actionDropdownOpen && "_1bfhidpf _wn5xkb7n _h157kb7n", className]),
     testId: testId,
     title: title,
     metadataPosition: metadataPosition,
     hideIcon: hideIcon,
     icon: icon
-  })));
+  }));
 };
 var TitleBlock = function TitleBlock(props) {
   if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolved/TitleBlockResolvedViewOld.js

@@ -20,7 +20,7 @@ var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "t
  * This should render when a Smart Link returns a valid response.
  * @see TitleBlock
  */
-var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
+var TitleBlockResolvedViewOld = function TitleBlockResolvedViewOld(_ref) {
   var actionGroup = _ref.actionGroup,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
@@ -55,4 +55,4 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : _constants.SmartLinkPosition.Center
   }, metadataElements), actionGroup);
 };
-var _default = exports.default = TitleBlockResolvedView;
+var _default = exports.default = TitleBlockResolvedViewOld;

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

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

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TitleBlockResolvedViewNew = exports.BlockFeatureGated = void 0;
+exports.default = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
@@ -16,69 +16,62 @@ 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 _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _utils = require("../../utils");
 var _TitleBlockResolvedViewOld = _interopRequireDefault(require("./TitleBlockResolvedViewOld"));
-var _excluded = ["className"],
-  _excluded2 = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "icon", "title", "metadataPosition", "hideIcon"];
+var _excluded = ["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(_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 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 size = blockProps.size;
   var metadataElements = (0, _utils.renderElementItems)(metadata);
   var subtitleElements = (0, _utils.renderElementItems)(subtitle);
-  return /*#__PURE__*/React.createElement(BlockFeatureGated, (0, _extends2.default)({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view"),
-    className: (0, _runtime.ax)(["_zulpu2gc"])
+  return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
   }), !hideIcon && /*#__PURE__*/React.createElement(_elements.LinkIcon, (0, _extends2.default)({
     overrideIcon: icon,
     position: position
   }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && {
     size: size
-  })), /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
+  })), /*#__PURE__*/React.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible,
     size: blockProps.size,
     className: (0, _runtime.ax)(["_zulppdf9"])
-  }, title, subtitleElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
+  }, title, subtitleElements && /*#__PURE__*/React.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(_elementGroup.ElementGroupNew, {
+  }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right,
     position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : _constants.SmartLinkPosition.Center,
     size: blockProps.size
   }, metadataElements), actionGroup);
 };
-var _default = exports.default = _TitleBlockResolvedViewOld.default;
+var TitleBlockResolvedView = function TitleBlockResolvedView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(TitleBlockResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_TitleBlockResolvedViewOld.default, props);
+  }
+};
+var _default = exports.default = TitleBlockResolvedView;

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

@@ -24,7 +24,7 @@ var _excluded = ["actionGroup", "testId", "title", "hideIcon"];
  * This should render when a Smart Link has sent a request.
  * @see TitleBlock
  */
-var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
+var TitleBlockResolvingViewOld = function TitleBlockResolvingViewOld(_ref) {
   var actionGroup = _ref.actionGroup,
     testId = _ref.testId,
     title = _ref.title,
@@ -45,4 +45,4 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };
-var _default = exports.default = TitleBlockResolvingView;
+var _default = exports.default = TitleBlockResolvingViewOld;

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

@@ -1,5 +1,4 @@
-
-._zulpu2gc{gap:var(--ds-space-100,8px)}._16jlidpf{flex-grow:0}
+._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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TitleBlockResolvingViewNew = void 0;
+exports.default = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
@@ -28,7 +28,6 @@ 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
@@ -36,7 +35,7 @@ var titleBlockGapStyle = null;
  * This should render when a Smart Link has sent a request.
  * @see TitleBlock
  */
-var TitleBlockResolvingViewNew = exports.TitleBlockResolvingViewNew = function TitleBlockResolvingViewNew(_ref) {
+var TitleBlockResolvingViewNew = function TitleBlockResolvingViewNew(_ref) {
   var actionGroup = _ref.actionGroup,
     testId = _ref.testId,
     title = _ref.title,
@@ -47,8 +46,7 @@ var TitleBlockResolvingViewNew = exports.TitleBlockResolvingViewNew = function T
   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"])
+      testId: "".concat(testId, "-resolving-view")
     }), !hideIcon && /*#__PURE__*/React.createElement("span", {
       style: {
         width: iconWidth,
@@ -70,4 +68,11 @@ var TitleBlockResolvingViewNew = exports.TitleBlockResolvingViewNew = function T
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };
-var _default = exports.default = _TitleBlockResolvingViewOld.default;
+var TitleBlockResolvingView = function TitleBlockResolvingView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(TitleBlockResolvingViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_TitleBlockResolvingViewOld.default, props);
+  }
+};
+var _default = exports.default = TitleBlockResolvingView;

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

@@ -59,6 +59,10 @@ var getGapSize = exports.getGapSize = function getGapSize(size) {
       return 0.25;
   }
 };
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 var getBaseStyles = exports.getBaseStyles = function getBaseStyles(direction, size) {
   return (0, _react2.css)({
     alignItems: 'center',

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

@@ -1,16 +1,15 @@
-
+._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}._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._zulph3jc{gap:1rem 0}
 ._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}
@@ -21,13 +20,11 @@
 ._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

@@ -54,7 +54,6 @@ var getChildrenOptions = exports.getChildrenOptions = function getChildrenOption
 };
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return _react.default.Children.map(children, function (child) {
-    // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
       var size = blockSize || containerSize;
@@ -200,7 +199,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 _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", 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 _18s8v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
     style: {
       "--_1xumd0e": (0, _runtime.ix)(padding),
       "--_73mooq": (0, _runtime.ix)(previewOnLeft ? gap : padding),

package/dist/cjs/view/FlexibleCard/components/elements/atlaskit-badge/AtlaskitBadgeOld.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _badge = _interopRequireDefault(require("@atlaskit/badge"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var badgeStyles = (0, _react.css)({
+  alignItems: 'center',
+  display: 'inline-flex'
+});
+
+/**
+ * A base element that displays a visual indicator for a numeric value
+ * @internal
+ * @see StoryPoints
+ * */
+
+var AtlaskitBadgeOld = function AtlaskitBadgeOld(_ref) {
+  var value = _ref.value,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-atlaskit-badge' : _ref$testId;
+  if (!value) {
+    return null;
+  }
+  return (0, _react.jsx)("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [badgeStyles, overrideCss],
+    "data-fit-to-content": true,
+    "data-smart-element": name,
+    "data-smart-element-atlaskit-badge": true,
+    "data-testid": testId
+  }, (0, _react.jsx)(_badge.default, null, value));
+};
+var _default = exports.default = AtlaskitBadgeOld;

package/dist/cjs/view/FlexibleCard/components/elements/atlaskit-badge/index.compiled.css

@@ -0,0 +1,2 @@
+._1e0c116y{display:inline-flex}
+._4cvr1h6o{align-items:center}

package/dist/cjs/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -1,22 +1,21 @@
+/* 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;
-var _react = require("@emotion/react");
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var badgeStyles = (0, _react.css)({
-  alignItems: 'center',
-  display: 'inline-flex'
-});
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _AtlaskitBadgeOld = _interopRequireDefault(require("./AtlaskitBadgeOld"));
+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 badgeStyles = null;
 
 /**
  * A base element that displays a visual indicator for a numeric value
@@ -24,22 +23,30 @@ var badgeStyles = (0, _react.css)({
  * @see StoryPoints
  * */
 
-var AtlaskitBadge = function AtlaskitBadge(_ref) {
+var AtlaskitBadgeNew = function AtlaskitBadgeNew(_ref) {
   var value = _ref.value,
     name = _ref.name,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-atlaskit-badge' : _ref$testId;
   if (!value) {
     return null;
   }
-  return (0, _react.jsx)("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [badgeStyles, overrideCss],
+  return /*#__PURE__*/React.createElement("span", {
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-atlaskit-badge": true,
     "data-testid": testId
-  }, (0, _react.jsx)(_badge.default, null, value));
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_4cvr1h6o _1e0c116y", className])
+  }, /*#__PURE__*/React.createElement(_badge.default, null, value));
+};
+var AtlaskitBadge = function AtlaskitBadge(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AtlaskitBadgeNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_AtlaskitBadgeOld.default, props);
+  }
 };
 var _default = exports.default = AtlaskitBadge;

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/AvatarGroupOld.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+var _constants = require("../../../../../constants");
+var _messages = require("../../../../../messages");
+var _utils = require("../../utils");
+var _templateObject;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MAX_COUNT = 4;
+var getStyles = function getStyles(size) {
+  var styles = (0, _react2.css)({
+    display: 'inline-flex',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    ul: {
+      marginRight: "var(--ds-space-100, 0.5rem)",
+      marginTop: 0
+    }
+  });
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      // Default AK small size
+      return styles;
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      // 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\t\t\t", "\n\t\t\t\tli {\n\t\t\t\t\tspan,\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-height: 1.25rem;\n\t\t\t\t\t\tmax-width: 1.25rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), styles);
+  }
+};
+var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {
+  switch (elementName) {
+    case _constants.ElementName.AssignedToGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.assigned_to, personName);
+    case _constants.ElementName.OwnedByGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.owned_by, personName);
+    case _constants.ElementName.AuthorGroup:
+      return (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.created_by, personName);
+    default:
+      return personName;
+  }
+};
+
+/**
+ * A base element that displays a group of avatars.
+ * @internal
+ * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @see AuthorGroup
+ * @see CollaboratorGroup
+ */
+var AvatarGroupOld = function AvatarGroupOld(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$maxCount = _ref.maxCount,
+    maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId,
+    _ref$showNamePrefix = _ref.showNamePrefix,
+    showNamePrefix = _ref$showNamePrefix === void 0 ? false : _ref$showNamePrefix,
+    _ref$showFallbackAvat = _ref.showFallbackAvatar,
+    showFallbackAvatar = _ref$showFallbackAvat === void 0 ? true : _ref$showFallbackAvat;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var data = (0, _react.useMemo)(function () {
+    if (!items.length && showFallbackAvatar) {
+      switch (name) {
+        case _constants.ElementName.AssignedToGroup:
+          return [{
+            name: (0, _utils.getFormattedMessageAsString)(intl, _messages.messages.unassigned)
+          }];
+        default:
+          return [];
+      }
+    }
+
+    //show a name prefix if there is one Avatar in a group only
+    if (name && items.length === 1 && showNamePrefix) {
+      return items.map(function (person) {
+        return _objectSpread(_objectSpread({}, person), {}, {
+          name: getPersonNameWithPrefix(name, person.name, intl) || person.name
+        });
+      });
+    }
+    return items;
+  }, [name, items, showNamePrefix, showFallbackAvatar, intl]);
+  if (!data.length) {
+    return null;
+  }
+  return (0, _react2.jsx)("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [getStyles(size), overrideCss],
+    "data-fit-to-content": true,
+    "data-smart-element": name,
+    "data-smart-element-avatar-group": true,
+    "data-testid": testId
+  }, (0, _react2.jsx)(_avatarGroup.default, {
+    maxCount: maxCount,
+    appearance: "stack",
+    size: "small",
+    data: data,
+    testId: testId
+  }));
+};
+var _default = exports.default = AvatarGroupOld;

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.compiled.css

@@ -0,0 +1,5 @@
+._102oidpf ul{margin-top:0}
+._1e0c116y{display:inline-flex}
+._1kvxcxkx ul{margin-right:var(--ds-space-100,.5rem)}
+._6fu61k92 li span, ._1rrq1k92 li svg{max-height:1.25rem}
+._udwj1k92 li span, ._10pr1k92 li svg{max-width:1.25rem}