@atlaskit/media-viewer 47.3.0 → 47.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-viewer
 
+## 47.4.0
+
+### Minor Changes
+
+- [`2b3859896cc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b3859896cc) - Added new Feature Flag to control internal Media Client behaviour
+
+### Patch Changes
+
+- Updated dependencies
+
+## 47.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 47.3.0
 
 ### Minor Changes

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.3.0";
+var packageVersion = "47.4.0";
 exports.packageVersion = packageVersion;
 var relevantFlags = {
   newCardExperience: false,
@@ -23,7 +23,8 @@ var relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  memoryCacheLogging: false
+  memoryCacheLogging: false,
+  fetchFileStateAfterUpload: true
 };
 exports.relevantFlags = relevantFlags;
 var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(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.3.0";
+var packageVersion = "47.4.0";
 var ufoExperience;
 
 var getExperience = function getExperience() {

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.3.0",
+	"version": "47.4.0",
 	"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/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.3.0";
+const packageVersion = "47.4.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export const relevantFlags = {
   newCardExperience: false,
@@ -10,7 +10,8 @@ export const relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  memoryCacheLogging: false
+  memoryCacheLogging: false,
+  fetchFileStateAfterUpload: true
 };
 export const LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
 export const LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(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.3.0";
+const packageVersion = "47.4.0";
 let ufoExperience;
 
 const getExperience = () => {

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.3.0",
+	"version": "47.4.0",
 	"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/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.3.0";
+var packageVersion = "47.4.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export var relevantFlags = {
   newCardExperience: false,
@@ -10,7 +10,8 @@ export var relevantFlags = {
   observedWidth: false,
   mediaInline: false,
   folderUploads: false,
-  memoryCacheLogging: false
+  memoryCacheLogging: false,
+  fetchFileStateAfterUpload: true
 };
 export var LOGGED_FEATURE_FLAGS = filterFeatureFlagNames(relevantFlags);
 export var LOGGED_FEATURE_FLAG_KEYS = filterFeatureFlagKeysAllProducts(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.3.0";
+var packageVersion = "47.4.0";
 var ufoExperience;
 
 var getExperience = function getExperience() {

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.3.0",
+	"version": "47.4.0",
 	"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/types/analytics/index.d.ts

@@ -15,6 +15,7 @@ export declare const relevantFlags: {
     mediaInline: boolean;
     folderUploads: boolean;
     memoryCacheLogging: boolean;
+    fetchFileStateAfterUpload: boolean;
 };
 export declare const LOGGED_FEATURE_FLAGS: (keyof import("@atlaskit/media-common").MediaFeatureFlags)[];
 export declare const LOGGED_FEATURE_FLAG_KEYS: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "47.3.0",
+  "version": "47.4.0",
   "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,9 +32,9 @@
     "@atlaskit/code": "^14.4.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-client": "^19.1.0",
-    "@atlaskit/media-common": "^2.18.0",
-    "@atlaskit/media-ui": "^22.2.0",
+    "@atlaskit/media-client": "^20.0.0",
+    "@atlaskit/media-common": "^2.19.0",
+    "@atlaskit/media-ui": "^22.3.0",
     "@atlaskit/side-navigation": "^1.5.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/media-card": "^74.4.0",
+    "@atlaskit/media-card": "^74.5.0",
     "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/media-test-helpers": "^30.1.0",

package/report.api.md

@@ -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-->