@atlaskit/smart-card 34.7.0 → 34.8.0

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,13 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineCardForbiddenView = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
@@ -19,191 +17,143 @@ var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locke
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 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 _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");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
-var _styled = require("../IconAndTitleLayout/styled");
-var _styled2 = require("../styled");
-var _styledEmotion = require("../styled-emotion");
+var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
-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 iconWrapperStyles = (0, _primitives.xcss)({
-  marginRight: 'space.negative.025'
-});
+var _InlineCardForbiddenViewOld = require("./InlineCardForbiddenViewOld");
+var styles = {
+  iconWrapper: "_2hwx1i6y",
+  actionButtonLozengeStyle: "_1yt4ze3t _bfhksm61"
+};
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
-  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
-    return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
-      label: "error",
-      color: "var(--ds-icon-danger, #C9372C)",
-      LEGACY_fallbackIcon: _lockFilled.default,
-      LEGACY_size: "small",
-      testId: "forbidden-view-fallback-icon"
-    })) : /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
-      label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
-      testId: "forbidden-view-fallback-icon"
-    }));
-  } else {
-    return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
-      label: "error",
-      color: "var(--ds-icon-danger, #C9372C)",
-      LEGACY_fallbackIcon: _lockFilled.default,
-      LEGACY_size: "small",
-      testId: "forbidden-view-fallback-icon"
-    })) : /*#__PURE__*/_react.default.createElement(_IconEmotion.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
-      label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
-      testId: "forbidden-view-fallback-icon"
-    }));
-  }
+  return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+    label: "error",
+    color: "var(--ds-icon-danger, #C9372C)",
+    LEGACY_fallbackIcon: _lockFilled.default,
+    LEGACY_size: "small",
+    testId: "forbidden-view-fallback-icon"
+  })) : /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+    label: "error",
+    size: "small",
+    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
+    testId: "forbidden-view-fallback-icon"
+  }));
 };
-var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
-  function InlineCardForbiddenView() {
-    var _this$props;
-    var _this;
-    (0, _classCallCheck2.default)(this, InlineCardForbiddenView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var InlineCardForbiddenViewNew = function InlineCardForbiddenViewNew(_ref) {
+  var url = _ref.url,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-forbidden-view' : _ref$testId,
+    truncateInline = _ref.truncateInline,
+    requestAccessContext = _ref.requestAccessContext,
+    onAuthorise = _ref.onAuthorise,
+    context = _ref.context,
+    showHoverPreview = _ref.showHoverPreview;
+  var frameRef = _react.default.useRef(null);
+  var _React$useState = _react.default.useState(!!(requestAccessContext !== null && requestAccessContext !== void 0 && requestAccessContext.callToActionMessageKey)),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
+    hasRequestAccessContextMessage = _React$useState2[0];
+  var handleRetry = _react.default.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (onAuthorise) {
+      onAuthorise();
+    } else {
+      var _requestAccessContext;
+      requestAccessContext === null || requestAccessContext === void 0 || (_requestAccessContext = requestAccessContext.action) === null || _requestAccessContext === void 0 || _requestAccessContext.promise();
     }
-    _this = _callSuper(this, InlineCardForbiddenView, [].concat(args));
-    (0, _defineProperty2.default)(_this, "frameRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)(_this, "state", {
-      hasRequestAccessContextMessage: !!((_this$props = _this.props) !== null && _this$props !== void 0 && (_this$props = _this$props.requestAccessContext) !== null && _this$props !== void 0 && _this$props.callToActionMessageKey)
-    });
-    (0, _defineProperty2.default)(_this, "handleRetry", function (event) {
-      var onAuthorise = _this.props.onAuthorise;
-      event.preventDefault();
-      event.stopPropagation();
-      if (onAuthorise) {
-        onAuthorise();
-      } else {
-        var _this$props2;
-        (_this$props2 = _this.props) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.requestAccessContext) === null || _this$props2 === void 0 || (_this$props2 = _this$props2.action) === null || _this$props2 === void 0 || _this$props2.promise();
-      }
-    });
-    (0, _defineProperty2.default)(_this, "renderForbiddenAccessMessage", function () {
-      var _this$props3;
-      if ((_this$props3 = _this.props) !== null && _this$props3 !== void 0 && (_this$props3 = _this$props3.requestAccessContext) !== null && _this$props3 !== void 0 && _this$props3.callToActionMessageKey) {
-        var callToActionMessageKey = _this.props.requestAccessContext.callToActionMessageKey;
-        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[callToActionMessageKey], {
-          values: {
-            product: _this.props.context
-          }
-        }));
-      }
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.invalid_permissions, function (formattedMessage) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedMessage);
+  }, [onAuthorise, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.action]);
+  var renderForbiddenAccessMessage = _react.default.useCallback(function () {
+    if (requestAccessContext !== null && requestAccessContext !== void 0 && requestAccessContext.callToActionMessageKey) {
+      var callToActionMessageKey = requestAccessContext.callToActionMessageKey;
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[callToActionMessageKey], {
+        values: {
+          product: context
+        }
       }));
+    }
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.invalid_permissions, function (formattedMessage) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedMessage);
     });
-    (0, _defineProperty2.default)(_this, "renderActionButton", function () {
-      var _this$props$requestAc;
-      var onAuthorise = _this.props.onAuthorise;
-      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')) {
-          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.IconStyledButtonOldVisualRefresh,
-            testId: "button-connect-other-account",
-            role: "button",
-            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-          }, _this.renderForbiddenAccessMessage());
-        } else {
-          return /*#__PURE__*/_react.default.createElement(Button, {
-            spacing: "none",
-            onClick: _this.handleRetry,
-            component: _styledEmotion.IconStyledButton,
-            testId: "button-connect-other-account",
-            role: "button",
-            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-          }, _this.renderForbiddenAccessMessage());
-        }
-      }
-      if (onAuthorise) {
-        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())));
-        }
+  }, [context, requestAccessContext]);
+  var renderActionButton = _react.default.useCallback(function () {
+    var Button = (0, _withFrameStyleControl.default)(_button.default, frameRef);
+    var accessType = requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.accessType;
+    if (hasRequestAccessContextMessage) {
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        var isDisabled = accessType === 'PENDING_REQUEST_EXISTS';
         return /*#__PURE__*/_react.default.createElement(Button, {
-          spacing: "none",
-          onClick: _this.handleRetry,
-          appearance: "subtle-link",
+          onClick: handleRetry,
+          component: _actionButton.ActionButton,
           testId: "button-connect-other-account",
-          role: "button"
-        }, /*#__PURE__*/_react.default.createElement(LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
-          appearance: 'moved'
-        }, _this.renderForbiddenAccessMessage())));
+          isDisabled: isDisabled
+        }, renderForbiddenAccessMessage());
       }
-      return null;
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(InlineCardForbiddenView, _React$Component);
-  return (0, _createClass2.default)(InlineCardForbiddenView, [{
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props,
-        url = _this$props4.url,
-        icon = _this$props4.icon,
-        onClick = _this$props4.onClick,
-        isSelected = _this$props4.isSelected,
-        _this$props4$testId = _this$props4.testId,
-        testId = _this$props4$testId === void 0 ? 'inline-card-forbidden-view' : _this$props4$testId,
-        truncateInline = _this$props4.truncateInline;
-      var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
-        testId: testId,
-        isSelected: isSelected,
-        ref: this.frameRef,
-        truncateInline: truncateInline
-      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
-        icon: icon ? icon : fallbackForbiddenIcon(),
-        link: url,
-        title: url,
-        onClick: onClick,
-        titleColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
-      }), this.renderActionButton());
-      if (this.props.showHoverPreview) {
-        return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
-          url: url
-        }, content);
+      return /*#__PURE__*/_react.default.createElement(Button, {
+        spacing: "none",
+        onClick: handleRetry,
+        component: _styled.IconStyledButtonOldVisualRefresh,
+        testId: "button-connect-other-account",
+        role: "button",
+        isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+      }, renderForbiddenAccessMessage());
+    }
+    if (onAuthorise) {
+      if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+          xcss: styles.actionButtonLozengeStyle,
+          onClick: handleRetry,
+          testId: "button-connect-other-account"
+        }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+          appearance: 'moved'
+        }, renderForbiddenAccessMessage())));
       }
