@atlaskit/smart-card 30.2.7 → 30.3.1

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

@@ -7,35 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _icon = _interopRequireDefault(require("@atlaskit/icon"));
-var UnfollowGlyph = function UnfollowGlyph(props) {
-  return /*#__PURE__*/_react.default.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.default.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.default.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.default.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"
-  }));
-};
+var _personRemove = _interopRequireDefault(require("@atlaskit/icon/core/person-remove"));
+var _unfollowIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/unfollow-icon"));
 var UnfollowIcon = function UnfollowIcon(props) {
-  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
-    glyph: UnfollowGlyph
+  return /*#__PURE__*/_react.default.createElement(_personRemove.default, (0, _extends2.default)({
+    LEGACY_fallbackIcon: _unfollowIcon.default
   }, props));
 };
 var _default = exports.default = UnfollowIcon;

package/dist/cjs/view/FlexibleCard/components/blocks/action-block/action-footer/index.js

@@ -30,10 +30,7 @@ var errorContentStyles = (0, _primitives.xcss)({
 });
 var titleStyles = (0, _primitives.xcss)({
   color: 'color.text.subtle',
-  fontSize: '12px',
-  fontStyle: 'normal',
-  fontWeight: '400',
-  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)"
 });
 var getIcon = function getIcon(appearance) {
   switch (appearance) {

package/dist/cjs/view/FlexibleCard/components/blocks/ai-footer-block/icons/info/index.js

@@ -7,28 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.InfoIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _icon = _interopRequireDefault(require("@atlaskit/icon"));
-var CustomGlyph = function CustomGlyph(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M7 5C7 5.55228 7.44772 6 8 6C8.55228 6 9 5.55228 9 5C9 4.44772 8.55228 4 8 4C7.44772 4 7 4.44772 7 5Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M7.25 7L7.25 12H8.75L8.75 7H7.25Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1ZM2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5C4.96243 2.5 2.5 4.96243 2.5 8Z",
-    fill: "currentColor"
-  }));
-};
+var _information = _interopRequireDefault(require("@atlaskit/icon/core/information"));
+var _infoIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/info-icon"));
 var InfoIcon = exports.InfoIcon = function InfoIcon(props) {
-  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({}, props, {
-    glyph: CustomGlyph
-  }));
+  return /*#__PURE__*/_react.default.createElement(_information.default, (0, _extends2.default)({
+    color: props.color || 'currentColor',
+    LEGACY_fallbackIcon: _infoIcon.default
+  }, props));
 };

package/dist/cjs/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -34,8 +34,8 @@ var AIFooterMetadata = exports.AIFooterMetadata = function AIFooterMetadata(_ref
   }, function (tooltipProps) {
     return /*#__PURE__*/_react.default.createElement(_primitives.Box, tooltipProps, /*#__PURE__*/_react.default.createElement(_info.InfoIcon, {
       label: "Information",
-      size: "small",
-      primaryColor: "var(--ds-icon-subtle, #626F86)"
+      LEGACY_size: "small",
+      color: "var(--ds-icon-subtle, #626F86)"
     }));
   }), /*#__PURE__*/_react.default.createElement(_atlassianIntelligence.default, {
     label: "AI",

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -41,7 +41,7 @@ var getThemeStyles = function getThemeStyles(theme) {
             color: "var(--ds-text-subtlest, #626F86)",
             textDecoration: 'underline'
           },
-          fontSize: '12px'
+          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/design-system/ensure-design-token-usage

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

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

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { getUrl } from '@atlaskit/linking-common';
 import { chunkloadFailedEvent, connectFailedEvent, connectSucceededEvent, context, instrumentEvent, invokeFailedEvent, invokeSucceededEvent, screenAuthPopupEvent, trackAppAccountAuthStarted, trackAppAccountConnected, uiActionClickedEvent, uiAuthAlternateAccountEvent, uiAuthEvent, uiCardClickedEvent, uiClosedAuthEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, uiHoverCardViewedEvent, uiLearnMoreLinkClickedEvent, uiRenderFailedEvent, uiRenderSuccessEvent, uiSmartLinkStatusListItemButtonClicked, uiSmartLinkStatusLozengeButtonClicked, uiSmartLinkStatusOpenPreviewButtonClicked } from '../../utils/analytics';
-import { trackHoverCardResolutionStarted, trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiIframeDwelledEvent, uiIframeFocusedEvent, uiServerActionClicked } from '../../utils/analytics/analytics';
+import { trackHoverCardResolutionStarted, trackSmartLinkQuickActionFailed, trackSmartLinkQuickActionStarted, trackSmartLinkQuickActionSuccess, uiServerActionClicked } from '../../utils/analytics/analytics';
 import { getDefinitionId, getExtensionKey, getProduct, getResourceType, getStatusDetails, getSubproduct } from '../helpers';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 import { useDispatchAnalytics } from './useDispatchAnalytics';
@@ -157,74 +157,6 @@ export const useSmartLinkAnalytics = (url, id, defaultLocation) => {
       destinationSubproduct,
       actionSubjectId
     }), commonAttributes)),
