@atlaskit/media-viewer 48.0.4 → 48.0.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-viewer
 
+## 48.0.6
+
+### Patch Changes
+
+- [`8b9680efe08`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b9680efe08) - Better logging of PDFjs errors
+- Updated dependencies
+
+## 48.0.5
+
+### Patch Changes
+
+- [`48e4a655534`](https://bitbucket.org/atlassian/atlassian-frontend/commits/48e4a655534) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 48.0.4
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -12,7 +12,7 @@ var componentName = 'mediaViewer';
 exports.component = exports.componentName = componentName;
 var packageName = "@atlaskit/media-viewer";
 exports.packageName = packageName;
-var packageVersion = "48.0.4";
+var packageVersion = "48.0.6";
 exports.packageVersion = packageVersion;
 function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 = "48.0.4";
+var packageVersion = "48.0.6";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/styles.js

@@ -21,14 +21,16 @@ var blanketStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _t
 exports.blanketStyles = blanketStyles;
 var headerWrapperStyles = function headerWrapperStyles(_ref) {
   var isArchiveSideBarVisible = _ref.isArchiveSideBarVisible;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 98px;\n  opacity: 0.85;\n  background: linear-gradient(\n      to bottom,\n      ", ",\n      rgba(14, 22, 36, 0)\n    )\n    no-repeat;\n  background-position: ", ";\n  color: #c7d1db;\n  font-weight: 500;\n  padding-top: 15px;\n  padding: 24px;\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: ", ";\n"])), _modalSpinner.headerAndSidebarBackgroundColor, isArchiveSideBarVisible ? "".concat(_styles.ArchiveSideBarWidth, "px 0") : '0', overlayZindex + 1);
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 98px;\n    opacity: 0.85;\n    background: linear-gradient(\n        to bottom,\n        ", ",\n        rgba(14, 22, 36, 0)\n      )\n      no-repeat;\n    background-position: ", ";\n    color: #c7d1db;\n    font-weight: 500;\n    padding-top: 15px;\n    padding: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: ", ";\n  "])), _modalSpinner.headerAndSidebarBackgroundColor, isArchiveSideBarVisible ? "".concat(_styles.ArchiveSideBarWidth, "px 0") : '0', "var(--ds-space-300, 24px)", overlayZindex + 1)
+  );
 };
 exports.headerWrapperStyles = headerWrapperStyles;
 var listWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 exports.listWrapperStyles = listWrapperStyles;
 var arrowsWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n  width: 100%;\n"])));
 exports.arrowsWrapperStyles = arrowsWrapperStyles;
-var closeButtonWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 24px;\n  right: 20px;\n  z-index: ", ";\n"])), overlayZindex + 2);
+var closeButtonWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-250, 20px)", overlayZindex + 2);
 exports.closeButtonWrapperStyles = closeButtonWrapperStyles;
 var contentWrapperStyles = function contentWrapperStyles(_ref2) {
   var isSidebarVisible = _ref2.isSidebarVisible;
@@ -36,16 +38,24 @@ var contentWrapperStyles = function contentWrapperStyles(_ref2) {
 };
 exports.contentWrapperStyles = contentWrapperStyles;
 var zoomWrapperStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  height: 98px;\n  background-image: linear-gradient(\n    to top,\n    ", ",\n    rgba(14, 22, 36, 0)\n  );\n  opacity: 0.85;\n  pointer-events: none;\n"])), _modalSpinner.headerAndSidebarBackgroundColor);
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.zoomWrapperStyles = zoomWrapperStyles;
 var zoomControlsWrapperStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: absolute;\n  text-align: center;\n  bottom: 10px;\n  button {\n    margin-right: 10px;\n  }\n  > * {\n    pointer-events: all;\n  }\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.zoomControlsWrapperStyles = zoomControlsWrapperStyles;
-var zoomLevelIndicatorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 24px;\n  bottom: 22px;\n  color: #c7d1db;\n  pointer-events: all;\n"])));
+var zoomLevelIndicatorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: ", ";\n  bottom: 22px;\n  color: #c7d1db;\n  pointer-events: all;\n"])), "var(--ds-space-300, 24px)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.zoomLevelIndicatorStyles = zoomLevelIndicatorStyles;
-var hdIconGroupWrapperStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 69px;\n  bottom: 16px;\n"])));
+var hdIconGroupWrapperStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 69px;\n  bottom: ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.hdIconGroupWrapperStyles = hdIconGroupWrapperStyles;
-var hdIconWrapperStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: top;\n  margin-left: -24px;\n"])));
+var hdIconWrapperStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: top;\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-space-300, 24px)");
 exports.hdIconWrapperStyles = hdIconWrapperStyles;
 var errorMessageWrapperStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  color: #c7d1db;\n  p {\n    line-height: 100%;\n  }\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.errorMessageWrapperStyles = errorMessageWrapperStyles;
 var errorImageStyles = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 10px;\n  user-select: none;\n"])));
 exports.errorImageStyles = errorImageStyles;
