@atlaskit/smart-card 36.0.0 → 36.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 36.0.2
+
+### Patch Changes
+
+- [#128316](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128316)
+  [`8d94e427c61e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d94e427c61e0) -
+  [ux] Fix inline icon drop when word wrap left only icon on the first line (visual refresh)
+
+## 36.0.1
+
+### Patch Changes
+
+- [#128098](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128098)
+  [`2c7474b012df9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2c7474b012df9) -
+  Update slack help channel name
+- Updated dependencies
+
 ## 36.0.0
 
 ### Major Changes

package/compass.yml

@@ -10,9 +10,9 @@ links:
   - name: null
     type: REPOSITORY
     url: 'https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/linking-platform/smart-card/'
-  - name: '#linking-platform'
+  - name: '#help-twg-linking-platform'
     type: CHAT_CHANNEL
-    url: 'https://atlassian.slack.com/app_redirect?channel=linking-platform'
+    url: 'https://atlassian.enterprise.slack.com/archives/CFKGAQZRV'
   - name: ''
     type: ON_CALL
     url: 'https://atlassian.app.opsgenie.com/settings/schedule/detail/b9c8b313-dd6d-4a41-8eeb-d7a9df55be9d'
@@ -28,15 +28,5 @@ links:
 relationships: {}
 labels:
   - atlassian-platform
-customFields:
-  - name: Dev Owner
-    type: user
-    value: null
-  - name: Product
-    type: text
-    value: null
-  - name: Test
-    type: text
-    value: null
 # Learn more about formatting compass.yml:
 # https://go.atlassian.com/compass-yml-format

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.0.0"
+  packageVersion: "36.0.2"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,2 +1 @@
-._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -25,20 +25,16 @@ var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
 var styles = {
-  iconWrapper: "_2hwx1i6y",
-  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+  iconWrapper: "_2hwx1i6y"
 };
 var fallbackIcon = function fallbackIcon() {
   if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-      as: "span",
-      xcss: styles.fallbackIconWrapper
-    }, /*#__PURE__*/_react.default.createElement(_error.default, {
+    return /*#__PURE__*/_react.default.createElement(_error.default, {
       color: "var(--ds-icon-danger, #C9372C)",
       label: "error",
       LEGACY_size: "small",
       testId: "errored-view-default-icon"
-    }));
+    });
   }
   if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
     return /*#__PURE__*/_react.default.createElement(_compiled.Box, {

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

@@ -32,6 +32,15 @@ var styles = {
   actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
 };
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__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"
+    });
+  }
   return (0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.iconWrapper

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

@@ -1,6 +1,7 @@
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._154ize3t{top:var(--ds-space-0,0)}
+._2rkoyh40{border-radius:2px}
+._154i1ssb{top:50%}
 ._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)}
@@ -10,12 +11,11 @@
 ._1bsb7vkz{width:1pc}
 ._1e0c116y{display:inline-flex}
 ._1e0c1o8l{display:inline-block}
-._1ii71ule svg{display:block}
-._1ltvze3t{left:var(--ds-space-0,0)}
+._1ltv1ssb{left:50%}
 ._1nmz9jpi{word-break:break-all}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
-._4cvr1h6o{align-items:center}
-._94n5ze3t{bottom:var(--ds-space-0,0)}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
 ._c71l7vkz{max-height:1pc}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
@@ -23,14 +23,15 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721jtm{white-space:pre-wrap}
 ._otyridpf{margin-bottom:0}
+._p12f7vkz{max-width:1pc}
 ._s7n4t94y{vertical-align:1px}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
+._t9ec1ooe{transform:translate(-50%,-50%)}
 ._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}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}

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

