@atlaskit/smart-card 34.7.0 → 34.9.0

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

@@ -10,30 +10,33 @@ exports.LozengeWrapper = exports.IconTitleWrapper = exports.IconAndTitleLayout =
 require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-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 _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _Icon = require("../Icon");
-var _styledEmotion = require("../styled-emotion");
+var _IconAndTitleLayoutOld = require("./IconAndTitleLayoutOld");
 var _styled = require("./styled");
-var _styledEmotion2 = require("./styled-emotion");
 var _excluded = ["as", "style"],
-  _excluded2 = ["as", "style"];
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["rightSideSpacer"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _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; })(); }
+var styles = {
+  lozengeInternalWrapperStyle: "_n3tdv77o",
+  lozengeWrapperStyle: "_1e0c1o8l _s7n4yfq0 _19pkze3t _2hwx1b66 _otyrze3t _18u0v77o",
+  iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
+  iconOuterWrapperStyle: "_2hwx1b66 _1e0c1o8l _kqswh2mm",
+  iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
+  iconWrapperStyle: "_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
+  noLinkAppearanceStyle: "_11c81oud _syaz131l _18u01b66"
+};
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
 var NoLinkAppearanceOldVisualRefresh = (0, _react.forwardRef)(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
@@ -65,94 +68,54 @@ var LinkAppearance = (0, _react.forwardRef)(function (_ref2, __cmplr) {
 if (process.env.NODE_ENV !== 'production') {
   LinkAppearance.displayName = 'LinkAppearance';
 }
-var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
-  function IconAndTitleLayout() {
-    var _this;
-    (0, _classCallCheck2.default)(this, IconAndTitleLayout);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, IconAndTitleLayout, [].concat(args));
-    (0, _defineProperty2.default)(_this, "handleClick", function (event) {
-      var onClick = _this.props.onClick;
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    (0, _defineProperty2.default)(_this, "handleKeyPress", function (event) {
-      var onClick = _this.props.onClick;
-      if (event.key !== ' ' && event.key !== 'Enter') {
-        return;
-      }
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(IconAndTitleLayout, _React$Component);
-  return (0, _createClass2.default)(IconAndTitleLayout, [{
-    key: "renderAtlaskitIcon",
-    value: function renderAtlaskitIcon() {
-      var _this$props = this.props,
-        icon = _this$props.icon,
-        emoji = _this$props.emoji;
-      if (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;
-      }
+var IconAndTitleLayoutNew = function IconAndTitleLayoutNew(_ref3) {
+  var icon = _ref3.icon,
+    emoji = _ref3.emoji,
+    defaultIcon = _ref3.defaultIcon,
+    onClick = _ref3.onClick,
+    children = _ref3.children,
+    title = _ref3.title,
+    titleColor = _ref3.titleColor,
+    titleTextColor = _ref3.titleTextColor,
+    link = _ref3.link,
+    rightSide = _ref3.rightSide,
+    _ref3$testId = _ref3.testId,
+    testId = _ref3$testId === void 0 ? 'inline-card-icon-and-title' : _ref3$testId;
+  var renderAtlaskitIcon = _react.default.useCallback(function () {
+    if (emoji) {
       if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+        return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
           as: "span",
-          xcss: iconWrapperStyle,
-          testId: "icon-atlaskit-icon-wrapper"
-        }, icon);
+          xcss: styles.iconWrapperStyle,
+          testId: "icon-position-emoji-wrapper"
+        }, emoji);
       }
-      return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, icon) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconWrapper, null, icon);
+      return /*#__PURE__*/_react.default.createElement(_styled.EmojiWrapperOldVisualRefresh, null, emoji);
     }
-  }, {
-    key: "renderImageIcon",
-    value: function renderImageIcon(errored, testId) {
-      var url = this.props.icon;
-      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")
-          })
-        });
-      }
+    if (!icon || typeof icon === 'string') {
+      return null;
+    }
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        as: "span",
+        xcss: styles.iconWrapperStyle,
+        testId: "icon-atlaskit-icon-wrapper"
+      }, icon);
+    }
+    return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, icon);
+  }, [emoji, icon]);
+  var renderImageIcon = _react.default.useCallback(function (errored, testId) {
+    if (!icon || typeof icon !== '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(_Icon.Icon
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        , {
-          className: "smart-link-icon",
-          src: url,
-          "data-testid": "".concat(testId, "-image")
+        src: icon,
+        loaded: /*#__PURE__*/_react.default.createElement("img", {
+          src: icon,
+          "data-testid": "".concat(testId, "-image"),
+          alt: "",
+          className: (0, _runtime.ax)(["_1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
@@ -160,207 +123,189 @@ 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.IconWrapperOldVisualRefresh, null, defaultIcon);
-      }
-      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, /*#__PURE__*/_react.default.createElement(_link.default, {
+    return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+      src: icon
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      loaded: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+        className: "smart-link-icon",
+        src: icon,
+        "data-testid": "".concat(testId, "-image")
+      }),
+      errored: errored,
+      loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
+        testId: "".concat(testId, "-loading")
+      })
+    });
+  }, [icon]);
+  var renderIconPlaceholder = _react.default.useCallback(function (testId) {
+    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"
-      }));
+      });
     }
