@atlaskit/smart-card 34.6.4 → 34.6.6

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -20,6 +20,7 @@ var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
+var _actionButton = require("../common/action-button");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
 var _IconEmotion = require("../Icon-emotion");
@@ -51,10 +52,16 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
     });
     (0, _defineProperty2.default)(_this, "renderActionButton", function () {
       var onRetry = _this.props.onRetry;
-      var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
-      return onRetry && /*#__PURE__*/_react.default.createElement(ActionButton, {
+      var Button = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return onRetry && /*#__PURE__*/_react.default.createElement(Button, {
+          component: _actionButton.ActionButton,
+          onClick: _this.handleRetry
+        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again));
+      }
+      return onRetry && /*#__PURE__*/_react.default.createElement(Button, {
         spacing: "none",
-        component: (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _styled.IconStyledButton : _styledEmotion.IconStyledButton,
+        component: (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _styled.IconStyledButtonOldVisualRefresh : _styledEmotion.IconStyledButton,
         onClick: _this.handleRetry,
         role: "button"
       }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again));

package/dist/cjs/view/InlineCard/ForbiddenView/index.js

@@ -23,6 +23,7 @@ var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
+var _actionButton = require("../common/action-button");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
 var _IconEmotion = require("../Icon-emotion");
@@ -112,20 +113,30 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
     (0, _defineProperty2.default)(_this, "renderActionButton", function () {
       var _this$props$requestAc;
       var onAuthorise = _this.props.onAuthorise;
-      var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
+      var LozengeWrapper = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? _IconAndTitleLayout.LozengeWrapper : _styled.LozengeWrapperOldVisualRefresh;
+      var Button = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
       var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
       if (_this.state.hasRequestAccessContextMessage) {
         if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-          return /*#__PURE__*/_react.default.createElement(ActionButton, {
+          if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+            var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
+            return /*#__PURE__*/_react.default.createElement(Button, {
+              onClick: _this.handleRetry,
+              component: _actionButton.ActionButton,
+              testId: "button-connect-other-account",
+              isDisabled: isDisabled
+            }, _this.renderForbiddenAccessMessage());
+          }
+          return /*#__PURE__*/_react.default.createElement(Button, {
             spacing: "none",
             onClick: _this.handleRetry,
-            component: _styled2.IconStyledButton,
+            component: _styled2.IconStyledButtonOldVisualRefresh,
             testId: "button-connect-other-account",
             role: "button",
             isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
           }, _this.renderForbiddenAccessMessage());
         } else {
-          return /*#__PURE__*/_react.default.createElement(ActionButton, {
+          return /*#__PURE__*/_react.default.createElement(Button, {
             spacing: "none",
             onClick: _this.handleRetry,
             component: _styledEmotion.IconStyledButton,
@@ -136,13 +147,22 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
         }
       }
       if (onAuthorise) {
-        return /*#__PURE__*/_react.default.createElement(_button.default, {
+        if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+          return /*#__PURE__*/_react.default.createElement(LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+            xcss: actionButtonLozengeStyle,
+            onClick: _this.handleRetry,
+            testId: "button-connect-other-account"
+          }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+            appearance: 'moved'
+          }, _this.renderForbiddenAccessMessage())));
+        }
+        return /*#__PURE__*/_react.default.createElement(Button, {
           spacing: "none",
           onClick: _this.handleRetry,
           appearance: "subtle-link",
           testId: "button-connect-other-account",
           role: "button"
-        }, /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+        }, /*#__PURE__*/_react.default.createElement(LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
           appearance: 'moved'
         }, _this.renderForbiddenAccessMessage())));
       }
@@ -182,4 +202,8 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
       return content;
     }
   }]);
-}(_react.default.Component);
+}(_react.default.Component);
+var actionButtonLozengeStyle = (0, _primitives.xcss)({
+  backgroundColor: 'color.background.neutral.subtle',
+  padding: 'space.0'
+});

package/dist/cjs/view/InlineCard/Frame/styled.compiled.css

@@ -1,9 +1,10 @@
-
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
 ._1yt4x7n9{padding:var(--ds-space-025,2px) 0}
 ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._v56415x0{transition:all .1s ease-in-out}
