@atlaskit/smart-card 34.10.12 → 34.10.13

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

@@ -20,16 +20,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': ""
@@ -39,23 +40,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;
 
@@ -87,7 +96,7 @@ var ElementGroupNew = function ElementGroupNew(_ref) {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax([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 === SmartLinkAlignment.Left && gapStylesLeft[size], isHorizontal && align === SmartLinkAlignment.Right && gapStylesRight[size], positionStyle[position], className])
+    className: ax([!fg('platform-linking-visual-refresh-v1') && baseStyleBySizeOld[size], fg('platform-linking-visual-refresh-v1') && baseStyleBySize[size], baseStyleByDirection[direction], !fg('platform-linking-visual-refresh-v1') && "_fiawglyw _1ouwidpf _f6ju1ns9", 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 && !fg('platform-linking-visual-refresh-v1') && horizontalStyleByHeightOld[size], isHorizontal && fg('platform-linking-visual-refresh-v1') && horizontalStyleByHeight[size], isHorizontal && align === SmartLinkAlignment.Left && gapStylesLeft[size], isHorizontal && align === SmartLinkAlignment.Right && gapStylesRight[size], positionStyle[position], className])
   }, renderChildren(children, size));
 };
 var ElementGroup = function ElementGroup(props) {

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

@@ -1,6 +1,5 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
@@ -13,6 +12,7 @@ import Block from '../../block';
 import ElementGroup from '../../element-group';
 import { filterActionItems } from '../../utils';
 import FooterBlockResolvedViewOld from './FooterBlockResolvedViewOld';
+var actionGroupStylesOld = null;
 var actionGroupStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
@@ -35,15 +35,21 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   }, [onActionMenuOpenChange]);
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     testId: "".concat(testId, "-resolved-view")
-  }), !hideProvider && /*#__PURE__*/React.createElement(Provider, {
+  }), !hideProvider && /*#__PURE__*/React.createElement(Provider, _extends({}, fg('platform-linking-visual-refresh-v1') ? {
+    appearance: 'subtle'
+  } : {}, {
     testId: "".concat(testId, "-provider")
-  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, _extends({
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
-    direction: SmartLinkDirection.Horizontal,
-    width: SmartLinkWidth.Flexible,
-    className: ax([size === SmartLinkSize.XLarge && "_c71lviql"])
-  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, fg('platform-linking-visual-refresh-v1') ? {
+    css: size === SmartLinkSize.XLarge && actionGroupStyles
+  } : {
+    css: size === SmartLinkSize.XLarge && actionGroupStylesOld
+  }, {
+    width: SmartLinkWidth.Flexible
+  }), /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

package/dist/esm/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/esm/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -20,12 +20,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;
@@ -70,13 +76,13 @@ var MetadataBlock = function MetadataBlock(_ref) {
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible,
     size: size,
-    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
+    className: ax([truncateStyles[maxLinesTotal], !fg('platform-linking-visual-refresh-v1') && sizeStylesOld[size], fg('platform-linking-visual-refresh-v1') && sizeStyles[size]])
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible,
     size: size,
-    className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
+    className: ax([truncateStyles[maxLinesTotal], !fg('platform-linking-visual-refresh-v1') && sizeStylesOld[size], fg('platform-linking-visual-refresh-v1') && sizeStyles[size]])
   }, secondaryElements));
 };
 var MetadataBlockExported = function MetadataBlockExported(props) {

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useRef } from 'react';
+export function withOverrideCss(Component) {
+  return function (props) {
+    var ref = useRef(null);
+    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.createElement(Component, _extends({}, props, {
+      ref: ref
+    }));
+  };
+}

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

@@ -182,14 +182,14 @@ var getGap = function getGap(size) {
   if (fg('platform-linking-visual-refresh-v1')) {
     switch (size) {
       case SmartLinkSize.XLarge:
-        return "var(--ds-space-250, 1.25rem)";
+        return "var(--ds-space-250, 20px)";
       case SmartLinkSize.Large:
-        return "var(--ds-space-200, 1rem)";
+        return "var(--ds-space-200, 16px)";
       case SmartLinkSize.Medium:
-        return "var(--ds-space-100, .5rem)";
+        return "var(--ds-space-100, 8px)";
       case SmartLinkSize.Small:
       default:
-        return "var(--ds-space-050, .25rem)";
+        return "var(--ds-space-050, 4px)";
     }
   }
   switch (size) {
@@ -264,7 +264,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 ? SmartLinkTheme.Link : _ref5$theme;
-  var padding = hidePadding ? '0rem' : getPadding(size);
+  var padding = hidePadding ? fg('platform-linking-visual-refresh-v1') ? '0px' : '0rem' : getPadding(size);
   var gap = getGap(size);
   var context = useContext(FlexibleUiContext);
   var _getChildrenOptions = getChildrenOptions(children, context),

package/dist/esm/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/esm/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -1,10 +1,13 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import AKBadge from '@atlaskit/badge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import AtlaskitBadgeOld from './AtlaskitBadgeOld';
+var badgeStylesOld = null;
 var badgeStyles = null;
 
 /**
@@ -22,15 +25,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", _extends({}, fg('platform-linking-visual-refresh-v1') ? {} : _defineProperty({}, '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: ax(["_4cvr1h6o _1e0c116y", className])
-  }, /*#__PURE__*/React.createElement(AKBadge, null, value));
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y", fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y _1ul91ns9", className])
+  }), /*#__PURE__*/React.createElement(AKBadge, null, value));
 };
 var AtlaskitBadge = function AtlaskitBadge(props) {
   if (fg('bandicoots-compiled-migration-smartcard')) {

package/dist/esm/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/esm/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -1,4 +1,5 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import * as React from 'react';
@@ -14,11 +15,12 @@ import { messages } from '../../../../../messages';
 import { getFormattedMessageAsString } from '../../utils';
 import AvatarGroupOld from './AvatarGroupOld';
 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) {
@@ -81,15 +83,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", _extends({}, fg('platform-linking-visual-refresh-v1') ? {} : _defineProperty({}, '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: ax([stylesMap[size], className])
-  }, /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+    className: ax([stylesMap[size], fg('platform-linking-visual-refresh-v1') && "_1ul91ns9", className])
+  }), /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",

