@atlaskit/media-viewer 47.2.2 → 47.3.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-viewer
 
+## 47.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 47.3.0
+
+### Minor Changes
+
+- [`2168c4e0d81`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2168c4e0d81) - Implement traceContext in media-viewer
+- [`0bccac57db6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0bccac57db6) - remove mediaUploadApiV2 Feature flag
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 47.2.2
 
 ### Patch Changes

package/dist/cjs/analytics/events/operational/commenced.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createCommencedEvent = void 0;
 
-var createCommencedEvent = function createCommencedEvent(fileId) {
+var createCommencedEvent = function createCommencedEvent(fileId, traceContext) {
   return {
     eventType: 'operational',
     action: 'commenced',
@@ -13,7 +13,8 @@ var createCommencedEvent = function createCommencedEvent(fileId) {
     attributes: {
       fileAttributes: {
         fileId: fileId
-      }
+      },
+      traceContext: traceContext
     }
   };
 };

package/dist/cjs/analytics/events/operational/loadFailed.js

@@ -9,7 +9,7 @@ var _ = require("../..");
 
 var _errors = require("../../../errors");
 
-var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState) {
+var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState, traceContext) {
   var _getFileAttributes = (0, _.getFileAttributes)(fileState),
       fileMediatype = _getFileAttributes.fileMediatype,
       fileMimetype = _getFileAttributes.fileMimetype,
@@ -30,7 +30,8 @@ var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileSt
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/cjs/analytics/events/operational/loadSucceeded.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createLoadSucceededEvent = void 0;
 
-var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
+var createLoadSucceededEvent = function createLoadSucceededEvent(_ref, traceContext) {
   var fileId = _ref.fileId,
       fileMediatype = _ref.fileMediatype,
       fileMimetype = _ref.fileMimetype,
@@ -22,7 +22,8 @@ var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/cjs/analytics/index.js

@@ -14,7 +14,7 @@ var componentName = 'mediaViewer';
 exports.component = exports.componentName = componentName;
 var packageName = "@atlaskit/media-viewer";
 exports.packageName = packageName;
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.1";
 exports.packageVersion = packageVersion;
 var relevantFlags = {
   newCardExperience: false,
@@ -23,7 +23,6 @@ var relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: false
 };
 exports.relevantFlags = relevantFlags;

package/dist/cjs/analytics/ufoExperiences.js

@@ -20,7 +20,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-viewer";
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.1";
 var ufoExperience;
 
 var getExperience = function getExperience() {

package/dist/cjs/errorMessage.js

@@ -103,10 +103,11 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       var supressAnalytics = props.supressAnalytics,
           error = props.error,
           fileState = props.fileState,
-          fileId = props.fileId;
+          fileId = props.fileId,
+          traceContext = props.traceContext;
 
       if (supressAnalytics !== true) {
-        var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
+        var payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
         (0, _analytics.fireAnalytics)(payload, props);
 
         var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
@@ -135,12 +136,12 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
     }
   }], [{
     key: "getEventPayload",
-    value: function getEventPayload(error, fileId, fileState) {
+    value: function getEventPayload(error, fileId, fileState, traceContext) {
       if (fileState && (0, _errors.getPrimaryErrorReason)(error) === 'unsupported') {
         // this is not an SLI, its just a useful metric for unsupported
         return (0, _previewUnsupported.createPreviewUnsupportedEvent)(fileState);
       } else {
-        return (0, _loadFailed.createLoadFailedEvent)(fileId, error, fileState);
+        return (0, _loadFailed.createLoadFailedEvent)(fileId, error, fileState, traceContext);
       }
     }
   }]);

package/dist/cjs/item-viewer.js

@@ -61,6 +61,8 @@ var _interactiveImg = require("./viewers/image/interactive-img");
 
 var _archiveViewerLoader = _interopRequireDefault(require("./viewers/archiveSidebar/archiveViewerLoader"));
 
+var _mediaCommon = require("@atlaskit/media-common");
+
 var _ufoExperiences = require("./analytics/ufoExperiences");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -169,12 +171,15 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "traceContext", {
+      traceId: (0, _mediaCommon.getRandomHex)(8)
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
-          (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes), _this.props);
+          (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, _this.traceContext), _this.props);
           (0, _ufoExperiences.succeedMediaFileUfoExperience)({
             fileAttributes: fileAttributes,
             fileStateFlags: _this.fileStateFlags
@@ -268,7 +273,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react.default.createElement(ImageViewer, (0, _extends2.default)({
             onLoad: this.onSuccess,
             onError: this.onLoadFail,
-            contextId: contextId
+            contextId: contextId,
+            traceContext: this.traceContext
           }, viewerProps));
 
         case 'audio':
@@ -323,7 +329,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
           error: error,
           fileState: fileState,
-          fileStateFlags: this.fileStateFlags
+          fileStateFlags: this.fileStateFlags,
+          traceContext: this.traceContext
         }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
       } else {
         return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
@@ -425,7 +432,7 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       }
 
       var id = identifier.id;
-      (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id), this.props);
+      (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id, this.traceContext), this.props);
       (0, _ufoExperiences.startMediaFileUfoExperience)();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName

package/dist/cjs/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _styles = require("./viewers/archiveSidebar/styles");
@@ -127,7 +125,7 @@ var downloadButtonWrapperStyles = (0, _react.css)(_templateObject36 || (_templat
 exports.downloadButtonWrapperStyles = downloadButtonWrapperStyles;
 var customVideoPlayerWrapperStyles = (0, _react.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteral2.default)(["\n  video {\n    flex: 1;\n    width: 100vw;\n    height: 100vh;\n    max-height: 100vh;\n  }\n"])));
 exports.customVideoPlayerWrapperStyles = customVideoPlayerWrapperStyles;
-var sidebarWrapperStyles = (0, _react.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2.default)(["\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: 100vh;\n  overflow: hidden auto;\n  background-color: ", ";\n  color: ", ";\n"])), sidebarWidth, (0, _tokens.token)('elevation.surface', headerAndSidebarBackgroundColor), (0, _tokens.token)('color.text', '#c7d1db'));
+var sidebarWrapperStyles = (0, _react.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteral2.default)(["\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: 100vh;\n  overflow: hidden auto;\n  background-color: ", ";\n  color: ", ";\n"])), sidebarWidth, "var(--ds-surface, ".concat(headerAndSidebarBackgroundColor, ")"), "var(--ds-text, #c7d1db)");
 exports.sidebarWrapperStyles = sidebarWrapperStyles;
 var spinnerWrapperStyles = (0, _react.css)(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
 exports.spinnerWrapperStyles = spinnerWrapperStyles;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "47.2.2",
+	"version": "47.3.1",
 	"sideEffects": false
 }

package/dist/cjs/viewers/archiveSidebar/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
@@ -23,12 +21,12 @@ var ArchiveSideBarWidth = 300;
 exports.ArchiveSideBarWidth = ArchiveSideBarWidth;
 var archiveItemViewerWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"])));
 exports.archiveItemViewerWrapperStyles = archiveItemViewerWrapperStyles;
-var archiveSideBarStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 22px 20px 20px 20px;\n  background-color: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", "px;\n  bottom: 0;\n  box-sizing: border-box;\n  overflow-y: scroll;\n"])), (0, _tokens.token)('elevation.surface', '#101214'), ArchiveSideBarWidth);
+var archiveSideBarStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 22px 20px 20px 20px;\n  background-color: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", "px;\n  bottom: 0;\n  box-sizing: border-box;\n  overflow-y: scroll;\n"])), "var(--ds-surface, #101214)", ArchiveSideBarWidth);
 exports.archiveSideBarStyles = archiveSideBarStyles;
 var slideDown = (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n"])));
 var archiveSidebarFolderWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  transform: translateY(-100%);\n  transition: all 1s;\n  opacity: 0;\n  animation: ", " 0.3s forwards;\n"])), slideDown);
 exports.archiveSidebarFolderWrapperStyles = archiveSidebarFolderWrapperStyles;
-var archiveDownloadButtonWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 7px 5px 8px;\n  border: none;\n  border-radius: 3px;\n  background-color: transparent;\n  color: ", ";\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.icon', '#9FADBC'), (0, _tokens.token)('color.background.neutral.subtle.hovered', '#A1BDD914'), (0, _tokens.token)('color.background.neutral.subtle.pressed', '#A6C5E229'));
+var archiveDownloadButtonWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 7px 5px 8px;\n  border: none;\n  border-radius: 3px;\n  background-color: transparent;\n  color: ", ";\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), "var(--ds-icon, #9FADBC)", "var(--ds-background-neutral-subtle-hovered, #A1BDD914)", "var(--ds-background-neutral-subtle-pressed, #A6C5E229)");
 exports.archiveDownloadButtonWrapperStyles = archiveDownloadButtonWrapperStyles;
 var sidebarItemWrapperStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 85%;\n"])));
 exports.sidebarItemWrapperStyles = sidebarItemWrapperStyles;
@@ -38,25 +36,25 @@ var archiveLayoutStyles = (0, _react.css)(_templateObject8 || (_templateObject8
 exports.archiveLayoutStyles = archiveLayoutStyles;
 var archiveViewerWrapperStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: ", "px;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  display: flex;\n"])), ArchiveSideBarWidth);
 exports.archiveViewerWrapperStyles = archiveViewerWrapperStyles;
-var separatorStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1px;\n  height: 2px;\n  margin: ", "px 0;\n  background-color: ", ";\n  flex-shrink: 0;\n"])), ((0, _constants.gridSize)() * 5 - 2) / 2, (0, _tokens.token)('color.border', '#A6C5E229'));
+var separatorStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 1px;\n  height: 2px;\n  margin: ", "px 0;\n  background-color: ", ";\n  flex-shrink: 0;\n"])), ((0, _constants.gridSize)() * 5 - 2) / 2, "var(--ds-border, #A6C5E229)");
 exports.separatorStyles = separatorStyles;
 var sidebarHeaderWrapperStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
 exports.sidebarHeaderWrapperStyles = sidebarHeaderWrapperStyles;
 var sidebarHeaderIconStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
 exports.sidebarHeaderIconStyles = sidebarHeaderIconStyles;
-var sidebarHeaderEntryStyles = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.14286;\n  color: ", ";\n"])), (0, _tokens.token)('color.text', _colors.DN500));
+var sidebarHeaderEntryStyles = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.14286;\n  color: ", ";\n"])), "var(--ds-text, ".concat(_colors.DN500, ")"));
 exports.sidebarHeaderEntryStyles = sidebarHeaderEntryStyles;
 var itemStyle = {
-  backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle', '#101214')),
-  fill: "".concat((0, _tokens.token)('color.icon.success', '#101214')),
-  color: "".concat((0, _tokens.token)('color.text', _colors.DN500)),
+  backgroundColor: "var(--ds-background-neutral-subtle, #101214)",
+  fill: "var(--ds-icon-success, #101214)",
+  color: "".concat("var(--ds-text, ".concat(_colors.DN500, ")")),
   ':hover': {
-    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', '#A1BDD914')),
-    color: "".concat((0, _tokens.token)('color.text', _colors.DN500))
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #A1BDD914)",
+    color: "".concat("var(--ds-text, ".concat(_colors.DN500, ")"))
   },
   ':active': {
-    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.pressed', '#A6C5E229')),
-    color: "".concat((0, _tokens.token)('color.text', _colors.DN500))
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #A6C5E229)",
+    color: "".concat("var(--ds-text, ".concat(_colors.DN500, ")"))
   }
 };
 exports.itemStyle = itemStyle;

package/dist/cjs/viewers/codeViewer/styles.js

@@ -13,11 +13,9 @@ var _react = require("@emotion/react");
 
 var _theme = require("@atlaskit/theme");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
-var codeViewWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  overflow: auto;\n"])), (0, _tokens.token)('elevation.surface', _theme.colors.N20));
+var codeViewWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  overflow: auto;\n"])), "var(--ds-surface, ".concat(_theme.colors.N20, ")"));
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 exports.codeViewWrapperStyles = codeViewWrapperStyles;

package/dist/cjs/viewers/image/index.js

@@ -89,13 +89,13 @@ var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _this$props, fileState, mediaClient, collectionName, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName;
+                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName, traceContext = _this$props.traceContext;
 
                 if (!(fileState.status === 'error')) {
                   _context.next = 3;
@@ -156,7 +156,7 @@ var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                 response = mediaClient.getImage(item.details.id, {
                   collection: collectionName,
                   mode: 'fit'
-                }, controller, true);
+                }, controller, true, traceContext);
 
                 this.cancelImageFetch = function () {
                   return controller && controller.abort();

package/dist/es2019/analytics/events/operational/commenced.js

@@ -1,10 +1,11 @@
-export const createCommencedEvent = fileId => ({
+export const createCommencedEvent = (fileId, traceContext) => ({
   eventType: 'operational',
   action: 'commenced',
   actionSubject: 'mediaFile',
   attributes: {
     fileAttributes: {
       fileId: fileId
-    }
+    },
+    traceContext
   }
 });

package/dist/es2019/analytics/events/operational/loadFailed.js

@@ -1,6 +1,6 @@
 import { getFileAttributes } from '../..';
 import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail, getRequestMetadata } from '../../../errors';
-export const createLoadFailedEvent = (fileId, error, fileState) => {
+export const createLoadFailedEvent = (fileId, error, fileState, traceContext) => {
   const {
     fileMediatype,
     fileMimetype,
@@ -21,7 +21,8 @@ export const createLoadFailedEvent = (fileId, error, fileState) => {
         fileMediatype,
         fileMimetype,
         fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/es2019/analytics/events/operational/loadSucceeded.js

@@ -3,7 +3,7 @@ export const createLoadSucceededEvent = ({
   fileMediatype,
   fileMimetype,
   fileSize
-}) => {
+}, traceContext) => {
   return {
     eventType: 'operational',
     actionSubject: 'mediaFile',
@@ -16,7 +16,8 @@ export const createLoadSucceededEvent = ({
         fileMediatype,
         fileMimetype,
         fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "47.2.2";
+const packageVersion = "47.3.1";
 export { packageName, packageVersion, componentName, componentName as component };
 export const relevantFlags = {
   newCardExperience: false,
@@ -10,7 +10,6 @@ export const relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: false
 };
 export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { LOGGED_FEATURE_FLAG_KEYS } from '.';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "47.2.2";
+const packageVersion = "47.3.1";
 let ufoExperience;
 
 const getExperience = () => {

package/dist/es2019/errorMessage.js

@@ -49,11 +49,12 @@ export class ErrorMessage extends React.Component {
       supressAnalytics,
       error,
       fileState,
-      fileId
+      fileId,
+      traceContext
     } = props;
 
     if (supressAnalytics !== true) {
-      const payload = ErrorMessage.getEventPayload(error, fileId, fileState);
+      const payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
       fireAnalytics(payload, props);
       const rawPayload = { ...(payload === null || payload === void 0 ? void 0 : payload.attributes),
         fileStateFlags: props.fileStateFlags
@@ -68,12 +69,12 @@ export class ErrorMessage extends React.Component {
     }
   }
 
-  static getEventPayload(error, fileId, fileState) {
+  static getEventPayload(error, fileId, fileState, traceContext) {
     if (fileState && getPrimaryErrorReason(error) === 'unsupported') {
       // this is not an SLI, its just a useful metric for unsupported
       return createPreviewUnsupportedEvent(fileState);
     } else {
-      return createLoadFailedEvent(fileId, error, fileState);
+      return createLoadFailedEvent(fileId, error, fileState, traceContext);
     }
   }
 

package/dist/es2019/item-viewer.js

@@ -18,6 +18,7 @@ import { createLoadSucceededEvent } from './analytics/events/operational/loadSuc
 import { fireAnalytics, getFileAttributes } from './analytics';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { getRandomHex } from '@atlaskit/media-common';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
 const ImageViewer = Loadable({
   loader: () => import('./viewers/image').then(mod => mod.ImageViewer),
@@ -56,6 +57,10 @@ export class ItemViewerBase extends React.Component {
       wasStatusProcessing: false
     });
 
+    _defineProperty(this, "traceContext", {
+      traceId: getRandomHex(8)
+    });
+
     _defineProperty(this, "onSuccess", () => {
       const {
         item
@@ -63,7 +68,7 @@ export class ItemViewerBase extends React.Component {
       item.whenSuccessful(fileItem => {
         if (isFileStateItem(fileItem)) {
           const fileAttributes = getFileAttributes(fileItem);
-          fireAnalytics(createLoadSucceededEvent(fileAttributes), this.props);
+          fireAnalytics(createLoadSucceededEvent(fileAttributes, this.traceContext), this.props);
           succeedMediaFileUfoExperience({
             fileAttributes,
             fileStateFlags: this.fileStateFlags
@@ -154,7 +159,8 @@ export class ItemViewerBase extends React.Component {
         return /*#__PURE__*/React.createElement(ImageViewer, _extends({
           onLoad: this.onSuccess,
           onError: this.onLoadFail,
-          contextId: contextId
+          contextId: contextId,
+          traceContext: this.traceContext
         }, viewerProps));
 
       case 'audio':
@@ -210,7 +216,8 @@ export class ItemViewerBase extends React.Component {
         fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
         error: error,
         fileState: fileState,
-        fileStateFlags: this.fileStateFlags
+        fileStateFlags: this.fileStateFlags,
+        traceContext: this.traceContext
       }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
     } else {
       return /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -312,7 +319,7 @@ export class ItemViewerBase extends React.Component {
     const {
       id
     } = identifier;
-    fireAnalytics(createCommencedEvent(id), this.props);
+    fireAnalytics(createCommencedEvent(id, this.traceContext), this.props);
     startMediaFileUfoExperience();
     this.subscription = mediaClient.file.getFileState(id, {
       collectionName: identifier.collectionName

package/dist/es2019/styles.js

@@ -1,7 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { layers, borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { ellipsis, hideControlsClassName } from '@atlaskit/media-ui';
 import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
 const overlayZindex = layers.modal() + 10;
@@ -320,8 +319,8 @@ export const sidebarWrapperStyles = css`
   width: ${sidebarWidth}px;
   height: 100vh;
   overflow: hidden auto;
-  background-color: ${token('elevation.surface', headerAndSidebarBackgroundColor)};
-  color: ${token('color.text', '#c7d1db')};
+  background-color: ${`var(--ds-surface, ${headerAndSidebarBackgroundColor})`};
+  color: ${"var(--ds-text, #c7d1db)"};
 `;
 export const spinnerWrapperStyles = css`
   display: flex;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "47.2.2",
+	"version": "47.3.1",
 	"sideEffects": false
 }