-  }, {
-    key: "renderIcon",
-    value: function renderIcon(testId) {
-      // We render two kinds of icons here:
-      // - Image: acquired from either DAC or Teamwork Platform Apps;
-      // - Atlaskit Icon: an Atlaskit SVG;
-      // Each of these are scaled down to 12x12.
-      var icon = this.renderAtlaskitIcon();
-      if (icon) {
-        return icon;
-      }
-      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;
+    if (defaultIcon) {
+      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, defaultIcon);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        title = _this$props2.title,
-        titleColor = _this$props2.titleColor,
-        titleTextColor = _this$props2.titleTextColor,
-        link = _this$props2.link,
-        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, (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.IconEmptyWrapperOldVisualRefresh, {
-        "data-testid": "icon-empty-wrapper"
-      }), this.renderIcon(testId))), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, /*#__PURE__*/_react.default.createElement(_link.default, {
+      label: "link",
+      LEGACY_size: "small",
+      testId: "".concat(testId, "-default"),
+      color: "currentColor"
+    }));
+  }, [defaultIcon]);
+  var renderIcon = _react.default.useCallback(function (testId) {
+    var icon = renderAtlaskitIcon();
+    if (icon) {
+      return icon;
+    }
+    var placeholder = renderIconPlaceholder(testId);
+    var image = renderImageIcon(placeholder, testId);
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         as: "span",
-        style: {
-          color: this.props.titleTextColor
-        }
-      }, !(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"
-      }), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styledEmotion2.TitleWrapper
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      , {
-        style: {
-          color: titleTextColor
-        }
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: _styled.TitleWrapperClassNameOldVisualRefresh
-      }, title));
-      if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-        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__*/
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          _react.default.createElement(_styledEmotion2.IconTitleWrapper, {
-            style: {
-              color: titleColor
-            },
-            "data-testid": testId
-          }, link ? /*#__PURE__*/_react.default.createElement(_styledEmotion.LinkAppearance, {
-            href: link,
-            onClick: this.handleClick,
-            onKeyPress: this.handleKeyPress
-          }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styledEmotion.NoLinkAppearance, null, rightSide) : null)
-        );
-      }
+        xcss: styles.iconWrapperStyle,
+        testId: "".concat(testId, "-image-wrapper")
+      }, image || placeholder);
     }
-  }]);
-}(_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)({
+    return image || placeholder;
+  }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
+  var handleClick = _react.default.useCallback(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleKeyPress = _react.default.useCallback(function (event) {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
+    }
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+
+  // maybe consider memoising this after clean up
+  var titlePart = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
-    xcss: iconTitleWrapperStyle
-  }, props));
-};
-var LozengeWrapper = exports.LozengeWrapper = function LozengeWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: styles.iconOuterWrapperStyle,
+    testId: "icon-position-wrapper"
+  }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.iconEmptyStyle,
+    testId: "icon-empty-wrapper"
+  }), 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.IconEmptyWrapperOldVisualRefresh, {
+    "data-testid": "icon-empty-wrapper"
+  }), renderIcon(testId))), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
     as: "span",
