@atlaskit/media-card 79.3.4 → 79.3.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-card
 
+## 79.3.6
+
+### Patch Changes
+
+- [#169848](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169848)
+  [`0c2daefdb5712`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c2daefdb5712) -
+  Standardise generation of telemetry IDs across media packages.
+- Updated dependencies
+
+## 79.3.5
+
+### Patch Changes
+
+- [#168763](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168763)
+  [`96133b2953ba2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96133b2953ba2) -
+  Abort VC when click file card to open media viewer
+
 ## 79.3.4
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -20,7 +20,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
 var _excluded = ["identifier"];
 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 packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.4";
+var packageVersion = "79.3.6";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/externalImageCard.js

@@ -65,7 +65,7 @@ var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_
   // Generate unique traceId for file
   var traceContext = (0, _react.useMemo)(function () {
     return {
-      traceId: (0, _mediaCommon.getRandomHex)(8)
+      traceId: (0, _mediaCommon.getRandomTelemetryId)()
     };
   }, []);
   var fileStateFlagsRef = (0, _react.useRef)({

package/dist/cjs/card/fileCard.js

@@ -40,6 +40,7 @@ var _reactIntlNext = require("react-intl-next");
 var _abuseModal = require("@atlaskit/media-ui/abuseModal");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experienceTraceIdContext = require("@atlaskit/react-ufo/experience-trace-id-context");
+var _usePressTracing = _interopRequireDefault(require("@atlaskit/react-ufo/use-press-tracing"));
 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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; }
@@ -52,7 +53,7 @@ var traceContextRetriever = function traceContextRetriever() {
     };
   } else {
     return {
-      traceId: (0, _mediaCommon.getRandomHex)(8)
+      traceId: (0, _mediaCommon.getRandomTelemetryId)()
     };
   }
 };
@@ -102,6 +103,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
+  var pressTracing = (0, _usePressTracing.default)('click-file-card');
   var mediaClient = (0, _mediaClientReact.useMediaClient)();
   var _useState3 = (0, _react.useState)(null),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
@@ -429,6 +431,11 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
         occurrenceKey: identifier.occurrenceKey
       });
     }
+
+    // Abort VC when click file card
+    if ((0, _platformFeatureFlags.fg)('platform_abort_vc_click_file_card')) {
+      pressTracing();
+    }
   };
 
   //----------------------------------------------------------------//

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.4";
+var packageVersion = "79.3.6";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/ui/tickBox/tickBox.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TickBox = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _checkMarkCheck = _interopRequireDefault(require("@atlaskit/icon/utility/migration/check-mark--check"));
+var _checkMarkCheck = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--check"));
 var _tickBoxWrapper = require("./tickBoxWrapper");
 var TickBox = exports.TickBox = function TickBox(_ref) {
   var selected = _ref.selected;
@@ -14,6 +14,7 @@ var TickBox = exports.TickBox = function TickBox(_ref) {
     selected: selected
   }, /*#__PURE__*/_react.default.createElement(_checkMarkCheck.default, {
     color: "currentColor",
-    label: "tick"
+    label: "tick",
+    size: "small"
   }));
 };

package/dist/cjs/card/ui/titleBox/failedTitleBox.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FailedTitleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/utility/migration/warning--editor-warning"));
+var _warningEditorWarning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning--editor-warning"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
 var _titleBoxComponents = require("./titleBoxComponents");
@@ -21,6 +21,7 @@ var FailedTitleBox = exports.FailedTitleBox = function FailedTitleBox(_ref) {
     label: 'Warning',
     LEGACY_size: 'small',
     LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
-    color: "var(--ds-text-danger, ".concat(_colors.R300, ")")
+    color: "var(--ds-text-danger, ".concat(_colors.R300, ")"),
+    size: "small"
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
 };

package/dist/cjs/card/ui/titleBox/titleBox.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TitleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _lockLockedLockFilled = _interopRequireDefault(require("@atlaskit/icon/utility/migration/lock-locked--lock-filled"));
+var _lockLockedLockFilled = _interopRequireDefault(require("@atlaskit/icon/core/migration/lock-locked--lock-filled"));
 var _truncateText = require("@atlaskit/media-ui/truncateText");
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 var _titleBoxComponents = require("./titleBoxComponents");
@@ -37,7 +37,8 @@ var TitleBox = exports.TitleBox = (0, _reactIntlNext.injectIntl)(function (_ref)
   }, createdAt !== undefined && isValidTimestamp(createdAt) ? (0, _formatDate.formatDate)(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockLockedLockFilled.default, {
     color: "currentColor",
     label: "",
-    LEGACY_size: "small"
+    LEGACY_size: "small",
+    size: "small"
   })));
 }, {
   enforceContext: false

package/dist/cjs/inline/loader.js

@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "79.3.4",
+        packageName: "79.3.6",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -14,7 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _colors = require("@atlaskit/theme/colors");
-var _warning = _interopRequireDefault(require("@atlaskit/icon/utility/migration/warning"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
 var _analytics = require("../utils/analytics");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -71,7 +71,8 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
       LEGACY_margin: "0 ".concat("var(--ds-space-negative-050, -4px)", " 0 0"),
       label: "error",
       LEGACY_size: "small",
-      color: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
+      color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+      size: "small"
     }), message)
   );
 };

package/dist/cjs/inline/mediaInlineCard.js

@@ -21,6 +21,8 @@ var _errors = require("../errors");
 var _analytics = require("../utils/analytics");
 var _mediaInlineCardAnalytics = require("./mediaInlineCardAnalytics");
 var _mediaClientReact = require("@atlaskit/media-client-react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _usePressTracing = _interopRequireDefault(require("@atlaskit/react-ufo/use-press-tracing"));
 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); }
 // UI component which renders an inline link in the appropiate state based on a media file
 var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
@@ -55,6 +57,7 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     setMediaViewerVisible = _useState0[1];
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var pressTracing = (0, _usePressTracing.default)('click-media-inline-card');
   var fireFailedOperationalEvent = function fireFailedOperationalEvent() {
     var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _errors.MediaCardError('missing-error-data');
     var failReason = arguments.length > 1 ? arguments[1] : undefined;
@@ -82,6 +85,11 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     if (shouldOpenMediaViewer) {
       setMediaViewerVisible(true);
     }
+
+    // Abort VC when click media inline card
+    if ((0, _platformFeatureFlags.fg)('platform_abort_vc_click_file_card')) {
+      pressTracing();
+    }
   };
   var onMediaViewerClose = function onMediaViewerClose() {
     return setMediaViewerVisible(false);

package/dist/cjs/utils/ufoExperiences.js

@@ -15,7 +15,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.4";
+var packageVersion = "79.3.6";
 var SAMPLE_RATE = 0.05;
 var concurrentExperience;
 var getExperience = function getExperience(id) {

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.3.4";
+const packageVersion = "79.3.6";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/externalImageCard.js

@@ -1,6 +1,6 @@
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
-import { getRandomHex } from '@atlaskit/media-common';
+import { getRandomTelemetryId } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -46,7 +46,7 @@ export const ExternalImageCard = ({
 
   // Generate unique traceId for file
   const traceContext = useMemo(() => ({
-    traceId: getRandomHex(8)
+    traceId: getRandomTelemetryId()
   }), []);
   const fileStateFlagsRef = useRef({
     wasStatusUploading: false,

package/dist/es2019/card/fileCard.js

@@ -1,7 +1,7 @@
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState, isErrorFileState, toCommonMediaClientError } from '@atlaskit/media-client';
 import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
-import { getRandomHex, isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser, getRandomTelemetryId } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { Suspense, useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { useMergeRefs } from 'use-callback-ref';
@@ -28,6 +28,7 @@ import { useIntl } from 'react-intl-next';
 import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getActiveTrace } from '@atlaskit/react-ufo/experience-trace-id-context';
+import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
 const traceContextRetriever = () => {
   const trace = getActiveTrace();
   if (trace && fg('platform-filecard-ufo-trace')) {
@@ -37,7 +38,7 @@ const traceContextRetriever = () => {
     };
   } else {
     return {
-      traceId: getRandomHex(8)
+      traceId: getRandomTelemetryId()
     };
   }
 };
@@ -83,6 +84,7 @@ export const FileCard = ({
   //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
+  const pressTracing = usePressTracing('click-file-card');
   const mediaClient = useMediaClient();
   const [cardElement, setCardElement] = useState(null);
   const cardDimensions = dimensions || getDefaultCardDimensions(appearance);
@@ -352,6 +354,11 @@ export const FileCard = ({
         occurrenceKey: identifier.occurrenceKey
       });
     }
+
+    // Abort VC when click file card
+    if (fg('platform_abort_vc_click_file_card')) {
+      pressTracing();
+    }
   };
 
   //----------------------------------------------------------------//

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.3.4";
+const packageVersion = "79.3.6";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/ui/tickBox/tickBox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TickIcon from '@atlaskit/icon/utility/migration/check-mark--check';
+import TickIcon from '@atlaskit/icon/core/migration/check-mark--check';
 import { TickBoxWrapper } from './tickBoxWrapper';
 export const TickBox = ({
   selected
@@ -7,5 +7,6 @@ export const TickBox = ({
   selected: selected
 }, /*#__PURE__*/React.createElement(TickIcon, {
   color: "currentColor",
-  label: "tick"
+  label: "tick",
+  size: "small"
 }));

package/dist/es2019/card/ui/titleBox/failedTitleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import EditorWarningIcon from '@atlaskit/icon/utility/migration/warning--editor-warning';
+import EditorWarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
 import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
@@ -14,6 +14,7 @@ export const FailedTitleBox = ({
     label: 'Warning',
     LEGACY_size: 'small',
     LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
-    color: `var(--ds-text-danger, ${R300})`
+    color: `var(--ds-text-danger, ${R300})`,
+    size: "small"
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

package/dist/es2019/card/ui/titleBox/titleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import LockFilledIcon from '@atlaskit/icon/utility/migration/lock-locked--lock-filled';
+import LockFilledIcon from '@atlaskit/icon/core/migration/lock-locked--lock-filled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
@@ -29,7 +29,8 @@ export const TitleBox = injectIntl(({
   }, createdAt !== undefined && isValidTimestamp(createdAt) ? formatDate(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/React.createElement(TitleBoxIcon, null, /*#__PURE__*/React.createElement(LockFilledIcon, {
     color: "currentColor",
     label: "",
-    LEGACY_size: "small"
+    LEGACY_size: "small",
+    size: "small"
   })));
 }, {
   enforceContext: false

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "79.3.4",
+      packageName: "79.3.6",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, R300, N30A, N900 } from '@atlaskit/theme/colors';
-import WarningIcon from '@atlaskit/icon/utility/migration/warning';
+import WarningIcon from '@atlaskit/icon/core/migration/warning';
 import { fireMediaCardEvent } from '../utils/analytics';
 const ErrorBoundaryComponent = ({
   message,
@@ -59,7 +59,8 @@ const ErrorBoundaryComponent = ({
       LEGACY_margin: `0 ${"var(--ds-space-negative-050, -4px)"} 0 0`,
       label: "error",
       LEGACY_size: "small",
-      color: `var(--ds-icon-danger, ${R300})`
+      color: `var(--ds-icon-danger, ${R300})`,
+      size: "small"
     }), message)
   );
 };

package/dist/es2019/inline/mediaInlineCard.js

@@ -12,6 +12,8 @@ import { MediaCardError } from '../errors';
 import { fireMediaCardEvent } from '../utils/analytics';
 import { getErrorStatusPayload, getFailedProcessingStatusPayload, getSucceededStatusPayload } from './mediaInlineCardAnalytics';
 import { useCopyIntent } from '@atlaskit/media-client-react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
 // UI component which renders an inline link in the appropiate state based on a media file
 export const MediaInlineCardInternal = ({
   mediaClient,
@@ -32,6 +34,7 @@ export const MediaInlineCardInternal = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const pressTracing = usePressTracing('click-media-inline-card');
   const fireFailedOperationalEvent = (error = new MediaCardError('missing-error-data'), failReason) => {
     const payload = failReason ? getFailedProcessingStatusPayload(identifier.id, fileState) : getErrorStatusPayload(identifier.id, error, fileState);
     setIsFailedEventSent(true);
@@ -58,6 +61,11 @@ export const MediaInlineCardInternal = ({
     if (shouldOpenMediaViewer) {
       setMediaViewerVisible(true);
     }
+
+    // Abort VC when click media inline card
+    if (fg('platform_abort_vc_click_file_card')) {
+      pressTracing();
+    }
   };
   const onMediaViewerClose = () => setMediaViewerVisible(false);
   const renderMediaViewer = () => {

package/dist/es2019/utils/ufoExperiences.js

@@ -5,7 +5,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "79.3.4";
+const packageVersion = "79.3.6";
 const SAMPLE_RATE = 0.05;
 let concurrentExperience;
 const getExperience = id => {

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.4";
+var packageVersion = "79.3.6";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/externalImageCard.js

@@ -4,7 +4,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 { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
-import { getRandomHex } from '@atlaskit/media-common';
+import { getRandomTelemetryId } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -56,7 +56,7 @@ export var ExternalImageCard = function ExternalImageCard(_ref) {
   // Generate unique traceId for file
   var traceContext = useMemo(function () {
     return {
-      traceId: getRandomHex(8)
+      traceId: getRandomTelemetryId()
     };
   }, []);
   var fileStateFlagsRef = useRef({

package/dist/esm/card/fileCard.js

@@ -8,7 +8,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { globalMediaEventEmitter, RECENTS_COLLECTION, imageResizeModeToFileImageMode, isProcessedFileState, isErrorFileState, toCommonMediaClientError } from '@atlaskit/media-client';
 import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
-import { getRandomHex, isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import { isMimeTypeSupportedByBrowser, isVideoMimeTypeSupportedByBrowser, getRandomTelemetryId } from '@atlaskit/media-common';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import React, { Suspense, useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { useMergeRefs } from 'use-callback-ref';
@@ -35,6 +35,7 @@ import { useIntl } from 'react-intl-next';
 import { AbuseModal } from '@atlaskit/media-ui/abuseModal';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getActiveTrace } from '@atlaskit/react-ufo/experience-trace-id-context';
+import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
 var traceContextRetriever = function traceContextRetriever() {
   var trace = getActiveTrace();
   if (trace && fg('platform-filecard-ufo-trace')) {
@@ -44,7 +45,7 @@ var traceContextRetriever = function traceContextRetriever() {
     };
   } else {
     return {
-      traceId: getRandomHex(8)
+      traceId: getRandomTelemetryId()
     };
   }
 };
@@ -94,6 +95,7 @@ export var FileCard = function FileCard(_ref) {
   //------------ State, Refs & Initial Values ----------------------//
   //----------------------------------------------------------------//
 
+  var pressTracing = usePressTracing('click-file-card');
   var mediaClient = useMediaClient();
   var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -421,6 +423,11 @@ export var FileCard = function FileCard(_ref) {
         occurrenceKey: identifier.occurrenceKey
       });
     }
+
+    // Abort VC when click file card
+    if (fg('platform_abort_vc_click_file_card')) {
+      pressTracing();
+    }
   };
 
   //----------------------------------------------------------------//

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.4";
+var packageVersion = "79.3.6";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/ui/tickBox/tickBox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import TickIcon from '@atlaskit/icon/utility/migration/check-mark--check';
+import TickIcon from '@atlaskit/icon/core/migration/check-mark--check';
 import { TickBoxWrapper } from './tickBoxWrapper';
 export var TickBox = function TickBox(_ref) {
   var selected = _ref.selected;
@@ -7,6 +7,7 @@ export var TickBox = function TickBox(_ref) {
     selected: selected
   }, /*#__PURE__*/React.createElement(TickIcon, {
     color: "currentColor",
-    label: "tick"
+    label: "tick",
+    size: "small"
   }));
 };

package/dist/esm/card/ui/titleBox/failedTitleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import EditorWarningIcon from '@atlaskit/icon/utility/migration/warning--editor-warning';
+import EditorWarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
 import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
@@ -14,6 +14,7 @@ export var FailedTitleBox = function FailedTitleBox(_ref) {
     label: 'Warning',
     LEGACY_size: 'small',
     LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
-    color: "var(--ds-text-danger, ".concat(R300, ")")
+    color: "var(--ds-text-danger, ".concat(R300, ")"),
+    size: "small"
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

package/dist/esm/card/ui/titleBox/titleBox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import LockFilledIcon from '@atlaskit/icon/utility/migration/lock-locked--lock-filled';
+import LockFilledIcon from '@atlaskit/icon/core/migration/lock-locked--lock-filled';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
@@ -30,7 +30,8 @@ export var TitleBox = injectIntl(function (_ref) {
   }, createdAt !== undefined && isValidTimestamp(createdAt) ? formatDate(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/React.createElement(TitleBoxIcon, null, /*#__PURE__*/React.createElement(LockFilledIcon, {
     color: "currentColor",
     label: "",
-    LEGACY_size: "small"
+    LEGACY_size: "small",
+    size: "small"
   })));
 }, {
   enforceContext: false

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "79.3.4",
+        packageName: "79.3.6",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -11,7 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, R300, N30A, N900 } from '@atlaskit/theme/colors';
-import WarningIcon from '@atlaskit/icon/utility/migration/warning';
+import WarningIcon from '@atlaskit/icon/core/migration/warning';
 import { fireMediaCardEvent } from '../utils/analytics';
 var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   var message = _ref.message,
@@ -64,7 +64,8 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
       LEGACY_margin: "0 ".concat("var(--ds-space-negative-050, -4px)", " 0 0"),
       label: "error",
       LEGACY_size: "small",
-      color: "var(--ds-icon-danger, ".concat(R300, ")")
+      color: "var(--ds-icon-danger, ".concat(R300, ")"),
+      size: "small"
     }), message)
   );
 };

package/dist/esm/inline/mediaInlineCard.js

@@ -13,6 +13,8 @@ import { MediaCardError } from '../errors';
 import { fireMediaCardEvent } from '../utils/analytics';
 import { getErrorStatusPayload, getFailedProcessingStatusPayload, getSucceededStatusPayload } from './mediaInlineCardAnalytics';
 import { useCopyIntent } from '@atlaskit/media-client-react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import usePressTracing from '@atlaskit/react-ufo/use-press-tracing';
 // UI component which renders an inline link in the appropiate state based on a media file
 export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
   var mediaClient = _ref.mediaClient,
@@ -46,6 +48,7 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     setMediaViewerVisible = _useState0[1];
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var pressTracing = usePressTracing('click-media-inline-card');
   var fireFailedOperationalEvent = function fireFailedOperationalEvent() {
     var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new MediaCardError('missing-error-data');
     var failReason = arguments.length > 1 ? arguments[1] : undefined;
@@ -73,6 +76,11 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     if (shouldOpenMediaViewer) {
       setMediaViewerVisible(true);
     }
+
+    // Abort VC when click media inline card
+    if (fg('platform_abort_vc_click_file_card')) {
+      pressTracing();
+    }
   };
   var onMediaViewerClose = function onMediaViewerClose() {
     return setMediaViewerVisible(false);

package/dist/esm/utils/ufoExperiences.js

@@ -8,7 +8,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "79.3.4";
+var packageVersion = "79.3.6";
 var SAMPLE_RATE = 0.05;
 var concurrentExperience;
 var getExperience = function getExperience(id) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "79.3.4",
+	"version": "79.3.6",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,20 +42,20 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/media-client": "^33.3.0",
+		"@atlaskit/media-client": "^33.4.0",
 		"@atlaskit/media-client-react": "^4.1.0",
-		"@atlaskit/media-common": "^12.1.0",
+		"@atlaskit/media-common": "^12.2.0",
 		"@atlaskit/media-file-preview": "^0.11.0",
 		"@atlaskit/media-svg": "^2.1.0",
-		"@atlaskit/media-ui": "^28.2.0",
+		"@atlaskit/media-ui": "^28.3.0",
 		"@atlaskit/media-viewer": "^52.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/react-ufo": "^3.13.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.0.0",
-		"@atlaskit/tooltip": "^20.2.0",
+		"@atlaskit/tokens": "^5.2.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,14 +78,14 @@
 		"@atlaskit/analytics-listeners": "^9.0.0",
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/inline-message": "^15.2.0",
+		"@atlaskit/inline-message": "^15.3.0",
 		"@atlaskit/media-core": "^36.1.0",
 		"@atlaskit/media-picker": "^69.0.0",
 		"@atlaskit/media-state": "^1.6.0",
-		"@atlaskit/media-test-data": "^3.0.0",
-		"@atlaskit/media-test-helpers": "^36.0.0",
+		"@atlaskit/media-test-data": "^3.1.0",
+		"@atlaskit/media-test-helpers": "^36.1.0",
 		"@atlaskit/radio": "^8.1.0",
-		"@atlaskit/range": "^9.0.0",
+		"@atlaskit/range": "^9.1.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/visual-regression": "workspace:^",
@@ -145,6 +145,9 @@
 		},
 		"platform_media_resume_video_on_token_expiry": {
 			"type": "boolean"
+		},
+		"platform_abort_vc_click_file_card": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {