@atlaskit/media-card 74.3.2 → 74.4.1

package/dist/cjs/utils/analytics.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractErrorInfo = exports.createAndFireMediaCardEvent = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
-exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getErrorTraceContext = exports.getErrorEventPayload = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -30,7 +30,6 @@ var relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: true
 };
 var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
@@ -82,7 +81,7 @@ var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fil
 
 exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 
-var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
+var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -92,7 +91,8 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
       performanceAttributes: performanceAttributes,
       status: 'success',
       ssrReliability: ssrReliability,
-      traceContext: traceContext
+      traceContext: traceContext,
+      metadataTraceContext: metadataTraceContext
     }
   };
 };
@@ -175,6 +175,16 @@ var getRenderErrorErrorDetail = function getRenderErrorErrorDetail(error) {
 
 exports.getRenderErrorErrorDetail = getRenderErrorErrorDetail;
 
+var getErrorTraceContext = function getErrorTraceContext(error) {
+  if ((0, _errors.isMediaCardError)(error) && !!error.secondaryError && (0, _mediaClient.isRequestError)(error.secondaryError)) {
+    var _error$secondaryError;
+
+    return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+  }
+};
+
+exports.getErrorTraceContext = getErrorTraceContext;
+
 var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error) {
   if ((0, _errors.isMediaCardError)(error) && !!error.secondaryError && (0, _mediaClient.isRequestError)(error.secondaryError)) {
     return error.secondaryError.metadata;
@@ -183,17 +193,18 @@ var getRenderErrorRequestMetadata = function getRenderErrorRequestMetadata(error
 
 exports.getRenderErrorRequestMetadata = getRenderErrorRequestMetadata;
 
-var extractErrorInfo = function extractErrorInfo(error) {
+var extractErrorInfo = function extractErrorInfo(error, metadataTraceContext) {
   return {
     failReason: getRenderErrorFailReason(error),
     error: getRenderErrorErrorReason(error),
-    errorDetail: getRenderErrorErrorDetail(error)
+    errorDetail: getRenderErrorErrorDetail(error),
+    metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
   };
 };
 
 exports.extractErrorInfo = extractErrorInfo;
 
-var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext) {
+var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -202,7 +213,7 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'fail'
-    }, extractErrorInfo(error)), {}, {
+    }, extractErrorInfo(error, metadataTraceContext)), {}, {
       request: getRenderErrorRequestMetadata(error),
       ssrReliability: ssrReliability,
       traceContext: traceContext
@@ -212,7 +223,26 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
 
 exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 
-var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
+var getErrorEventPayload = function getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext) {
+  return {
+    eventType: 'operational',
+    action: 'nonCriticalFail',
+    actionSubject: 'mediaCardRender',
+    attributes: _objectSpread(_objectSpread({
+      fileAttributes: fileAttributes,
+      status: 'fail'
+    }, extractErrorInfo(error, metadataTraceContext)), {}, {
+      request: getRenderErrorRequestMetadata(error),
+      ssrReliability: ssrReliability,
+      traceContext: traceContext,
+      cardStatus: cardStatus
+    })
+  };
+};
+
+exports.getErrorEventPayload = getErrorEventPayload;
+
+var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -223,7 +253,8 @@ var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload
       status: 'fail',
       failReason: 'failed-processing',
       ssrReliability: ssrReliability,
-      traceContext: traceContext
+      traceContext: traceContext,
+      metadataTraceContext: metadataTraceContext
     }
   };
 };

package/dist/cjs/utils/cardActions/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _styles = require("../../card/styles");
@@ -34,12 +32,12 @@ exports.CardActionIconButtonVariant = CardActionIconButtonVariant;
 })(CardActionIconButtonVariant || (exports.CardActionIconButtonVariant = CardActionIconButtonVariant = {}));
 
 var getVariantStyles = function getVariantStyles(variant) {
-  return variant === 'filled' ? "\n    background-color: ".concat((0, _tokens.token)('elevation.surface.overlay', (0, _mixins.rgba)(_colors.N0, 0.8)), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ").concat((0, _tokens.token)('elevation.surface.overlay.hovered', (0, _mixins.rgba)(_colors.N0, 0.6)), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgba(9, 30, 66, 0.06)'), ";\n    }\n  ");
+  return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat((0, _mixins.rgba)(_colors.N0, 0.8), ")"), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat((0, _mixins.rgba)(_colors.N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
 };
 
 var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), (0, _tokens.token)('color.icon', _colors.N500), getVariantStyles(variant));
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), "var(--ds-icon, ".concat(_colors.N500, ")"), getVariantStyles(variant));
 };
 
 exports.cardActionButtonStyles = cardActionButtonStyles;

