@atlaskit/smart-card 30.2.7 → 30.3.1

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

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "30.2.7"
+  packageVersion: "30.3.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -385,77 +385,15 @@ export var uiCardClickedEvent = function uiCardClickedEvent(_ref14) {
     })
   };
 };
-
-/**
- * @deprecated
- */
-export var uiIframeDwelledEvent = function uiIframeDwelledEvent(_ref15) {
+export var uiActionClickedEvent = function uiActionClickedEvent(_ref15) {
   var id = _ref15.id,
+    actionType = _ref15.actionType,
+    extensionKey = _ref15.extensionKey,
     display = _ref15.display,
-    status = _ref15.status,
     definitionId = _ref15.definitionId,
-    extensionKey = _ref15.extensionKey,
-    location = _ref15.location,
     destinationProduct = _ref15.destinationProduct,
     destinationSubproduct = _ref15.destinationSubproduct,
-    dwellTime = _ref15.dwellTime,
-    dwellPercentVisible = _ref15.dwellPercentVisible;
-  return {
-    action: 'dwelled',
-    actionSubject: 'smartLinkIframe',
-    eventType: 'ui',
-    attributes: _objectSpread(_objectSpread({}, context), {}, {
-      id: id,
-      status: status,
-      definitionId: definitionId,
-      extensionKey: extensionKey,
-      display: display,
-      location: location,
-      destinationProduct: destinationProduct,
-      destinationSubproduct: destinationSubproduct,
-      dwellTime: dwellTime,
-      dwellPercentVisible: dwellPercentVisible
-    })
-  };
-};
-
-/**
- * @deprecated
- */
-export var uiIframeFocusedEvent = function uiIframeFocusedEvent(_ref16) {
-  var id = _ref16.id,
-    display = _ref16.display,
-    status = _ref16.status,
-    definitionId = _ref16.definitionId,
-    extensionKey = _ref16.extensionKey,
-    location = _ref16.location,
-    destinationProduct = _ref16.destinationProduct,
-    destinationSubproduct = _ref16.destinationSubproduct;
-  return {
-    action: 'focused',
-    actionSubject: 'smartLinkIframe',
-    eventType: 'ui',
-    attributes: _objectSpread(_objectSpread({}, context), {}, {
-      id: id,
-      status: status,
-      definitionId: definitionId,
-      extensionKey: extensionKey,
-      display: display,
-      location: location,
-      destinationProduct: destinationProduct,
-      destinationSubproduct: destinationSubproduct
-    })
-  };
-};
-export var uiActionClickedEvent = function uiActionClickedEvent(_ref17) {
-  var id = _ref17.id,
-    actionType = _ref17.actionType,
-    extensionKey = _ref17.extensionKey,
-    display = _ref17.display,
-    definitionId = _ref17.definitionId,
-    destinationProduct = _ref17.destinationProduct,
-    destinationSubproduct = _ref17.destinationSubproduct,
-    location = _ref17.location;
+    location = _ref15.location;
   return {
     action: 'clicked',
     actionSubject: 'button',
@@ -473,13 +411,13 @@ export var uiActionClickedEvent = function uiActionClickedEvent(_ref17) {
     })
   };
 };
-export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref18) {
-  var display = _ref18.display,
-    extensionKey = _ref18.extensionKey,
-    definitionId = _ref18.definitionId,
-    destinationProduct = _ref18.destinationProduct,
-    destinationSubproduct = _ref18.destinationSubproduct,
-    location = _ref18.location;
+export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref16) {
+  var display = _ref16.display,
+    extensionKey = _ref16.extensionKey,
+    definitionId = _ref16.definitionId,
+    destinationProduct = _ref16.destinationProduct,
+    destinationSubproduct = _ref16.destinationSubproduct,
+    location = _ref16.location;
   return {
     action: 'closed',
     actionSubject: 'consentModal',
@@ -494,12 +432,12 @@ export var uiClosedAuthEvent = function uiClosedAuthEvent(_ref18) {
     })
   };
 };
-export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref19) {
-  var extensionKey = _ref19.extensionKey,
-    definitionId = _ref19.definitionId,
-    destinationProduct = _ref19.destinationProduct,
-    destinationSubproduct = _ref19.destinationSubproduct,
-    location = _ref19.location;
+export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref17) {
+  var extensionKey = _ref17.extensionKey,
+    definitionId = _ref17.definitionId,
+    destinationProduct = _ref17.destinationProduct,
+    destinationSubproduct = _ref17.destinationSubproduct,
+    location = _ref17.location;
   return {
     actionSubject: 'consentModal',
     eventType: 'screen',
@@ -512,15 +450,15 @@ export var screenAuthPopupEvent = function screenAuthPopupEvent(_ref19) {
     })
   };
 };
