@atlaskit/smart-card 34.7.0 → 34.8.0

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

@@ -1,30 +1,33 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.0 */
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["as", "style"],
-  _excluded2 = ["as", "style"];
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["rightSideSpacer"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"];
 import "./index.compiled.css";
 import { forwardRef } from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
 import { di } from 'react-magnetic-di';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { Icon, Shimmer } from '../Icon';
-import { LinkAppearance as LinkAppearanceOld, NoLinkAppearance as NoLinkAppearanceOld } from '../styled-emotion';
-import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconTitleWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh, TitleWrapperOldVisualRefresh } from './styled';
-import { EmojiWrapper as EmojiWrapperOld, IconEmptyWrapper as IconEmptyWrapperOld, IconPositionWrapper as IconPositionWrapperOld, IconTitleWrapper as IconTitleWrapperOld, IconWrapper as IconWrapperOld, TitleWrapper as TitleWrapperOld } from './styled-emotion';
+import { IconAndTitleLayoutOld } from './IconAndTitleLayoutOld';
+import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh } from './styled';
+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 = forwardRef(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
@@ -56,94 +59,54 @@ var LinkAppearance = forwardRef(function (_ref2, __cmplr) {
 if (process.env.NODE_ENV !== 'production') {
   LinkAppearance.displayName = 'LinkAppearance';
 }
-export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
-  function IconAndTitleLayout() {
-    var _this;
-    _classCallCheck(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));
-    _defineProperty(_this, "handleClick", function (event) {
-      var onClick = _this.props.onClick;
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    _defineProperty(_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;
-  }
-  _inherits(IconAndTitleLayout, _React$Component);
-  return _createClass(IconAndTitleLayout, [{
-    key: "renderAtlaskitIcon",
-    value: function renderAtlaskitIcon() {
-      var _this$props = this.props,
-        icon = _this$props.icon,
-        emoji = _this$props.emoji;
-      if (emoji) {
-        if (fg('platform-linking-visual-refresh-v1')) {
-          return /*#__PURE__*/React.createElement(Box, {
-            as: "span",
-            xcss: iconWrapperStyle,
-            testId: "icon-position-emoji-wrapper"
-          }, emoji);
-        }
-        return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji) : /*#__PURE__*/React.createElement(EmojiWrapperOld, 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.useCallback(function () {
+    if (emoji) {
       if (fg('platform-linking-visual-refresh-v1')) {
         return /*#__PURE__*/React.createElement(Box, {
           as: "span",
-          xcss: iconWrapperStyle,
-          testId: "icon-atlaskit-icon-wrapper"
-        }, icon);
+          xcss: styles.iconWrapperStyle,
+          testId: "icon-position-emoji-wrapper"
+        }, emoji);
       }
-      return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon) : /*#__PURE__*/React.createElement(IconWrapperOld, null, icon);
+      return /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji);
     }
-  }, {
-    key: "renderImageIcon",
-    value: function renderImageIcon(errored, testId) {
-      var url = this.props.icon;
-      if (!url || typeof url !== 'string') {
-        return null;
-      }
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(ImageLoader, {
-          src: url,
-          loaded: /*#__PURE__*/React.createElement("img", {
-            src: url,
-            "data-testid": "".concat(testId, "-image"),
-            alt: "",
-            className: ax(["_1bsb1osq"])
-          }),
-          errored: errored,
-          loading: /*#__PURE__*/React.createElement(Shimmer, {
-            testId: "".concat(testId, "-loading")
-          })
-        });
-      }
+    if (!icon || typeof icon === 'string') {
+      return null;
+    }
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement(Box, {
+        as: "span",
+        xcss: styles.iconWrapperStyle,
+        testId: "icon-atlaskit-icon-wrapper"
+      }, icon);
+    }
+    return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon);
+  }, [emoji, icon]);
+  var renderImageIcon = React.useCallback(function (errored, testId) {
+    if (!icon || typeof icon !== 'string') {
+      return null;
+    }
+    if (fg('platform-linking-visual-refresh-v1')) {
       return /*#__PURE__*/React.createElement(ImageLoader, {
-        src: url,
-        loaded: /*#__PURE__*/React.createElement(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.createElement("img", {
+          src: icon,
+          "data-testid": "".concat(testId, "-image"),
+          alt: "",
+          className: ax(["_1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/React.createElement(Shimmer, {
@@ -151,207 +114,189 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         })
       });
     }
-  }, {
-    key: "renderIconPlaceholder",
-    value: function renderIconPlaceholder(testId) {
-      var defaultIcon = this.props.defaultIcon;
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
-          label: "link",
-          LEGACY_size: "small",
-          testId: "".concat(testId, "-default"),
-          color: "currentColor"
-        });
-      }
-      if (defaultIcon) {
-        return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, defaultIcon);
-      }
-      return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(LinkIcon, {
+    return /*#__PURE__*/React.createElement(ImageLoader, {
+      src: icon
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      loaded: /*#__PURE__*/React.createElement(Icon, {
+        className: "smart-link-icon",
+        src: icon,
+        "data-testid": "".concat(testId, "-image")
+      }),
+      errored: errored,
+      loading: /*#__PURE__*/React.createElement(Shimmer, {
+        testId: "".concat(testId, "-loading")
+      })
+    });
+  }, [icon]);
+  var renderIconPlaceholder = React.useCallback(function (testId) {
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return defaultIcon || /*#__PURE__*/React.createElement(LinkIcon, {
         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 (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(Box, {
-          as: "span",
-          xcss: iconWrapperStyle,
-          testId: "".concat(testId, "-image-wrapper")
-        }, image || placeholder);
-      }
-      return image || placeholder;
+    if (defaultIcon) {
+      return /*#__PURE__*/React.createElement(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 = fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: iconOuterWrapperStyle,
-        testId: "icon-position-wrapper"
-      }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: iconEmptyStyle,
-        testId: "icon-empty-wrapper"
-      }), this.renderIcon(testId))) : /*#__PURE__*/React.createElement(IconPositionWrapperOldVisualRefresh, {
-        "data-testid": "icon-position-wrapper"
-      }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOldVisualRefresh, {
-        "data-testid": "icon-empty-wrapper"
-      }), this.renderIcon(testId))), fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, _extends({
+    return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(LinkIcon, {
+      label: "link",
+      LEGACY_size: "small",
+      testId: "".concat(testId, "-default"),
+      color: "currentColor"
+    }));
+  }, [defaultIcon]);
+  var renderIcon = React.useCallback(function (testId) {
+    var icon = renderAtlaskitIcon();
+    if (icon) {
+      return icon;
+    }
+    var placeholder = renderIconPlaceholder(testId);
+    var image = renderImageIcon(placeholder, testId);
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement(Box, {
         as: "span",
-        style: {
-          color: this.props.titleTextColor
-        }
-      }, !fg('platform-linking-visual-refresh-v1') ? {
-        className: TitleWrapperClassNameOldVisualRefresh
-      } : {}), title) : /*#__PURE__*/React.createElement(TitleWrapperOldVisualRefresh, _extends({
-        style: {
-          color: this.props.titleTextColor
-        }
-      }, !fg('platform-linking-visual-refresh-v1') ? {
-        className: TitleWrapperClassNameOldVisualRefresh
-      } : {}), title)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapperOld, {
-        "data-testid": "icon-position-wrapper"
-      }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOld, {
-        "data-testid": "icon-empty-wrapper"
-      }), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapperOld
-      // 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: TitleWrapperClassNameOldVisualRefresh
-      }, title));
-      if (fg('bandicoots-compiled-migration-smartcard')) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(IconTitleWrapper, {
-          style: {
-            color: this.props.titleColor
-          },
-          testId: testId
-        }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-          href: link,
-          onClick: this.handleClick,
-          onKeyPress: this.handleKeyPress
-        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
-          as: "span",
-          xcss: noLinkAppearanceStyle
-        }, rightSide) : null) : /*#__PURE__*/React.createElement(IconTitleWrapperOldVisualRefresh, {
-          style: {
-            color: this.props.titleColor
-          },
-          "data-testid": testId
-        }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-          href: link,
-          onClick: this.handleClick,
-          onKeyPress: this.handleKeyPress
-        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.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.createElement(IconTitleWrapperOld, {
-            style: {
-              color: titleColor
-            },
-            "data-testid": testId
-          }, link ? /*#__PURE__*/React.createElement(LinkAppearanceOld, {
-            href: link,
-            onClick: this.handleClick,
-            onKeyPress: this.handleKeyPress
-          }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOld, null, rightSide) : null)
-        );
-      }
+        xcss: styles.iconWrapperStyle,
+        testId: "".concat(testId, "-image-wrapper")
+      }, image || placeholder);
     }
