@atlaskit/smart-card 34.10.11 → 34.10.13

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

@@ -30,16 +30,17 @@ var baseStyleBySizeOld = {
   small: "_zulppdf9 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz41j6v"
 };
 var baseStyleBySize = {
-  xlarge: "_zulpv47k _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz47vkz",
-  large: "_zulppxbi _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz47vkz",
-  medium: "_zulpu2gc _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz47vkz",
-  small: "_zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz47vkz"
+  xlarge: "_zulpv47k _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  large: "_zulppxbi _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  medium: "_zulpu2gc _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  small: "_zulp1b66 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf"
 };
 var baseStyleByDirection = {
   horizontal: "_2lx2vrvc _4cvr1h6o",
   vertical: "_2lx21bp4 _4cvr1y6m"
 };
-var baseStyle = null;
+var baseStyleOld = null;
+var baseStyles = null;
 var widthStyle = {
   flexible: "_16jlkb7n _1o9z11wp _i0dlf1ug",
   'fit-to-content': ""
@@ -49,23 +50,31 @@ var positionStyle = {
   center: ""
 };
 var horizontalStyleBase = null;
-var horizontalStyleByHeight = {
+
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
+var horizontalStyleByHeightOld = {
   xlarge: "_1e0ccj1k _102k1m1q",
   large: "_1e0ccj1k _102k1m1q",
   medium: "_1e0ccj1k _102k1k8s",
   small: "_1e0ccj1k _102k1k8s"
 };
+var horizontalStyleByHeight = {
+  xlarge: "_1e0ccj1k _102k125z",
+  large: "_1e0ccj1k _102k125z",
+  medium: "_1e0ccj1k _102kz42d",
+  small: "_1e0ccj1k _102kz42d"
+};
 var gapStylesLeft = {
-  xlarge: "_7yhb147b _m6ukidpf",
-  large: "_7yhb1e9d _m6ukidpf",
-  medium: "_7yhbcxkx _m6ukidpf",
-  small: "_7yhbpdf9 _m6ukidpf"
+  xlarge: "_7yhbv47k _m6ukidpf",
+  large: "_7yhbpxbi _m6ukidpf",
+  medium: "_7yhbu2gc _m6ukidpf",
+  small: "_7yhb1b66 _m6ukidpf"
 };
 var gapStylesRight = {
-  xlarge: "_24rc147b _3dveidpf",
-  large: "_24rc1e9d _3dveidpf",
-  medium: "_24rccxkx _3dveidpf",
-  small: "_24rcpdf9 _3dveidpf"
+  xlarge: "_24rcv47k _3dveidpf",
+  large: "_24rcpxbi _3dveidpf",
+  medium: "_24rcu2gc _3dveidpf",
+  small: "_24rc1b66 _3dveidpf"
 };
 var minWidthStyle = null;
 
@@ -97,7 +106,7 @@ var ElementGroupNew = function ElementGroupNew(_ref) {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? baseStyleBySize[size] : baseStyleBySizeOld[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], isHorizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", isHorizontal && horizontalStyleByHeight[size], isHorizontal && align === _constants.SmartLinkAlignment.Left && gapStylesLeft[size], isHorizontal && align === _constants.SmartLinkAlignment.Right && gapStylesRight[size], positionStyle[position], className])
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && baseStyleBySizeOld[size], (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && baseStyleBySize[size], baseStyleByDirection[direction], !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_fiawglyw _1ouwidpf _f6ju1ns9", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_fiawglyw", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], isHorizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", isHorizontal && !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && horizontalStyleByHeightOld[size], isHorizontal && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && horizontalStyleByHeight[size], isHorizontal && align === _constants.SmartLinkAlignment.Left && gapStylesLeft[size], isHorizontal && align === _constants.SmartLinkAlignment.Right && gapStylesRight[size], positionStyle[position], className])
   }, (0, _utils.renderChildren)(children, size));
 };
 var ElementGroup = function ElementGroup(props) {

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
@@ -23,6 +22,7 @@ var _utils = require("../../utils");
 var _FooterBlockResolvedViewOld = _interopRequireDefault(require("./FooterBlockResolvedViewOld"));
 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 actionGroupStylesOld = null;
 var actionGroupStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
@@ -45,15 +45,21 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   }, [onActionMenuOpenChange]);
   return /*#__PURE__*/React.createElement(_block.default, (0, _extends2.default)({}, props, {
     testId: "".concat(testId, "-resolved-view")
-  }), !hideProvider && /*#__PURE__*/React.createElement(_elements.Provider, {
+  }), !hideProvider && /*#__PURE__*/React.createElement(_elements.Provider, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
+    appearance: 'subtle'
+  } : {}, {
     testId: "".concat(testId, "-provider")
-  }), actions && hasActions ? /*#__PURE__*/React.createElement(_elementGroup.default, {
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(_elementGroup.default, (0, _extends2.default)({
     testId: "smart-element-group-actions",
     align: _constants.SmartLinkAlignment.Right,
-    direction: _constants.SmartLinkDirection.Horizontal,
-    width: _constants.SmartLinkWidth.Flexible,
-    className: (0, _runtime.ax)([size === _constants.SmartLinkSize.XLarge && "_c71lviql"])
-  }, /*#__PURE__*/React.createElement(_actionGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal
+  }, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
+    css: size === _constants.SmartLinkSize.XLarge && actionGroupStyles
+  } : {
+    css: size === _constants.SmartLinkSize.XLarge && actionGroupStylesOld
+  }, {
+    width: _constants.SmartLinkWidth.Flexible
+  }), /*#__PURE__*/React.createElement(_actionGroup.default, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

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

@@ -8,4 +8,4 @@
 ._sudp1e54{-webkit-box-orient:vertical}
 ._vwz41k8s{line-height:1.5rem}
 ._vwz41m1q{line-height:1.75rem}
-@supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}}
+@supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}._102k8vuz{max-height:56px}._102kckbl{max-height:3pc}}

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

