@atlaskit/smart-card 40.14.0 → 40.15.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 40.15.0
+
+### Minor Changes
+
+- [`3d884c026efef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d884c026efef) -
+  The `EmbedCard` starts `hideIconLoadingSkeleton` prop supporting, that allows not rendering the
+  loading placeholder in SSR
+
+## 40.14.1
+
+### Patch Changes
+
+- [`9611ba1c6ba80`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9611ba1c6ba80) -
+  NO-ISSUE cleaning up smart-links-noun-support leftover references
+- [`ef3b2dfa2f8a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef3b2dfa2f8a8) -
+  Internal changes to use radius tokens. No visual changes.
+- Updated dependencies
+
 ## 40.14.0
 
 ### Minor Changes

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: "0.0.0-development"
+  packageVersion: "40.14.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/CardWithUrl/component.js

@@ -327,7 +327,8 @@ function Component(_ref) {
         ref: embedIframeRef,
         onIframeDwell: onIframeDwell,
         onIframeFocus: onIframeFocus,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
   }
 }

package/dist/cjs/view/EmbedCard/components/ImageIcon.js

@@ -2,15 +2,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageIcon = void 0;
 require("./ImageIcon.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _styled = require("./styled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   roundedImage: "_2rko1twn"
 };
@@ -23,24 +28,51 @@ var ImageIcon = exports.ImageIcon = function ImageIcon(_ref) {
     title = _ref.title,
     defaultIcon = _ref.default,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance;
+    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance,
+    hideLoadingSkeleton = _ref.hideLoadingSkeleton;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If url changes, reset state
+  (0, _react.useEffect)(function () {
+    if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(false);
+    }
+  }, [src]);
+  var handleError = (0, _react.useCallback)(function () {
+    if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(true);
+    }
+  }, []);
+
   // TODO: do we need this?
   if (!src) {
     return defaultIcon || null;
   }
+  if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hasImageErrored) {
+    return defaultIcon;
+  }
   var LoadedImageComponent = /*#__PURE__*/_react.default.createElement(_styled.Image
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
+  , (0, _extends2.default)({
     className: (0, _runtime.ax)([appearance === 'round' && styles.roundedImage, "smart-link-icon"]),
     src: src,
     alt: alt,
     size: size,
     title: title
-  });
-  return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
-    src: src,
-    loading: defaultIcon,
-    loaded: LoadedImageComponent,
-    errored: defaultIcon
-  });
+  }, hideLoadingSkeleton && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ? {
+    onError: handleError
+  } : undefined));
+  if ((0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton) {
+    return LoadedImageComponent;
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
+      src: src,
+      loading: defaultIcon,
+      loaded: LoadedImageComponent,
+      errored: defaultIcon
+    });
+  }
 };

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

@@ -52,7 +52,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
     iframeUrlType = _ref2.iframeUrlType,
     actionOptions = _ref2.actionOptions,
     renderers = _ref2.renderers,
-    CompetitorPrompt = _ref2.CompetitorPrompt;
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -110,7 +111,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
           testId: testId,