-      return content;
+      return /*#__PURE__*/_react.default.createElement(Button, {
+        spacing: "none",
+        onClick: handleRetry,
+        appearance: "subtle-link",
+        testId: "button-connect-other-account",
+        role: "button"
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+        appearance: 'moved'
+      }, renderForbiddenAccessMessage())));
     }
-  }]);
-}(_react.default.Component);
-var actionButtonLozengeStyle = (0, _primitives.xcss)({
-  backgroundColor: 'color.background.neutral.subtle',
-  padding: 'space.0'
-});
+    return null;
+  }, [handleRetry, hasRequestAccessContextMessage, onAuthorise, renderForbiddenAccessMessage, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.accessType]);
+  var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+    testId: testId,
+    isSelected: isSelected,
+    ref: frameRef,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+    icon: icon ? icon : fallbackForbiddenIcon(),
+    link: url,
+    title: url,
+    onClick: onClick,
+    titleColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+  }), renderActionButton());
+  if (showHoverPreview) {
+    return /*#__PURE__*/_react.default.createElement(_HoverCard.HoverCard, {
+      url: url
+    }, content);
+  }
+  return content;
+};
+var InlineCardForbiddenView = exports.InlineCardForbiddenView = function InlineCardForbiddenView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(InlineCardForbiddenViewNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_InlineCardForbiddenViewOld.InlineCardForbiddenViewOld, props);
+};

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

@@ -0,0 +1 @@
+._1bsb1osq{width:100%}

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

@@ -0,0 +1,226 @@
+/* IconAndTitleLayoutOld.tsx generated by @compiled/babel-plugin v0.36.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconAndTitleLayoutOld = void 0;
+require("./IconAndTitleLayoutOld.compiled.css");
+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 _react = _interopRequireDefault(require("react"));
+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 _Icon = require("../Icon");
+var _styledEmotion = require("../styled-emotion");
+var _styled = require("./styled");
+var _styledEmotion2 = require("./styled-emotion");
+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 IconAndTitleLayoutOld = exports.IconAndTitleLayoutOld = /*#__PURE__*/function (_React$Component) {
+  function IconAndTitleLayoutOld() {
+    var _this;
+    (0, _classCallCheck2.default)(this, IconAndTitleLayoutOld);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, IconAndTitleLayoutOld, [].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)(IconAndTitleLayoutOld, _React$Component);
+  return (0, _createClass2.default)(IconAndTitleLayoutOld, [{
+    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;
+      }
+      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",
+    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")
+          })
+        });
+      }
+      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")
+        }),
+        errored: errored,
+        loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
+          testId: "".concat(testId, "-loading")
+        })
+      });
+    }
+  }, {
+    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, {
+        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;
+    }
+  }, {
+    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 = /*#__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));
+      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)
+      );
+    }
+  }]);
+}(_react.default.Component);
+(0, _defineProperty2.default)(IconAndTitleLayoutOld, "defaultProps", {
+  rightSideSpacer: true
+});
+var iconWidth = '16px';
+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;

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

@@ -1,7 +1,36 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._154ize3t{top:var(--ds-space-0,0)}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._1e0c1o8l{display:inline-block}
+._1ltvze3t{left:var(--ds-space-0,0)}
+._1nmz9jpi{word-break:break-all}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._94n5ze3t{bottom:var(--ds-space-0,0)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721jtm{white-space:pre-wrap}
+._otyridpf{margin-bottom:0}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._s7n4t94y{vertical-align:1px}
+._s7n4yfq0{vertical-align:bottom}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
+._tzy4idpf{opacity:0}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchhusvi{box-sizing:border-box}
 ._1bnxglyw:hover{text-decoration-line:none}
 ._9oik18uv:hover{text-decoration-color:initial}
 ._jf4cnqa1:hover{text-decoration-style:solid}