@@ -29,12 +29,18 @@ var truncateStyles = {
   '1': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54",
   '2': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjcs5v _sudp1e54"
 };
-var sizeStyles = {
+var sizeStylesOld = {
   xlarge: "_vwz41m1q _102k1k7u",
   large: "_vwz41m1q _102k1k7u",
   medium: "_vwz41k8s _102k1wto",
   small: "_vwz41k8s _102k1wto"
 };
+var sizeStyles = {
+  xlarge: "_102k8vuz",
+  large: "_102k8vuz",
+  medium: "_102kckbl",
+  small: "_102kckbl"
+};
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;
@@ -79,13 +85,13 @@ var MetadataBlock = function MetadataBlock(_ref) {
     direction: _constants.SmartLinkDirection.Horizontal,
     width: _constants.SmartLinkWidth.Flexible,
     size: size,
-    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], sizeStyles[size]])
+    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && sizeStylesOld[size], (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && sizeStyles[size]])
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(_elementGroup.default, {
     align: _constants.SmartLinkAlignment.Right,
     direction: _constants.SmartLinkDirection.Horizontal,
     width: _constants.SmartLinkWidth.Flexible,
     size: size,
-    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], sizeStyles[size]])
+    className: (0, _runtime.ax)([truncateStyles[maxLinesTotal], !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && sizeStylesOld[size], (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && sizeStyles[size]])
   }, secondaryElements));
 };
 var MetadataBlockExported = function MetadataBlockExported(props) {

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

@@ -44,14 +44,13 @@ var PreviewBlockResolvedViewNew = function PreviewBlockResolvedViewNew(_ref) {
     style = _ref.style,
     className = _ref.className,
     blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // const [styles, setStyles] = useState<SerializedStyles | undefined>(overrideCss);
   var _useState = (0, _react.useState)(style !== null && style !== void 0 ? style : {}),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     dynamicStyles = _useState2[0],
     setDynamicStyles = _useState2[1];
   var updateStyles = (0, _react.useCallback)(function () {
     if (placement === _constants.MediaPlacement.Left || placement === _constants.MediaPlacement.Right) {
-      var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+      var containerPadding = ignoreContainerPadding ? (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? '0px' : '0rem' : 'var(--container-padding)';
       var newStyle = _objectSpread(_objectSpread(_objectSpread({}, style), {}, {
         position: 'absolute',
         top: containerPadding,

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

@@ -93,11 +93,13 @@ var TitleBlockNew = function TitleBlockNew(_ref) {
       });
     }
   }, [onActionMenuOpenChange]);
-  var actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(_actionGroup.default, {
+  var actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(_actionGroup.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && {
+    appearance: 'default'
+  }, {
     items: actions,
     visibleButtonsNum: showActionOnHover ? 1 : 2,
     onDropdownOpenChange: onDropdownOpenChange
-  });
+  }));
   var overrideText = !!text ? {
     text: text
   } : {};

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

@@ -1 +1 @@
-._zulppdf9{gap:var(--ds-space-050,.25rem)}
+._zulp1b66{gap:var(--ds-space-050,4px)}

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

@@ -57,7 +57,7 @@ var TitleBlockResolvedViewNew = function TitleBlockResolvedViewNew(_ref) {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible,
     size: blockProps.size,
-    className: (0, _runtime.ax)(["_zulppdf9"])
+    className: (0, _runtime.ax)(["_zulp1b66"])
   }, title, subtitleElements && /*#__PURE__*/React.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(_elementGroup.default, {

package/dist/cjs/view/FlexibleCard/components/common/with-override-css/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withOverrideCss = withOverrideCss;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+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; }
+function withOverrideCss(Component) {
+  return function (props) {
+    var ref = (0, _react.useRef)(null);
+    (0, _react.useEffect)(function () {
+      if (props !== null && props !== void 0 && props.className && ref.current) {
+        ref.current.className = "".concat(ref.current.className, " ").concat(props.className);
+      }
+    }, [props === null || props === void 0 ? void 0 : props.className]);
+    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  };
+}

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

@@ -196,14 +196,14 @@ var getGap = function getGap(size) {
   if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
     switch (size) {
       case _constants.SmartLinkSize.XLarge:
-        return "var(--ds-space-250, 1.25rem)";
+        return "var(--ds-space-250, 20px)";
       case _constants.SmartLinkSize.Large:
-        return "var(--ds-space-200, 1rem)";
+        return "var(--ds-space-200, 16px)";
       case _constants.SmartLinkSize.Medium:
-        return "var(--ds-space-100, .5rem)";
+        return "var(--ds-space-100, 8px)";
       case _constants.SmartLinkSize.Small:
       default:
-        return "var(--ds-space-050, .25rem)";
+        return "var(--ds-space-050, 4px)";
     }
   }
   switch (size) {
@@ -278,7 +278,7 @@ var ContainerNew = function ContainerNew(_ref5) {
     testId = _ref5$testId === void 0 ? 'smart-links-container' : _ref5$testId,
     _ref5$theme = _ref5.theme,
     theme = _ref5$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref5$theme;
-  var padding = hidePadding ? '0rem' : getPadding(size);
+  var padding = hidePadding ? (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? '0px' : '0rem' : getPadding(size);
   var gap = getGap(size);
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
   var _getChildrenOptions = getChildrenOptions(children, context),

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

@@ -1,2 +1,3 @@
 ._1e0c116y{display:inline-flex}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._4cvr1h6o{align-items:center}

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

@@ -10,11 +10,14 @@ 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 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 badgeStylesOld = null;
 var badgeStyles = null;
 
 /**
@@ -32,15 +35,14 @@ var AtlaskitBadgeNew = function AtlaskitBadgeNew(_ref) {
   if (!value) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
-    "data-fit-to-content": true,
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {} : (0, _defineProperty2.default)({}, 'data-fit-to-content', true), {
     "data-smart-element": name,
     "data-smart-element-atlaskit-badge": true,
     "data-testid": testId
     // 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));
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y _1ul91ns9", className])
+  }), /*#__PURE__*/React.createElement(_badge.default, null, value));
 };
 var AtlaskitBadge = function AtlaskitBadge(props) {
   if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {

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

@@ -1,5 +1,6 @@
 ._102oidpf ul{margin-top:0}
 ._1e0c116y{display:inline-flex}
-._1kvxcxkx ul{margin-right:var(--ds-space-100,.5rem)}
+._1kvxu2gc ul{margin-right:var(--ds-space-100,8px)}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._6fu61k92 li span, ._1rrq1k92 li svg{max-height:1.25rem}
 ._udwj1k92 li span, ._10pr1k92 li svg{max-width:1.25rem}

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

@@ -11,6 +11,7 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactIntlNext = require("react-intl-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
@@ -24,11 +25,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 styles = null;
 var stylesMap = {
-  xlarge: "_1e0c116y _1kvxcxkx _102oidpf",
-  large: "_1e0c116y _1kvxcxkx _102oidpf",
-  medium: "_1e0c116y _1kvxcxkx _102oidpf _6fu61k92 _1rrq1k92 _udwj1k92 _10pr1k92",
-  small: "_1e0c116y _1kvxcxkx _102oidpf _6fu61k92 _1rrq1k92 _udwj1k92 _10pr1k92"
+  xlarge: "_1e0c116y _1kvxu2gc _102oidpf",
+  large: "_1e0c116y _1kvxu2gc _102oidpf",
+  medium: "_1e0c116y _1kvxu2gc _102oidpf _6fu61k92 _1rrq1k92 _udwj1k92 _10pr1k92",
+  small: "_1e0c116y _1kvxu2gc _102oidpf _6fu61k92 _1rrq1k92 _udwj1k92 _10pr1k92"
 };
 var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {
   switch (elementName) {
@@ -91,15 +93,14 @@ var AvatarGroupNew = function AvatarGroupNew(_ref) {
   if (!data.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
-    "data-fit-to-content": true,
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {} : (0, _defineProperty2.default)({}, 'data-fit-to-content', true), {
     "data-smart-element": name,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: (0, _runtime.ax)([stylesMap[size], className])
-  }, /*#__PURE__*/React.createElement(_avatarGroup.default, {
+    className: (0, _runtime.ax)([stylesMap[size], (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1ul91ns9", className])
+  }), /*#__PURE__*/React.createElement(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",

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

@@ -1,9 +1,13 @@
 ._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
 ._16jlidpf{flex-grow:0}
 ._19bv1xvx{padding-left:var(--ds-space-025,.125rem)}
+._19bvze3t, ._1xr1ze3t img, ._9n9oze3t span, ._7wy9ze3t svg{padding-left:var(--ds-space-0,0)}
 ._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
 ._1bsb1j6v{width:1rem}
+._1bsb7vkz, ._mezj7vkz img, ._e2oo7vkz span, ._w8l57vkz svg{width:1pc}
+._1e0c116y, ._v4pn116y img, ._1b94116y span, ._1ii7116y svg{display:inline-flex}
 ._1e0c116y{display:inline-flex}
 ._1jtnidpf img, ._13t3idpf span, ._rm9uidpf svg{line-height:0}
 ._1o9zidpf{flex-shrink:0}
@@ -13,20 +17,25 @@
 ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._4cvr1h6o{align-items:center}
 ._4t3i1j6v{height:1rem}
+._4t3i7vkz, ._bna77vkz img, ._1xjx7vkz span, ._17527vkz svg{height:1pc}
 ._5jw9idpf svg{padding-bottom:0}
 ._7wy9idpf svg{padding-left:0}
 ._bna71j6v img, ._1xjx1j6v span, ._17521j6v svg{height:1rem}
 ._c71l1j6v{max-height:1rem}
+._ca0qze3t, ._14bqze3t img, ._1oh2ze3t span, ._i2i3ze3t svg{padding-top:var(--ds-space-0,0)}
 ._i0dl1wug{flex-basis:auto}
 ._i2i3idpf svg{padding-top:0}
 ._mezj1j6v img, ._e2oo1j6v span, ._w8l51j6v svg{width:1rem}
+._n3tdze3t, ._1ym6ze3t img, ._1m2uze3t span, ._5jw9ze3t svg{padding-bottom:var(--ds-space-0,0)}
 ._p12f1j6v{max-width:1rem}
 ._qci81j6v img, ._15iz1j6v span, ._erub1j6v svg{min-height:1rem}
 ._rtqbnkob img, ._e4kmnkob span, ._z239nkob svg{vertical-align:middle}
 ._rtys1j6v img, ._b8nk1j6v span, ._4x201j6v svg{max-width:1rem}
+._s7n4nkob, ._rtqbnkob img, ._e4kmnkob span, ._z239nkob svg{vertical-align:middle}
 ._s7n4nkob{vertical-align:middle}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._syaz1oju{color:var(--ds-icon-subtle,#626f86)}
+._u5f3ze3t, ._3tceze3t img, ._99ztze3t span, ._uhasze3t svg{padding-right:var(--ds-space-0,0)}
 ._uhasidpf svg{padding-right:0}
 ._vwz4idpf{line-height:0}

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

@@ -2,29 +2,44 @@
 "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 _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@compiled/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+var _withOverrideCss = require("../../common/with-override-css");
 var _utils = require("../../utils");
 var _BadgeOld = _interopRequireDefault(require("./BadgeOld"));
 var _messageMapper;
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
+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 = {
+  container: "_zulp1b66 _1e0c116y _4cvr1h6o _1ul91ns9",
+  icon: "_1e0c116y _v4pn116y _1b94116y _1ii7116y _4t3i7vkz _bna77vkz _1xjx7vkz _17527vkz _ca0qze3t _14bqze3t _1oh2ze3t _i2i3ze3t _u5f3ze3t _3tceze3t _99ztze3t _uhasze3t _n3tdze3t _1ym6ze3t _1m2uze3t _5jw9ze3t _19bvze3t _1xr1ze3t _9n9oze3t _7wy9ze3t _1bsb7vkz _mezj7vkz _e2oo7vkz _w8l57vkz _s7n4nkob _rtqbnkob _e4kmnkob _z239nkob",
+  text: "_11c81vlj"
+};
+var colorMap = {
+  subtle: "_syaz131l",
+  default: "_syaz1gjq"
+};
 var badgeStyles = null;
 var iconStyles = null;
 
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var labelStylesOld = null;
-var labelStyles = null;
 var messageMapper = (_messageMapper = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), _constants.IconType.PriorityCritical, _messages.messages.priority_critical), _constants.IconType.PriorityHigh, _messages.messages.priority_high), _constants.IconType.PriorityHighest, _messages.messages.priority_highest), _constants.IconType.PriorityLow, _messages.messages.priority_low), _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), _constants.IconType.PriorityMajor, _messages.messages.priority_major), _constants.IconType.PriorityMedium, _messages.messages.priority_medium), _constants.IconType.PriorityMinor, _messages.messages.priority_minor), _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined));
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
@@ -67,13 +82,14 @@ var renderImageIcon = function renderImageIcon(url, testId) {
  * @see ProgrammingLanguage
  * @see Provider
  */
-var BadgeNew = function BadgeNew(_ref) {
-  var _ref$hideIcon = _ref.hideIcon,
+var BadgeRefreshNew = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$hideIcon = _ref.hideIcon,
     hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
     icon = _ref.icon,
     label = _ref.label,
     name = _ref.name,
-    className = _ref.className,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
     url = _ref.url;
@@ -82,24 +98,76 @@ var BadgeNew = function BadgeNew(_ref) {
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
-    "data-fit-to-content": true,
+  return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    as: "span",
+    "data-smart-element": name,
+    "data-smart-element-badge": true,
+    testId: testId,
+    xcss: (0, _react2.cx)(styles.container, colorMap[appearance]),
+    ref: ref
+  }, !hideIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.icon
+  }, badgeIcon), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    testId: "".concat(testId, "-label"),
+    xcss: styles.text
+  }, formattedMessageOrLabel));
+});
+
+// On cleanup of platform-linking-visual-refresh-v1, this should become
+// export default withOverrideCss(Badge);
+var BadgeRefreshNewWithOverrideCss = (0, _withOverrideCss.withOverrideCss)(BadgeRefreshNew);
+
+/**
+ * A base element that displays some text with an associated icon.
+ * @internal
+ * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @see CommentCount
+ * @see ViewCount
+ * @see ReactCount
+ * @see VoteCount
+ * @see SubscriberCount
+ * @see Priority
+ * @see ProgrammingLanguage
+ * @see Provider
+ */
+var BadgeCompiledNew = function BadgeCompiledNew(_ref2) {
+  var _ref2$hideIcon = _ref2.hideIcon,
+    hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
+    icon = _ref2.icon,
+    label = _ref2.label,
+    name = _ref2.name,
+    className = _ref2.className,
+    _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? 'smart-element-badge' : _ref2$testId,
+    url = _ref2.url;
+  var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
+  var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
+  if (!formattedMessageOrLabel || !badgeIcon) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {} : (0, _defineProperty2.default)({}, 'data-fit-to-content', true), {
     "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: (0, _runtime.ax)(["_4cvr1h6o _1e0c116y _1ul91ns9", className])
-  }, !hideIcon && /*#__PURE__*/_react.default.createElement("span", {
+  }), !hideIcon && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _syaz1oju _vwz4idpf _s7n4nkob _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 _1jtnidpf _13t3idpf _rm9uidpf _rtqbnkob _e4kmnkob _z239nkob"])
   }, badgeIcon), /*#__PURE__*/_react.default.createElement("span", {
     "data-testid": "".concat(testId, "-label"),
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c81vlj _syaz1gjq _19bv1xvx _s7n4nkob" : "_11c8qk37 _syaz131l _19bv1xvx _s7n4nkob"])
+    className: (0, _runtime.ax)(["_11c8qk37 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
 var Badge = function Badge(props) {
   if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/_react.default.createElement(BadgeNew, props);
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/_react.default.createElement(BadgeRefreshNewWithOverrideCss, props);
+    } else {
+      return /*#__PURE__*/_react.default.createElement(BadgeCompiledNew, props);
+    }
   } else {
     return /*#__PURE__*/_react.default.createElement(_BadgeOld.default, props);
   }

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.compiled.css

@@ -5,8 +5,9 @@
 ._1e0ccj1k{display:-webkit-box}
 ._1nmz1hna{word-break:break-word}
 ._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
 ._1yyjkb7n{-webkit-line-clamp:1}
 ._sudp1e54{-webkit-box-orient:vertical}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
-@supports not (-webkit-line-clamp:1){._102k1j6v{max-height:1rem}}
+@supports not (-webkit-line-clamp:1){._102k1j6v{max-height:1rem}._102k7vkz{max-height:1pc}}

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -84,7 +84,7 @@ var DateTimeNew = function DateTimeNew(_ref) {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c81vlj _1reo15vq _18m915vq _syaz1gjq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v" : "_11c8qk37 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", className])
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_11c8qk37 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_11c81vlj _1reo15vq _18m915vq _syaz1gjq _1e0ccj1k _1ul9idpf _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k7vkz", className])
   }, text ? "".concat(text, " ").concat(context) : /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.compiled.css

@@ -33,6 +33,7 @@
 ._1tkeviql{min-height:2rem}
 ._1ul91j6v{min-width:1rem}
 ._1ul91k8s{min-width:1.5rem}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._1ul9oqnp{min-width:.75rem}
 ._1ul9viql{min-width:2rem}
 ._1w2uidpf span{margin-left:0}

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

@@ -11,6 +11,7 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -26,6 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 var styles = {
+  container: "_1ul91ns9",
   iconWrapperStyle: "_1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 var positionStyleMap = {
@@ -109,15 +111,14 @@ var IconNew = function IconNew(_ref) {
     return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
   }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = (0, _utils.getIconWidth)(size);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-fit-to-content": true,
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {} : (0, _defineProperty2.default)({}, 'data-fit-to-content', true), {
     "data-smart-element": name,
     "data-smart-element-icon": true,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && iconStylesMapOld[size], !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && positionStyleMap[position], render && !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && customRenderStyleMapOld[size], render && (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && customRenderStyleMapNew[size], className])
-  }, (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && styles.container, !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && iconStylesMapOld[size], !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && positionStyleMap[position], render && !(0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && customRenderStyleMapOld[size], render && (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') && customRenderStyleMapNew[size], className])
+  }), (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.iconWrapperStyle,
     style: {
       width: width,

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.compiled.css

@@ -1,2 +1,3 @@
 ._1e0c116y{display:inline-flex}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
 ._vwz41kw7{line-height:inherit}