-          CompetitorPrompt: CompetitorPrompt
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton
         }));
       } else {
         if (platform === 'mobile') {

package/dist/cjs/view/EmbedCard/views/ResolvedView.js

@@ -30,7 +30,8 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     onIframeFocus = _ref.onIframeFocus,
     isSupportTheming = _ref.isSupportTheming,
     type = _ref.type,
-    CompetitorPrompt = _ref.CompetitorPrompt;
+    CompetitorPrompt = _ref.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton;
   var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
@@ -49,9 +50,10 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     return /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
       src: src,
       default: linkGlyph,
-      appearance: (0, _utils.isProfileType)(type) ? 'round' : 'square'
+      appearance: (0, _utils.isProfileType)(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
     });
-  }, [iconFromContext, src, linkGlyph, type]);
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
   if ((0, _platformFeatureFlags.fg)('ptc-enable-embed-team-smart-links')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, _useEmbedResolvePostMessageListener.useEmbedResolvePostMessageListener)({

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._12vemgnk{background-repeat:no-repeat}
 ._1e0c1o8l{display:inline-block}
 ._1itkx3i8{background-image:var(--_16116mi)}
 ._1lrw6rms{background-size:280% 100%}

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -18,7 +18,7 @@ var LoadingSkeleton = exports.LoadingSkeleton = function LoadingSkeleton(_ref) {
     height = _ref.height;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_2rkoyh40 _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
+    className: (0, _runtime.ax)(["_2rkolb4i _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
     style: {
       width: width,
       height: height,

package/dist/cjs/view/InlineCard/Icon.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._154i1ssb{top:50%}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._154i1ssb{top:50%}
 ._1bsb7vkz{width:1pc}
 ._1ltv1ssb{left:50%}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}

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

@@ -29,7 +29,7 @@ var Icon = exports.Icon = (0, _react.forwardRef)(function (_ref, __cmplr) {
   return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
-    className: (0, _runtime.ax)(["_2rkoyh40 _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
+    className: (0, _runtime.ax)(["_2rkolb4i _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,7 +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)}
 ._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._2rkoyh40{border-radius:2px}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._154i1ssb{top:50%}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}

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

@@ -162,7 +162,7 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = function IconAndTitleLayou
     testId: "icon-empty-wrapper"
   }), /*#__PURE__*/_react.default.createElement("span", {
     "data-testId": "icon-wrapper",
-    className: (0, _runtime.ax)(["_11c81o8v _2rkoyh40 _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
+    className: (0, _runtime.ax)(["_11c81o8v _2rkolb4i _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
   }, renderIcon(testId)))), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     style: {

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

@@ -19,7 +19,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development",
+  packageVersion: "40.14.1",
   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: "0.0.0-development"
+  packageVersion: "40.14.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/CardWithUrl/component.js

@@ -316,7 +316,8 @@ function Component({
         ref: embedIframeRef,
         onIframeDwell: onIframeDwell,
         onIframeFocus: onIframeFocus,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
   }
 }

package/dist/es2019/view/EmbedCard/components/ImageIcon.js

@@ -1,8 +1,10 @@
 /* ImageIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./ImageIcon.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ImageLoader from 'react-render-image';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Image } from './styled';
 const styles = {
   roundedImage: "_2rko1twn"
@@ -13,25 +15,49 @@ export const ImageIcon = ({
   size = 16,
   title,
   default: defaultIcon,
-  appearance = 'square'
+  appearance = 'square',
+  hideLoadingSkeleton
 }) => {
+  const [hasImageErrored, setHasImageErrored] = useState(false);
+
+  // If url changes, reset state
+  useEffect(() => {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(false);
+    }
+  }, [src]);
+  const handleError = useCallback(() => {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(true);
+    }
+  }, []);
+
   // TODO: do we need this?
   if (!src) {
     return defaultIcon || null;
   }
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hasImageErrored) {
+    return defaultIcon;
+  }
   const LoadedImageComponent = /*#__PURE__*/React.createElement(Image
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
+  , _extends({
     className: ax([appearance === 'round' && styles.roundedImage, "smart-link-icon"]),
     src: src,
     alt: alt,
     size: size,
     title: title
-  });
-  return /*#__PURE__*/React.createElement(ImageLoader, {
-    src: src,
-    loading: defaultIcon,
-    loaded: LoadedImageComponent,
-    errored: defaultIcon
-  });
+  }, hideLoadingSkeleton && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? {
+    onError: handleError
+  } : undefined));
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton) {
+    return LoadedImageComponent;
+  } else {
+    return /*#__PURE__*/React.createElement(ImageLoader, {
+      src: src,
+      loading: defaultIcon,
+      loaded: LoadedImageComponent,
+      errored: defaultIcon
+    });
+  }
 };

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

@@ -44,7 +44,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   iframeUrlType,
   actionOptions,
   renderers,
-  CompetitorPrompt
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
 }, iframeRef) => {
   var _details$meta, _forbiddenViewProps$c, _forbiddenViewProps$c2, _notFoundViewProps$co, _notFoundViewProps$co2;
   const {
@@ -107,7 +108,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
           testId: testId,
-          CompetitorPrompt: CompetitorPrompt
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton
         }));
       } else {
         if (platform === 'mobile') {

package/dist/es2019/view/EmbedCard/views/ResolvedView.js

@@ -22,7 +22,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   onIframeFocus,
   isSupportTheming,
   type,
-  CompetitorPrompt
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
 }, embedIframeRef) => {
   const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
@@ -40,9 +41,10 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     return /*#__PURE__*/React.createElement(ImageIcon, {
       src: src,
       default: linkGlyph,
-      appearance: isProfileType(type) ? 'round' : 'square'
+      appearance: isProfileType(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
     });
-  }, [iconFromContext, src, linkGlyph, type]);
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
   if (fg('ptc-enable-embed-team-smart-links')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEmbedResolvePostMessageListener({

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._12vemgnk{background-repeat:no-repeat}
 ._1e0c1o8l{display:inline-block}
 ._1itkvl7m{background-image:linear-gradient(to right,transparent 0,var(--ds-skeleton,#edeef1) 20%,transparent 40%,transparent 100%)}
 ._1lrw6rms{background-size:280% 100%}

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -15,6 +15,6 @@ export const LoadingSkeleton = ({
       width,
       height
     },
-    className: ax(["_2rkoyh40 _uiztglyw _bfhk178v _1itkvl7m _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"])
+    className: ax(["_2rkolb4i _uiztglyw _bfhk178v _1itkvl7m _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"])
   });
 };

package/dist/es2019/view/InlineCard/Icon.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._154i1ssb{top:50%}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._154i1ssb{top:50%}
 ._1bsb7vkz{width:1pc}
 ._1ltv1ssb{left:50%}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}

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

@@ -19,7 +19,7 @@ export const Icon = forwardRef(({
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
-    className: ax(["_2rkoyh40 _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
+    className: ax(["_2rkolb4i _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,7 +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)}
 ._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._2rkoyh40{border-radius:2px}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._154i1ssb{top:50%}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}

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

@@ -146,7 +146,7 @@ export const IconAndTitleLayout = ({
     testId: "icon-empty-wrapper"
   }), /*#__PURE__*/React.createElement("span", {
     "data-testId": "icon-wrapper",
-    className: ax(["_11c81o8v _2rkoyh40 _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
+    className: ax(["_11c81o8v _2rkolb4i _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
   }, renderIcon(testId)))), /*#__PURE__*/React.createElement(Box, {
     as: "span",
     style: {

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

@@ -9,7 +9,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development",
+  packageVersion: "40.14.1",
   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: "0.0.0-development"
+  packageVersion: "40.14.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/CardWithUrl/component.js

@@ -318,7 +318,8 @@ function Component(_ref) {
         ref: embedIframeRef,
         onIframeDwell: onIframeDwell,
         onIframeFocus: onIframeFocus,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
       });
   }
 }

package/dist/esm/view/EmbedCard/components/ImageIcon.js

@@ -1,8 +1,11 @@
 /* ImageIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ImageIcon.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ImageLoader from 'react-render-image';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Image } from './styled';
 var styles = {
   roundedImage: "_2rko1twn"
@@ -16,24 +19,51 @@ export var ImageIcon = function ImageIcon(_ref) {
     title = _ref.title,
     defaultIcon = _ref.default,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance;
+    appearance = _ref$appearance === void 0 ? 'square' : _ref$appearance,
+    hideLoadingSkeleton = _ref.hideLoadingSkeleton;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If url changes, reset state
+  useEffect(function () {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(false);
+    }
+  }, [src]);
+  var handleError = useCallback(function () {
+    if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+      setHasImageErrored(true);
+    }
+  }, []);
+
   // TODO: do we need this?
   if (!src) {
     return defaultIcon || null;
   }
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hasImageErrored) {
+    return defaultIcon;
+  }
   var LoadedImageComponent = /*#__PURE__*/React.createElement(Image
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  , {
+  , _extends({
     className: ax([appearance === 'round' && styles.roundedImage, "smart-link-icon"]),
     src: src,
     alt: alt,
     size: size,
     title: title
-  });
-  return /*#__PURE__*/React.createElement(ImageLoader, {
-    src: src,
-    loading: defaultIcon,
-    loaded: LoadedImageComponent,
-    errored: defaultIcon
-  });
+  }, hideLoadingSkeleton && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? {
+    onError: handleError
+  } : undefined));
+  if (expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) && hideLoadingSkeleton) {
+    return LoadedImageComponent;
+  } else {
+    return /*#__PURE__*/React.createElement(ImageLoader, {
+      src: src,
+      loading: defaultIcon,
+      loaded: LoadedImageComponent,
+      errored: defaultIcon
+    });
+  }
 };

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

@@ -44,7 +44,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
     iframeUrlType = _ref2.iframeUrlType,
     actionOptions = _ref2.actionOptions,
     renderers = _ref2.renderers,
-    CompetitorPrompt = _ref2.CompetitorPrompt;
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var status = cardState.status,
@@ -102,7 +103,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref2, iframeRef)
           onIframeDwell: onIframeDwell,
           onIframeFocus: onIframeFocus,
           testId: testId,
-          CompetitorPrompt: CompetitorPrompt
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton
         }));
       } else {
         if (platform === 'mobile') {

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -23,7 +23,8 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     onIframeFocus = _ref.onIframeFocus,
     isSupportTheming = _ref.isSupportTheming,
     type = _ref.type,
-    CompetitorPrompt = _ref.CompetitorPrompt;
+    CompetitorPrompt = _ref.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton;
   var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
@@ -42,9 +43,10 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     return /*#__PURE__*/React.createElement(ImageIcon, {
       src: src,
       default: linkGlyph,
-      appearance: isProfileType(type) ? 'round' : 'square'
+      appearance: isProfileType(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
     });
-  }, [iconFromContext, src, linkGlyph, type]);
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
   if (fg('ptc-enable-embed-team-smart-links')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEmbedResolvePostMessageListener({

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._12vemgnk{background-repeat:no-repeat}
 ._1e0c1o8l{display:inline-block}
 ._1itkx3i8{background-image:var(--_16116mi)}
 ._1lrw6rms{background-size:280% 100%}

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -10,7 +10,7 @@ export var LoadingSkeleton = function LoadingSkeleton(_ref) {
     height = _ref.height;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
-    className: ax(["_2rkoyh40 _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
+    className: ax(["_2rkolb4i _uiztglyw _bfhk178v _1itkx3i8 _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
     style: {
       width: width,
       height: height,

package/dist/esm/view/InlineCard/Icon.compiled.css

@@ -1,5 +1,5 @@
 
-._2rkoyh40{border-radius:2px}._154i1ssb{top:50%}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._154i1ssb{top:50%}
 ._1bsb7vkz{width:1pc}
 ._1ltv1ssb{left:50%}
 ._2hwx1b66{margin-right:var(--ds-space-050,4px)}

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

@@ -21,7 +21,7 @@ export var Icon = forwardRef(function (_ref, __cmplr) {
   return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
     style: __cmpls,
     ref: __cmplr,
-    className: ax(["_2rkoyh40 _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
+    className: ax(["_2rkolb4i _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,7 +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)}
 ._2rko1twn{border-radius:var(--ds-border-radius-circle,9999px)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
-._2rkoyh40{border-radius:2px}
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._154i1ssb{top:50%}
 ._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 ._18u01b66{margin-left:var(--ds-space-050,4px)}

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

@@ -154,7 +154,7 @@ export var IconAndTitleLayout = function IconAndTitleLayout(_ref2) {
     testId: "icon-empty-wrapper"
   }), /*#__PURE__*/React.createElement("span", {
     "data-testId": "icon-wrapper",
-    className: ax(["_11c81o8v _2rkoyh40 _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
+    className: ax(["_11c81o8v _2rkolb4i _1e0c116y _kqswstnw _2hwx1b66 _4t3i7vkz _1bsb7vkz _154i1ssb _1ltv1ssb _t9ec1ooe _uiztglyw"])
   }, renderIcon(testId)))), /*#__PURE__*/React.createElement(Box, {
     as: "span",
     style: {

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

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

package/dist/types/view/EmbedCard/components/ImageIcon.d.ts

@@ -7,8 +7,9 @@ export interface ImageIconProps {
     alt?: string;
     appearance?: 'square' | 'round';
     default?: React.ReactElement;
+    hideLoadingSkeleton?: boolean;
     size?: number;
     src?: string;
     title?: string;
 }
-export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, }: ImageIconProps) => JSX.Element | null;
+export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, hideLoadingSkeleton, }: ImageIconProps) => JSX.Element | null | undefined;

package/dist/types/view/EmbedCard/types.d.ts

@@ -16,6 +16,7 @@ export type EmbedCardProps = {
     handleErrorRetry: () => void;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     handleInvoke: InvokeHandler;
+    hideIconLoadingSkeleton?: boolean;
     id?: string;
     iframeUrlType?: EmbedIframeUrlType;
     inheritDimensions?: boolean;

package/dist/types/view/EmbedCard/views/ResolvedView.d.ts

@@ -10,6 +10,8 @@ export interface EmbedCardResolvedViewProps {
     context?: ContextViewModel;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
+    /** For image icons in the title, whether to hide the loading skeleton while the image is loading. */
+    hideIconLoadingSkeleton?: boolean;
     inheritDimensions?: boolean;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;

package/dist/types-ts4.5/view/EmbedCard/components/ImageIcon.d.ts

@@ -7,8 +7,9 @@ export interface ImageIconProps {
     alt?: string;
     appearance?: 'square' | 'round';
     default?: React.ReactElement;
+    hideLoadingSkeleton?: boolean;
     size?: number;
     src?: string;
     title?: string;
 }
-export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, }: ImageIconProps) => JSX.Element | null;
+export declare const ImageIcon: ({ alt, src, size, title, default: defaultIcon, appearance, hideLoadingSkeleton, }: ImageIconProps) => JSX.Element | null | undefined;

package/dist/types-ts4.5/view/EmbedCard/types.d.ts

@@ -16,6 +16,7 @@ export type EmbedCardProps = {
     handleErrorRetry: () => void;
     handleFrameClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     handleInvoke: InvokeHandler;
+    hideIconLoadingSkeleton?: boolean;
     id?: string;
     iframeUrlType?: EmbedIframeUrlType;
     inheritDimensions?: boolean;

package/dist/types-ts4.5/view/EmbedCard/views/ResolvedView.d.ts

@@ -10,6 +10,8 @@ export interface EmbedCardResolvedViewProps {
     context?: ContextViewModel;
     /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
     frameStyle?: FrameStyle;
+    /** For image icons in the title, whether to hide the loading skeleton while the image is loading. */
+    hideIconLoadingSkeleton?: boolean;
     inheritDimensions?: boolean;
     /** A flag that determines whether the card is selected in edit mode. */
     isSelected?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "40.14.0",
+	"version": "40.15.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -181,9 +181,6 @@
 		"confluence-issue-terminology-refresh": {
 			"type": "boolean"
 		},
-		"smart_links_noun_support": {
-			"type": "boolean"
-		},
 		"platform-linking-ai-summary-migration-to-convo-ai": {
 			"type": "boolean"
 		},