@@ -55,7 +65,7 @@ var pdfWrapperStyles = (0, _react.css)(_templateObject15 || (_templateObject15 =
 exports.pdfWrapperStyles = pdfWrapperStyles;
 var arrowStyles = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n\n  svg {\n    filter: drop-shadow(0px 1px 1px rgb(9 30 66 / 25%))\n      drop-shadow(0px 0px 1px rgb(9 30 66 / 31%));\n  }\n\n  && button {\n    height: inherit;\n    background: none;\n\n    &:hover {\n      svg {\n        color: #b6c2cf;\n      }\n    }\n\n    &:active {\n      svg {\n        color: #c7d1db;\n      }\n    }\n  }\n"])));
 exports.arrowStyles = arrowStyles;
-var arrowWrapperStyles = (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 20px;\n"])));
+var arrowWrapperStyles = (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: ", ";\n"])), "var(--ds-space-250, 20px)");
 var leftWrapperStyles = function leftWrapperStyles(_ref3) {
   var isArchiveSideBarVisible = _ref3.isArchiveSideBarVisible;
   return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-align: left;\n  left: ", ";\n"])), arrowWrapperStyles, isArchiveSideBarVisible ? "".concat(_styles.ArchiveSideBarWidth, "px") : '0');
@@ -90,9 +100,9 @@ var metadataFileNameStyles = (0, _react.css)(_templateObject27 || (_templateObje
 exports.metadataFileNameStyles = metadataFileNameStyles;
 var metadataSubTextStyles = (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n  color: #c7d1db;\n  ", ";\n"])), (0, _mediaUi.ellipsis)());
 exports.metadataSubTextStyles = metadataSubTextStyles;
-var metadataIconWrapperStyles = (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 4px;\n  padding-right: 12px;\n"])));
+var metadataIconWrapperStyles = (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", ";\n  padding-right: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)");
 exports.metadataIconWrapperStyles = metadataIconWrapperStyles;
-var rightHeaderStyles = (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n  margin-right: 40px;\n  min-width: 200px;\n  > * {\n    pointer-events: all;\n  }\n"])));
+var rightHeaderStyles = (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n  margin-right: ", ";\n  min-width: 200px;\n  > * {\n    pointer-events: all;\n  }\n"])), "var(--ds-space-500, 40px)");
 exports.rightHeaderStyles = rightHeaderStyles;
 var customAudioPlayerWrapperStyles = (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
 exports.customAudioPlayerWrapperStyles = customAudioPlayerWrapperStyles;
@@ -103,6 +113,8 @@ exports.audioStyles = audioStyles;
 var audioCoverStyles = (0, _react.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000;\n"])));
 exports.audioCoverStyles = audioCoverStyles;
 var defaultCoverWrapperStyles = (0, _react.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.defaultCoverWrapperStyles = defaultCoverWrapperStyles;
 var downloadButtonWrapperStyles = (0, _react.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 28px;\n  text-align: center;\n\n  button {\n    &:hover,\n    &:active {\n      color: #161a1d !important;\n    }\n  }\n"])));
 exports.downloadButtonWrapperStyles = downloadButtonWrapperStyles;

package/dist/cjs/version.json

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

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

@@ -13,25 +13,36 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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"])), "var(--ds-surface, #101214)", ArchiveSideBarWidth);
+var archiveSideBarStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 22px ", " ", "\n    ", ";\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-space-250, 20px)", "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)", "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);
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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"])), "var(--ds-icon, #9FADBC)", "var(--ds-background-neutral-subtle-hovered, #A1BDD914)", "var(--ds-background-neutral-subtle-pressed, #A6C5E229)");
+var archiveDownloadButtonWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " 7px 5px ", ";\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-space-100, 8px)", "var(--ds-space-100, 8px)", "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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.sidebarItemWrapperStyles = sidebarItemWrapperStyles;
 var archiveSidebarFileEntryWrapperStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s;\n"])));
 exports.archiveSidebarFileEntryWrapperStyles = archiveSidebarFileEntryWrapperStyles;
 var archiveLayoutStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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);
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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, "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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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;

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

@@ -17,5 +17,5 @@ exports.codeViewWrapperStyles = codeViewWrapperStyles;
 var codeViewerHeaderBarStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 75px;\n  background-color: #1d2125;\n"])));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 exports.codeViewerHeaderBarStyles = codeViewerHeaderBarStyles;
-var codeViewerHTMLStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 20px;\n  overflow-x: auto;\n  white-space: pre;\n  font-size: 12px;\n  padding: 8px;\n"])));
+var codeViewerHTMLStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 20px;\n  overflow-x: auto;\n  white-space: pre;\n  font-size: 12px;\n  padding: ", ";\n"])), "var(--ds-space-100, 8px)");
 exports.codeViewerHTMLStyles = codeViewerHTMLStyles;

package/dist/cjs/viewers/doc/pdfRenderer.js

@@ -26,17 +26,17 @@ var _closeOnDirectClick = require("../../utils/closeOnDirectClick");
 var _domain = require("../../domain");
 var _loading = require("../../loading");
 var _errorMessage = _interopRequireDefault(require("../../errorMessage"));
-var _errors = require("../../errors");
 var _zoomLevel = require("../../domain/zoomLevel");
+var _processError = require("./processError");
 var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var pdfViewerClassName = 'pdfViewer';
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage-spacing */
 exports.pdfViewerClassName = pdfViewerClassName;
-var globalStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    margin-top: 64px;\n    margin-bottom: 64px;\n    .page {\n      margin: 1px auto -8px auto;\n      border: 9px solid transparent;\n      position: relative;\n\n      .canvasWrapper {\n        overflow: hidden;\n      }\n\n      .textLayer {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        overflow: hidden;\n        line-height: 1;\n        font-family: sans-serif;\n        opacity: 0.8;\n\n        ::selection {\n          background: rgb(0, 0, 255);\n        }\n      }\n\n      .annotationLayer {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n      }\n\n      .textLayer > div,\n      .annotationLayer > section {\n        color: transparent;\n        position: absolute;\n        white-space: pre;\n        cursor: text;\n        transform-origin: 0% 0%;\n      }\n      .linkAnnotation > a {\n        position: absolute;\n        font-size: 1em;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      .linkAnnotation > a {\n        background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')\n          0 0 repeat;\n      }\n\n      .linkAnnotation > a:hover {\n        opacity: 0.2;\n        background: #ff0;\n        box-shadow: 0 2px 10px #ff0;\n      }\n    }\n  }\n"])), pdfViewerClassName);
+var globalStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n    .page {\n      margin: 1px auto -8px auto;\n      border: 9px solid transparent;\n      position: relative;\n\n      .canvasWrapper {\n        overflow: hidden;\n      }\n\n      .textLayer {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        overflow: hidden;\n        line-height: 1;\n        font-family: sans-serif;\n        opacity: 0.8;\n\n        ::selection {\n          background: rgb(0, 0, 255);\n        }\n      }\n\n      .annotationLayer {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n      }\n\n      .textLayer > div,\n      .annotationLayer > section {\n        color: transparent;\n        position: absolute;\n        white-space: pre;\n        cursor: text;\n        transform-origin: 0% 0%;\n      }\n      .linkAnnotation > a {\n        position: absolute;\n        font-size: 1em;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      .linkAnnotation > a {\n        background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')\n          0 0 repeat;\n      }\n\n      .linkAnnotation > a:hover {\n        opacity: 0.2;\n        background: #ff0;\n        box-shadow: 0 2px 10px #ff0;\n      }\n    }\n  }\n"])), pdfViewerClassName, "var(--ds-space-800, 64px)", "var(--ds-space-800, 64px)");
 /* eslint-enable no-unused-expressions */
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -125,7 +125,7 @@ var PDFRenderer = /*#__PURE__*/function (_React$Component) {
             case 8:
               _context.prev = 8;
               _context.t0 = _context["catch"](1);
-              pdfError = new _errors.MediaViewerError('docviewer-fetch-pdf', _context.t0 instanceof Error ? _context.t0 : undefined);
+              pdfError = (0, _processError.processError)(_context.t0);
               this.setState({
                 doc: _domain.Outcome.failed(pdfError)
               });

package/dist/cjs/viewers/doc/processError.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processError = void 0;
+var _errors = require("../../errors");
+var _mediaClient = require("@atlaskit/media-client");
+// Declares the type of the returned error by PDFjs.
+
+var isErrorWithStatus = function isErrorWithStatus(error) {
+  return error instanceof Error && "status" in error && typeof error.status === 'number';
+};
+var processError = function processError(error) {
+  if (isErrorWithStatus(error)) {
+    var reason = (0, _mediaClient.createRequestErrorReason)(error.status);
+    return new _errors.MediaViewerError('docviewer-fetch-pdf', new _mediaClient.RequestError(reason, {
+      statusCode: error.status
+    }));
+  }
+  return new _errors.MediaViewerError('docviewer-fetch-pdf',
+  // TODO: sanitize the error message or remove it entirely
+  // https://product-fabric.atlassian.net/browse/MEX-2456
+  error instanceof Error ? error : undefined);
+};
+exports.processError = processError;

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.0.4";
+const packageVersion = "48.0.6";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.0.4";
+const packageVersion = "48.0.6";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/styles.js

@@ -19,28 +19,30 @@ export const blanketStyles = css`
 `;
 export const headerWrapperStyles = ({
   isArchiveSideBarVisible
-}) => css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 98px;
-  opacity: 0.85;
-  background: linear-gradient(
-      to bottom,
-      ${headerAndSidebarBackgroundColor},
-      rgba(14, 22, 36, 0)
-    )
-    no-repeat;
-  background-position: ${isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px 0` : '0'};
-  color: #c7d1db;
-  font-weight: 500;
-  padding-top: 15px;
-  padding: 24px;
-  box-sizing: border-box;
-  pointer-events: none;
-  z-index: ${overlayZindex + 1};
-`;
+}) =>
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 98px;
+    opacity: 0.85;
+    background: linear-gradient(
+        to bottom,
+        ${headerAndSidebarBackgroundColor},
+        rgba(14, 22, 36, 0)
+      )
+      no-repeat;
+    background-position: ${isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px 0` : '0'};
+    color: #c7d1db;
+    font-weight: 500;
+    padding-top: 15px;
+    padding: ${"var(--ds-space-300, 24px)"};
+    box-sizing: border-box;
+    pointer-events: none;
+    z-index: ${overlayZindex + 1};
+  `;
 export const listWrapperStyles = css`
   width: 100%;
   height: 100%;
@@ -59,8 +61,8 @@ export const arrowsWrapperStyles = css`
 `;
 export const closeButtonWrapperStyles = css`
   position: absolute;
-  top: 24px;
-  right: 20px;
+  top: ${"var(--ds-space-300, 24px)"};
+  right: ${"var(--ds-space-250, 20px)"};
   z-index: ${overlayZindex + 2};
 `;
 export const contentWrapperStyles = ({
@@ -81,6 +83,8 @@ export const zoomWrapperStyles = css`
   opacity: 0.85;
   pointer-events: none;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const zoomControlsWrapperStyles = css`
   width: 100%;
   position: absolute;
@@ -93,22 +97,26 @@ export const zoomControlsWrapperStyles = css`
     pointer-events: all;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const zoomLevelIndicatorStyles = css`
   position: absolute;
-  right: 24px;
+  right: ${"var(--ds-space-300, 24px)"};
   bottom: 22px;
   color: #c7d1db;
   pointer-events: all;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const hdIconGroupWrapperStyles = css`
   position: absolute;
   right: 69px;
-  bottom: 16px;
+  bottom: ${"var(--ds-space-200, 16px)"};
 `;
 export const hdIconWrapperStyles = css`
   display: inline-block;
   vertical-align: top;
-  margin-left: -24px;
+  margin-left: calc(-1 * ${"var(--ds-space-300, 24px)"});
 `;
 export const errorMessageWrapperStyles = css`
   text-align: center;
@@ -117,6 +125,8 @@ export const errorMessageWrapperStyles = css`
     line-height: 100%;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const errorImageStyles = css`
   margin-bottom: 10px;
   user-select: none;
@@ -166,7 +176,7 @@ const arrowWrapperStyles = css`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  padding: 20px;
+  padding: ${"var(--ds-space-250, 20px)"};
 `;
 export const leftWrapperStyles = ({
   isArchiveSideBarVisible
@@ -244,12 +254,12 @@ export const metadataSubTextStyles = css`
   ${ellipsis()};
 `;
 export const metadataIconWrapperStyles = css`
-  padding-top: 4px;
-  padding-right: 12px;
+  padding-top: ${"var(--ds-space-050, 4px)"};
+  padding-right: ${"var(--ds-space-150, 12px)"};
 `;
 export const rightHeaderStyles = css`
   text-align: right;
-  margin-right: 40px;
+  margin-right: ${"var(--ds-space-500, 40px)"};
   min-width: 200px;
   > * {
     pointer-events: all;
@@ -296,6 +306,8 @@ export const defaultCoverWrapperStyles = css`
     transform: scale(2);
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const downloadButtonWrapperStyles = css`
   margin-top: 28px;
   text-align: center;

package/dist/es2019/version.json

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

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

@@ -7,8 +7,11 @@ export const archiveItemViewerWrapperStyles = css`
   display: flex;
   justify-content: center;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const archiveSideBarStyles = css`
-  padding: 22px 20px 20px 20px;
+  padding: 22px ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-250, 20px)"}
+    ${"var(--ds-space-250, 20px)"};
   background-color: ${"var(--ds-surface, #101214)"};
   position: absolute;
   left: 0;
@@ -35,8 +38,10 @@ export const archiveSidebarFolderWrapperStyles = css`
   opacity: 0;
   animation: ${slideDown} 0.3s forwards;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const archiveDownloadButtonWrapperStyles = css`
-  padding: 8px 7px 5px 8px;
+  padding: ${"var(--ds-space-100, 8px)"} 7px 5px ${"var(--ds-space-100, 8px)"};
   border: none;
   border-radius: 3px;
   background-color: transparent;
@@ -55,6 +60,8 @@ export const archiveDownloadButtonWrapperStyles = css`
 export const sidebarItemWrapperStyles = css`
   width: 85%;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const archiveSidebarFileEntryWrapperStyles = css`
   padding-bottom: 5px;
   display: flex;
@@ -67,6 +74,8 @@ export const archiveLayoutStyles = css`
   width: 100%;
   height: 100%;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const archiveViewerWrapperStyles = css`
   position: absolute;
   top: 0;
@@ -76,6 +85,7 @@ export const archiveViewerWrapperStyles = css`
   align-items: center;
   display: flex;
 `;
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const separatorStyles = css`
   border-radius: 1px;
   height: 2px;
@@ -88,6 +98,8 @@ export const sidebarHeaderWrapperStyles = css`
   align-items: center;
   flex-shrink: 0;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const sidebarHeaderIconStyles = css`
   display: flex;
   align-items: center;

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

@@ -25,5 +25,5 @@ export const codeViewerHTMLStyles = css`
   overflow-x: auto;
   white-space: pre;
   font-size: 12px;
-  padding: 8px;
+  padding: ${"var(--ds-space-100, 8px)"};
 `;

package/dist/es2019/viewers/doc/pdfRenderer.js

@@ -9,14 +9,14 @@ import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
 import { Outcome } from '../../domain';
 import { Spinner } from '../../loading';
 import ErrorMessage from '../../errorMessage';
-import { MediaViewerError } from '../../errors';
 import { ZoomLevel } from '../../domain/zoomLevel';
+import { processError } from './processError';
 export const pdfViewerClassName = 'pdfViewer';
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage-spacing */
 const globalStyles = css`
   .${pdfViewerClassName} {
-    margin-top: 64px;
-    margin-bottom: 64px;
+    margin-top: ${"var(--ds-space-800, 64px)"};
+    margin-bottom: ${"var(--ds-space-800, 64px)"};
     .page {
       margin: 1px auto -8px auto;
       border: 9px solid transparent;
@@ -144,7 +144,7 @@ export class PDFRenderer extends React.Component {
         }
       });
     } catch (error) {
-      const pdfError = new MediaViewerError('docviewer-fetch-pdf', error instanceof Error ? error : undefined);
+      const pdfError = processError(error);
       this.setState({
         doc: Outcome.failed(pdfError)
       });

package/dist/es2019/viewers/doc/processError.js

@@ -0,0 +1,18 @@
+import { MediaViewerError } from '../../errors';
+import { RequestError, createRequestErrorReason } from '@atlaskit/media-client';
+
+// Declares the type of the returned error by PDFjs.
+
+const isErrorWithStatus = error => error instanceof Error && `status` in error && typeof error.status === 'number';
+export const processError = error => {
+  if (isErrorWithStatus(error)) {
+    const reason = createRequestErrorReason(error.status);
+    return new MediaViewerError('docviewer-fetch-pdf', new RequestError(reason, {
+      statusCode: error.status
+    }));
+  }
+  return new MediaViewerError('docviewer-fetch-pdf',
+  // TODO: sanitize the error message or remove it entirely
+  // https://product-fabric.atlassian.net/browse/MEX-2456
+  error instanceof Error ? error : undefined);
+};

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.0.4";
+var packageVersion = "48.0.6";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.0.4";
+var packageVersion = "48.0.6";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/styles.js

@@ -12,26 +12,36 @@ export var blanketColor = '#22272B';
 export var blanketStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  background-color: ", ";\n  z-index: ", ";\n  display: flex;\n"])), blanketColor, overlayZindex);
 export var headerWrapperStyles = function headerWrapperStyles(_ref) {
   var isArchiveSideBarVisible = _ref.isArchiveSideBarVisible;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 98px;\n  opacity: 0.85;\n  background: linear-gradient(\n      to bottom,\n      ", ",\n      rgba(14, 22, 36, 0)\n    )\n    no-repeat;\n  background-position: ", ";\n  color: #c7d1db;\n  font-weight: 500;\n  padding-top: 15px;\n  padding: 24px;\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: ", ";\n"])), headerAndSidebarBackgroundColor, isArchiveSideBarVisible ? "".concat(ArchiveSideBarWidth, "px 0") : '0', overlayZindex + 1);
+  return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 98px;\n    opacity: 0.85;\n    background: linear-gradient(\n        to bottom,\n        ", ",\n        rgba(14, 22, 36, 0)\n      )\n      no-repeat;\n    background-position: ", ";\n    color: #c7d1db;\n    font-weight: 500;\n    padding-top: 15px;\n    padding: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    z-index: ", ";\n  "])), headerAndSidebarBackgroundColor, isArchiveSideBarVisible ? "".concat(ArchiveSideBarWidth, "px 0") : '0', "var(--ds-space-300, 24px)", overlayZindex + 1)
+  );
 };
 export var listWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 export var arrowsWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n  width: 100%;\n"])));
-export var closeButtonWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 24px;\n  right: 20px;\n  z-index: ", ";\n"])), overlayZindex + 2);
+export var closeButtonWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-250, 20px)", overlayZindex + 2);
 export var contentWrapperStyles = function contentWrapperStyles(_ref2) {
   var isSidebarVisible = _ref2.isSidebarVisible;
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: ", ";\n"])), isSidebarVisible ? "calc(100% - ".concat(sidebarWidth, "px)") : '100%');
 };
 export var zoomWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  height: 98px;\n  background-image: linear-gradient(\n    to top,\n    ", ",\n    rgba(14, 22, 36, 0)\n  );\n  opacity: 0.85;\n  pointer-events: none;\n"])), headerAndSidebarBackgroundColor);
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var zoomControlsWrapperStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: absolute;\n  text-align: center;\n  bottom: 10px;\n  button {\n    margin-right: 10px;\n  }\n  > * {\n    pointer-events: all;\n  }\n"])));
-export var zoomLevelIndicatorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 24px;\n  bottom: 22px;\n  color: #c7d1db;\n  pointer-events: all;\n"])));
-export var hdIconGroupWrapperStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 69px;\n  bottom: 16px;\n"])));
-export var hdIconWrapperStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: top;\n  margin-left: -24px;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var zoomLevelIndicatorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: ", ";\n  bottom: 22px;\n  color: #c7d1db;\n  pointer-events: all;\n"])), "var(--ds-space-300, 24px)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var hdIconGroupWrapperStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 69px;\n  bottom: ", ";\n"])), "var(--ds-space-200, 16px)");
+export var hdIconWrapperStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: top;\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-space-300, 24px)");
 export var errorMessageWrapperStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  text-align: center;\n  color: #c7d1db;\n  p {\n    line-height: 100%;\n  }\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var errorImageStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-bottom: 10px;\n  user-select: none;\n"])));
 export var videoStyles = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 100vw;\n  height: 100vh;\n"])));
 export var pdfWrapperStyles = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  overflow: auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n\n  .", " {\n    position: fixed;\n  }\n"])), hideControlsClassName);
 export var arrowStyles = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  svg {\n    filter: drop-shadow(0px 1px 1px rgb(9 30 66 / 25%))\n      drop-shadow(0px 0px 1px rgb(9 30 66 / 31%));\n  }\n\n  && button {\n    height: inherit;\n    background: none;\n\n    &:hover {\n      svg {\n        color: #b6c2cf;\n      }\n    }\n\n    &:active {\n      svg {\n        color: #c7d1db;\n      }\n    }\n  }\n"])));
-var arrowWrapperStyles = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 20px;\n"])));
+var arrowWrapperStyles = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: ", ";\n"])), "var(--ds-space-250, 20px)");
 export var leftWrapperStyles = function leftWrapperStyles(_ref3) {
   var isArchiveSideBarVisible = _ref3.isArchiveSideBarVisible;
   return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  ", "\n  text-align: left;\n  left: ", ";\n"])), arrowWrapperStyles, isArchiveSideBarVisible ? "".concat(ArchiveSideBarWidth, "px") : '0');
@@ -56,13 +66,15 @@ export var medatadataTextWrapperStyles = css(_templateObject25 || (_templateObje
 export var metadataWrapperStyles = css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 export var metadataFileNameStyles = css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  &::first-letter {\n    text-transform: uppercase;\n  }\n  ", ";\n"])), ellipsis());
 export var metadataSubTextStyles = css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  color: #c7d1db;\n  ", ";\n"])), ellipsis());
-export var metadataIconWrapperStyles = css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  padding-top: 4px;\n  padding-right: 12px;\n"])));
-export var rightHeaderStyles = css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  text-align: right;\n  margin-right: 40px;\n  min-width: 200px;\n  > * {\n    pointer-events: all;\n  }\n"])));
+export var metadataIconWrapperStyles = css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  padding-right: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)");
+export var rightHeaderStyles = css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["\n  text-align: right;\n  margin-right: ", ";\n  min-width: 200px;\n  > * {\n    pointer-events: all;\n  }\n"])), "var(--ds-space-500, 40px)");
 export var customAudioPlayerWrapperStyles = css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
 export var audioPlayerStyles = css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  align-items: center;\n  justify-content: center;\n  width: 400px;\n  height: 400px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])), blanketColor, borderRadius());
 export var audioStyles = css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])));
 export var audioCoverStyles = css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000;\n"])));
 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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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, "var(--ds-surface, ".concat(headerAndSidebarBackgroundColor, ")"), "var(--ds-text, #c7d1db)");

package/dist/esm/version.json

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

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

@@ -5,16 +5,27 @@ import { gridSize } from '@atlaskit/theme/constants';
 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"])), "var(--ds-surface, #101214)", ArchiveSideBarWidth);
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var archiveSideBarStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 22px ", " ", "\n    ", ";\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-space-250, 20px)", "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)", "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"])), "var(--ds-icon, #9FADBC)", "var(--ds-background-neutral-subtle-hovered, #A1BDD914)", "var(--ds-background-neutral-subtle-pressed, #A6C5E229)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var archiveDownloadButtonWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: ", " 7px 5px ", ";\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-space-100, 8px)", "var(--ds-space-100, 8px)", "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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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);
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 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"])), "var(--ds-text, ".concat(DN500, ")"));
 export var itemStyle = {

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

@@ -10,4 +10,4 @@ export var codeViewWrapperStyles = css(_templateObject || (_templateObject = _ta
 export var codeViewerHeaderBarStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 75px;\n  background-color: #1d2125;\n"])));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-export var codeViewerHTMLStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 20px;\n  overflow-x: auto;\n  white-space: pre;\n  font-size: 12px;\n  padding: 8px;\n"])));
+export var codeViewerHTMLStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 20px;\n  overflow-x: auto;\n  white-space: pre;\n  font-size: 12px;\n  padding: ", ";\n"])), "var(--ds-space-100, 8px)");

package/dist/esm/viewers/doc/pdfRenderer.js

@@ -21,11 +21,11 @@ import { closeOnDirectClick } from '../../utils/closeOnDirectClick';
 import { Outcome } from '../../domain';
 import { Spinner } from '../../loading';
 import ErrorMessage from '../../errorMessage';
-import { MediaViewerError } from '../../errors';
 import { ZoomLevel } from '../../domain/zoomLevel';
+import { processError } from './processError';
 export var pdfViewerClassName = 'pdfViewer';
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var globalStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    margin-top: 64px;\n    margin-bottom: 64px;\n    .page {\n      margin: 1px auto -8px auto;\n      border: 9px solid transparent;\n      position: relative;\n\n      .canvasWrapper {\n        overflow: hidden;\n      }\n\n      .textLayer {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        overflow: hidden;\n        line-height: 1;\n        font-family: sans-serif;\n        opacity: 0.8;\n\n        ::selection {\n          background: rgb(0, 0, 255);\n        }\n      }\n\n      .annotationLayer {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n      }\n\n      .textLayer > div,\n      .annotationLayer > section {\n        color: transparent;\n        position: absolute;\n        white-space: pre;\n        cursor: text;\n        transform-origin: 0% 0%;\n      }\n      .linkAnnotation > a {\n        position: absolute;\n        font-size: 1em;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      .linkAnnotation > a {\n        background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')\n          0 0 repeat;\n      }\n\n      .linkAnnotation > a:hover {\n        opacity: 0.2;\n        background: #ff0;\n        box-shadow: 0 2px 10px #ff0;\n      }\n    }\n  }\n"])), pdfViewerClassName);
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage-spacing */
+var globalStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n    .page {\n      margin: 1px auto -8px auto;\n      border: 9px solid transparent;\n      position: relative;\n\n      .canvasWrapper {\n        overflow: hidden;\n      }\n\n      .textLayer {\n        position: absolute;\n        left: 0;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        overflow: hidden;\n        line-height: 1;\n        font-family: sans-serif;\n        opacity: 0.8;\n\n        ::selection {\n          background: rgb(0, 0, 255);\n        }\n      }\n\n      .annotationLayer {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n      }\n\n      .textLayer > div,\n      .annotationLayer > section {\n        color: transparent;\n        position: absolute;\n        white-space: pre;\n        cursor: text;\n        transform-origin: 0% 0%;\n      }\n      .linkAnnotation > a {\n        position: absolute;\n        font-size: 1em;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      .linkAnnotation > a {\n        background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')\n          0 0 repeat;\n      }\n\n      .linkAnnotation > a:hover {\n        opacity: 0.2;\n        background: #ff0;\n        box-shadow: 0 2px 10px #ff0;\n      }\n    }\n  }\n"])), pdfViewerClassName, "var(--ds-space-800, 64px)", "var(--ds-space-800, 64px)");
 /* eslint-enable no-unused-expressions */
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -114,7 +114,7 @@ export var PDFRenderer = /*#__PURE__*/function (_React$Component) {
             case 8:
               _context.prev = 8;
               _context.t0 = _context["catch"](1);
-              pdfError = new MediaViewerError('docviewer-fetch-pdf', _context.t0 instanceof Error ? _context.t0 : undefined);
+              pdfError = processError(_context.t0);
               this.setState({
                 doc: Outcome.failed(pdfError)
               });

package/dist/esm/viewers/doc/processError.js

@@ -0,0 +1,20 @@
+import { MediaViewerError } from '../../errors';
+import { RequestError, createRequestErrorReason } from '@atlaskit/media-client';
+
+// Declares the type of the returned error by PDFjs.
+
+var isErrorWithStatus = function isErrorWithStatus(error) {
+  return error instanceof Error && "status" in error && typeof error.status === 'number';
+};
+export var processError = function processError(error) {
+  if (isErrorWithStatus(error)) {
+    var reason = createRequestErrorReason(error.status);
+    return new MediaViewerError('docviewer-fetch-pdf', new RequestError(reason, {
+      statusCode: error.status
+    }));
+  }
+  return new MediaViewerError('docviewer-fetch-pdf',
+  // TODO: sanitize the error message or remove it entirely
+  // https://product-fabric.atlassian.net/browse/MEX-2456
+  error instanceof Error ? error : undefined);
+};

package/dist/types/viewers/doc/processError.d.ts

@@ -0,0 +1,2 @@
+import { MediaViewerError } from '../../errors';
+export declare const processError: (error: unknown) => MediaViewerError;

package/dist/types-ts4.5/viewers/doc/processError.d.ts

@@ -0,0 +1,2 @@
+import { MediaViewerError } from '../../errors';
+export declare const processError: (error: unknown) => MediaViewerError;

package/example-helpers/styles.ts

@@ -8,7 +8,7 @@ export const containerStyles = css`
 `;
 export const groupStyles = css`
   width: 250px;
-  padding: 20px;
+  padding: ${token('space.250', '20px')};
 `;
 
 export const buttonListStyles = css`
@@ -18,12 +18,12 @@ export const buttonListStyles = css`
 
 export const mVSidebarStyles = css`
   height: calc(100vh - 64px);
-  padding: 32px;
+  padding: ${token('space.400', '32px')};
   overflow: auto;
 
   h2 {
     color: ${token('color.text', '#c7d1db')};
-    margin-bottom: 16px;
+    margin-bottom: ${token('space.200', '16px')};
   }
 
   tbody {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-viewer",
-  "version": "48.0.4",
+  "version": "48.0.6",
   "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/"
@@ -40,7 +40,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-file-type": "^6.4.0",
-    "@atlaskit/media-client": "^23.0.0",
+    "@atlaskit/media-client": "^23.1.0",
     "@atlaskit/media-common": "^7.0.0",
     "@atlaskit/media-ui": "^23.0.0",
     "@atlaskit/side-navigation": "^1.8.0",
@@ -92,7 +92,8 @@
   "techstack": {
     "@repo/internal": {
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ]
     }
   }