-._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}._12ji1r31{outline-color:currentColor}
+._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}
+._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._16qscw00{box-shadow:0 0 0 2px var(--ds-border-selected,#4c9aff)}

package/dist/cjs/view/InlineCard/Frame/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,6 +12,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"],
   _excluded2 = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"];
@@ -29,7 +30,7 @@ var WrapperSpan = exports.WrapperSpan = /*#__PURE__*/(0, _react.forwardRef)(func
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
     ref: ref
   }, props, {
-    className: (0, _runtime.ax)(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c81doa _1yt4x7n9 _2rkoiti9 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28" : "_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l", truncateInline && !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
   }), props.children);
 });
 var WrapperAnchor = exports.WrapperAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
@@ -44,10 +45,11 @@ var WrapperAnchor = exports.WrapperAnchor = /*#__PURE__*/(0, _react.forwardRef)(
     href: href,
     ref: ref
   }, props, {
-    className: (0, _runtime.ax)(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_11c81doa _1yt4x7n9 _2rkoiti9 _v56415x0 _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28" : "_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l", truncateInline && !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
   }), props.children);
 });
-var baseWrapperStyles = null;
+var baseWrapperStylesNew = null;
+var baseWrapperStylesOld = null;
 
 // if the parent instruct the wrapper to be interactive, and the wrapper is in focus, apply selectedStyles
 var interactiveStyles = null;
@@ -55,6 +57,7 @@ var hoveredStyles = null;
 var hoveredWithBackgroundStyles = null;
 var withoutBackgroundStyles = null;
 var withBackgroundStyles = null;
-var truncateStyles = null;
+var truncateStylesNew = null;
+var truncateStylesOld = null;
 var notSelectedStyle = null;
 var selectedStyles = null;

package/dist/cjs/view/InlineCard/Icon.js

@@ -1,4 +1,4 @@
-/* Icon.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* Icon.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -1,4 +1,5 @@
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
 ._1bnxglyw:hover{text-decoration-line:none}

package/dist/cjs/view/InlineCard/IconAndTitleLayout/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconAndTitleLayout = void 0;
+exports.LozengeWrapper = exports.IconTitleWrapper = exports.IconAndTitleLayout = void 0;
 require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
@@ -18,9 +18,11 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _reactMagneticDi = require("react-magnetic-di");
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _Icon = require("../Icon");
 var _styledEmotion = require("../styled-emotion");
@@ -33,7 +35,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
-var NoLinkAppearance = (0, _react.forwardRef)(function (_ref, __cmplr) {
+var NoLinkAppearanceOldVisualRefresh = (0, _react.forwardRef)(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "span" : _ref$as,
     __cmpls = _ref.style,
@@ -47,7 +49,7 @@ var NoLinkAppearance = (0, _react.forwardRef)(function (_ref, __cmplr) {
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  NoLinkAppearance.displayName = 'NoLinkAppearance';
+  NoLinkAppearanceOldVisualRefresh.displayName = 'NoLinkAppearanceOldVisualRefresh';
 }
 var LinkAppearance = (0, _react.forwardRef)(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
@@ -100,12 +102,26 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
         icon = _this$props.icon,
         emoji = _this$props.emoji;
       if (emoji) {
-        return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.EmojiWrapper, null, emoji) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.EmojiWrapper, null, emoji);
+        if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+          return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+            as: "span",
+            xcss: iconWrapperStyle,
+            testId: "icon-position-emoji-wrapper"
+          }, emoji);
+        }
+        return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.EmojiWrapperOldVisualRefresh, null, emoji) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.EmojiWrapper, null, emoji);
       }
       if (!icon || typeof icon === 'string') {
         return null;
       }
-      return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, icon) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconWrapper, null, icon);
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+          as: "span",
+          xcss: iconWrapperStyle,
+          testId: "icon-atlaskit-icon-wrapper"
+        }, icon);
+      }
+      return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, icon) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconWrapper, null, icon);
     }
   }, {
     key: "renderImageIcon",
@@ -114,6 +130,21 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
       if (!url || typeof url !== 'string') {
         return null;
       }
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+          src: url,
+          loaded: /*#__PURE__*/_react.default.createElement("img", {
+            src: url,
+            "data-testid": "".concat(testId, "-image"),
+            alt: "",
+            className: (0, _runtime.ax)(["_1bsb1osq"])
+          }),
+          errored: errored,
+          loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
+            testId: "".concat(testId, "-loading")
+          })
+        });
+      }
       return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
         src: url,
         loaded: /*#__PURE__*/_react.default.createElement(_Icon.Icon
@@ -133,10 +164,18 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
     key: "renderIconPlaceholder",
     value: function renderIconPlaceholder(testId) {
       var defaultIcon = this.props.defaultIcon;
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return defaultIcon || /*#__PURE__*/_react.default.createElement(_link.default, {
+          label: "link",
+          LEGACY_size: "small",
+          testId: "".concat(testId, "-default"),
+          color: "currentColor"
+        });
+      }
       if (defaultIcon) {
-        return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, defaultIcon);
+        return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, defaultIcon);
       }