package/dist/cjs/utils/errorIcon/styles.js

@@ -9,11 +9,9 @@ exports.errorIconWrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _templateObject;
 
-var errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: ", ";\n"])), (0, _tokens.token)('color.icon.warning', '#ff991f'));
+var errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: ", ";\n"])), "var(--ds-icon-warning, #ff991f)");
 exports.errorIconWrapperStyles = errorIconWrapperStyles;

package/dist/cjs/utils/lightCards/styles.js

@@ -11,8 +11,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _components = require("@atlaskit/theme/components");
@@ -28,13 +26,13 @@ var wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions,
       theme = _ref.theme;
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), _mediaUi.center, (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N20),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
   })({
     theme: theme
   }), (0, _components.themed)({
-    light: (0, _tokens.token)('color.icon', _colors.N50),
-    dark: (0, _tokens.token)('color.icon', _colors.DN100)
+    light: "var(--ds-icon, ".concat(_colors.N50, ")"),
+    dark: "var(--ds-icon, ".concat(_colors.DN100, ")")
   })({
     theme: theme
   }), _mediaUi.borderRadius, dimensions.width, dimensions.height);

package/dist/cjs/utils/ufoExperiences.js

@@ -22,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.3.2";
+var packageVersion = "74.4.1";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.3.2",
+	"version": "74.4.1",
 	"sideEffects": false
 }

package/dist/es2019/card/card.js

@@ -16,7 +16,7 @@ import { getFileDetails } from '../utils/metadata';
 import { InlinePlayerLazy } from './inlinePlayerLazy';
 import { getFileAttributes, extractErrorInfo, LOGGED_FEATURE_FLAGS } from '../utils/analytics';
 import { isLocalPreviewError, MediaCardError, ensureMediaCardError, ImageLoadError } from '../errors';