@@ -26,12 +26,12 @@ var _excluded = ["as", "style"],
   _excluded4 = ["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; }
-var iconWrapperStyleSVG = null;
+var iconWrapperStyle = null;
+var iconImageStyle = null;
 var styles = {
-  iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
-  iconOuterWrapperStyle: "_2hwx1b66 _kqswh2mm",
+  iconEmptyStyle: "_1bsb7vkz _4t3i1osq _1e0c1o8l _tzy4idpf",
+  iconOuterWrapperStyle: "_1e0c1o8l _2hwx1b66 _kqswh2mm",
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
-  iconWrapperStyle: "_11c81o8v _kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
   linkStyle: "_2rkogqwt",
   noLinkAppearanceStyle: "_syaz131l _18u01b66"
 };
@@ -82,11 +82,7 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
   var renderAtlaskitIcon = _react.default.useCallback(function () {
     if (emoji) {
       if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-          as: "span",
-          xcss: styles.iconWrapperStyle,
-          testId: "icon-position-emoji-wrapper"
-        }, emoji);
+        return emoji;
       }
       return /*#__PURE__*/_react.default.createElement(_styled.EmojiWrapperOldVisualRefresh, null, emoji);
     }
@@ -94,10 +90,7 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
       return null;
     }
     if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        "data-testId": "icon-atlaskit-icon-wrapper",
-        className: (0, _runtime.ax)(["_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw _1ii71ule"])
-      }, icon);
+      return icon;
     }
     return /*#__PURE__*/_react.default.createElement(_styled.IconWrapperOldVisualRefresh, null, icon);
   }, [emoji, icon]);
@@ -112,7 +105,7 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
           src: icon,
           "data-testid": "".concat(testId, "-image"),
           alt: "",
-          className: (0, _runtime.ax)(["_c71l7vkz _1bsb1osq"])
+          className: (0, _runtime.ax)(["_c71l7vkz _p12f7vkz _1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/_react.default.createElement(_Icon.Shimmer, {
@@ -163,13 +156,6 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
     }
     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",
-        xcss: styles.iconWrapperStyle,
-        testId: "".concat(testId, "-image-wrapper")
-      }, image || placeholder);
-    }
     return image || placeholder;
   }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
   var handleClick = _react.default.useCallback(function (event) {
@@ -192,14 +178,24 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
 
   // 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",
+    as: "span"
+    // EDM-12119: This is set here to help with the positioning of the icon to be in the middle of inline display.
+    // We cannot set the fix font because inline is taking the parent container font size into account.
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    ,
+    style: {
+      lineHeight: "1"
+    },
     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, {
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    "data-testId": "icon-wrapper",
+    className: (0, _runtime.ax)(["_11c81o8v _2rkoyh40 _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
+  }, 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"
@@ -285,5 +281,4 @@ if (process.env.NODE_ENV !== 'production') {
 var LozengeWrapper = exports.LozengeWrapper = function LozengeWrapper(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/ResolvingView/index.compiled.css

@@ -0,0 +1,6 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1bah1h6o{justify-content:center}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,13 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineCardResolvingView = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _Frame = require("../Frame");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _styled = require("../IconAndTitleLayout/styled");
 var _styled2 = require("./styled");
+var styles = {
+  spinnerWrapper: "_11c81o8v _1e0c116y _4cvr1h6o _1bah1h6o _4t3i7vkz _1bsb7vkz"
+};
 var InlineCardResolvingView = exports.InlineCardResolvingView = function InlineCardResolvingView(_ref) {
   var url = _ref.url,
     onClick = _ref.onClick,
@@ -23,9 +30,12 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = function InlineC
     resolvingPlaceholder = _ref.resolvingPlaceholder,
     truncateInline = _ref.truncateInline;
   var renderSpinner = _react.default.useCallback(function () {
-    return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.spinnerWrapper
+    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
       size: 14
-    }) :
+    })) :
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     _react.default.createElement(_styled2.SpinnerWrapperOldVisualRefresh, {
@@ -50,7 +60,8 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = function InlineC
     link: url,
     truncateInline: truncateInline
   }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+    icon: (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? renderSpinner() : undefined,
     title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
     titleTextColor: titleTextColor
-  }, renderSpinner()));
+  }, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? undefined : renderSpinner()));
 };

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