package/dist/es2019/viewers/archiveSidebar/styles.js

@@ -1,6 +1,5 @@
 import { css, keyframes } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { DN500 } from '@atlaskit/theme/colors';
 export const ArchiveSideBarWidth = 300;
 export const archiveItemViewerWrapperStyles = css`
@@ -10,7 +9,7 @@ export const archiveItemViewerWrapperStyles = css`
 `;
 export const archiveSideBarStyles = css`
   padding: 22px 20px 20px 20px;
-  background-color: ${token('elevation.surface', '#101214')};
+  background-color: ${"var(--ds-surface, #101214)"};
   position: absolute;
   left: 0;
   top: 0;
@@ -41,16 +40,16 @@ export const archiveDownloadButtonWrapperStyles = css`
   border: none;
   border-radius: 3px;
   background-color: transparent;
-  color: ${token('color.icon', '#9FADBC')};
+  color: ${"var(--ds-icon, #9FADBC)"};
 
   &:hover {
     cursor: pointer;
-    background-color: ${token('color.background.neutral.subtle.hovered', '#A1BDD914')};
+    background-color: ${"var(--ds-background-neutral-subtle-hovered, #A1BDD914)"};
   }
 
   &:active {
     cursor: pointer;
-    background-color: ${token('color.background.neutral.subtle.pressed', '#A6C5E229')};
+    background-color: ${"var(--ds-background-neutral-subtle-pressed, #A6C5E229)"};
   }
 `;
 export const sidebarItemWrapperStyles = css`
@@ -81,7 +80,7 @@ export const separatorStyles = css`
   border-radius: 1px;
   height: 2px;
   margin: ${(gridSize() * 5 - 2) / 2}px 0;