-import { fireOperationalEvent, fireCommencedEvent, fireCopiedEvent, fireScreenEvent } from './cardAnalytics';
+import { fireOperationalEvent, fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from './cardAnalytics';
 import getDocument from '../utils/document';
 import { StoreSSRDataScript, getSSRData } from '../utils/globalScope';
 import { getCardStateFromFileState, createStateUpdater } from './cardState';
@@ -26,7 +26,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.3.2";
+const packageVersion = "74.4.1";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)
@@ -57,7 +57,7 @@ export class CardBase extends Component {
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
     _defineProperty(this, "traceContext", {
-      traceId: getRandomHex(16)
+      traceId: getRandomHex(8)
     });
 
     _defineProperty(this, "getImageURLParams", ({
@@ -112,7 +112,7 @@ export class CardBase extends Component {
         mediaClient,
         id,
         dimensions,
-        onLocalPreviewError: this.fireLocalPreviewErrorEvent,
+        onLocalPreviewError: this.fireNonCriticalErrorEvent,
         filePreview: isBannedLocalPreview ? undefined : getFilePreviewFromFileState(fileState),
         isRemotePreviewReady: isImageRepresentationReady(fileState),
         imageUrlParams: this.getImageURLParams(identifier),
@@ -146,8 +146,9 @@ export class CardBase extends Component {
         this.safeSetState({
           cardPreview
         });
-      } catch (e) {// No need to log this error.
-        // If preview fails, it will be refetched later
+      } catch (e) {
+        const wrappedError = ensureMediaCardError('remote-preview-fetch-ssr', e, true);
+        this.fireNonCriticalErrorEvent(wrappedError);
       }
     });
 
@@ -165,6 +166,7 @@ export class CardBase extends Component {
         //  If it's any other error we set status 'error'
 
         if (isLocalPreviewError(wrappedError)) {
+          // This error should already been logged inside the getCardPreview. No need to log it here.
           this.safeSetState({
             isBannedLocalPreview: true
           });
@@ -234,7 +236,7 @@ export class CardBase extends Component {
 
         if (isLocal) {
           updateState.isBannedLocalPreview = true;
-          this.fireLocalPreviewErrorEvent(error);
+          this.fireNonCriticalErrorEvent(error);
         }
 
         const {
@@ -304,17 +306,26 @@ export class CardBase extends Component {
       createAnalyticsEvent && fireScreenEvent(createAnalyticsEvent, this.fileAttributes);
     });
 
-    _defineProperty(this, "fireLocalPreviewErrorEvent", error => {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
+    _defineProperty(this, "fireNonCriticalErrorEvent", error => {
+      const {
+        createAnalyticsEvent
+      } = this.props;
+      const {
+        fileState
+      } = this.state;
+      createAnalyticsEvent && fireNonCriticalErrorEvent(createAnalyticsEvent, this.state.status, this.fileAttributes, this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     });
 
-    _defineProperty(this, "safeSetState", state => {
+    _defineProperty(this, "safeSetState", newState => {
       if (this.hasBeenMounted) {
-        // If it's setting the status, we need to use a state updater function,
-        // which ensures that no non-final status overrides a final status.
-        // If no status is set, we don't need a sate updater
-        const updater = !!state.status ? createStateUpdater(state) : state;
-        this.setState(updater);
+        /**
+         * createStateUpdater helper returns a callback to be passed to setState.
+         * It decides wether to update the 'status' depending on the current state vs the input state.
+         * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date."
+         * If the input state brings an error and it won't be updating the state, the error will be logged as non-critical inside the helper.
+         * If the error persists int the state, it means it is a critical error and should be logged as a failed event for Card
+         */
+        this.setState(createStateUpdater(newState, this.fireNonCriticalErrorEvent));
       }
     });
 
@@ -939,12 +950,13 @@ export class CardBase extends Component {
   fireOperationalEvent() {
     const {
       status,
-      error
+      error,
+      fileState
     } = this.state;
     const {
       createAnalyticsEvent
     } = this.props;
-    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
   }
 

package/dist/es2019/card/cardAnalytics.js

@@ -1,19 +1,19 @@
-import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../utils/analytics';
+import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload, getErrorEventPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext) => {
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'error':
-      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
   }
 };
@@ -33,4 +33,8 @@ export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
 };
 export const fireScreenEvent = (createAnalyticsEvent, fileAttributes) => {
   fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
+};
+export const fireNonCriticalErrorEvent = (createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext, metadataTraceContext) => {
+  const errorPayload = getErrorEventPayload(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
+  fireMediaCardEvent(errorPayload, createAnalyticsEvent);
 };

package/dist/es2019/card/cardImageView/cardOverlay/index.js

@@ -5,7 +5,6 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
-import { token } from '@atlaskit/tokens';
 import TickIcon from '@atlaskit/icon/glyph/check';
 import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things directly from "utils" to avoid circular dependencies
 
@@ -76,7 +75,7 @@ export class CardOverlay extends Component {
       actions
     } = this.props;
     const titleText = resolveTitleText(cardStatus, mediaName, error, selected);
-    const menuTriggerColor = !persistent ? token('color.icon.inverse', 'white') : undefined;
+    const menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
     return jsx(Overlay, {
       hasError: !!error,
       noHover: noHover,

package/dist/es2019/card/cardImageView/cardOverlay/styles.js

@@ -8,24 +8,23 @@ import { css } from '@emotion/react';
 import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { rgba, easeOutCubic, transition, antialiased } from '../../styles';
 export const tickBoxStyles = css`
   ${size(14)}
   ${transition()}
-  background-color: ${token('elevation.surface.overlay', rgba('#ffffff', 0.5))};
+  background-color: ${`var(--ds-surface-overlay, ${rgba('#ffffff', 0.5)})`};
   position: absolute;
   top: 8px;
   right: 8px;
   border-radius: 20px;
-  color: ${token('color.icon.subtle', '#798599')}; /* CLEANUP - TODO FIL-3884: Align color with new design */
+  color: ${"var(--ds-icon-subtle, #798599)"}; /* CLEANUP - TODO FIL-3884: Align color with new design */
   display: flex;
   opacity: 0;
 
   &.selected {
     opacity: 1;
-    color: ${token('color.icon.inverse', 'white')};
-    background-color: ${token('color.icon.selected', '#0052cc')}; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */
+    color: ${"var(--ds-icon-inverse, white)"};
+    background-color: ${"var(--ds-icon-selected, #0052cc)"}; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */
   }
 
   /* Enforce dimensions of "tick" icon */
@@ -64,7 +63,7 @@ export const overlayStyles = props => css`
   &:not(.persistent):hover, &.active {
     .top-row {
       .title {
-        color: ${token('color.text.information', colors.B400)};
+        color: ${`var(--ds-text-information, ${colors.B400})`};
       }
     }
   }
@@ -72,7 +71,7 @@ export const overlayStyles = props => css`
   &.noHover:hover {
     .top-row {
       .title {
-        color: ${token('color.text', colors.N800)};
+        color: ${`var(--ds-text, ${colors.N800})`};
       }
     }
   }
@@ -83,22 +82,22 @@ export const overlayStyles = props => css`
 
   &:not(.persistent) {
     &:not(.error, .noHover):hover {
-      background-color: ${token('color.background.neutral.hovered', rgba(colors.N900, 0.06))};
+      background-color: ${`var(--ds-background-neutral-hovered, ${rgba(colors.N900, 0.06)})`};
     }
 
     &.selectable {
       &.selected {
-        background-color: ${token('color.background.selected', colors.B200)};
+        background-color: ${`var(--ds-background-selected, ${colors.B200})`};
 
         &:hover {
           /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */
-          background-color: ${token('color.background.selected.hovered', rgba(colors.N900, 0.16))};
+          background-color: ${`var(--ds-background-selected-hovered, ${rgba(colors.N900, 0.16)})`};
         }
 
         .title,
         .bottom-row,
         .file-size {
-          color: ${token('color.text', colors.N900)};
+          color: ${`var(--ds-text, ${colors.N900})`};
         }
       }
     }
@@ -113,7 +112,7 @@ export const overlayStyles = props => css`
       .title {
         transition: opacity 0.3s;
         opacity: 0;
-        color: ${token('color.text', 'white')};
+        color: ${"var(--ds-text, white)"};
         visibility: hidden;
       }
     }
@@ -129,14 +128,14 @@ export const overlayStyles = props => css`
       }
 
       .file-size {
-        color: ${token('color.text', 'white')};
+        color: ${"var(--ds-text, white)"};
         display: none;
       }
     }
 
     &:hover,
     &.active {
-      background-color: ${token('color.interaction.hovered', rgba(colors.N900, 0.5))};
+      background-color: ${`var(--ds-interaction-hovered, ${rgba(colors.N900, 0.5)})`};
 
       .title {
         opacity: 1;
@@ -164,8 +163,8 @@ export const overlayStyles = props => css`
 
       &.selected {
         .tickbox {
-          background-color: ${token('color.background.selected.bold', colors.B200)} !important;
-          color: ${token('color.icon.inverse', 'white')};
+          background-color: ${`var(--ds-background-selected-bold, ${colors.B200})`} !important;
+          color: ${"var(--ds-icon-inverse, white)"};
         }
       }
     }
@@ -179,7 +178,7 @@ export const overlayStyles = props => css`
     &.active {
       .top-row {
         .title {
-          color: ${token('color.text', colors.N800)};
+          color: ${`var(--ds-text, ${colors.N800})`};
         }
       }
     }
@@ -207,7 +206,7 @@ export const errorMessageStyles = css`
   ${antialiased} display: inline-block;
   vertical-align: middle;
   font-weight: bold;
-  color: ${token('color.text.subtlest', colors.N70)};
+  color: ${`var(--ds-text-subtlest, ${colors.N70})`};
   font-size: 12px;
   line-height: 15px;
   overflow: hidden;
@@ -224,8 +223,8 @@ export const titleWrapperStyles = theme => css`
   box-sizing: border-box;
   word-wrap: break-word;
   color: ${themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN900)
+  light: `var(--ds-text, ${colors.N800})`,
+  dark: `var(--ds-text, ${colors.DN900})`
 })({
   theme
 })};
@@ -234,7 +233,7 @@ export const titleWrapperStyles = theme => css`
 `;
 export const subtitleStyles = css`
   ${ellipsis('100px')} font-size: 12px;
-  color: ${token('color.text.subtlest', '#5e6c84')};
+  color: ${"var(--ds-text-subtlest, #5e6c84)"};
 `;
 export const metadataStyles = css`
   display: flex;

package/dist/es2019/card/cardImageView/fileCardImageView.js

@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
-import { token } from '@atlaskit/tokens';
 import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
 import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
 import { CardOverlay } from './cardOverlay';
@@ -220,7 +219,7 @@ export class FileCardImageView extends Component {
         css: cardActionsWrapperStyles
       }, actions ? jsx(CardActions, {
         actions: actions,
-        triggerColor: token('color.icon.inverse', 'white')
+        triggerColor: "var(--ds-icon-inverse, white)"
       }) : null))));
     });
 

package/dist/es2019/card/cardImageView/styles.js

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { absolute, borderRadius, size } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N0 } from '@atlaskit/theme/colors';
@@ -18,8 +17,8 @@ const getBackgroundColor = props => {
     mediaType
   } = props;
   return `background: ${mediaType === 'image' ? 'transparent' : themed({
-    light: token('color.background.neutral', N20),
-    dark: token('color.background.neutral', DN50)
+    light: `var(--ds-background-neutral, ${N20})`,
+    dark: `var(--ds-background-neutral, ${DN50})`
   })(props)};`;
 };
 
@@ -59,7 +58,7 @@ export const playIconWrapperStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${token('color.icon.inverse', 'white')};
+  color: ${"var(--ds-icon-inverse, white)"};
 
   /* we want to override default icon size and hover state */
   &:hover > * {
@@ -68,7 +67,7 @@ export const playIconWrapperStyles = css`
   }
 `;
 export const playIconBackgroundStyles = css`
-  background: ${token('color.background.neutral.bold', 'rgba(23, 43, 77, 0.7)')};
+  background: ${"var(--ds-background-neutral-bold, rgba(23, 43, 77, 0.7))"};
   border-radius: 100%;
   padding: 10px;
   display: flex;
@@ -89,12 +88,12 @@ export const overlayStyles = css`
   ${absolute()}
   ${size()}
   border-radius: inherit;
-  background-color: ${token('color.blanket', 'rgba(9, 30, 66, 0.5)')};
+  background-color: ${"var(--ds-blanket, rgba(9, 30, 66, 0.5))"};
 `;
 export const titleStyles = css`
   ${absolute()} width: 100%;
   padding: 8px;
-  color: ${token('color.text.inverse', N0)};
+  color: ${`var(--ds-text-inverse, ${N0})`};
   font-size: 12px;
   line-height: 18px;
   word-wrap: break-word;
@@ -105,7 +104,7 @@ export const bodyStyles = css`
   bottom: 0;
   width: 100%;
   padding: 8px;
-  color: ${token('color.text.inverse', N0)};
+  color: ${`var(--ds-text-inverse, ${N0})`};
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 

package/dist/es2019/card/cardLoader.js

@@ -19,7 +19,7 @@ const MediaCard = Loadable({
 const MediaCardErrorBoundary = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */
-  '../utils/media-card-analytics-error-boundary').then(mod => mod.default),
+  './media-card-analytics-error-boundary').then(mod => mod.default),
   loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
 });
 const MediaCardWithMediaClient = Loadable({
@@ -35,13 +35,22 @@ const MediaCardWithMediaClient = Loadable({
 const CardWithMediaClient = props => {
   const {
     withMediaClient,
-    featureFlags
+    dimensions,
+    featureFlags,
+    onClick
   } = props;
   const memoizedFeatureFlags = useMemoizeFeatureFlags(featureFlags);
   const Card = React.useMemo(() => {
     return withMediaClient(MediaCard, memoizedFeatureFlags);
   }, [withMediaClient, memoizedFeatureFlags]);
-  return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/React.createElement(Card, props));
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    React.createElement(MediaCardErrorBoundary, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(Card, props))
+  );
 };
 
 const CardLoader = props => {