@atlaskit/smart-card 34.10.12 → 34.10.13

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -40,7 +40,7 @@ const LozengeActionErrorNew = ({
   const dynamicCss = null;
   const content = useMemo(() => {
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: ax(["_zulpcxkx _11c81doa _1reo15vq _18m915vq _1e0c1txw _1ul9idpf _2lx2vrvc _19pkv77o _4cvr1y6m _pqme1oud _102e1oud _ngc01fxt _1t4p1fxt"])
+      className: ax(["_zulpu2gc _11c81doa _1reo15vq _18m915vq _1e0c1txw _1ul9idpf _2lx2vrvc _19pkv77o _4cvr1y6m _pqme1oud _102e1oud _ngc01fxt _1t4p1fxt"])
     }, /*#__PURE__*/React.createElement(ErrorIcon, {
       testId: `${testId}-icon`,
       LEGACY_size: "medium",
@@ -55,7 +55,7 @@ const LozengeActionErrorNew = ({
         "--_t4prqe": ix(maxLineNumber)
       }
     }, typeof errorMessage === 'string' ? errorMessage : getFormattedMessage(errorMessage))), isPreviewAvailable ? /*#__PURE__*/React.createElement("div", {
-      className: ax(["_zulpcxkx _1reo15vq _18m915vq _11c81oud _1e0c1txw _1ul9idpf _2lx2vrvc _4cvr1h6o _80omtlke _19pku2gc _18u0xy5q _otyrv77o"])
+      className: ax(["_zulpu2gc _1reo15vq _18m915vq _11c81oud _1e0c1txw _1ul9idpf _2lx2vrvc _4cvr1h6o _80omtlke _19pku2gc _18u0xy5q _otyrv77o"])
     }, /*#__PURE__*/React.createElement("a", {
       target: "_blank",
       "data-testid": `${testId}-open-embed`,

package/dist/es2019/view/FlexibleCard/components/elements/snippet-element/index.compiled.css

@@ -1,5 +1,6 @@
 ._181u1kdv{-webkit-user-select:text}
 ._1rkw1kdv{-moz-user-select:text}
+._1ul9idpf{min-width:0}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}
 ._te171kdv{-ms-user-select:text}
 ._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}

package/dist/es2019/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -24,7 +24,7 @@ const SnippetElementNew = ({
     content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
     maxLines: maxLines,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_syaz1fxt _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv" : "_syaz1fxt _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", className])
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_syaz1fxt _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", fg('platform-linking-visual-refresh-v1') && "_syaz1fxt _1ul9idpf _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", className])
   }, props));
 };
 const SnippetElement = (props = {}) => {

package/dist/es2019/view/FlexibleCard/components/elements/text/index.compiled.css

@@ -5,6 +5,7 @@
 ._1e0ccj1k{display:-webkit-box}
 ._1nmz1hna{word-break:break-word}
 ._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
 ._1yyjr31u{-webkit-line-clamp:var(--_1erfju8)}
 ._o5724jg8{white-space:normal}
 ._sudp1e54{-webkit-box-orient:vertical}

package/dist/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -34,7 +34,7 @@ const TextNew = ({
     "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 _o5724jg8 _1e0ccj1k _1bto1l2s _1nmz1hna _sudp1e54" : "_11c8qk37 _1reo15vq _18m915vq _syaz131l _o5724jg8 _1e0ccj1k _1bto1l2s _1nmz1hna _sudp1e54", "_1yyjr31u _102k1dud", className]),
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_11c8qk37 _1reo15vq _18m915vq _syaz131l _o5724jg8 _1e0ccj1k _1bto1l2s _1nmz1hna _sudp1e54", fg('platform-linking-visual-refresh-v1') && "_11c81vlj _1reo15vq _18m915vq _syaz1gjq _o5724jg8 _1e0ccj1k _1ul9idpf _1bto1l2s _1nmz1hna _sudp1e54", "_1yyjr31u _102k1dud", className]),
     style: {
       "--_1erfju8": ix(maxLines)
     }

package/dist/es2019/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.10.12",
+  packageVersion: "34.10.13",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/common/ai-summary/index.js

@@ -31,7 +31,7 @@ const AISummaryNew = ({
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_11c81vlj _syaz1gjq _slp31hna _1nmz1hna _o5724jg8 _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv" : "_11c8qk37 _slp31hna _1nmz1hna _o5724jg8 _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", className]),
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_11c8qk37 _slp31hna _1nmz1hna _o5724jg8 _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", fg('platform-linking-visual-refresh-v1') && "_11c81vlj _syaz1gjq _slp31hna _1nmz1hna _o5724jg8 _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", className]),
     children: content,
     options: {
       forceWrapper: true,

package/dist/esm/utils/analytics/analytics.js

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

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

@@ -46,13 +46,13 @@ var ActionOld = function ActionOld(_ref) {
   }
   var isStackItem = as === 'stack-item';
   var isDropdownItem = as === 'dropdown-item' || asDropDownItem;
-  var actionIcon = icon && jsx(ActionIcon, {
+  var actionIcon = icon ? jsx(ActionIcon, {
     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/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -1,19 +1,51 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { LoadingButton } from '@atlaskit/button';
+import Button, { IconButton, LinkButton, LinkIconButton } from '@atlaskit/button/new';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize } from '../../../../../../constants';
+import { withOverrideCss } from '../../../common/with-override-css';
 import { sizeToButtonSpacing } from '../../../utils';
 import ActionButtonOld from './ActionButtonOld';
+// 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__*/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,
@@ -24,8 +56,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 = useCallback(function (handler) {
+    return function (e) {
+      e.preventDefault();
+      handler();
+    };
+  }, []);
+  var button = useMemo(function () {
+    var isLinkButton = !!href;
+    var spacing = size === SmartLinkSize.Large || size === SmartLinkSize.XLarge ? 'default' : 'compact';
+    if (iconOnly) {
+      var icon = iconBefore || iconAfter;
+      var iconFn = function iconFn() {
+        return icon || null;
+      };
+      if (isLinkButton) {
+        return /*#__PURE__*/React.createElement(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.createElement(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.createElement(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.createElement(Button, {
+      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.createElement(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 = 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 = useCallback(function (handler) {
     return function (e) {
@@ -55,6 +185,9 @@ var ActionButtonNew = function ActionButtonNew(_ref) {
   }, content)));
 };
 var ActionButton = function ActionButton(props) {
-  return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(ActionButtonNew, props) : /*#__PURE__*/React.createElement(ActionButtonOld, props);
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(ActionButtonRefreshNewWithOverrideCss, props) : /*#__PURE__*/React.createElement(ActionButtonNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ActionButtonOld, props);
 };
 export default ActionButton;

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

@@ -16,16 +16,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"
@@ -39,12 +42,12 @@ var ActionIconNew = function ActionIconNew(_ref) {
   if (!fg('platform-visual-refresh-icons')) {
     return /*#__PURE__*/React.createElement("span", {
       "data-testid": "".concat(testId, "-icon"),
-      className: ax([iconStyleMap[isDisabled ? 'true' : 'false'], asStackItemIcon && "_1e0c1o8l _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o", asStackItemIcon && iconSizeStyleMap['20px'], !asStackItemIcon && iconSizeStyleMap[getIconWidth(size)]])
+      className: ax([!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: ax([iconStyleMap[isDisabled ? 'true' : 'false'], fg('platform-linking-visual-refresh-v1') ? "_1e0c116y" : "_1e0c1o8l"])
+    className: ax([!fg('platform-linking-visual-refresh-v1') && iconStyleMap[isDisabled ? 'true' : 'false'], "_1e0c1o8l"])
   }, icon);
 };
 var ActionIcon = function ActionIcon(props) {

package/dist/esm/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/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -4,17 +4,19 @@ import "./action-button.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback } from 'react';
+import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Pressable } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { getPrimitivesInlineSpaceBySize } from '../../../utils';
 import ActionIcon from '../action-icon';
 import ActionButtonOld from './action-buttonOld';
-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) {
@@ -42,7 +44,7 @@ var ActionButtonNew = function ActionButtonNew(_ref) {
     size: size
   }) : iconOption;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
-    xcss: styles.button
+    xcss: cx(!fg('platform-linking-visual-refresh-v1') && stylesOld.button, fg('platform-linking-visual-refresh-v1') && styles.button)
   }, tooltipProps, {
     onClick: onClick,
     testId: testId
@@ -54,7 +56,7 @@ var ActionButtonNew = function ActionButtonNew(_ref) {
     grow: "fill",
     space: space
   }, icon, /*#__PURE__*/React.createElement(Box, {
-    xcss: fg('platform-linking-visual-refresh-v1') ? contentStyles.content : styles.content
+    xcss: cx(!fg('platform-linking-visual-refresh-v1') && stylesOld.content, fg('platform-linking-visual-refresh-v1') && styles.content)
   }, content)));
 };
 var ActionButton = function ActionButton(props) {

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

@@ -43,13 +43,13 @@ var ActionNew = function ActionNew(_ref) {
   }
   var isStackItem = as === 'stack-item';
   var isDropdownItem = as === 'dropdown-item' || asDropDownItem;
-  var actionIcon = icon && /*#__PURE__*/React.createElement(ActionIcon, {
+  var actionIcon = icon ? /*#__PURE__*/React.createElement(ActionIcon, {
     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/esm/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/esm/view/FlexibleCard/components/blocks/action-block/action-footer/index.js

@@ -10,6 +10,7 @@ import { ActionFooterOld } from './ActionFooterOld';
 var containerStyles = null;
 var errorStyles = null;
 var styles = {
+  containerStyles: "_kkk2n7od _2rkoglpi _1rjc12x7 _18zru2gc _19pku2gc _2hwxu2gc _otyrze3t _18u0u2gc _1bsb1osq _fiawglyw",
   errorContentStyles: "_bozgv77o",
   titleStyles: "_11c8qk37 _syaz1gjq"
 };
@@ -34,6 +35,27 @@ var ActionFooterNew = function ActionFooterNew(_ref) {
   if (!message) {
     return null;
   }
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(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, {
+      isFadeIn: true,
+      show: true,
+      showTransition: true
+    }, /*#__PURE__*/React.createElement(Inline, {
+      alignBlock: "start",
+      grow: "fill",
+      space: "space.075",
+      xcss: styles.errorContentStyles
+    }, message.icon || getIcon(message.appearance), /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.titleStyles
+    }, message.title))));
+  }
   return /*#__PURE__*/React.createElement("div", {
     "data-testId": "".concat(testId, "-footer"),
     className: ax(["_kkk2n7od _2rkoglpi _1yt412x7 _18zru2gc _19pku2gc _2hwxu2gc _otyrze3t _18u0u2gc _vwz4gktf _1bsb1osq _fiawglyw", message.appearance === 'error' && "_bfhk1gly"])

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

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

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

@@ -6,6 +6,8 @@ var _excluded = ["triggerRef"];
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
@@ -22,6 +24,8 @@ import { sizeToButtonSpacing } from '../../utils';
 import { filterActionItems } from '../utils';
 import ActionGroupItem from './action-group-item';
 import ActionGroupOld from './ActionGroupOld';
+// 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] : [];
@@ -119,7 +123,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: ax(["_1e0c116y _vwz41j6v _dzc21h6o _1ilq1i6y", "actions-button-group"]),
+    className: ax([!fg('platform-linking-visual-refresh-v1') && "_1e0c116y _vwz41j6v _dzc21h6o _1ilq1i6y", fg('platform-linking-visual-refresh-v1') && "_1e0c116y _dzc21h6o _1ilq1i6y", "actions-button-group"]),
     "data-action-open": isOpen
   }, /*#__PURE__*/React.createElement(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
 };

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { InternalActionName } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
 import { Provider } from '../../../elements';
@@ -12,9 +13,11 @@ var AIFooterBlockResolvedView = function AIFooterBlockResolvedView(props) {
   var testId = props.testId;
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/React.createElement(Provider, {
+  }), /*#__PURE__*/React.createElement(Provider, _extends({}, fg('platform-linking-visual-refresh-v1') ? {
+    appearance: 'subtle'
+  } : {}, {
     testId: "".concat(testId, "-provider")
-  }), actionData ? /*#__PURE__*/React.createElement(AIFooterMetadata, _extends({}, actionData, {
+  })), actionData ? /*#__PURE__*/React.createElement(AIFooterMetadata, _extends({}, actionData, {
     testId: "".concat(testId, "-ai-metadata")
   })) : null);
 };

package/dist/esm/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/esm/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 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -7,14 +8,25 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { renderChildren } from '../utils';
 import BlockOld from './indexOld';
-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"
@@ -45,7 +57,7 @@ var BlockNew = function BlockNew(_ref) {
   }, [onRender]);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: 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: ax([!fg('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _4cvr1h6o _vwz41j6v _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", 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], !fg('platform-linking-visual-refresh-v1') && gapsStylesOld[size], fg('platform-linking-visual-refresh-v1') && gapStyles[size], className]),
     "data-smart-block": true,
     "data-testid": testId,
     onTransitionEnd: onTransitionEnd,

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