package/dist/esm/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/esm/view/FlexibleCard/components/elements/badge/index.js

@@ -1,24 +1,36 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _messageMapper;
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
+import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
+import { withOverrideCss } from '../../common/with-override-css';
 import { getFormattedMessage } from '../../utils';
 import BadgeOld from './BadgeOld';
+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 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), IconType.PriorityCritical, messages.priority_critical), IconType.PriorityHigh, messages.priority_high), IconType.PriorityHighest, messages.priority_highest), IconType.PriorityLow, messages.priority_low), IconType.PriorityLowest, messages.priority_lowest), IconType.PriorityMajor, messages.priority_major), IconType.PriorityMedium, messages.priority_medium), IconType.PriorityMinor, messages.priority_minor), IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined));
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
@@ -61,13 +73,14 @@ var renderImageIcon = function renderImageIcon(url, testId) {
  * @see ProgrammingLanguage
  * @see Provider
  */
-var BadgeNew = function BadgeNew(_ref) {
-  var _ref$hideIcon = _ref.hideIcon,
+var BadgeRefreshNew = /*#__PURE__*/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;
@@ -76,24 +89,76 @@ var BadgeNew = function BadgeNew(_ref) {
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
-    "data-fit-to-content": true,
+  return /*#__PURE__*/React.createElement(Inline, {
+    as: "span",
+    "data-smart-element": name,
+    "data-smart-element-badge": true,
+    testId: testId,
+    xcss: cx(styles.container, colorMap[appearance]),
+    ref: ref
+  }, !hideIcon && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.icon
+  }, badgeIcon), /*#__PURE__*/React.createElement(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 = 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.createElement("span", _extends({}, fg('platform-linking-visual-refresh-v1') ? {} : _defineProperty({}, '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: ax(["_4cvr1h6o _1e0c116y _1ul91ns9", className])
-  }, !hideIcon && /*#__PURE__*/React.createElement("span", {
+  }), !hideIcon && /*#__PURE__*/React.createElement("span", {
     className: 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.createElement("span", {
     "data-testid": "".concat(testId, "-label"),
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c81vlj _syaz1gjq _19bv1xvx _s7n4nkob" : "_11c8qk37 _syaz131l _19bv1xvx _s7n4nkob"])
+    className: ax(["_11c8qk37 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
 var Badge = function Badge(props) {
   if (fg('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(BadgeNew, props);
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement(BadgeRefreshNewWithOverrideCss, props);
+    } else {
+      return /*#__PURE__*/React.createElement(BadgeCompiledNew, props);
+    }
   } else {
     return /*#__PURE__*/React.createElement(BadgeOld, props);
   }

package/dist/esm/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/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -74,7 +74,7 @@ var DateTimeNew = function DateTimeNew(_ref) {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax([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: ax([!fg('platform-linking-visual-refresh-v1') && "_11c8qk37 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", 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(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context

package/dist/esm/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/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -1,4 +1,5 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
@@ -17,6 +18,7 @@ import ImageIcon from '../../common/image-icon';
 import { getIconWidth } from '../../utils';
 import IconOld from './IconOld';
 var styles = {
+  container: "_1ul91ns9",
   iconWrapperStyle: "_1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 var positionStyleMap = {
@@ -100,15 +102,14 @@ var IconNew = function IconNew(_ref) {
     return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
   }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = getIconWidth(size);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-fit-to-content": true,
+  return /*#__PURE__*/React.createElement("div", _extends({}, fg('platform-linking-visual-refresh-v1') ? {} : _defineProperty({}, '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: ax([!fg('platform-smart-card-icon-migration') && iconStylesMapOld[size], !fg('platform-smart-card-icon-migration') && positionStyleMap[position], render && !fg('platform-smart-card-icon-migration') && customRenderStyleMapOld[size], render && fg('platform-smart-card-icon-migration') && customRenderStyleMapNew[size], className])
-  }, fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+    className: ax([fg('platform-linking-visual-refresh-v1') && styles.container, !fg('platform-smart-card-icon-migration') && iconStylesMapOld[size], !fg('platform-smart-card-icon-migration') && positionStyleMap[position], render && !fg('platform-smart-card-icon-migration') && customRenderStyleMapOld[size], render && fg('platform-smart-card-icon-migration') && customRenderStyleMapNew[size], className])
+  }), fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
     xcss: styles.iconWrapperStyle,
     style: {
       width: width,

package/dist/esm/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}

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -1,4 +1,6 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -7,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import LozengeAction from './lozenge-action';
 import LozengeOld from './LozengeOld';
+var stylesOld = null;
 var styles = null;
 
 /**
@@ -42,15 +45,14 @@ var LozengeNew = function LozengeNew(_ref) {
     style: style,
     testId: "".concat(testId, "-lozenge")
   }, text);
-  return /*#__PURE__*/React.createElement("span", {
-    "data-fit-to-content": true,
+  return /*#__PURE__*/React.createElement("span", _extends({}, fg('platform-linking-visual-refresh-v1') ? {} : _defineProperty({}, 'data-fit-to-content', true), {
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax(["_1e0c116y _vwz41kw7", className])
-  }, lozenge);
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_1e0c116y _vwz41kw7", fg('platform-linking-visual-refresh-v1') && "_1e0c116y _1ul91ns9", className])
+  }), lozenge);
 };
 var Lozenge = function Lozenge(props) {
   if (fg('bandicoots-compiled-migration-smartcard')) {