-  }]);
-}(React.Component);
-_defineProperty(IconAndTitleLayout, "defaultProps", {
-  rightSideSpacer: true
-});
-export var IconTitleWrapper = function IconTitleWrapper(props) {
-  return /*#__PURE__*/React.createElement(Box, _extends({
+    return image || placeholder;
+  }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
+  var handleClick = React.useCallback(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleKeyPress = React.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.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: iconTitleWrapperStyle
-  }, props));
-};
-export var LozengeWrapper = function LozengeWrapper(props) {
-  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.iconOuterWrapperStyle,
+    testId: "icon-position-wrapper"
+  }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconEmptyStyle,
+    testId: "icon-empty-wrapper"
+  }), renderIcon(testId))) : /*#__PURE__*/React.createElement(IconPositionWrapperOldVisualRefresh, {
+    "data-testid": "icon-position-wrapper"
+  }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOldVisualRefresh, {
+    "data-testid": "icon-empty-wrapper"
+  }), renderIcon(testId))), fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    style: {
+      color: titleTextColor
+    }
+  }, !fg('platform-linking-visual-refresh-v1') ? {
+    className: TitleWrapperClassNameOldVisualRefresh
+  } : {}), title) : /*#__PURE__*/React.createElement("span", _extends({
+    style: {
+      color: titleTextColor
+    }
+  }, !fg('platform-linking-visual-refresh-v1') ? {
+    className: TitleWrapperClassNameOldVisualRefresh
+  } : {}), title));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(IconTitleWrapper, {
+    style: {
+      color: titleColor
+    },
+    testId: testId
+  }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+    href: link,
+    onClick: handleClick,
+    onKeyPress: handleKeyPress
+  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: lozengeWrapperStyle
-  }, /*#__PURE__*/React.createElement(Box, _extends({
-    xcss: lozengeInternalWrapperStyle
-  }, props)));
+    xcss: styles.noLinkAppearanceStyle
+  }, rightSide) : null) : /*#__PURE__*/React.createElement(IconTitleWrapperOldVisualRefresh, {
+    style: {
+      color: titleColor
+    },
+    "data-testid": testId
+  }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+    href: link,
+    onClick: handleClick,
+    onKeyPress: handleKeyPress
+  }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOldVisualRefresh, null, rightSide) : null));
 };