-  background-color: ${token('color.border', '#A6C5E229')};
+  background-color: ${"var(--ds-border, #A6C5E229)"};
   flex-shrink: 0;
 `;
 export const sidebarHeaderWrapperStyles = css`
@@ -101,18 +100,18 @@ export const sidebarHeaderEntryStyles = css`
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.14286;
-  color: ${token('color.text', DN500)};
+  color: ${`var(--ds-text, ${DN500})`};
 `;
 export const itemStyle = {
-  backgroundColor: `${token('color.background.neutral.subtle', '#101214')}`,
-  fill: `${token('color.icon.success', '#101214')}`,
-  color: `${token('color.text', DN500)}`,
+  backgroundColor: `${"var(--ds-background-neutral-subtle, #101214)"}`,
+  fill: `${"var(--ds-icon-success, #101214)"}`,
+  color: `${`var(--ds-text, ${DN500})`}`,
   ':hover': {
-    backgroundColor: `${token('color.background.neutral.subtle.hovered', '#A1BDD914')}`,
-    color: `${token('color.text', DN500)}`
+    backgroundColor: `${"var(--ds-background-neutral-subtle-hovered, #A1BDD914)"}`,
+    color: `${`var(--ds-text, ${DN500})`}`
   },
   ':active': {
-    backgroundColor: `${token('color.background.neutral.subtle.pressed', '#A6C5E229')}`,
-    color: `${token('color.text', DN500)}`
+    backgroundColor: `${"var(--ds-background-neutral-subtle-pressed, #A6C5E229)"}`,
+    color: `${`var(--ds-text, ${DN500})`}`
   }
 };