-    xcss: lozengeWrapperStyle
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
-    xcss: lozengeInternalWrapperStyle
-  }, props)));
+    style: {
+      color: titleTextColor
+    }
+  }, !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
+    className: _styled.TitleWrapperClassNameOldVisualRefresh
+  } : {}), title) : /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    style: {
+      color: titleTextColor
+    }
+  }, !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
+    className: _styled.TitleWrapperClassNameOldVisualRefresh
+  } : {}), title));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(IconTitleWrapper, {
+    style: {
+      color: titleColor
+    },
+    testId: testId
+  }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
+    href: link,
+    onClick: handleClick,
+    onKeyPress: handleKeyPress
+  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.noLinkAppearanceStyle
+  }, rightSide) : null) : /*#__PURE__*/_react.default.createElement(IconTitleWrapperOldVisualRefresh, {
+    style: {
+      color: titleColor
+    },
+    "data-testid": testId
+  }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
+    href: link,
+    onClick: handleClick,
+    onKeyPress: handleKeyPress
+  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(NoLinkAppearanceOldVisualRefresh, null, rightSide) : null));
 };
-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 IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayout(_ref4) {
+  var _ref4$rightSideSpacer = _ref4.rightSideSpacer,
+    rightSideSpacer = _ref4$rightSideSpacer === void 0 ? true : _ref4$rightSideSpacer,
+    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(IconAndTitleLayoutNew, (0, _extends2.default)({
+      rightSideSpacer: rightSideSpacer
+    }, props));
+  }
+  return /*#__PURE__*/_react.default.createElement(_IconAndTitleLayoutOld.IconAndTitleLayoutOld, (0, _extends2.default)({
+    rightSideSpacer: rightSideSpacer
+  }, props));
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var IconTitleWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "span" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref5, _excluded4);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", __cmplp.className])
+  }));
 });
-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'
+if (process.env.NODE_ENV !== 'production') {
+  IconTitleWrapperOldVisualRefresh.displayName = 'IconTitleWrapperOldVisualRefresh';
+}
+var IconTitleWrapper = exports.IconTitleWrapper = function IconTitleWrapper(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+      as: "span",
+      xcss: styles.iconTitleWrapperStyle
+    }, props));
+  }
+  // note: This is just to get the types to work due to compiled css weirdness.
+  return /*#__PURE__*/_react.default.createElement(IconTitleWrapperOldVisualRefresh, props);
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var LozengeWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+  var _ref6$as = _ref6.as,
+    C = _ref6$as === void 0 ? "span" : _ref6$as,
+    __cmpls = _ref6.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref6, _excluded5);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o", __cmplp.className])
+  }));
 });
-var iconImageStyle = null;
-var noLinkAppearanceStyle = (0, _primitives.xcss)({
-  color: 'color.text.subtlest',
-  font: 'font.body',
-  marginLeft: 'space.050'
-});
+if (process.env.NODE_ENV !== 'production') {
+  LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
+}
+var LozengeWrapper = exports.LozengeWrapper = function LozengeWrapper(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.lozengeWrapperStyle
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
+      xcss: styles.lozengeInternalWrapperStyle
+    }, props)));
+  }
+  // note: This is just to get the types to work due to compiled css weirdness.
+  return /*#__PURE__*/_react.default.createElement(LozengeWrapperOldVisualRefresh, props);
+};
+var iconImageStyle = null;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapperOldVisualRefreshNotCompiled = exports.LozengeWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -92,4 +92,14 @@ var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span({
 var TitleWrapperClassName = exports.TitleWrapperClassName = 'smart-link-title-wrapper';
 
 // 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 = _styled.default.span({});
+var TitleWrapper = exports.TitleWrapper = _styled.default.span({});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled
+var LozengeWrapperOldVisualRefreshNotCompiled = exports.LozengeWrapperOldVisualRefreshNotCompiled = _styled.default.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  marginTop: 0,
+  marginRight: "var(--ds-space-050, 4px)",
+  marginBottom: 0,
+  marginLeft: "var(--ds-space-025, 2px)"
+});

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

@@ -12,11 +12,9 @@ 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");
-var _styled = require("../IconAndTitleLayout/styled");
 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; })(); }
 var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
@@ -33,8 +31,7 @@ var InlineCardResolvedView = exports.InlineCardResolvedView = /*#__PURE__*/funct
         return null;
       }
       var appearance = lozenge.appearance || '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, {
+      return /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.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