-      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, /*#__PURE__*/_react.default.createElement(_link.default, {
+      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, /*#__PURE__*/_react.default.createElement(_link.default, {
         label: "link",
         LEGACY_size: "small",
         testId: "".concat(testId, "-default"),
@@ -156,6 +195,13 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
       }
       var placeholder = this.renderIconPlaceholder(testId);
       var image = this.renderImageIcon(placeholder, testId);
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+          as: "span",
+          xcss: iconWrapperStyle,
+          testId: "".concat(testId, "-image-wrapper")
+        }, image || placeholder);
+      }
       return image || placeholder;
     }
   }, {
@@ -170,20 +216,32 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
         rightSide = _this$props2.rightSide,
         _this$props2$testId = _this$props2.testId,
         testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
-      var titlePart = (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, {
+      var titlePart = (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+        as: "span",
+        xcss: iconOuterWrapperStyle,
+        testId: "icon-position-wrapper"
+      }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+        as: "span",
+        xcss: iconEmptyStyle,
+        testId: "icon-empty-wrapper"
+      }), this.renderIcon(testId))) : /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapperOldVisualRefresh, {
         "data-testid": "icon-position-wrapper"
-      }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, {
+      }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapperOldVisualRefresh, {
         "data-testid": "icon-empty-wrapper"
-      }), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      , {
+      }), this.renderIcon(testId))), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+        as: "span",
         style: {
-          color: titleTextColor
+          color: this.props.titleTextColor
         }
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: _styled.TitleWrapperClassName
-      }, title)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconPositionWrapper, {
+      }, !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
+        className: _styled.TitleWrapperClassNameOldVisualRefresh
+      } : {}), title) : /*#__PURE__*/_react.default.createElement(_styled.TitleWrapperOldVisualRefresh, (0, _extends2.default)({
+        style: {
+          color: this.props.titleTextColor
+        }
+      }, !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
+        className: _styled.TitleWrapperClassNameOldVisualRefresh
+      } : {}), title)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconPositionWrapper, {
         "data-testid": "icon-position-wrapper"
       }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconEmptyWrapper, {
         "data-testid": "icon-empty-wrapper"
@@ -195,23 +253,31 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
         }
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: _styled.TitleWrapperClassName
+        className: _styled.TitleWrapperClassNameOldVisualRefresh
       }, title));
       if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          _react.default.createElement(_styled.IconTitleWrapper, {
-            style: {
-              color: titleColor
-            },
-            "data-testid": testId
-          }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
-            href: link,
-            onClick: this.handleClick,
-            onKeyPress: this.handleKeyPress
-          }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(NoLinkAppearance, null, rightSide) : null)
-        );
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(IconTitleWrapper, {
+          style: {
+            color: this.props.titleColor
+          },
+          testId: testId
+        }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+          as: "span",
+          xcss: noLinkAppearanceStyle
+        }, rightSide) : null) : /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapperOldVisualRefresh, {
+          style: {
+            color: this.props.titleColor
+          },
+          "data-testid": testId
+        }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(NoLinkAppearanceOldVisualRefresh, null, rightSide) : null));
       } else {
         return (
           /*#__PURE__*/
@@ -233,4 +299,68 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
 }(_react.default.Component);
 (0, _defineProperty2.default)(IconAndTitleLayout, "defaultProps", {
   rightSideSpacer: true
+});
+var IconTitleWrapper = exports.IconTitleWrapper = function IconTitleWrapper(props) {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+    as: "span",
+    xcss: iconTitleWrapperStyle
+  }, props));
+};
+var LozengeWrapper = exports.LozengeWrapper = function LozengeWrapper(props) {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "span",
+    xcss: lozengeWrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+    xcss: lozengeInternalWrapperStyle
+  }, props)));
+};
+var lozengeInternalWrapperStyle = (0, _primitives.xcss)({
+  paddingBottom: 'space.025'
+});
+var lozengeWrapperStyle = (0, _primitives.xcss)({
+  display: 'inline-block',
+  verticalAlign: 'bottom',
+  marginTop: 'space.0',
+  marginRight: 'space.050',
+  marginBottom: 'space.0',
+  marginLeft: 'space.025'
+});
+var horizontalPadding = 'space.050';
+var verticalPadding = 'space.025';
+var iconWidth = '16px';
+var iconEmptyStyle = (0, _primitives.xcss)({
+  width: iconWidth,
+  display: 'inline-block',
+  opacity: 0
+});
+var iconOuterWrapperStyle = (0, _primitives.xcss)({
+  marginRight: 'space.050',
+  display: 'inline-block',
+  position: 'relative'
+});
+var iconTitleWrapperStyle = (0, _primitives.xcss)({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  paddingTop: verticalPadding,
+  paddingRight: horizontalPadding,
+  paddingBottom: verticalPadding,
+  paddingLeft: horizontalPadding
+});
+var iconWrapperStyle = (0, _primitives.xcss)({
+  position: 'absolute',
+  display: 'inline-flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  top: 'space.0',
+  left: 'space.0',
+  bottom: 'space.0',
+  width: iconWidth,
+  userSelect: 'none'
+});
+var iconImageStyle = null;
+var noLinkAppearanceStyle = (0, _primitives.xcss)({
+  color: 'color.text.subtlest',
+  font: 'font.body',
+  marginLeft: 'space.050'
 });