package/dist/es2019/viewers/codeViewer/styles.js

@@ -2,14 +2,13 @@ import { css } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppressio
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { colors } from '@atlaskit/theme';
-import { token } from '@atlaskit/tokens';
 export const codeViewWrapperStyles = css`
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: ${token('elevation.surface', colors.N20)};
+  background-color: ${`var(--ds-surface, ${colors.N20})`};
   overflow: auto;
 `;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/viewers/image/index.js

@@ -40,7 +40,8 @@ export class ImageViewer extends BaseViewer {
     const {
       item: fileState,
       mediaClient,
-      collectionName
+      collectionName,
+      traceContext
     } = this.props;
 
     if (fileState.status === 'error') {
@@ -75,7 +76,7 @@ export class ImageViewer extends BaseViewer {
         const response = mediaClient.getImage(item.details.id, {
           collection: collectionName,
           mode: 'fit'
-        }, controller, true);
+        }, controller, true, traceContext);
 
         this.cancelImageFetch = () => controller && controller.abort();
 

package/dist/esm/analytics/events/operational/commenced.js

@@ -1,4 +1,4 @@
-export var createCommencedEvent = function createCommencedEvent(fileId) {
+export var createCommencedEvent = function createCommencedEvent(fileId, traceContext) {
   return {
     eventType: 'operational',
     action: 'commenced',
@@ -6,7 +6,8 @@ export var createCommencedEvent = function createCommencedEvent(fileId) {
     attributes: {
       fileAttributes: {
         fileId: fileId
-      }
+      },
+      traceContext: traceContext
     }
   };
 };

package/dist/esm/analytics/events/operational/loadFailed.js

@@ -1,6 +1,6 @@
 import { getFileAttributes } from '../..';
 import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail, getRequestMetadata } from '../../../errors';
-export var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState) {
+export var createLoadFailedEvent = function createLoadFailedEvent(fileId, error, fileState, traceContext) {
   var _getFileAttributes = getFileAttributes(fileState),
       fileMediatype = _getFileAttributes.fileMediatype,
       fileMimetype = _getFileAttributes.fileMimetype,
@@ -21,7 +21,8 @@ export var createLoadFailedEvent = function createLoadFailedEvent(fileId, error,
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/esm/analytics/events/operational/loadSucceeded.js

@@ -1,4 +1,4 @@
-export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
+export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref, traceContext) {
   var fileId = _ref.fileId,
       fileMediatype = _ref.fileMediatype,
       fileMimetype = _ref.fileMimetype,
@@ -15,7 +15,8 @@ export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref) {
         fileMediatype: fileMediatype,
         fileMimetype: fileMimetype,
         fileSize: fileSize
-      }
+      },
+      traceContext: fileMediatype === 'image' ? traceContext : undefined
     }
   };
 };

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { filterFeatureFlagNames, filterFeatureFlagKeysAllProducts, ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.1";
 export { packageName, packageVersion, componentName, componentName as component };
 export var relevantFlags = {
   newCardExperience: false,
@@ -10,7 +10,6 @@ export var relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: true,
   memoryCacheLogging: false
 };
 export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);