-export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref20) {
-  var display = _ref20.display,
-    status = _ref20.status,
-    extensionKey = _ref20.extensionKey,
-    definitionId = _ref20.definitionId,
-    destinationProduct = _ref20.destinationProduct,
-    destinationSubproduct = _ref20.destinationSubproduct,
-    location = _ref20.location,
-    canBeDatasource = _ref20.canBeDatasource;
+export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref18) {
+  var display = _ref18.display,
+    status = _ref18.status,
+    extensionKey = _ref18.extensionKey,
+    definitionId = _ref18.definitionId,
+    destinationProduct = _ref18.destinationProduct,
+    destinationSubproduct = _ref18.destinationSubproduct,
+    location = _ref18.location,
+    canBeDatasource = _ref18.canBeDatasource;
   return {
     action: 'renderSuccess',
     actionSubject: 'smartLink',
@@ -537,15 +475,15 @@ export var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref20) {
     })
   };
 };
-export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref21) {
-  var display = _ref21.display,
-    error = _ref21.error,
-    errorInfo = _ref21.errorInfo,
-    extensionKey = _ref21.extensionKey,
-    definitionId = _ref21.definitionId,
-    destinationProduct = _ref21.destinationProduct,
-    destinationSubproduct = _ref21.destinationSubproduct,
-    location = _ref21.location;
+export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref19) {
+  var display = _ref19.display,
+    error = _ref19.error,
+    errorInfo = _ref19.errorInfo,
+    extensionKey = _ref19.extensionKey,
+    definitionId = _ref19.definitionId,
+    destinationProduct = _ref19.destinationProduct,
+    destinationSubproduct = _ref19.destinationSubproduct,
+    location = _ref19.location;
   return {
     actionSubject: 'smartLink',
     action: 'renderFailed',
@@ -562,16 +500,16 @@ export var uiRenderFailedEvent = function uiRenderFailedEvent(_ref21) {
     })
   };
 };
-export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref22) {
-  var id = _ref22.id,
-    previewDisplay = _ref22.previewDisplay,
-    extensionKey = _ref22.extensionKey,
-    definitionId = _ref22.definitionId,
-    destinationProduct = _ref22.destinationProduct,
-    destinationSubproduct = _ref22.destinationSubproduct,
-    location = _ref22.location,
-    previewInvokeMethod = _ref22.previewInvokeMethod,
-    status = _ref22.status;
+export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref20) {
+  var id = _ref20.id,
+    previewDisplay = _ref20.previewDisplay,
+    extensionKey = _ref20.extensionKey,
+    definitionId = _ref20.definitionId,
+    destinationProduct = _ref20.destinationProduct,
+    destinationSubproduct = _ref20.destinationSubproduct,
+    location = _ref20.location,
+    previewInvokeMethod = _ref20.previewInvokeMethod,
+    status = _ref20.status;
   return {
     action: 'viewed',
     actionSubject: 'hoverCard',
@@ -589,17 +527,17 @@ export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref22) {
     })
   };
 };
-export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref23) {
-  var id = _ref23.id,
-    previewDisplay = _ref23.previewDisplay,
-    hoverTime = _ref23.hoverTime,
-    extensionKey = _ref23.extensionKey,
-    definitionId = _ref23.definitionId,
-    destinationProduct = _ref23.destinationProduct,
-    destinationSubproduct = _ref23.destinationSubproduct,
-    location = _ref23.location,
-    previewInvokeMethod = _ref23.previewInvokeMethod,
-    status = _ref23.status;
+export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref21) {
+  var id = _ref21.id,
+    previewDisplay = _ref21.previewDisplay,
+    hoverTime = _ref21.hoverTime,
+    extensionKey = _ref21.extensionKey,
+    definitionId = _ref21.definitionId,
+    destinationProduct = _ref21.destinationProduct,
+    destinationSubproduct = _ref21.destinationSubproduct,
+    location = _ref21.location,
+    previewInvokeMethod = _ref21.previewInvokeMethod,
+    status = _ref21.status;
   return {
     action: 'dismissed',
     actionSubject: 'hoverCard',
@@ -618,15 +556,15 @@ export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref23
     })
   };
 };