-    /**
-     * This fires an event that represents when a user dwells their cursor on a Smart Link's iframe.
-     * @param id The unique ID for this Smart Link.
-     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
-     * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
-     * @param definitionId The definitionId of the Smart Link resolver invoked.
-     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
-     * @param location Where the Smart Link is currently rendered.
-     * @param destinationProduct The product the Smart Link is linked to.
-     * @param dwellTime Total seconds that the user has dwelled on this iframe
-     * @param dwellPercentVisible Percentage element was visible at end of dwell
-     * @returns
-     * @deprecated
-     */
-    iframeDwelledEvent: ({
-      id,
-      display,
-      status,
-      definitionId,
-      extensionKey,
-      location,
-      destinationProduct,
-      destinationSubproduct,
-      dwellTime,
-      dwellPercentVisible
-    }) => dispatchAnalytics(applyCommonAttributes(uiIframeDwelledEvent({
-      id,
-      display,
-      status,
-      definitionId,
-      extensionKey,
-      location,
-      destinationProduct,
-      destinationSubproduct,
-      dwellTime,
-      dwellPercentVisible
-    }), commonAttributes)),
-    /**
-     * This fires an event that represents when a user clicks or tabs into a Smart Link's iframe.
-     * @param id The unique ID for this Smart Link.
-     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
-     * @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
-     * @param definitionId The definitionId of the Smart Link resolver invoked.
-     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
-     * @param location Where the Smart Link is currently rendered.
-     * @param destinationProduct The product the Smart Link is linked to.
-     * @returns
-     * @deprecated
-     */
-    iframeFocusedEvent: ({
-      id,
-      display,
-      status,
-      definitionId,
-      extensionKey,
-      location,
-      destinationProduct,
-      destinationSubproduct
-    }) => dispatchAnalytics(applyCommonAttributes(uiIframeFocusedEvent({
-      id,
-      display,
-      status,
-      definitionId,
-      extensionKey,
-      location,
-      destinationProduct,
-      destinationSubproduct
-    }), commonAttributes)),
     /**
      * This fires an event that represents when a user clicks on a Smart Link action.
      * Note: This also starts the UFO smart-link-action-invocation experience.

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

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "30.2.7"
+  packageVersion: "30.3.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -394,68 +394,6 @@ export const uiCardClickedEvent = ({
     destinationSubproduct
   }
 });
-
-/**
- * @deprecated
- */
-export const uiIframeDwelledEvent = ({
-  id,
-  display,
-  status,
-  definitionId,
-  extensionKey,
-  location,
-  destinationProduct,
-  destinationSubproduct,
-  dwellTime,
-  dwellPercentVisible
-}) => ({
-  action: 'dwelled',
-  actionSubject: 'smartLinkIframe',
-  eventType: 'ui',
-  attributes: {
-    ...context,
-    id,
-    status,
-    definitionId,
-    extensionKey,
-    display,
-    location,
-    destinationProduct,
-    destinationSubproduct,
-    dwellTime,
-    dwellPercentVisible
-  }
-});
-
-/**
- * @deprecated
- */
-export const uiIframeFocusedEvent = ({
-  id,
-  display,
-  status,
-  definitionId,
-  extensionKey,
-  location,
-  destinationProduct,
-  destinationSubproduct
-}) => ({
-  action: 'focused',
-  actionSubject: 'smartLinkIframe',
-  eventType: 'ui',
-  attributes: {
-    ...context,
-    id,
-    status,
-    definitionId,
-    extensionKey,
-    display,
-    location,
-    destinationProduct,
-    destinationSubproduct
-  }
-});
 export const uiActionClickedEvent = ({
   id,
   actionType,

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

@@ -1,6 +1,6 @@
 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 const instrumentEvent = ({
   id,
   status,

package/dist/es2019/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 const blockCardContentHeaderNameClassName = 'block-card-content-header-name';
 const baseStyles = css({
-  fontSize: `${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/es2019/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 const blockCardResolvingViewClassName = 'block-card-resolving-view';
 const messageStyles = css({
-  fontSize: `${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, ${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/es2019/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';
@@ -148,47 +147,21 @@ function Component({
     }
   }, [isFlexibleUi, appearance, state.status, url, definitionId, extensionKey, analytics.ui, id, canBeDatasource]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
-    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
-      fireEvent('ui.smartLinkIframe.dwelled', {
-        id,
-        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-        display: isFlexibleUi ? 'flexible' : appearance,
-        dwellPercentVisible,
-        dwellTime
-      });
-    } else {
-      analytics.ui.iframeDwelledEvent({
-        id,
-        display: isFlexibleUi ? 'flexible' : appearance,
-        status: state.status,
-        definitionId,
-        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,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      dwellPercentVisible,
+      dwellTime
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
   const onIframeFocus = useCallback(() => {
-    if (fg('smart-card-migrate-smartlinkiframe-analytics')) {
-      fireEvent('ui.smartLinkIframe.focus', {
-        id,
-        definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
-        display: isFlexibleUi ? 'flexible' : appearance
-      });
-    } else {
-      analytics.ui.iframeFocusedEvent({
-        id,
-        display: isFlexibleUi ? 'flexible' : appearance,
-        status: state.status,
-        definitionId,
-        extensionKey,
-        destinationProduct: product,
-        destinationSubproduct: subproduct
-      });
-    }
-  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct, fireEvent]);
+    fireEvent('ui.smartLinkIframe.focus', {
+      id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
   if (isFlexibleUi) {
     let cardState = state;
     if (error) {

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

@@ -214,8 +214,7 @@ ${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-va
 }, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-subtlest, ${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'));
@@ -292,9 +291,7 @@ export const ContentWrapper = styled.div({
 export const Title = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text, ${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: `${20 * 4}px`,
   overflow: 'hidden'
 });
@@ -304,9 +301,7 @@ export const 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, ${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%'));
@@ -316,9 +311,7 @@ export const Description = styled.div({
   marginTop: `calc(${"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, ${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: `${18 * 3}px`,
   overflow: 'hidden'
 });

package/dist/es2019/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';
 const messageStyles = css({
-  fontSize: `${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/es2019/view/EmbedCard/views/unresolved-view/index.js

@@ -26,7 +26,7 @@ const contentStyles = css({
   maxWidth: gs(50)
 });
 const 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'
 });
 const imageStyles = css({

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

@@ -34,9 +34,8 @@ export const 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/es2019/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -17,12 +17,7 @@ const buttonStyles = xcss({
 });
 const 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)"
 });
 const ActionButton = ({
   content,

package/dist/es2019/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';
 const i18n = defineMessages({
   modalHeaderIconLabel: {
     id: 'automation-menu.modal.header.icon.label',
@@ -43,9 +42,8 @@ export const AutomationModalHeader = ({
     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, ${G50})`
   })), /*#__PURE__*/React.createElement(Heading, {

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

@@ -1,22 +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';
-const LegacyGoalGlyph = _props => /*#__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)"
-}));
-const LegacyGoalIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  glyph: LegacyGoalGlyph
-}, props));
+import LegacyGoalIcon from '@atlaskit/legacy-custom-icons/goal-bold-icon';
 export const GoalIcon = props => /*#__PURE__*/React.createElement(GoalGlyph, _extends({
   color: "var(--ds-icon, #44546F)",
   LEGACY_fallbackIcon: LegacyGoalIcon,

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

@@ -1,24 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Icon from '@atlaskit/icon';
 import ProjectIcon from '@atlaskit/icon/core/project';
-const ProjectsGlyph = _props => /*#__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)"
-}));
-const LegacyProjectsIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  glyph: ProjectsGlyph
-}, props));
+import LegacyProjectsIcon from '@atlaskit/legacy-custom-icons/project-icon';
 export const ProjectsIcon = props => /*#__PURE__*/React.createElement(ProjectIcon, _extends({
   color: "var(--ds-icon, #44546F)",
   LEGACY_fallbackIcon: LegacyProjectsIcon,
+  LEGACY_margin: "10px",
   spacing: "spacious"
 }, props));

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

@@ -1,30 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Icon from '@atlaskit/icon';
-const UnfollowGlyph = props => /*#__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"
-}));
-const UnfollowIcon = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  glyph: UnfollowGlyph
+import PersonRemoveIcon from '@atlaskit/icon/core/person-remove';
+import LegacyUnfollowIcon from '@atlaskit/legacy-custom-icons/unfollow-icon';
+const UnfollowIcon = props => /*#__PURE__*/React.createElement(PersonRemoveIcon, _extends({
+  LEGACY_fallbackIcon: LegacyUnfollowIcon
 }, props));
 export default UnfollowIcon;

package/dist/es2019/view/FlexibleCard/components/blocks/action-block/action-footer/index.js

@@ -23,10 +23,7 @@ const errorContentStyles = xcss({
 });
 const titleStyles = xcss({
   color: 'color.text.subtle',
-  fontSize: '12px',
-  fontStyle: 'normal',
-  fontWeight: '400',
-  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)"
 });
 const getIcon = appearance => {
   switch (appearance) {