package/dist/esm/analytics/ufoExperiences.js

@@ -8,7 +8,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { LOGGED_FEATURE_FLAG_KEYS } from '.';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "47.2.2";
+var packageVersion = "47.3.1";
 var ufoExperience;
 
 var getExperience = function getExperience() {

package/dist/esm/errorMessage.js

@@ -75,10 +75,11 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       var supressAnalytics = props.supressAnalytics,
           error = props.error,
           fileState = props.fileState,
-          fileId = props.fileId;
+          fileId = props.fileId,
+          traceContext = props.traceContext;
 
       if (supressAnalytics !== true) {
-        var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
+        var payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
         fireAnalytics(payload, props);
 
         var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
@@ -107,12 +108,12 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
     }
   }], [{
     key: "getEventPayload",
-    value: function getEventPayload(error, fileId, fileState) {
+    value: function getEventPayload(error, fileId, fileState, traceContext) {
       if (fileState && getPrimaryErrorReason(error) === 'unsupported') {
         // this is not an SLI, its just a useful metric for unsupported
         return createPreviewUnsupportedEvent(fileState);
       } else {
-        return createLoadFailedEvent(fileId, error, fileState);
+        return createLoadFailedEvent(fileId, error, fileState, traceContext);
       }
     }
   }]);

package/dist/esm/item-viewer.js

@@ -29,6 +29,7 @@ import { createLoadSucceededEvent } from './analytics/events/operational/loadSuc
 import { fireAnalytics, getFileAttributes } from './analytics';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