-var lozengeInternalWrapperStyle = xcss({
-  paddingBottom: 'space.025'
-});
-var lozengeWrapperStyle = 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 = xcss({
-  width: iconWidth,
-  display: 'inline-block',
-  opacity: 0
-});
-var iconOuterWrapperStyle = xcss({
-  marginRight: 'space.050',
-  display: 'inline-block',
-  position: 'relative'
-});
-var iconTitleWrapperStyle = xcss({
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-all',
-  boxDecorationBreak: 'clone',
-  paddingTop: verticalPadding,
-  paddingRight: horizontalPadding,
-  paddingBottom: verticalPadding,
-  paddingLeft: horizontalPadding
+export var IconAndTitleLayout = function IconAndTitleLayout(_ref4) {
+  var _ref4$rightSideSpacer = _ref4.rightSideSpacer,
+    rightSideSpacer = _ref4$rightSideSpacer === void 0 ? true : _ref4$rightSideSpacer,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(IconAndTitleLayoutNew, _extends({
+      rightSideSpacer: rightSideSpacer
+    }, props));
+  }
+  return /*#__PURE__*/React.createElement(IconAndTitleLayoutOld, _extends({
+    rightSideSpacer: rightSideSpacer
+  }, props));
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var IconTitleWrapperOldVisualRefresh = forwardRef(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "span" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = _objectWithoutProperties(_ref5, _excluded4);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", __cmplp.className])
+  }));
 });