@@ -1,2 +1 @@
-._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -27,20 +27,16 @@ var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _styled = require("../styled");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
 var styles = {
-  iconWrapper: "_2hwx1i6y",
-  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+  iconWrapper: "_2hwx1i6y"
 };
 var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
   if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-      as: "span",
-      xcss: styles.fallbackIconWrapper
-    }, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+    return /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
       color: "var(--ds-icon-danger, #C9372C)",
       label: "error",
       LEGACY_fallbackIcon: _lockFilled.default,
       LEGACY_size: "small"
-    }));
+    });
   }
   if ((0, _platformFeatureFlags.fg)('platform-smart-card-icon-migration')) {
     return /*#__PURE__*/_react.default.createElement(_compiled.Box, {

package/dist/cjs/view/InlineCard/common/action-button/index.compiled.css

@@ -2,7 +2,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
-._1nmz1hna{word-break:break-word}
+._1nmz9jpi{word-break:break-all}
 ._1y1m1u8q{background-clip:padding-box}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}

package/dist/cjs/view/InlineCard/common/action-button/index.js

@@ -19,7 +19,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 var styles = {
   button: "_1e0c1bgi",
-  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz1hna",
+  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
   disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
 };

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

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.0.0",
+  packageVersion: "36.0.2",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.0.0"
+  packageVersion: "36.0.2"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/InlineCard/ErroredView/index.compiled.css

@@ -1,2 +1 @@
-._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -18,20 +18,16 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 const styles = {
-  iconWrapper: "_2hwx1i6y",
-  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+  iconWrapper: "_2hwx1i6y"
 };
 const fallbackIcon = () => {
   if (fg('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.fallbackIconWrapper
-    }, /*#__PURE__*/React.createElement(ErrorIconCore, {
+    return /*#__PURE__*/React.createElement(ErrorIconCore, {
       color: "var(--ds-icon-danger, #C9372C)",
       label: "error",
       LEGACY_size: "small",
       testId: "errored-view-default-icon"
-    }));
+    });
   }
   if (fg('platform-smart-card-icon-migration')) {
     return /*#__PURE__*/React.createElement(Box, {

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

@@ -24,6 +24,15 @@ const styles = {
   actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
 };
 const fallbackForbiddenIcon = () => {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    });
+  }
   return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.iconWrapper

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

@@ -1,6 +1,7 @@
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._154ize3t{top:var(--ds-space-0,0)}
+._2rkoyh40{border-radius:2px}
+._154i1ssb{top:50%}
 ._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)}
@@ -10,12 +11,11 @@
 ._1bsb7vkz{width:1pc}
 ._1e0c116y{display:inline-flex}
 ._1e0c1o8l{display:inline-block}
-._1ii71ule svg{display:block}
-._1ltvze3t{left:var(--ds-space-0,0)}
+._1ltv1ssb{left:50%}
 ._1nmz9jpi{word-break:break-all}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
-._4cvr1h6o{align-items:center}
-._94n5ze3t{bottom:var(--ds-space-0,0)}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
 ._c71l7vkz{max-height:1pc}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
@@ -23,14 +23,15 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721jtm{white-space:pre-wrap}
 ._otyridpf{margin-bottom:0}
+._p12f7vkz{max-width:1pc}
 ._s7n4t94y{vertical-align:1px}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
+._t9ec1ooe{transform:translate(-50%,-50%)}
 ._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}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}

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

@@ -12,12 +12,12 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { Icon, Shimmer } from '../Icon';
 import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh } from './styled';
-const iconWrapperStyleSVG = null;
+const iconWrapperStyle = null;
+const iconImageStyle = null;
 const styles = {
-  iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
-  iconOuterWrapperStyle: "_2hwx1b66 _kqswh2mm",
+  iconEmptyStyle: "_1bsb7vkz _4t3i1osq _1e0c1o8l _tzy4idpf",
+  iconOuterWrapperStyle: "_1e0c1o8l _2hwx1b66 _kqswh2mm",
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
-  iconWrapperStyle: "_11c81o8v _kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
   linkStyle: "_2rkogqwt",
   noLinkAppearanceStyle: "_syaz131l _18u01b66"
 };