+import { getRandomHex } from '@atlaskit/media-common';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
 var ImageViewer = Loadable({
   loader: function loader() {
@@ -113,12 +114,16 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       wasStatusProcessing: false
     });
 
+    _defineProperty(_assertThisInitialized(_this), "traceContext", {
+      traceId: getRandomHex(8)
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onSuccess", function () {
       var item = _this.state.item;
       item.whenSuccessful(function (fileItem) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = getFileAttributes(fileItem);
-          fireAnalytics(createLoadSucceededEvent(fileAttributes), _this.props);
+          fireAnalytics(createLoadSucceededEvent(fileAttributes, _this.traceContext), _this.props);
           succeedMediaFileUfoExperience({
             fileAttributes: fileAttributes,
             fileStateFlags: _this.fileStateFlags
@@ -216,7 +221,8 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/React.createElement(ImageViewer, _extends({
             onLoad: this.onSuccess,
             onError: this.onLoadFail,
-            contextId: contextId
+            contextId: contextId,
+            traceContext: this.traceContext
           }, viewerProps));
 
         case 'audio':
@@ -271,7 +277,8 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
           fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',
           error: error,
           fileState: fileState,
-          fileStateFlags: this.fileStateFlags
+          fileStateFlags: this.fileStateFlags,
+          traceContext: this.traceContext
         }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), this.renderDownloadButton(fileState, error));
       } else {
         return /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -373,7 +380,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       }
 
       var id = identifier.id;
-      fireAnalytics(createCommencedEvent(id), this.props);
+      fireAnalytics(createCommencedEvent(id, this.traceContext), this.props);
       startMediaFileUfoExperience();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName

package/dist/esm/styles.js

@@ -5,7 +5,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { layers, borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { ellipsis, hideControlsClassName } from '@atlaskit/media-ui';
 import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
 var overlayZindex = layers.modal() + 10;
@@ -66,6 +65,6 @@ export var audioCoverStyles = css(_templateObject34 || (_templateObject34 = _tag
 export var defaultCoverWrapperStyles = css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > * {\n    transform: scale(2);\n  }\n"])));
 export var downloadButtonWrapperStyles = css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  margin-top: 28px;\n  text-align: center;\n\n  button {\n    &:hover,\n    &:active {\n      color: #161a1d !important;\n    }\n  }\n"])));
 export var customVideoPlayerWrapperStyles = css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n  video {\n    flex: 1;\n    width: 100vw;\n    height: 100vh;\n    max-height: 100vh;\n  }\n"])));
-export var sidebarWrapperStyles = css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: 100vh;\n  overflow: hidden auto;\n  background-color: ", ";\n  color: ", ";\n"])), sidebarWidth, token('elevation.surface', headerAndSidebarBackgroundColor), token('color.text', '#c7d1db'));
+export var sidebarWrapperStyles = css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n  top: 0;\n  right: 0;\n  width: ", "px;\n  height: 100vh;\n  overflow: hidden auto;\n  background-color: ", ";\n  color: ", ";\n"])), sidebarWidth, "var(--ds-surface, ".concat(headerAndSidebarBackgroundColor, ")"), "var(--ds-text, #c7d1db)");
 export var spinnerWrapperStyles = css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
 export var formattedMessageWrapperStyles = css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral([""])));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "47.2.2",
+	"version": "47.3.1",
 	"sideEffects": false
 }

package/dist/esm/viewers/archiveSidebar/styles.js

@@ -4,32 +4,31 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css, keyframes } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { DN500 } from '@atlaskit/theme/colors';
 export var ArchiveSideBarWidth = 300;
 export var archiveItemViewerWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n"])));
-export var archiveSideBarStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 22px 20px 20px 20px;\n  background-color: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", "px;\n  bottom: 0;\n  box-sizing: border-box;\n  overflow-y: scroll;\n"])), token('elevation.surface', '#101214'), ArchiveSideBarWidth);
+export var archiveSideBarStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 22px 20px 20px 20px;\n  background-color: ", ";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: ", "px;\n  bottom: 0;\n  box-sizing: border-box;\n  overflow-y: scroll;\n"])), "var(--ds-surface, #101214)", ArchiveSideBarWidth);
 var slideDown = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n"])));
 export var archiveSidebarFolderWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transform: translateY(-100%);\n  transition: all 1s;\n  opacity: 0;\n  animation: ", " 0.3s forwards;\n"])), slideDown);
-export var archiveDownloadButtonWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 8px 7px 5px 8px;\n  border: none;\n  border-radius: 3px;\n  background-color: transparent;\n  color: ", ";\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), token('color.icon', '#9FADBC'), token('color.background.neutral.subtle.hovered', '#A1BDD914'), token('color.background.neutral.subtle.pressed', '#A6C5E229'));
+export var archiveDownloadButtonWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 8px 7px 5px 8px;\n  border: none;\n  border-radius: 3px;\n  background-color: transparent;\n  color: ", ";\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), "var(--ds-icon, #9FADBC)", "var(--ds-background-neutral-subtle-hovered, #A1BDD914)", "var(--ds-background-neutral-subtle-pressed, #A6C5E229)");
 export var sidebarItemWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 85%;\n"])));
 export var archiveSidebarFileEntryWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding-bottom: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s;\n"])));
 export var archiveLayoutStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"])));
 export var archiveViewerWrapperStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: ", "px;\n  right: 0;\n  bottom: 0;\n  align-items: center;\n  display: flex;\n"])), ArchiveSideBarWidth);
-export var separatorStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  border-radius: 1px;\n  height: 2px;\n  margin: ", "px 0;\n  background-color: ", ";\n  flex-shrink: 0;\n"])), (gridSize() * 5 - 2) / 2, token('color.border', '#A6C5E229'));
+export var separatorStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  border-radius: 1px;\n  height: 2px;\n  margin: ", "px 0;\n  background-color: ", ";\n  flex-shrink: 0;\n"])), (gridSize() * 5 - 2) / 2, "var(--ds-border, #A6C5E229)");
 export var sidebarHeaderWrapperStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
 export var sidebarHeaderIconStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
-export var sidebarHeaderEntryStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.14286;\n  color: ", ";\n"])), token('color.text', DN500));
+export var sidebarHeaderEntryStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.14286;\n  color: ", ";\n"])), "var(--ds-text, ".concat(DN500, ")"));
 export var itemStyle = {
-  backgroundColor: "".concat(token('color.background.neutral.subtle', '#101214')),
-  fill: "".concat(token('color.icon.success', '#101214')),
-  color: "".concat(token('color.text', DN500)),
+  backgroundColor: "var(--ds-background-neutral-subtle, #101214)",
+  fill: "var(--ds-icon-success, #101214)",
+  color: "".concat("var(--ds-text, ".concat(DN500, ")")),
   ':hover': {
-    backgroundColor: "".concat(token('color.background.neutral.subtle.hovered', '#A1BDD914')),
-    color: "".concat(token('color.text', DN500))
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #A1BDD914)",
+    color: "".concat("var(--ds-text, ".concat(DN500, ")"))
   },
   ':active': {
-    backgroundColor: "".concat(token('color.background.neutral.subtle.pressed', '#A6C5E229')),
-    color: "".concat(token('color.text', DN500))
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, #A6C5E229)",
+    color: "".concat("var(--ds-text, ".concat(DN500, ")"))
   }
 };

package/dist/esm/viewers/codeViewer/styles.js

@@ -6,8 +6,7 @@ import { css } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppressio
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { colors } from '@atlaskit/theme';
-import { token } from '@atlaskit/tokens';
-export var codeViewWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  overflow: auto;\n"])), token('elevation.surface', colors.N20));
+export var codeViewWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  overflow: auto;\n"])), "var(--ds-surface, ".concat(colors.N20, ")"));
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 export var codeViewerHeaderBarStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 75px;\n  background-color: #1d2125;\n"])));

package/dist/esm/viewers/image/index.js

@@ -69,13 +69,13 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this$props, fileState, mediaClient, collectionName, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName;
+                _this$props = this.props, fileState = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName, traceContext = _this$props.traceContext;
 
                 if (!(fileState.status === 'error')) {
                   _context.next = 3;
@@ -136,7 +136,7 @@ export var ImageViewer = /*#__PURE__*/function (_BaseViewer) {
                 response = mediaClient.getImage(item.details.id, {
                   collection: collectionName,
                   mode: 'fit'
-                }, controller, true);
+                }, controller, true, traceContext);
 
                 this.cancelImageFetch = function () {
                   return controller && controller.abort();

package/dist/types/analytics/events/operational/commenced.d.ts

@@ -1,5 +1,5 @@
-import { WithFileAttributes } from '@atlaskit/media-common';
+import { MediaTraceContext, WithFileAttributes, WithTraceContext } from '@atlaskit/media-common';
 import { MediaFileEventPayload } from './_mediaFile';
-export declare type CommencedAttributes = WithFileAttributes;
+export declare type CommencedAttributes = WithFileAttributes & WithTraceContext;
 export declare type CommencedEventPayload = MediaFileEventPayload<CommencedAttributes, 'commenced'>;
-export declare const createCommencedEvent: (fileId: string) => CommencedEventPayload;
+export declare const createCommencedEvent: (fileId: string, traceContext: MediaTraceContext) => CommencedEventPayload;

package/dist/types/analytics/events/operational/loadFailed.d.ts

@@ -2,5 +2,6 @@ import { FileState } from '@atlaskit/media-client';
 import { MediaFileEventPayload } from './_mediaFile';
 import { MediaViewerFailureAttributes } from '../..';
 import { MediaViewerError } from '../../../errors';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export declare type LoadFailedEventPayload = MediaFileEventPayload<MediaViewerFailureAttributes, 'loadFailed'>;
-export declare const createLoadFailedEvent: (fileId: string, error: MediaViewerError, fileState?: FileState | undefined) => LoadFailedEventPayload;
+export declare const createLoadFailedEvent: (fileId: string, error: MediaViewerError, fileState?: FileState | undefined, traceContext?: MediaTraceContext | undefined) => LoadFailedEventPayload;

package/dist/types/analytics/events/operational/loadSucceeded.d.ts

@@ -1,5 +1,5 @@
-import { SuccessAttributes, WithFileAttributes, FileAttributes } from '@atlaskit/media-common';
+import { SuccessAttributes, WithFileAttributes, FileAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
 import { MediaFileEventPayload } from './_mediaFile';
-export declare type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes;
+export declare type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes & WithTraceContext;
 export declare type LoadSucceededEventPayload = MediaFileEventPayload<LoadSucceededAttributes, 'loadSucceeded'>;
-export declare const createLoadSucceededEvent: ({ fileId, fileMediatype, fileMimetype, fileSize, }: FileAttributes) => LoadSucceededEventPayload;
+export declare const createLoadSucceededEvent: ({ fileId, fileMediatype, fileMimetype, fileSize }: FileAttributes, traceContext?: MediaTraceContext | undefined) => LoadSucceededEventPayload;

package/dist/types/analytics/index.d.ts

@@ -1,5 +1,5 @@
 import { FileState, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, WithFileAttributes, FailureAttributes } from '@atlaskit/media-common';
+import { FileAttributes, WithFileAttributes, FailureAttributes, WithTraceContext } from '@atlaskit/media-common';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason } from '../errors';
 import { MediaViewerEventPayload } from './events';
@@ -14,7 +14,6 @@ export declare const relevantFlags: {
     observedWidth: boolean;
     mediaInline: boolean;
     folderUploads: boolean;
-    mediaUploadApiV2: boolean;
     memoryCacheLogging: boolean;
 };
 export declare const LOGGED_FEATURE_FLAGS: (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
@@ -24,5 +23,5 @@ export declare function getFileAttributes(fileState?: FileState): FileAttributes
 export declare type MediaViewerFailureAttributes = Omit<FailureAttributes, 'failReason'> & {
     failReason: PrimaryErrorReason;
     request?: RequestMetadata;
-} & WithFileAttributes;
+} & WithFileAttributes & WithTraceContext;
 export declare function fireAnalytics(payload: MediaViewerEventPayload, props: WithAnalyticsEventsProps): void;

package/dist/types/errorMessage.d.ts

@@ -5,6 +5,7 @@ import { FileState } from '@atlaskit/media-client';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { PrimaryErrorReason, SecondaryErrorReason, MediaViewerError } from './errors';
 import { FileStateFlags } from './components/types';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export declare type Props = Readonly<{
     error: MediaViewerError;
     supressAnalytics?: boolean;
@@ -12,6 +13,7 @@ export declare type Props = Readonly<{
     fileState?: FileState;
     children?: ReactNode;
     fileStateFlags?: FileStateFlags;
+    traceContext?: MediaTraceContext;
 }>;
 export declare type FormatMessageFn = (messageDescriptor: MessageDescriptor) => string;
 export declare const errorReasonToMessages: Array<[
@@ -22,7 +24,7 @@ export declare const getErrorMessageFromError: (error: MediaViewerError) => Mess
 export declare class ErrorMessage extends React.Component<Props & WrappedComponentProps & WithAnalyticsEventsProps, {}> {
     private getErrorInfo;
     componentDidMount(): void;
-    static getEventPayload(error: MediaViewerError, fileId: string, fileState?: FileState): import("./analytics/events/operational/loadFailed").LoadFailedEventPayload | import("./analytics/events/operational/previewUnsupported").PreviewUnsupportedEventPayload;
+    static getEventPayload(error: MediaViewerError, fileId: string, fileState?: FileState, traceContext?: MediaTraceContext): import("./analytics/events/operational/loadFailed").LoadFailedEventPayload | import("./analytics/events/operational/previewUnsupported").PreviewUnsupportedEventPayload;
     render(): JSX.Element;
 }
 declare const ErroMsg: React.ComponentType<Props & WithAnalyticsEventsProps>;

package/dist/types/item-viewer.d.ts

@@ -24,6 +24,7 @@ export declare class ItemViewerBase extends React.Component<Props, State> {
     state: State;
     private subscription?;
     private fileStateFlags;
+    private traceContext;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(oldProps: Props): void;
     componentWillUnmount(): void;

package/dist/types/viewers/image/index.d.ts

@@ -3,6 +3,7 @@ import { MediaClient, FileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
 import { MediaViewerError } from '../../errors';
 import { BaseViewer } from '../base-viewer';
+import { MediaTraceContext } from '@atlaskit/media-common';
 export declare type ObjectUrl = string;
 export declare type ImageViewerProps = {
     mediaClient: MediaClient;
@@ -12,6 +13,7 @@ export declare type ImageViewerProps = {
     onError: (error: MediaViewerError) => void;
     onClose?: () => void;
     contextId?: string;
+    traceContext?: MediaTraceContext;
 };
 export interface ImageViewerContent {
     objectUrl: ObjectUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "47.2.2",
+  "version": "47.3.1",
   "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,10 +32,10 @@
     "@atlaskit/code": "^14.4.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-client": "^19.0.0",
-    "@atlaskit/media-common": "^2.17.0",
+    "@atlaskit/media-client": "^20.0.0",
+    "@atlaskit/media-common": "^2.18.0",
     "@atlaskit/media-ui": "^22.2.0",
-    "@atlaskit/side-navigation": "^1.4.0",
+    "@atlaskit/side-navigation": "^1.5.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.13.0",
@@ -57,10 +57,10 @@
   "devDependencies": {
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^74.3.0",
+    "@atlaskit/media-card": "^74.4.0",
     "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
-    "@atlaskit/media-test-helpers": "^30.0.0",
+    "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/media-viewer"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -74,3 +75,17 @@ export interface MediaViewerProps {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "@emotion/react": "^11.7.1",
+  "react": "^16.8.0",
+  "react-intl-next": "npm:react-intl@^5.18.1"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->