@atlaskit/smart-card 34.10.12 → 34.10.13

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/smart-card
 
+## 34.10.13
+
+### Patch Changes
+
+- [#115421](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115421)
+  [`b75daad50944f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b75daad50944f) -
+  [ux] Migrate flexible card action button to the new DS button, update badge token
+- Updated dependencies
+
 ## 34.10.12
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.12"
+  packageVersion: "34.10.13"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/FlexibleCard/components/actions/action/ActionOld.js

@@ -54,13 +54,13 @@ var ActionOld = function ActionOld(_ref) {
   }
   var isStackItem = as === 'stack-item';
   var isDropdownItem = as === 'dropdown-item' || asDropDownItem;
-  var actionIcon = icon && (0, _react.jsx)(_actionIcon.default, {
+  var actionIcon = icon ? (0, _react.jsx)(_actionIcon.default, {
     asStackItemIcon: isStackItem,
     isDisabled: isDisabled,
     icon: icon,
     size: size,
     testId: testId
-  });
+  }) : undefined;
   var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
   var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
   if (isStackItem) {

package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -11,19 +11,51 @@ require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("@atlaskit/button");
+var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../../../../../../constants");
+var _withOverrideCss = require("../../../common/with-override-css");
 var _utils = require("../../../utils");
 var _ActionButtonOld = _interopRequireDefault(require("./ActionButtonOld"));
 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; }
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var IconOnlyLarge = null;
+
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var SizeSmall = null;
+
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var SizeSmallIconOnly = null;
+
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var SizeSmallNotIconOnly = null;
-var ActionButtonNew = function ActionButtonNew(_ref) {
-  var appearance = _ref.appearance,
+var IconButtonAppearanceMap = {
+  default: 'default',
+  danger: undefined,
+  link: 'default',
+  primary: 'primary',
+  subtle: 'subtle',
+  'subtle-link': 'subtle',
+  warning: undefined
+};
+var ButtonAppearanceMap = {
+  default: 'default',
+  danger: 'danger',
+  link: 'default',
+  primary: 'primary',
+  subtle: 'subtle',
+  'subtle-link': 'subtle',
+  warning: 'warning'
+};
+var tooltipOptions = {
+  hideTooltipOnClick: true
+};
+var ActionButtonRefreshNew = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     content = _ref.content,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
@@ -34,8 +66,106 @@ var ActionButtonNew = function ActionButtonNew(_ref) {
     tooltipMessage = _ref.tooltipMessage,
     isDisabled = _ref.isDisabled,
     href = _ref.href,
-    ariaLabel = _ref.ariaLabel,
-    className = _ref.className;
+    ariaLabel = _ref.ariaLabel;
+  var iconOnly = !content;
+  var onButtonClick = (0, _react.useCallback)(function (handler) {
+    return function (e) {
+      e.preventDefault();
+      handler();
+    };
+  }, []);
+  var button = (0, _react.useMemo)(function () {
+    var isLinkButton = !!href;
+    var spacing = size === _constants.SmartLinkSize.Large || size === _constants.SmartLinkSize.XLarge ? 'default' : 'compact';
+    if (iconOnly) {
+      var icon = iconBefore || iconAfter;
+      var iconFn = function iconFn() {
+        return icon || null;
+      };
+      if (isLinkButton) {
+        return /*#__PURE__*/_react.default.createElement(_new.LinkIconButton, {
+          appearance: IconButtonAppearanceMap[appearance],
+          icon: iconFn,
+          href: href,
+          isDisabled: isDisabled,
+          isTooltipDisabled: false,
+          label: tooltipMessage,
+          onClick: onButtonClick(onClick),
+          spacing: spacing,
+          testId: testId,
+          tooltip: tooltipOptions
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+        appearance: IconButtonAppearanceMap[appearance],
+        icon: iconFn,
+        isDisabled: isDisabled,
+        isLoading: isLoading,
+        isTooltipDisabled: false,
+        label: tooltipMessage,
+        onClick: onButtonClick(onClick),
+        spacing: spacing,
+        testId: testId,
+        tooltip: tooltipOptions
+      });
+    }
+    var iconBeforeFn = function iconBeforeFn() {
+      return iconBefore || null;
+    };
+    var iconAfterFn = function iconAfterFn() {
+      return iconAfter || null;
+    };
+    if (isLinkButton) {
+      return /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
+        appearance: ButtonAppearanceMap[appearance],
+        "aria-label": ariaLabel,
+        iconAfter: iconAfterFn,
+        iconBefore: iconBeforeFn,
+        isDisabled: isDisabled,
+        href: href,
+        onClick: onButtonClick(onClick),
+        spacing: spacing,
+        testId: testId
+      }, content);
+    }
+    return /*#__PURE__*/_react.default.createElement(_new.default, {
+      appearance: ButtonAppearanceMap[appearance],
+      "aria-label": ariaLabel,
+      iconAfter: iconAfterFn,
+      iconBefore: iconBeforeFn,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      onClick: onButtonClick(onClick),
+      spacing: spacing,
+      testId: testId
+    }, content);
+  }, [appearance, ariaLabel, content, href, iconAfter, iconBefore, iconOnly, isDisabled, isLoading, onButtonClick, onClick, size, testId, tooltipMessage]);
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    testId: "".concat(testId, "-button-wrapper"),
+    ref: ref
+  }, button);
+});
+
+// On cleanup of platform-linking-visual-refresh-v1, this should become
+// export default withOverrideCss(ActionButton);
+var ActionButtonRefreshNewWithOverrideCss = (0, _withOverrideCss.withOverrideCss)(ActionButtonRefreshNew);
+
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
+var ActionButtonNew = function ActionButtonNew(_ref2) {
+  var _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    content = _ref2.content,
+    iconAfter = _ref2.iconAfter,
+    iconBefore = _ref2.iconBefore,
+    isLoading = _ref2.isLoading,
+    onClick = _ref2.onClick,
+    size = _ref2.size,
+    testId = _ref2.testId,
+    tooltipMessage = _ref2.tooltipMessage,
+    isDisabled = _ref2.isDisabled,
+    href = _ref2.href,
+    ariaLabel = _ref2.ariaLabel,
+    className = _ref2.className;
   var iconOnly = !content;
   var onButtonClick = (0, _react.useCallback)(function (handler) {
     return function (e) {
@@ -65,6 +195,9 @@ var ActionButtonNew = function ActionButtonNew(_ref) {
   }, content)));
 };
 var ActionButton = function ActionButton(props) {
-  return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(ActionButtonNew, props) : /*#__PURE__*/_react.default.createElement(_ActionButtonOld.default, props);
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(ActionButtonRefreshNewWithOverrideCss, props) : /*#__PURE__*/_react.default.createElement(ActionButtonNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_ActionButtonOld.default, props);
 };
 var _default = exports.default = ActionButton;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.compiled.css

@@ -6,7 +6,6 @@
 ._1bsb1j6v{width:1rem}
 ._1bsb1k8s{width:1.5rem}
 ._1bsbgktf{width:20px}
-._1e0c116y{display:inline-flex}
 ._1e0c1o8l{display:inline-block}
 ._1o9zidpf{flex-shrink:0}
 ._1rg21j6v img, ._q7cv1j6v span, ._xwbj1j6v svg{min-width:1rem}

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -26,16 +26,19 @@ var getIconWidth = function getIconWidth(size) {
       return '1rem';
   }
 };
+
+// TODO: Remove on fg cleanup: platform-visual-refresh-icons
 var iconSizeStyleMap = {
   '1.5rem': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
   '1rem': "_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",
   '20px': "_16jlidpf _1o9zidpf _i0dl1wug _4t3igktf _1tkegktf _c71lgktf _1bsbgktf _1ul9gktf _p12fgktf _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7gktf _1xjxgktf _1752gktf _qci8gktf _15izgktf _erubgktf _19l3gktf _1pr2gktf _1u5tgktf _mezjgktf _e2oogktf _w8l5gktf _1rg2gktf _q7cvgktf _xwbjgktf _rtysgktf _b8nkgktf _4x20gktf"
 };
 
-// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
+// TODO: Remove on fg cleanup: platform-visual-refresh-icons
 var stackItemIconStylesOld = null;
 var stackItemIconStylesCompiled = null;
-var stackItemIconStyles = null;
+
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 var iconStyleMap = {
   true: "_syaz2oi6",
   false: "_syazwdcn"
@@ -49,12 +52,12 @@ var ActionIconNew = function ActionIconNew(_ref) {
   if (!(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
     return /*#__PURE__*/React.createElement("span", {
       "data-testid": "".concat(testId, "-icon"),
-      className: (0, _runtime.ax)([iconStyleMap[isDisabled ? 'true' : 'false'], asStackItemIcon && "_1e0c1o8l _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o", asStackItemIcon && iconSizeStyleMap['20px'], !asStackItemIcon && iconSizeStyleMap[getIconWidth(size)]])
+      className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && iconStyleMap[isDisabled ? 'true' : 'false'], asStackItemIcon && "_1e0c1o8l _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o", asStackItemIcon && iconSizeStyleMap['20px'], !asStackItemIcon && iconSizeStyleMap[getIconWidth(size)]])
     }, icon);
   }
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "".concat(testId, "-icon"),
-    className: (0, _runtime.ax)([iconStyleMap[isDisabled ? 'true' : 'false'], (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_1e0c116y" : "_1e0c1o8l"])
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && iconStyleMap[isDisabled ? 'true' : 'false'], "_1e0c1o8l"])
   }, icon);
 };
 var ActionIcon = function ActionIcon(props) {

package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css

@@ -3,9 +3,11 @@
 ._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)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1bsb1osq{width:100%}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
 ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
 ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _css = require("@atlaskit/css");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -20,11 +21,12 @@ var _actionIcon = _interopRequireDefault(require("../action-icon"));
 var _actionButtonOld = _interopRequireDefault(require("./action-buttonOld"));
 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 = {
+var stylesOld = {
   button: "_kkk2n7od _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _1bsb1osq _irr3166n _1di61dty",
   content: "_11c8qk37 _syaz1fxt"
 };
-var contentStyles = {
+var styles = {
+  button: "_bfhksm61 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _1bsb1osq _1ah31i6y _irr3166n _1di61dty",
   content: "_11c81vlj _syaz1fxt"
 };
 var ActionButtonNew = function ActionButtonNew(_ref) {
@@ -52,7 +54,7 @@ var ActionButtonNew = function ActionButtonNew(_ref) {
     size: size
   }) : iconOption;
   return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
-    xcss: styles.button
+    xcss: (0, _css.cx)(!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && stylesOld.button, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && styles.button)
   }, tooltipProps, {
     onClick: onClick,
     testId: testId
@@ -64,7 +66,7 @@ var ActionButtonNew = function ActionButtonNew(_ref) {
     grow: "fill",
     space: space
   }, icon, /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? contentStyles.content : styles.content
+    xcss: (0, _css.cx)(!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && stylesOld.content, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && styles.content)
   }, content)));
 };
 var ActionButton = function ActionButton(props) {

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -50,13 +50,13 @@ var ActionNew = function ActionNew(_ref) {
   }
   var isStackItem = as === 'stack-item';
   var isDropdownItem = as === 'dropdown-item' || asDropDownItem;
-  var actionIcon = icon && /*#__PURE__*/_react.default.createElement(_actionIcon.default, {
+  var actionIcon = icon ? /*#__PURE__*/_react.default.createElement(_actionIcon.default, {
     asStackItemIcon: isStackItem,
     isDisabled: isDisabled,
     icon: icon,
     size: size,
     testId: testId
-  });
+  }) : undefined;
   var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
   var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
   if (isStackItem) {

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

@@ -3,6 +3,7 @@
 ._1yt412x7{padding:var(--ds-space-075,6px)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}
 ._18u0u2gc{margin-left:var(--ds-space-100,8px)}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}

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

@@ -20,6 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var containerStyles = null;
 var errorStyles = null;
 var styles = {
+  containerStyles: "_kkk2n7od _2rkoglpi _1rjc12x7 _18zru2gc _19pku2gc _2hwxu2gc _otyrze3t _18u0u2gc _1bsb1osq _fiawglyw",
   errorContentStyles: "_bozgv77o",
   titleStyles: "_11c8qk37 _syaz1gjq"
 };
@@ -44,6 +45,27 @@ var ActionFooterNew = function ActionFooterNew(_ref) {
   if (!message) {
     return null;
   }
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      backgroundColor: message.appearance === 'error' ? 'color.background.danger' : undefined,
+      testId: "".concat(testId, "-footer"),
+      style: {
+        width: "calc(100% - var(--container-padding-left) - var(--container-padding-right))"
+      },
+      xcss: styles.containerStyles
+    }, /*#__PURE__*/React.createElement(_motionWrapper.default, {
+      isFadeIn: true,
+      show: true,
+      showTransition: true
+    }, /*#__PURE__*/React.createElement(_compiled.Inline, {
+      alignBlock: "start",
+      grow: "fill",
+      space: "space.075",
+      xcss: styles.errorContentStyles
+    }, message.icon || getIcon(message.appearance), /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.titleStyles
+    }, message.title))));
+  }
   return /*#__PURE__*/React.createElement("div", {
     "data-testId": "".concat(testId, "-footer"),
     className: (0, _runtime.ax)(["_kkk2n7od _2rkoglpi _1yt412x7 _18zru2gc _19pku2gc _2hwxu2gc _otyrze3t _18u0u2gc _vwz4gktf _1bsb1osq _fiawglyw", message.appearance === 'error' && "_bfhk1gly"])

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

@@ -112,7 +112,7 @@ var ActionBlockNew = function ActionBlockNew(_ref) {
   return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb129b _18u01ivi _2hwxc10g" : "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g"])
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb129b _18u01ivi _2hwxc10g"])
   }, actions, /*#__PURE__*/React.createElement(_actionFooter.ActionFooter, {
     message: message,
     testId: testId

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

@@ -30,8 +30,11 @@ var _utils2 = require("../utils");
 var _actionGroupItem = _interopRequireDefault(require("./action-group-item"));
 var _ActionGroupOld = _interopRequireDefault(require("./ActionGroupOld"));
 var _excluded = ["triggerRef"];
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 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; }
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
+var stylesOld = null;
 var styles = null;
 var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -129,7 +132,7 @@ var ActionGroupNew = function ActionGroupNew(_ref) {
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: (0, _runtime.ax)(["_1e0c116y _vwz41j6v _dzc21h6o _1ilq1i6y", "actions-button-group"]),
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c116y _vwz41j6v _dzc21h6o _1ilq1i6y", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1e0c116y _dzc21h6o _1ilq1i6y", "actions-button-group"]),
     "data-action-open": isOpen
   }, /*#__PURE__*/React.createElement(_buttonGroup.default, null, actionButtons, moreActionDropdown)) : null;
 };

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _elements = require("../../../elements");
@@ -19,9 +20,11 @@ var AIFooterBlockResolvedView = function AIFooterBlockResolvedView(props) {
   var testId = props.testId;
   return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, props, {
     testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/_react.default.createElement(_elements.Provider, {
+  }), /*#__PURE__*/_react.default.createElement(_elements.Provider, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
+    appearance: 'subtle'
+  } : {}, {
     testId: "".concat(testId, "-provider")
-  }), actionData ? /*#__PURE__*/_react.default.createElement(_aiFooterMetadata.AIFooterMetadata, (0, _extends2.default)({}, actionData, {
+  })), actionData ? /*#__PURE__*/_react.default.createElement(_aiFooterMetadata.AIFooterMetadata, (0, _extends2.default)({}, actionData, {
     testId: "".concat(testId, "-ai-metadata")
   })) : null);
 };

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

@@ -1,20 +1,30 @@
 
+._zulp1b66{gap:var(--ds-space-050,4px)}
 ._zulp1j6v{gap:1rem}
 ._zulp1k92{gap:1.25rem}
 ._zulp1kwk{gap:.5rem}
-._zulp6mu8{gap:.25rem}._12ji1kw7{outline-color:inherit}
+._zulp6mu8{gap:.25rem}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._zulpv47k{gap:var(--ds-space-250,20px)}._12ji1kw7{outline-color:inherit}
 ._12ji1snc{outline-color:currentColor!important}
 ._12y310yn{outline-width:medium!important}
+._17ae1oju [data-separator][data-smart-element=TargetBranch]+[data-separator][data-smart-element=SourceBranch]:before{color:var(--ds-icon-subtle,#626f86)}
 ._181uglyw{-webkit-user-select:none}
 ._18m915vq{overflow-y:hidden}
 ._18ql1j28{-webkit-tap-highlight-color:transparent}
 ._1bah1y6m{justify-content:flex-start}
 ._1e0c1txw{display:flex}
+._1gu21oju [data-separator][data-smart-element=SourceBranch]+[data-separator][data-smart-element=TargetBranch]:before{color:var(--ds-icon-subtle,#626f86)}
 ._1ifmglyw{-webkit-touch-callout:none}
+._1ljq1b66 [data-separator]+[data-separator]:before{margin-right:var(--ds-space-050,4px)}
 ._1ljq1j6v [data-separator]+[data-separator]:before{margin-right:1rem}
 ._1ljq1k92 [data-separator]+[data-separator]:before{margin-right:1.25rem}
 ._1ljq1kwk [data-separator]+[data-separator]:before{margin-right:.5rem}
 ._1ljq6mu8 [data-separator]+[data-separator]:before{margin-right:.25rem}
+._1ljqpxbi [data-separator]+[data-separator]:before{margin-right:var(--ds-space-200,1pc)}
+._1ljqu2gc [data-separator]+[data-separator]:before{margin-right:var(--ds-space-100,8px)}
+._1ljqv47k [data-separator]+[data-separator]:before{margin-right:var(--ds-space-250,20px)}
 ._1ouwidpf>*{min-width:0}
 ._1qu2agmp{outline-style:none!important}
 ._1reo15vq{overflow-x:hidden}
@@ -25,7 +35,10 @@
 ._2lx2vrvc{flex-direction:row}
 ._4cvr1h6o{align-items:center}
 ._4cvr1y6m{align-items:flex-start}
+._5b7tuxlv [data-separator][data-smart-element=TargetBranch]+[data-separator][data-smart-element=SourceBranch]:before{content:"←"}
+._a6bxmuej [data-separator]+[data-separator]:before{color:var(--ds-border,#091e4224)}
 ._a7e8uxlv [data-smart-element=TargetBranch]+[data-smart-element=SourceBranch]:before{content:"←"}
+._e4i5bjq5 [data-separator][data-smart-element=SourceBranch]+[data-separator][data-smart-element=TargetBranch]:before{content:"→"}
 ._f6ju1ns9>[data-fit-to-content]{min-width:-moz-fit-content;min-width:fit-content}
 ._fiawglyw:empty{display:none}
 ._syaz1kw7{color:inherit}

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

@@ -1,4 +1,5 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -17,14 +18,24 @@ var _utils = require("../utils");
 var _indexOld = _interopRequireDefault(require("./indexOld"));
 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 BaseBlockStyles = null;
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
+var BaseBlockStylesOld = null;
+var baseBlockStyles = null;
 var highlightRemoveStyles = null;
-var gapsStyles = {
+
+// TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
+var gapsStylesOld = {
   xlarge: "_zulp1k92 _1ljq1k92",
   large: "_zulp1j6v _1ljq1j6v",
   medium: "_zulp1kwk _1ljq1kwk",
   small: "_zulp6mu8 _1ljq6mu8"
 };
+var gapStyles = {
+  xlarge: "_zulpv47k _1ljqv47k",
+  large: "_zulppxbi _1ljqpxbi",
+  medium: "_zulpu2gc _1ljqu2gc",
+  small: "_zulp1b66 _1ljq1b66"
+};
 var directionStyles = {
   vertical: "_2lx21bp4 _4cvr1y6m",
   horizontal: "_2lx2vrvc _4cvr1h6o"
@@ -55,7 +66,7 @@ var BlockNew = function BlockNew(_ref) {
   }, [onRender]);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _4cvr1h6o _vwz41j6v _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", "_12ji1snc _1qu2agmp _12y310yn _12ji1kw7 _syaz1kw7 _18ql1j28 _1ifmglyw _181uglyw _1rkwglyw _te17glyw _uiztglyw", directionStyles[direction], gapsStyles[size], className]),
+    className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _4cvr1h6o _vwz41j6v _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1uzp1mp2 _a6bxmuej _e4i5bjq5 _1gu21oju _5b7tuxlv _17ae1oju", "_12ji1snc _1qu2agmp _12y310yn _12ji1kw7 _syaz1kw7 _18ql1j28 _1ifmglyw _181uglyw _1rkwglyw _te17glyw _uiztglyw", directionStyles[direction], !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && gapsStylesOld[size], (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && gapStyles[size], className]),
     "data-smart-block": true,
     "data-testid": testId,
     onTransitionEnd: onTransitionEnd,

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

@@ -26,19 +26,19 @@
 ._1ul9idpf{min-width:0}
 ._1wpz1y6m{align-self:flex-start}
 ._1yyjkb7n{-webkit-line-clamp:1}
-._24rc147b >span{margin-left:var(--ds-space-250,1.25rem)}
-._24rc1e9d >span{margin-left:var(--ds-space-200,1rem)}
-._24rccxkx >span{margin-left:var(--ds-space-100,.5rem)}
-._24rcpdf9 >span{margin-left:var(--ds-space-050,.25rem)}
+._24rc1b66 >span{margin-left:var(--ds-space-050,4px)}
+._24rcpxbi >span{margin-left:var(--ds-space-200,1pc)}
+._24rcu2gc >span{margin-left:var(--ds-space-100,8px)}
+._24rcv47k >span{margin-left:var(--ds-space-250,20px)}
 ._2lx21bp4{flex-direction:column}
 ._2lx2vrvc{flex-direction:row}
 ._3dveidpf >span:first-of-type{margin-left:0}
 ._4cvr1h6o{align-items:center}
 ._4cvr1y6m{align-items:flex-start}
-._7yhb147b >span{margin-right:var(--ds-space-250,1.25rem)}
-._7yhb1e9d >span{margin-right:var(--ds-space-200,1rem)}
-._7yhbcxkx >span{margin-right:var(--ds-space-100,.5rem)}
-._7yhbpdf9 >span{margin-right:var(--ds-space-050,.25rem)}
+._7yhb1b66 >span{margin-right:var(--ds-space-050,4px)}
+._7yhbpxbi >span{margin-right:var(--ds-space-200,1pc)}
+._7yhbu2gc >span{margin-right:var(--ds-space-100,8px)}
+._7yhbv47k >span{margin-right:var(--ds-space-250,20px)}
 ._f6ju1ns9>[data-fit-to-content]{min-width:-moz-fit-content;min-width:fit-content}
 ._fiawglyw:empty{display:none}
 ._i0dlf1ug{flex-basis:0%}
@@ -48,7 +48,6 @@
 ._s7n4nkob{vertical-align:middle}
 ._sudp1e54{-webkit-box-orient:vertical}
 ._vwz41j6v{line-height:1rem}
-._vwz47vkz{line-height:1pc}
 ._y3gn1e5h{text-align:left}
 ._y3gnusic{text-align:right}
-@supports not (-webkit-line-clamp:1){._102k1k8s{max-height:1.5rem}._102k1m1q{max-height:1.75rem}}
+@supports not (-webkit-line-clamp:1){._102k125z{max-height:calc(var(--ds-space-400, 2pc)*1)}._102k1k8s{max-height:1.5rem}._102k1m1q{max-height:1.75rem}._102kz42d{max-height:calc(var(--ds-space-300, 24px)*1)}}

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) {