@@ -68,11 +68,7 @@ export const IconAndTitleLayout = ({
   const renderAtlaskitIcon = React.useCallback(() => {
     if (emoji) {
       if (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(Box, {
-          as: "span",
-          xcss: styles.iconWrapperStyle,
-          testId: "icon-position-emoji-wrapper"
-        }, emoji);
+        return emoji;
       }
       return /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji);
     }
@@ -80,10 +76,7 @@ export const IconAndTitleLayout = ({
       return null;
     }
     if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement("span", {
-        "data-testId": "icon-atlaskit-icon-wrapper",
-        className: ax(["_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw _1ii71ule"])
-      }, icon);
+      return icon;
     }
     return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon);
   }, [emoji, icon]);
@@ -98,7 +91,7 @@ export const IconAndTitleLayout = ({
           src: icon,
           "data-testid": `${testId}-image`,
           alt: "",
-          className: ax(["_c71l7vkz _1bsb1osq"])
+          className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/React.createElement(Shimmer, {
@@ -149,13 +142,6 @@ export const IconAndTitleLayout = ({
     }
     const placeholder = renderIconPlaceholder(testId);
     const image = renderImageIcon(placeholder, testId);
-    if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: styles.iconWrapperStyle,
-        testId: `${testId}-image-wrapper`
-      }, image || placeholder);
-    }
     return image || placeholder;
   }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
   const handleClick = React.useCallback(event => {
@@ -178,14 +164,24 @@ export const IconAndTitleLayout = ({
 
   // maybe consider memoising this after clean up
   const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
-    as: "span",
+    as: "span"
+    // EDM-12119: This is set here to help with the positioning of the icon to be in the middle of inline display.
+    // We cannot set the fix font because inline is taking the parent container font size into account.
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    ,
+    style: {
+      lineHeight: `1`
+    },
     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, {
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-testId": "icon-wrapper",
+    className: ax(["_11c81o8v _2rkoyh40 _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
+  }, 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"
@@ -271,5 +267,4 @@ if (process.env.NODE_ENV !== 'production') {
 export const LozengeWrapper = props => {
   // note: This is just to get the types to work due to compiled css weirdness.
   return /*#__PURE__*/React.createElement(LozengeWrapperOldVisualRefresh, props);
-};
-const iconImageStyle = null;
+};

package/dist/es2019/view/InlineCard/ResolvingView/index.compiled.css

@@ -0,0 +1,6 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1bah1h6o{justify-content:center}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}

package/dist/es2019/view/InlineCard/ResolvingView/index.js

@@ -1,10 +1,17 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout, IconTitleWrapper } from '../IconAndTitleLayout';
 import { RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
 import { SpinnerWrapperOldVisualRefresh } from './styled';
+const styles = {
+  spinnerWrapper: "_11c81o8v _1e0c116y _4cvr1h6o _1bah1h6o _4t3i7vkz _1bsb7vkz"
+};
 export const InlineCardResolvingView = ({
   url,
   onClick,
@@ -15,9 +22,12 @@ export const InlineCardResolvingView = ({
   resolvingPlaceholder,
   truncateInline
 }) => {
-  const renderSpinner = React.useCallback(() => fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+  const renderSpinner = React.useCallback(() => fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.spinnerWrapper
+  }, /*#__PURE__*/React.createElement(Spinner, {
     size: 14
-  }) :
+  })) :
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
   React.createElement(SpinnerWrapperOldVisualRefresh, {
@@ -41,7 +51,8 @@ export const InlineCardResolvingView = ({
     link: url,
     truncateInline: truncateInline
   }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: fg('platform-linking-visual-refresh-v1') ? renderSpinner() : undefined,
     title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
     titleTextColor: titleTextColor
-  }, renderSpinner()));
+  }, fg('platform-linking-visual-refresh-v1') ? undefined : renderSpinner()));
 };

package/dist/es2019/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -1,2 +1 @@
-._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

package/dist/es2019/view/InlineCard/UnauthorisedView/index.js

@@ -20,20 +20,16 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 const styles = {
-  iconWrapper: "_2hwx1i6y",
-  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+  iconWrapper: "_2hwx1i6y"
 };
 const fallbackUnauthorizedIcon = () => {
   if (fg('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.fallbackIconWrapper
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+    return /*#__PURE__*/React.createElement(LockLockedIcon, {
       color: "var(--ds-icon-danger, #C9372C)",
       label: "error",
       LEGACY_fallbackIcon: LegacyLockIcon,
       LEGACY_size: "small"
-    }));
+    });
   }
   if (fg('platform-smart-card-icon-migration')) {
     return /*#__PURE__*/React.createElement(Box, {

package/dist/es2019/view/InlineCard/common/action-button/index.compiled.css

@@ -2,7 +2,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
-._1nmz1hna{word-break:break-word}
+._1nmz9jpi{word-break:break-all}
 ._1y1m1u8q{background-clip:padding-box}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}

package/dist/es2019/view/InlineCard/common/action-button/index.js

@@ -7,7 +7,7 @@ import { forwardRef } from 'react';
 import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   button: "_1e0c1bgi",
-  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz1hna",
+  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
   disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
 };

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

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

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

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

package/dist/esm/view/InlineCard/ErroredView/index.compiled.css

@@ -1,2 +1 @@
-._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -18,20 +18,16 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 var styles = {
-  iconWrapper: "_2hwx1i6y",
-  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+  iconWrapper: "_2hwx1i6y"
 };
 var fallbackIcon = function fallbackIcon() {
   if (fg('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.fallbackIconWrapper
-    }, /*#__PURE__*/React.createElement(ErrorIconCore, {
+    return /*#__PURE__*/React.createElement(ErrorIconCore, {
       color: "var(--ds-icon-danger, #C9372C)",
       label: "error",
       LEGACY_size: "small",
       testId: "errored-view-default-icon"
-    }));
+    });
   }
   if (fg('platform-smart-card-icon-migration')) {
     return /*#__PURE__*/React.createElement(Box, {

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

@@ -25,6 +25,15 @@ var styles = {
   actionButtonLozengeStyle: "_2rkogqwt _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"
 };
 var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
+  if (fg('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement(LockLockedIcon, {
+      label: "error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small",
+      testId: "forbidden-view-fallback-icon"
+    });
+  }
   return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.iconWrapper

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

@@ -1,6 +1,7 @@
 ._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._154ize3t{top:var(--ds-space-0,0)}
+._2rkoyh40{border-radius:2px}
+._154i1ssb{top:50%}
 ._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)}
@@ -10,12 +11,11 @@
 ._1bsb7vkz{width:1pc}
 ._1e0c116y{display:inline-flex}
 ._1e0c1o8l{display:inline-block}
-._1ii71ule svg{display:block}
-._1ltvze3t{left:var(--ds-space-0,0)}
+._1ltv1ssb{left:50%}
 ._1nmz9jpi{word-break:break-all}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}
-._4cvr1h6o{align-items:center}
-._94n5ze3t{bottom:var(--ds-space-0,0)}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
 ._c71l7vkz{max-height:1pc}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._kqswh2mm{position:relative}
@@ -23,14 +23,15 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721jtm{white-space:pre-wrap}
 ._otyridpf{margin-bottom:0}
+._p12f7vkz{max-width:1pc}
 ._s7n4t94y{vertical-align:1px}
 ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._syaz1y58{color:var(--ds-link,#0052cc)}
+._t9ec1ooe{transform:translate(-50%,-50%)}
 ._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}
 ._9oik1r31:hover{text-decoration-color:currentColor}
 ._jf4cnqa1:hover{text-decoration-style:solid}

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

@@ -17,12 +17,12 @@ import { Box } from '@atlaskit/primitives/compiled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { Icon, Shimmer } from '../Icon';
 import { EmojiWrapperOldVisualRefresh, IconEmptyWrapperOldVisualRefresh, IconPositionWrapperOldVisualRefresh, IconWrapperOldVisualRefresh, TitleWrapperClassNameOldVisualRefresh } from './styled';
-var iconWrapperStyleSVG = null;
+var iconWrapperStyle = null;
+var iconImageStyle = null;
 var styles = {
-  iconEmptyStyle: "_1bsb7vkz _1e0c1o8l _tzy4idpf",
-  iconOuterWrapperStyle: "_2hwx1b66 _kqswh2mm",
+  iconEmptyStyle: "_1bsb7vkz _4t3i1osq _1e0c1o8l _tzy4idpf",
+  iconOuterWrapperStyle: "_1e0c1o8l _2hwx1b66 _kqswh2mm",
   iconTitleWrapperStyle: "_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66",
-  iconWrapperStyle: "_11c81o8v _kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw",
   linkStyle: "_2rkogqwt",
   noLinkAppearanceStyle: "_syaz131l _18u01b66"
 };
@@ -73,11 +73,7 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
   var renderAtlaskitIcon = React.useCallback(function () {
     if (emoji) {
       if (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(Box, {
-          as: "span",
-          xcss: styles.iconWrapperStyle,
-          testId: "icon-position-emoji-wrapper"
-        }, emoji);
+        return emoji;
       }
       return /*#__PURE__*/React.createElement(EmojiWrapperOldVisualRefresh, null, emoji);
     }
@@ -85,10 +81,7 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
       return null;
     }
     if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement("span", {
-        "data-testId": "icon-atlaskit-icon-wrapper",
-        className: ax(["_kqswstnw _1e0c116y _4cvr1h6o _vchhusvi _154ize3t _1ltvze3t _94n5ze3t _1bsb7vkz _uiztglyw _1ii71ule"])
-      }, icon);
+      return icon;
     }
     return /*#__PURE__*/React.createElement(IconWrapperOldVisualRefresh, null, icon);
   }, [emoji, icon]);
@@ -103,7 +96,7 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
           src: icon,
           "data-testid": "".concat(testId, "-image"),
           alt: "",
-          className: ax(["_c71l7vkz _1bsb1osq"])
+          className: ax(["_c71l7vkz _p12f7vkz _1bsb1osq"])
         }),
         errored: errored,
         loading: /*#__PURE__*/React.createElement(Shimmer, {
@@ -154,13 +147,6 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
     }
     var placeholder = renderIconPlaceholder(testId);
     var image = renderImageIcon(placeholder, testId);
-    if (fg('platform-linking-visual-refresh-v1')) {
-      return /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: styles.iconWrapperStyle,
-        testId: "".concat(testId, "-image-wrapper")
-      }, image || placeholder);
-    }
     return image || placeholder;
   }, [renderAtlaskitIcon, renderIconPlaceholder, renderImageIcon]);
   var handleClick = React.useCallback(function (event) {
@@ -183,14 +169,24 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref3) {
 
   // 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",
+    as: "span"
+    // EDM-12119: This is set here to help with the positioning of the icon to be in the middle of inline display.
+    // We cannot set the fix font because inline is taking the parent container font size into account.
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    ,
+    style: {
+      lineHeight: "1"
+    },
     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, {
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-testId": "icon-wrapper",
+    className: ax(["_11c81o8v _2rkoyh40 _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
+  }, 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"
@@ -276,5 +272,4 @@ if (process.env.NODE_ENV !== 'production') {
 export var LozengeWrapper = function LozengeWrapper(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/ResolvingView/index.compiled.css

@@ -0,0 +1,6 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1bah1h6o{justify-content:center}
+._1bsb7vkz{width:1pc}
+._1e0c116y{display:inline-flex}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}

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

@@ -1,10 +1,17 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout, IconTitleWrapper } from '../IconAndTitleLayout';
 import { RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
 import { SpinnerWrapperOldVisualRefresh } from './styled';
+var styles = {
+  spinnerWrapper: "_11c81o8v _1e0c116y _4cvr1h6o _1bah1h6o _4t3i7vkz _1bsb7vkz"
+};
 export var InlineCardResolvingView = function InlineCardResolvingView(_ref) {
   var url = _ref.url,
     onClick = _ref.onClick,
@@ -16,9 +23,12 @@ export var InlineCardResolvingView = function InlineCardResolvingView(_ref) {
     resolvingPlaceholder = _ref.resolvingPlaceholder,
     truncateInline = _ref.truncateInline;
   var renderSpinner = React.useCallback(function () {
-    return fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+    return fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.spinnerWrapper
+    }, /*#__PURE__*/React.createElement(Spinner, {
       size: 14
-    }) :
+    })) :
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     React.createElement(SpinnerWrapperOldVisualRefresh, {
@@ -43,7 +53,8 @@ export var InlineCardResolvingView = function InlineCardResolvingView(_ref) {
     link: url,
     truncateInline: truncateInline
   }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: fg('platform-linking-visual-refresh-v1') ? renderSpinner() : undefined,
     title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
     titleTextColor: titleTextColor
-  }, renderSpinner()));
+  }, fg('platform-linking-visual-refresh-v1') ? undefined : renderSpinner()));
 };