-export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref24) {
-  var id = _ref24.id,
-    previewDisplay = _ref24.previewDisplay,
-    extensionKey = _ref24.extensionKey,
-    definitionId = _ref24.definitionId,
-    destinationProduct = _ref24.destinationProduct,
-    destinationSubproduct = _ref24.destinationSubproduct,
-    location = _ref24.location,
-    previewInvokeMethod = _ref24.previewInvokeMethod;
+export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref22) {
+  var id = _ref22.id,
+    previewDisplay = _ref22.previewDisplay,
+    extensionKey = _ref22.extensionKey,
+    definitionId = _ref22.definitionId,
+    destinationProduct = _ref22.destinationProduct,
+    destinationSubproduct = _ref22.destinationSubproduct,
+    location = _ref22.location,
+    previewInvokeMethod = _ref22.previewInvokeMethod;
   return {
     action: 'clicked',
     actionSubject: 'button',
@@ -653,15 +591,15 @@ export var uiLearnMoreLinkClickedEvent = function uiLearnMoreLinkClickedEvent()
     attributes: _objectSpread({}, context)
   };
 };
-export var chunkloadFailedEvent = function chunkloadFailedEvent(_ref25) {
-  var display = _ref25.display,
-    error = _ref25.error,
-    errorInfo = _ref25.errorInfo,
-    extensionKey = _ref25.extensionKey,
-    definitionId = _ref25.definitionId,
-    destinationProduct = _ref25.destinationProduct,
-    destinationSubproduct = _ref25.destinationSubproduct,
-    location = _ref25.location;
+export var chunkloadFailedEvent = function chunkloadFailedEvent(_ref23) {
+  var display = _ref23.display,
+    error = _ref23.error,
+    errorInfo = _ref23.errorInfo,
+    extensionKey = _ref23.extensionKey,
+    definitionId = _ref23.definitionId,
+    destinationProduct = _ref23.destinationProduct,
+    destinationSubproduct = _ref23.destinationSubproduct,
+    location = _ref23.location;
   return {
     action: 'chunkLoadFailed',
     actionSubject: 'smartLink',
@@ -705,9 +643,9 @@ export var uiSmartLinkStatusOpenPreviewButtonClicked = function uiSmartLinkStatu
     attributes: _objectSpread({}, context)
   };
 };
-export var uiServerActionClicked = function uiServerActionClicked(_ref26) {
+export var uiServerActionClicked = function uiServerActionClicked(_ref24) {
   var _SmartLinkActionTypeU2;
-  var smartLinkActionType = _ref26.smartLinkActionType;
+  var smartLinkActionType = _ref24.smartLinkActionType;
   return {
     action: 'clicked',
     actionSubject: 'button',

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

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { getMeasure } from '../performance';
 import { resolvedEvent, unresolvedEvent } from './analytics';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent, uiIframeDwelledEvent, uiSmartLinkStatusLozengeButtonClicked, uiSmartLinkStatusListItemButtonClicked, uiSmartLinkStatusOpenPreviewButtonClicked } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, chunkloadFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiLearnMoreLinkClickedEvent, uiSmartLinkStatusLozengeButtonClicked, uiSmartLinkStatusListItemButtonClicked, uiSmartLinkStatusOpenPreviewButtonClicked } from './analytics';
 export var instrumentEvent = function instrumentEvent(_ref) {
   var id = _ref.id,
     status = _ref.status,

package/dist/esm/view/BlockCard/components/Name.js

@@ -4,7 +4,6 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { fontSize } from '@atlaskit/theme/constants';
 import { gs } from '../../common/utils';
 /**
  * Class name for selecting non-flexible block card header name
@@ -14,8 +13,7 @@ import { gs } from '../../common/utils';
  */
 export var blockCardContentHeaderNameClassName = 'block-card-content-header-name';
 var baseStyles = css({
-  fontSize: "".concat(fontSize(), "px"),
-  fontWeight: 500,
+  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   lineHeight: gs(2.5),
   // Spec: show max two lines.

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -7,7 +7,6 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import DocumentFilledIcon from '@atlaskit/icon/core/migration/file--editor-file';
 import { N50, N90 } from '@atlaskit/theme/colors';
-import { fontSize } from '@atlaskit/theme/constants';
 import { messages } from '../../../messages';
 import { gs } from '../../common/utils';
 import { Frame } from '../components/Frame';
@@ -19,7 +18,7 @@ import { Frame } from '../components/Frame';
  */
 export var blockCardResolvingViewClassName = 'block-card-resolving-view';
 var messageStyles = css({
-  fontSize: "".concat(fontSize(), "px"),
+  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text-subtlest, ".concat(N90, ")"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   marginLeft: gs(0.5)

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

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
 import { CardDisplay } from '../../constants';
 import { useSmartLink } from '../../state';
@@ -150,47 +149,21 @@ function Component(_ref) {
     }
   }, [isFlexibleUi, appearance, state.status, url, definitionId, extensionKey, analytics.ui, id, canBeDatasource]);
   var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
-    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
-      fireEvent('ui.smartLinkIframe.dwelled', {
-        id: id,
-        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-        display: isFlexibleUi ? 'flexible' : appearance,
-        dwellPercentVisible: dwellPercentVisible,
-        dwellTime: dwellTime
-      });
-    } else {
-      analytics.ui.iframeDwelledEvent({
-        id: id,
-        display: isFlexibleUi ? 'flexible' : appearance,
-        status: state.status,
-        definitionId: definitionId,
-        extensionKey: extensionKey,
-        destinationProduct: product,
-        destinationSubproduct: subproduct,
-        dwellTime: dwellTime,
-        dwellPercentVisible: dwellPercentVisible
-      });
-    }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
+    fireEvent('ui.smartLinkIframe.dwelled', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      dwellPercentVisible: dwellPercentVisible,
+      dwellTime: dwellTime
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
   var onIframeFocus = useCallback(function () {
-    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
-      fireEvent('ui.smartLinkIframe.focus', {
-        id: id,
-        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-        display: isFlexibleUi ? 'flexible' : appearance
-      });
-    } else {
-      analytics.ui.iframeFocusedEvent({
-        id: id,
-        display: isFlexibleUi ? 'flexible' : appearance,
-        status: state.status,
-        definitionId: definitionId,
-        extensionKey: extensionKey,
-        destinationProduct: product,
-        destinationSubproduct: subproduct
-      });
-    }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
+    fireEvent('ui.smartLinkIframe.focus', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
   if (isFlexibleUi) {
     var cardState = state;
     if (error) {

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

@@ -131,8 +131,7 @@ function (_ref10) {
 }, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
-  fontSize: '12px',
-  lineHeight: '16px'
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 ellipsis('none'));
@@ -180,9 +179,7 @@ export var ContentWrapper = styled.div({
 export var Title = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text, ".concat(colors.N900, ")"),
-  fontSize: '16px',
-  fontWeight: 500,
-  lineHeight: 20 / 16,
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   maxHeight: "".concat(20 * 4, "px"),
   overflow: 'hidden'
 });
@@ -192,9 +189,7 @@ export var Byline = styled.div({
   marginTop: "var(--ds-space-050, 4px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
-  fontSize: '12px',
-  fontWeight: 'normal',
-  lineHeight: 16 / 12
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 ellipsis('100%'));
@@ -204,9 +199,7 @@ export var Description = styled.div({
   marginTop: "calc(".concat("var(--ds-space-100, 8px)", " - 1px)"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: "var(--ds-text, ".concat(colors.N800, ")"),
-  fontSize: '12px',
-  fontWeight: 'normal',
-  lineHeight: 18 / 12,
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   maxHeight: "".concat(18 * 3, "px"),
   overflow: 'hidden'
 });

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

@@ -8,12 +8,12 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import { R300 } from '@atlaskit/theme/colors';
-import { fontSize } from '@atlaskit/theme/constants';
 import { messages } from '../../../messages';
 import { Frame } from '../../BlockCard/components/Frame';
 import { gs } from '../../common/utils';
 var messageStyles = css({
-  fontSize: "".concat(fontSize(), "px"),
+  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-regular, 400)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   marginLeft: gs(0.5),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/esm/view/EmbedCard/views/unresolved-view/index.js

@@ -26,7 +26,7 @@ var contentStyles = css({
   maxWidth: gs(50)
 });
 var descriptionStyles = css({
-  fontSize: '1em',
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   textAlign: 'center'
 });
 var imageStyles = css({

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -34,9 +34,8 @@ export var titleCss = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   h3: {
     flex: '1 1 auto',
-    fontSize: '16px',
-    fontWeight: 400,
-    lineHeight: height,
+    font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    fontWeight: "var(--ds-font-weight-regular, 400)",
     display: '-webkit-box',
     marginBottom: 0,
     overflow: 'hidden',

package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -17,12 +17,7 @@ var buttonStyles = xcss({
 });
 var contentStyles = xcss({
   color: 'color.text',
-  // Replace with font token once it becomes stable (currently alpha)
-  // font: 'font.body.small',
-  fontSize: '12px',
-  fontStyle: 'normal',
-  fontWeight: '400',
-  lineHeight: '20px'
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var ActionButton = function ActionButton(_ref) {
   var content = _ref.content,

package/dist/esm/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/header/main.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
-import Icon from '@atlaskit/icon';
+import LegacyManualTriggerIcon from '@atlaskit/legacy-custom-icons/manual-trigger-icon';
 import { ModalHeader, useModal } from '@atlaskit/modal-dialog';
 import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
 import { G50 } from '@atlaskit/theme/colors';
 import { useAutomationMenu } from '../../menu-context';
-import { ManualTriggerGlyph } from './manual-trigger-icon';
 var i18n = defineMessages({
   modalHeaderIconLabel: {
     id: 'automation-menu.modal.header.icon.label',
@@ -39,9 +38,8 @@ export var AutomationModalHeader = function AutomationModalHeader(_ref) {
     xcss: iconStyle,
     paddingInline: "space.050",
     paddingBlock: "space.025"
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(LegacyManualTriggerIcon, {
     size: "small",
-    glyph: ManualTriggerGlyph,
     label: formatMessage(i18n.modalHeaderIconLabel),
     primaryColor: "var(--ds-icon-accent-green, ".concat(G50, ")")
   })), /*#__PURE__*/React.createElement(Heading, {

package/dist/esm/view/FlexibleCard/components/actions/follow-action/goal-icon/index.js

@@ -1,26 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Icon from '@atlaskit/icon';
 import GoalGlyph from '@atlaskit/icon/core/goal';
-var LegacyGoalGlyph = function LegacyGoalGlyph(_props) {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12.6667 8C12.6667 10.5773 10.5773 12.6667 8 12.6667C5.42267 12.6667 3.33333 10.5773 3.33333 8C3.33333 5.42267 5.42267 3.33333 8 3.33333C10.5773 3.33333 12.6667 5.42267 12.6667 8ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM9.33333 8C9.33333 8.73638 8.73638 9.33333 8 9.33333C7.26362 9.33333 6.66667 8.73638 6.66667 8C6.66667 7.26362 7.26362 6.66667 8 6.66667C8.73638 6.66667 9.33333 7.26362 9.33333 8ZM10.6667 8C10.6667 9.47276 9.47276 10.6667 8 10.6667C6.52724 10.6667 5.33333 9.47276 5.33333 8C5.33333 6.52724 6.52724 5.33333 8 5.33333C9.47276 5.33333 10.6667 6.52724 10.6667 8Z",
-    fill: "var(--ds-icon, #44546F)"
-  }));
-};
-var LegacyGoalIcon = function LegacyGoalIcon(props) {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: LegacyGoalGlyph
-  }, props));
-};
+import LegacyGoalIcon from '@atlaskit/legacy-custom-icons/goal-bold-icon';
 export var GoalIcon = function GoalIcon(props) {
   return /*#__PURE__*/React.createElement(GoalGlyph, _extends({
     color: "var(--ds-icon, #44546F)",

package/dist/esm/view/FlexibleCard/components/actions/follow-action/projects-icon/index.js

@@ -1,30 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Icon from '@atlaskit/icon';
 import ProjectIcon from '@atlaskit/icon/core/project';
-var ProjectsGlyph = function ProjectsGlyph(_props) {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.88573 4.00002C9.70892 4.00002 9.53935 4.07026 9.41433 4.19528L6.97282 6.63678L4.20525 6.94429C4.05479 6.96101 3.91451 7.02844 3.80746 7.13548L3.60959 7.33335L4.35367 8.07743C4.6791 8.40287 4.6791 8.93051 4.35367 9.25594L3.47152 10.1381C3.21117 10.3984 2.78906 10.3984 2.52871 10.1381C2.26836 9.87774 2.26836 9.45563 2.52871 9.19528L3.0573 8.66669L2.43108 8.04046C2.04055 7.64993 2.04055 7.01677 2.43108 6.62625L2.86465 6.19267C3.18578 5.87154 3.60664 5.66927 4.05801 5.61911L6.36073 5.36326L8.47152 3.25247C8.84659 2.8774 9.3553 2.66669 9.88573 2.66669H12.0001C12.7365 2.66669 13.3334 3.26364 13.3334 4.00002V6.1144C13.3334 6.64483 13.1227 7.15354 12.7477 7.52862L10.6369 9.6394L10.381 11.9421C10.3309 12.3935 10.1286 12.8143 9.80746 13.1355L9.37389 13.5691C8.98336 13.9596 8.3502 13.9596 7.95967 13.5691L7.33345 12.9428L6.80485 13.4714C6.5445 13.7318 6.12239 13.7318 5.86204 13.4714C5.60169 13.2111 5.60169 12.789 5.86204 12.5286L6.74419 11.6465C7.06963 11.321 7.59726 11.321 7.9227 11.6465L8.66678 12.3905L8.86466 12.1927C8.9717 12.0856 9.03912 11.9453 9.05584 11.7949L9.36335 9.02731L11.8049 6.58581C11.9299 6.46078 12.0001 6.29121 12.0001 6.1144V4.00002H9.88573ZM5.80486 10.1953C6.06521 10.4556 6.06521 10.8777 5.80486 11.1381L3.80486 13.1381C3.54451 13.3984 3.1224 13.3984 2.86205 13.1381C2.6017 12.8777 2.6017 12.4556 2.86205 12.1953L4.86205 10.1953C5.1224 9.93493 5.54451 9.93493 5.80486 10.1953ZM10.0001 6.66669C10.3683 6.66669 10.6668 6.36821 10.6668 6.00002C10.6668 5.63183 10.3683 5.33335 10.0001 5.33335C9.63193 5.33335 9.33346 5.63183 9.33346 6.00002C9.33346 6.36821 9.63193 6.66669 10.0001 6.66669Z",
-    fill: "var(--ds-icon, #44546F)"
-  }));
-};
-var LegacyProjectsIcon = function LegacyProjectsIcon(props) {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: ProjectsGlyph
-  }, props));
-};
+import LegacyProjectsIcon from '@atlaskit/legacy-custom-icons/project-icon';
 export var ProjectsIcon = function ProjectsIcon(props) {
   return /*#__PURE__*/React.createElement(ProjectIcon, _extends({
     color: "var(--ds-icon, #44546F)",
     LEGACY_fallbackIcon: LegacyProjectsIcon,
+    LEGACY_margin: "10px",
     spacing: "spacious"
   }, props));
 };

package/dist/esm/view/FlexibleCard/components/actions/follow-action/unfollow-icon/index.js

@@ -1,34 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Icon from '@atlaskit/icon';
-var UnfollowGlyph = function UnfollowGlyph(props) {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    "data-testid": props['data-testid'],
-    "aria-label": props['aria-label']
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: props.className,
-    role: "presentation",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14 4.66667H11.3333C10.9652 4.66667 10.6667 4.96514 10.6667 5.33333C10.6667 5.70152 10.9652 6 11.3333 6H14C14.3682 6 14.6667 5.70152 14.6667 5.33333C14.6667 4.96514 14.3682 4.66667 14 4.66667Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M3.33334 9.33333C3.33334 8.59667 3.93468 8 4.67268 8H9.99401C10.734 8 11.3333 8.596 11.3333 9.33733V12.2973C11.3333 14.5673 3.33334 14.5673 3.33334 12.2973V9.33333Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M7.33334 7.33333C8.8061 7.33333 10 6.13943 10 4.66667C10 3.19391 8.8061 2 7.33334 2C5.86058 2 4.66668 3.19391 4.66668 4.66667C4.66668 6.13943 5.86058 7.33333 7.33334 7.33333Z",
-    fill: "currentColor"
-  }));
-};
+import PersonRemoveIcon from '@atlaskit/icon/core/person-remove';
+import LegacyUnfollowIcon from '@atlaskit/legacy-custom-icons/unfollow-icon';
 var UnfollowIcon = function UnfollowIcon(props) {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: UnfollowGlyph
+  return /*#__PURE__*/React.createElement(PersonRemoveIcon, _extends({
+    LEGACY_fallbackIcon: LegacyUnfollowIcon
   }, props));
 };
 export default UnfollowIcon;