package/dist/cjs/view/InlineCard/IconAndTitleLayout/styled.js

@@ -1,4 +1,4 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+exports.TitleWrapperOldVisualRefresh = exports.TitleWrapperClassNameOldVisualRefresh = exports.RightIconPositionWrapper = exports.LozengeWrapperOldVisualRefresh = exports.IconWrapperOldVisualRefresh = exports.IconTitleWrapperOldVisualRefresh = exports.IconPositionWrapperOldVisualRefresh = exports.IconEmptyWrapperOldVisualRefresh = exports.EmojiWrapperOldVisualRefresh = void 0;
 require("./styled.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -37,8 +37,9 @@ var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n
 // TODO: remove this override behaviour for @atlaskit/icon
 var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref, __cmplr) {
+var IconWrapperOldVisualRefresh = exports.IconWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "span" : _ref$as,
     __cmpls = _ref.style,
@@ -51,11 +52,12 @@ var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref, _
 });
 
 // Wraps all emoji in Inline Links similar to icon
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-var EmojiWrapper = exports.EmojiWrapper = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+var EmojiWrapperOldVisualRefresh = exports.EmojiWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
     C = _ref2$as === void 0 ? "span" : _ref2$as,
     __cmpls = _ref2.style,
@@ -70,11 +72,12 @@ var EmojiWrapper = exports.EmojiWrapper = (0, _react.forwardRef)(function (_ref2
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  EmojiWrapper.displayName = 'EmojiWrapper';
+  EmojiWrapperOldVisualRefresh.displayName = 'EmojiWrapperOldVisualRefresh';
 }
-var IconTitleWrapper = exports.IconTitleWrapper = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+var IconTitleWrapperOldVisualRefresh = exports.IconTitleWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref3, __cmplr) {
   var _ref3$as = _ref3.as,
     C = _ref3$as === void 0 ? "span" : _ref3$as,
     __cmpls = _ref3.style,
@@ -86,12 +89,12 @@ var IconTitleWrapper = exports.IconTitleWrapper = (0, _react.forwardRef)(functio
   }));
 });
 
-// TODO: Replace overrides with proper AtlasKit solution.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconTitleWrapper.displayName = 'IconTitleWrapper';
+  IconTitleWrapperOldVisualRefresh.displayName = 'IconTitleWrapperOldVisualRefresh';
 }