package/dist/esm/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -1,2 +1 @@
-._1e0cbu77{display:inline flex}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -20,20 +20,16 @@ import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 var styles = {
-  iconWrapper: "_2hwx1i6y",
-  fallbackIconWrapper: "_2hwx1i6y _1e0cbu77"
+  iconWrapper: "_2hwx1i6y"
 };
 var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
   if (fg('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.fallbackIconWrapper
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+    return /*#__PURE__*/React.createElement(LockLockedIcon, {
       color: "var(--ds-icon-danger, #C9372C)",
       label: "error",
       LEGACY_fallbackIcon: LegacyLockIcon,
       LEGACY_size: "small"
-    }));
+    });
   }
   if (fg('platform-smart-card-icon-migration')) {
     return /*#__PURE__*/React.createElement(Box, {

package/dist/esm/view/InlineCard/common/action-button/index.compiled.css

@@ -2,7 +2,7 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._1e0c1bgi{display:contents}
 ._1e0c1nu9{display:inline}
-._1nmz1hna{word-break:break-word}
+._1nmz9jpi{word-break:break-all}
 ._1y1m1u8q{background-clip:padding-box}
 ._80om13gf{cursor:not-allowed}
 ._80omtlke{cursor:pointer}

package/dist/esm/view/InlineCard/common/action-button/index.js

@@ -9,7 +9,7 @@ import { forwardRef } from 'react';
 import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   button: "_1e0c1bgi",
-  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz1hna",
+  innerContainer: "_1e0c1nu9 _1y1m1u8q _16d9qvcn _k48p1wq8 _19bv12x7 _ca0qv77o _n3tdv77o _u5f312x7 _y3gn18uv _o5721btx _1nmz9jpi",
   enabled: "_syaz1fxt _80omtlke _bfhkm7j4 _irr315ej _1di6ip91",
   disabled: "_syaz1lh4 _80om13gf _bfhksyzs"
 };

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

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

package/dist/types/view/InlineCard/ResolvingView/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { type InlinePreloaderStyle } from '../../types';
 export interface InlineCardResolvingViewProps {

package/dist/types-ts4.5/view/InlineCard/ResolvingView/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { type InlinePreloaderStyle } from '../../types';
 export interface InlineCardResolvingViewProps {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "36.0.0",
+	"version": "36.0.2",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^4.1.0",
+		"@atlaskit/icon-lab": "^4.2.0",
 		"@atlaskit/icon-object": "^7.0.0",
 		"@atlaskit/icon-priority": "^6.3.0",
 		"@atlaskit/legacy-custom-icons": "^0.22.0",
@@ -54,12 +54,12 @@
 		"@atlaskit/logo": "^16.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/menu": "^3.1.0",
-		"@atlaskit/modal-dialog": "^13.1.0",
+		"@atlaskit/modal-dialog": "^13.4.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^2.0.0",
-		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/section-message": "^8.1.0",
+		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/textarea": "^8.0.0",