-var iconWrapperStyle = 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';
+}
+export var IconTitleWrapper = function IconTitleWrapper(props) {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: "span",
+      xcss: styles.iconTitleWrapperStyle
+    }, props));
+  }
+  // note: This is just to get the types to work due to compiled css weirdness.
+  return /*#__PURE__*/React.createElement(IconTitleWrapperOldVisualRefresh, props);
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var LozengeWrapperOldVisualRefresh = forwardRef(function (_ref6, __cmplr) {
+  var _ref6$as = _ref6.as,
+    C = _ref6$as === void 0 ? "span" : _ref6$as,
+    __cmpls = _ref6.style,
+    __cmplp = _objectWithoutProperties(_ref6, _excluded5);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o", __cmplp.className])
+  }));
 });
-var iconImageStyle = null;
-var noLinkAppearanceStyle = xcss({
-  color: 'color.text.subtlest',
-  font: 'font.body',
-  marginLeft: 'space.050'
-});
+if (process.env.NODE_ENV !== 'production') {
+  LozengeWrapperOldVisualRefresh.displayName = 'LozengeWrapperOldVisualRefresh';
+}
+export var LozengeWrapper = function LozengeWrapper(props) {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.lozengeWrapperStyle
+    }, /*#__PURE__*/React.createElement(Box, _extends({
+      xcss: styles.lozengeInternalWrapperStyle
+    }, props)));
+  }
+  // note: This is just to get the types to work due to compiled css weirdness.
+  return /*#__PURE__*/React.createElement(LozengeWrapperOldVisualRefresh, props);
+};
+var iconImageStyle = null;

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

@@ -84,4 +84,14 @@ export var IconEmptyWrapper = styled.span({
 export var 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
-export var TitleWrapper = styled.span({});
+export var TitleWrapper = styled.span({});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled
+export var LozengeWrapperOldVisualRefreshNotCompiled = styled.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  marginTop: 0,
+  marginRight: "var(--ds-space-050, 4px)",
+  marginBottom: 0,
+  marginLeft: "var(--ds-space-025, 2px)"
+});

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

@@ -7,11 +7,9 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import Lozenge from '@atlaskit/lozenge';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
-import { IconAndTitleLayout, LozengeWrapper as LozengeWrapperNew } from '../IconAndTitleLayout';
-import { LozengeWrapperOldVisualRefresh } from '../IconAndTitleLayout/styled';
+import { IconAndTitleLayout, LozengeWrapper } from '../IconAndTitleLayout';
 export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
   function InlineCardResolvedView() {
     _classCallCheck(this, InlineCardResolvedView);
@@ -26,7 +24,6 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         return null;
       }
       var appearance = lozenge.appearance || 'default';
-      var LozengeWrapper = fg('platform-linking-visual-refresh-v1') ? LozengeWrapperNew : LozengeWrapperOldVisualRefresh;
       return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
         testId: "inline-card-resolved-view-lozenge",
         appearance: appearance