-var LozengeWrapper = exports.LozengeWrapper = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+var LozengeWrapperOldVisualRefresh = exports.LozengeWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref4, __cmplr) {
   var _ref4$as = _ref4.as,
     C = _ref4$as === void 0 ? "span" : _ref4$as,
     __cmpls = _ref4.style,
@@ -105,7 +108,7 @@ var LozengeWrapper = exports.LozengeWrapper = (0, _react.forwardRef)(function (_
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  LozengeWrapper.displayName = 'LozengeWrapper';
+  LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
 }
 var RightIconPositionWrapper = exports.RightIconPositionWrapper = (0, _react.forwardRef)(function (_ref5, __cmplr) {
   var _ref5$as = _ref5.as,
@@ -122,11 +125,12 @@ var RightIconPositionWrapper = exports.RightIconPositionWrapper = (0, _react.for
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
   RightIconPositionWrapper.displayName = 'RightIconPositionWrapper';
 }
-var IconPositionWrapper = exports.IconPositionWrapper = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+var IconPositionWrapperOldVisualRefresh = exports.IconPositionWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref6, __cmplr) {
   var _ref6$as = _ref6.as,
     C = _ref6$as === void 0 ? "span" : _ref6$as,
     __cmpls = _ref6.style,
@@ -138,11 +142,12 @@ var IconPositionWrapper = exports.IconPositionWrapper = (0, _react.forwardRef)(f
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 if (process.env.NODE_ENV !== 'production') {
-  IconPositionWrapper.displayName = 'IconPositionWrapper';
+  IconPositionWrapperOldVisualRefresh.displayName = 'IconPositionWrapperOldVisualRefresh';
 }
-var IconEmptyWrapper = exports.IconEmptyWrapper = (0, _react.forwardRef)(function (_ref7, __cmplr) {
+var IconEmptyWrapperOldVisualRefresh = exports.IconEmptyWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref7, __cmplr) {
   var _ref7$as = _ref7.as,
     C = _ref7$as === void 0 ? "span" : _ref7$as,
     __cmpls = _ref7.style,
@@ -155,14 +160,16 @@ var IconEmptyWrapper = exports.IconEmptyWrapper = (0, _react.forwardRef)(functio
 });
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // To achieve same result we use classname instead.
 if (process.env.NODE_ENV !== 'production') {
-  IconEmptyWrapper.displayName = 'IconEmptyWrapper';
+  IconEmptyWrapperOldVisualRefresh.displayName = 'IconEmptyWrapperOldVisualRefresh';
 }
-var TitleWrapperClassName = exports.TitleWrapperClassName = 'smart-link-title-wrapper';
+var TitleWrapperClassNameOldVisualRefresh = exports.TitleWrapperClassNameOldVisualRefresh = 'smart-link-title-wrapper';
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-empty-styled-expression -- Ignored via go/DSP-18766
-var TitleWrapper = exports.TitleWrapper = (0, _react.forwardRef)(function (_ref8, __cmplr) {
+var TitleWrapperOldVisualRefresh = exports.TitleWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref8, __cmplr) {
   var _ref8$as = _ref8.as,
     C = _ref8$as === void 0 ? "span" : _ref8$as,
     __cmpls = _ref8.style,
@@ -174,5 +181,5 @@ var TitleWrapper = exports.TitleWrapper = (0, _react.forwardRef)(function (_ref8
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  TitleWrapper.displayName = 'TitleWrapper';
+  TitleWrapperOldVisualRefresh.displayName = 'TitleWrapperOldVisualRefresh';
 }

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -12,6 +12,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _HoverCard = require("../../HoverCard");
 var _Frame = require("../Frame");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
@@ -32,7 +33,8 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         return null;
       }
       var appearance = lozenge.appearance || 'default';
-      return /*#__PURE__*/_react.default.createElement(_styled.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      var LozengeWrapper = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? _IconAndTitleLayout.LozengeWrapper : _styled.LozengeWrapperOldVisualRefresh;
+      return /*#__PURE__*/_react.default.createElement(LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         testId: "inline-card-resolved-view-lozenge",
         appearance: appearance
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766