@atlaskit/media-viewer 47.1.2 → 47.2.1

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

@@ -13,11 +13,17 @@ 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"])), _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"])), (0, _tokens.token)('elevation.surface', _theme.colors.N20));
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 exports.codeViewWrapperStyles = codeViewWrapperStyles;
-var codeViewerHeaderBarStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 75px;\n  background-color: #0e1624;\n"])));
+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"])));
 exports.codeViewerHTMLStyles = codeViewerHTMLStyles;

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

@@ -64,10 +64,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 */
+
 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);
 /* eslint-enable no-unused-expressions */
 
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 pdfjsLib.GlobalWorkerOptions.workerSrc = '/'; // TODO: use web workers instead of fake worker.
 
 var fetchPdf = function fetchPdf(url) {

package/dist/cjs/viewers/image/interactive-img.js

@@ -274,9 +274,11 @@ var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
 
       if (!isHDAvailable) {
         return null;
-      }
+      } // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+
+      var hdPrimaryColor = isHDActivating ? _colors.B75 : isHDActive ? _colors.B200 : _colors.DN400; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
-      var hdPrimaryColor = isHDActivating ? _colors.B75 : isHDActive ? _colors.B200 : _colors.DN400;
       var hdSecondaryColor = isHDActive && !isHDActivating ? _colors.N0 : _colors.DN60;
       var testId = isHDActivating ? 'hd-activating' : isHDActive ? 'hd-active' : 'hd-inactive';
       return /*#__PURE__*/_react.default.createElement(_styleWrappers.HDIconGroupWrapper, {

package/dist/cjs/viewers/useThemeObserverHoc.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var withThemeObserverHOC = function withThemeObserverHOC(Component) {
+  return function (props) {
+    var theme = (0, _tokens.useThemeObserver)();
+    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+      theme: theme
+    }, props));
+  };
+};
+
+var _default = withThemeObserverHOC;
+exports.default = _default;

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.1.2";
+const packageVersion = "47.2.1";
 export { packageName, packageVersion, componentName, componentName as component };
 export const relevantFlags = {
   newCardExperience: false,

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.1.2";
+const packageVersion = "47.2.1";
 let ufoExperience;
 
 const getExperience = () => {

package/dist/es2019/components/media-viewer-loader.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { ModalSpinner } from '@atlaskit/media-ui';
-import * as colors from '@atlaskit/theme/colors';
-export default class AsyncMediaViewer extends React.PureComponent {
+import { headerAndSidebarBackgroundColor } from '../styles';
+import withThemeObserverHOC from '../viewers/useThemeObserverHoc';
+export class AsyncMediaViewer extends React.PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -36,6 +37,9 @@ export default class AsyncMediaViewer extends React.PureComponent {
   }
 
   render() {
+    const {
+      theme
+    } = this.props;
     const {
       MediaViewer,
       MediaViewerErrorBoundary
@@ -43,8 +47,8 @@ export default class AsyncMediaViewer extends React.PureComponent {
 
     if (!MediaViewer || !MediaViewerErrorBoundary) {
       return /*#__PURE__*/React.createElement(ModalSpinner, {
-        blankedColor: colors.DN30,
-        invertSpinnerColor: true
+        blankedColor: headerAndSidebarBackgroundColor,
+        invertSpinnerColor: theme !== 'dark'
       });
     }
 
@@ -53,4 +57,6 @@ export default class AsyncMediaViewer extends React.PureComponent {
 
 }
 
-_defineProperty(AsyncMediaViewer, "displayName", 'AsyncMediaViewer');
+_defineProperty(AsyncMediaViewer, "displayName", 'AsyncMediaViewer');
+
+export default withThemeObserverHOC(AsyncMediaViewer);

package/dist/es2019/header.js

@@ -133,7 +133,8 @@ export class Header extends React.Component {
     this.setState(initialState, () => {
       const {
         mediaClient,
-        identifier
+        identifier,
+        onSetArchiveSideBarVisible
       } = props;
 
       if (isExternalImageIdentifier(identifier)) {
@@ -163,6 +164,10 @@ export class Header extends React.Component {
         collectionName: identifier.collectionName
       }).subscribe({
         next: file => {
+          if (!isErrorFileState(file) && file.mediaType === 'archive' && onSetArchiveSideBarVisible) {
+            onSetArchiveSideBarVisible(true);
+          }
+
           this.setState({
             item: Outcome.successful(file)
           });

package/dist/es2019/list.js

@@ -11,7 +11,8 @@ export class List extends React.Component {
 
     _defineProperty(this, "state", {
       selectedItem: this.props.defaultSelectedItem,
-      previewCount: 0
+      previewCount: 0,
+      isArchiveSideBarVisible: false
     });
 
     _defineProperty(this, "onNavigationChange", selectedItem => {
@@ -54,10 +55,12 @@ export class List extends React.Component {
       featureFlags
     } = this.props;
     const {
-      selectedItem
+      selectedItem,
+      isArchiveSideBarVisible
     } = this.state;
     return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(HeaderWrapper, {
-      className: hideControlsClassName
+      className: hideControlsClassName,
+      isArchiveSideBarVisible: isArchiveSideBarVisible
     }, /*#__PURE__*/React.createElement(Header, {
       mediaClient: mediaClient,
       identifier: selectedItem,
@@ -65,7 +68,10 @@ export class List extends React.Component {
       extensions: extensions,
       onSidebarButtonClick: onSidebarButtonClick,
       isSidebarVisible: isSidebarVisible,
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      onSetArchiveSideBarVisible: isVisible => this.setState({
+        isArchiveSideBarVisible: isVisible
+      })
     })), /*#__PURE__*/React.createElement(ItemViewer, {
       mediaClient: mediaClient,
       identifier: selectedItem,
@@ -77,7 +83,8 @@ export class List extends React.Component {
     }), /*#__PURE__*/React.createElement(Navigation, {
       items: items,
       selectedItem: selectedItem,
-      onChange: this.onNavigationChange
+      onChange: this.onNavigationChange,
+      isArchiveSideBarVisible: isArchiveSideBarVisible
     }));
   }
 

package/dist/es2019/navigation.js

@@ -1,8 +1,8 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 import { Component } from 'react';
 import ArrowLeftCircleIcon from '@atlaskit/icon/glyph/chevron-left-circle';
 import ArrowRightCircleIcon from '@atlaskit/icon/glyph/chevron-right-circle';
-import { N800 } from '@atlaskit/theme/colors';
 import { hideControlsClassName } from '@atlaskit/media-ui';
 import Button from '@atlaskit/button/standard-button';
 import { Shortcut } from '@atlaskit/media-ui';
@@ -42,7 +42,8 @@ export class NavigationBase extends Component {
 
   render() {
     const {
-      items
+      items,
+      isArchiveSideBarVisible
     } = this.props;
     const {
       selectedIndex
@@ -59,7 +60,9 @@ export class NavigationBase extends Component {
 
     const next = source => this.navigate('next', source);
 
-    return /*#__PURE__*/React.createElement(ArrowsWrapper, null, /*#__PURE__*/React.createElement(LeftWrapper, null, isLeftVisible ? /*#__PURE__*/React.createElement(Arrow, {
+    return /*#__PURE__*/React.createElement(ArrowsWrapper, null, /*#__PURE__*/React.createElement(LeftWrapper, {
+      isArchiveSideBarVisible: !!isArchiveSideBarVisible
+    }, isLeftVisible ? /*#__PURE__*/React.createElement(Arrow, {
       className: hideControlsClassName
     }, /*#__PURE__*/React.createElement(Shortcut, {
       keyCode: 37,
@@ -67,8 +70,11 @@ export class NavigationBase extends Component {
     }), /*#__PURE__*/React.createElement(Button, {
       testId: prevNavButtonId,
       onClick: prev('mouse'),
-      iconBefore: /*#__PURE__*/React.createElement(ArrowLeftCircleIcon, {
-        primaryColor: N800,
+      iconBefore: /*#__PURE__*/React.createElement(ArrowLeftCircleIcon // DN800
+      , {
+        primaryColor: "#9FADBC" // DN0
+        ,
+        secondaryColor: "#161A1D",
         size: "xlarge",
         label: "Previous"
       })
@@ -80,8 +86,11 @@ export class NavigationBase extends Component {
     }), /*#__PURE__*/React.createElement(Button, {
       testId: nextNavButtonId,
       onClick: next('mouse'),
-      iconBefore: /*#__PURE__*/React.createElement(ArrowRightCircleIcon, {
-        primaryColor: N800,
+      iconBefore: /*#__PURE__*/React.createElement(ArrowRightCircleIcon // DN800
+      , {
+        primaryColor: "#9FADBC" // DN0
+        ,
+        secondaryColor: "#161A1D",
         size: "xlarge",
         label: "Next"
       })

package/dist/es2019/styleWrappers.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { forwardRef, useMemo } from 'react';
-import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
+import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, defaultCoverWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
 export const Blanket = ({
   'data-testid': datatestId,
   className,
@@ -13,11 +13,16 @@ export const Blanket = ({
 }, children);
 export const HeaderWrapper = ({
   className,
-  children
-}) => jsx("div", {
-  css: headerWrapperStyles,
-  className: className
-}, children);
+  children,
+  isArchiveSideBarVisible
+}) => {
+  return jsx("div", {
+    css: headerWrapperStyles({
+      isArchiveSideBarVisible
+    }),
+    className: className
+  }, children);
+};
 HeaderWrapper.displayName = 'HeaderWrapper';
 export const ListWrapper = ({
   children
@@ -116,9 +121,12 @@ export const Arrow = ({
   className: className
 }, children);
 export const LeftWrapper = ({
-  children
+  children,
+  isArchiveSideBarVisible
 }) => jsx("div", {
-  css: leftWrapperStyles
+  css: leftWrapperStyles({
+    isArchiveSideBarVisible
+  })
 }, children);
 export const RightWrapper = ({
   children
@@ -265,7 +273,7 @@ export const AudioCover = ({
 export const DefaultCoverWrapper = ({
   children
 }) => jsx("div", {
-  css: downloadButtonWrapperStyles
+  css: defaultCoverWrapperStyles
 }, children);
 export const DownloadButtonWrapper = ({
   children

package/dist/es2019/styles.js

@@ -1,11 +1,13 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { layers, borderRadius } from '@atlaskit/theme/constants';
-import { DN30, DN50, DN400, N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { ellipsis, hideControlsClassName } from '@atlaskit/media-ui';
 import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
 const overlayZindex = layers.modal() + 10;
 const sidebarWidth = 416;
-export const blanketColor = DN30;
+export const blanketColor = '#22272B';
+export const headerAndSidebarBackgroundColor = '#101214';
 export const blanketStyles = css`
   position: fixed;
   top: 0;
@@ -16,15 +18,23 @@ export const blanketStyles = css`
   z-index: ${overlayZindex};
   display: flex;
 `;
-export const headerWrapperStyles = css`
+export const headerWrapperStyles = ({
+  isArchiveSideBarVisible
+}) => css`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 98px;
   opacity: 0.85;
-  background-image: linear-gradient(to bottom, #0e1624, rgba(14, 22, 36, 0));
-  color: #b8c7e0;
+  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;
@@ -64,7 +74,11 @@ export const zoomWrapperStyles = css`
   position: absolute;
   bottom: 0;
   height: 98px;
-  background-image: linear-gradient(to top, #0e1624, rgba(14, 22, 36, 0));
+  background-image: linear-gradient(
+    to top,
+    ${headerAndSidebarBackgroundColor},
+    rgba(14, 22, 36, 0)
+  );
   opacity: 0.85;
   pointer-events: none;
 `;
@@ -84,7 +98,7 @@ export const zoomLevelIndicatorStyles = css`
   position: absolute;
   right: 24px;
   bottom: 22px;
-  color: #b8c7e0;
+  color: #c7d1db;
   pointer-events: all;
 `;
 export const hdIconGroupWrapperStyles = css`
@@ -99,7 +113,7 @@ export const hdIconWrapperStyles = css`
 `;
 export const errorMessageWrapperStyles = css`
   text-align: center;
-  color: #b8c7e0;
+  color: #c7d1db;
   p {
     line-height: 100%;
   }
@@ -126,17 +140,26 @@ export const pdfWrapperStyles = css`
 `;
 export const arrowStyles = css`
   cursor: pointer;
+
+  svg {
+    filter: drop-shadow(0px 1px 1px rgb(9 30 66 / 25%))
+      drop-shadow(0px 0px 1px rgb(9 30 66 / 31%));
+  }
+
   && button {
     height: inherit;
     background: none;
-  }
-  > span {
-    color: rgba(27, 38, 56, 0.5);
-    fill: #9fb0cc;
-    filter: drop-shadow(1px 1px 1px rgba(27, 38, 56, 0.2));
 
     &:hover {
-      color: #fff;
+      svg {
+        color: #b6c2cf;
+      }
+    }
+
+    &:active {
+      svg {
+        color: #c7d1db;
+      }
     }
   }
 `;
@@ -146,10 +169,12 @@ const arrowWrapperStyles = css`
   transform: translateY(-50%);
   padding: 20px;
 `;
-export const leftWrapperStyles = css`
+export const leftWrapperStyles = ({
+  isArchiveSideBarVisible
+}) => css`
   ${arrowWrapperStyles}
   text-align: left;
-  left: 0;
+  left: ${isArchiveSideBarVisible ? `${ArchiveSideBarWidth}px` : '0'};
 `;
 export const rightWrapperStyles = css`
   ${arrowWrapperStyles}
@@ -214,7 +239,7 @@ export const metadataFileNameStyles = css`
   ${ellipsis()};
 `;
 export const metadataSubTextStyles = css`
-  color: ${DN400};
+  color: #c7d1db;
   ${ellipsis()};
 `;
 export const metadataIconWrapperStyles = css`
@@ -275,7 +300,10 @@ export const downloadButtonWrapperStyles = css`
   text-align: center;
 
   button {
-    font-weight: bold;
+    &:hover,
+    &:active {
+      color: #161a1d !important;
+    }
   }
 `;
 export const customVideoPlayerWrapperStyles = css`
@@ -292,8 +320,8 @@ export const sidebarWrapperStyles = css`
   width: ${sidebarWidth}px;
   height: 100vh;
   overflow: hidden auto;
-  background-color: ${DN50};
-  color: ${N0};
+  background-color: ${token('elevation.surface', headerAndSidebarBackgroundColor)};
+  color: ${token('color.text', '#c7d1db')};
 `;
 export const spinnerWrapperStyles = css`
   display: flex;
@@ -301,9 +329,4 @@ export const spinnerWrapperStyles = css`
   align-items: center;
   height: 100%;
 `;
-export const errorReasonTipStyles = css`
-  font-size: 10pt;
-  margin: 10px 0 40px 0;
-  color: ${DN400};
-`;
 export const formattedMessageWrapperStyles = css``;

package/dist/es2019/version.json

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

package/dist/es2019/viewers/archiveSidebar/archive-sidebar-folder-entry.js

@@ -65,22 +65,45 @@ export class ArchiveSidebarFolderEntry extends React.Component {
     });
   }
 
-  isDirectChild(root, entry) {
-    return entry.name.startsWith(root) && entry.name.replace(root, '').match(/^[^/]+\/?$/g);
-  }
-
   formatName(root, name) {
     return name.replace(root, '');
   }
 
+  renderSidebarContent(root, entries) {
+    const navItems = new Map();
+
+    for (const value of Object.values(entries)) {
+      const {
+        name
+      } = value;
+
+      if (!name.startsWith(root) || isMacPrivateFile(name)) {
+        continue;
+      }
+
+      const paths = name.replace(root, '').split('/').filter(Boolean);
+
+      if (paths.length > 1) {
+        if (!navItems.has(paths[0])) {
+          navItems.set(paths[0], {
+            name: `${root}${paths[0]}/`,
+            isDirectory: true
+          });
+        }
+      } else if (paths.length === 1) {
+        navItems.set(paths[0], value);
+      }
+    }
+
+    return Array.from(navItems.values()).map(this.renderEntry);
+  }
+
   render() {
     const {
       root,
       entries
     } = this.props;
-    const entriesContent = Object.values(entries).filter(entry => this.isDirectChild(root, entry)).filter(entry => !isMacPrivateFile(entry.name)).map(this.renderEntry);
-    const archiveSidebarFolder = /*#__PURE__*/React.createElement(ArchiveSidebarFolderWrapper, null, entriesContent);
-    return archiveSidebarFolder;
+    return /*#__PURE__*/React.createElement(ArchiveSidebarFolderWrapper, null, this.renderSidebarContent(root, entries));
   }
 
 }

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

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 import { unzip, HTTPRangeReader } from 'unzipit';
 import { FormattedMessage } from 'react-intl-next';
@@ -221,7 +223,8 @@ export class ArchiveViewerBase extends BaseViewer {
           }, /*#__PURE__*/React.createElement(DefaultCoverWrapper, null, /*#__PURE__*/React.createElement(AudioIcon, {
             label: "cover",
             size: "xlarge",
-            primaryColor: blanketColor
+            primaryColor: blanketColor,
+            secondaryColor: "#9FADBC"
           })), /*#__PURE__*/React.createElement(CustomAudioPlayerWrapper, null, /*#__PURE__*/React.createElement(CustomMediaPlayer, {
             type: "audio",
             isAutoPlay: false,

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

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { DN30 } from '@atlaskit/theme/colors';
 import ModalSpinner from '@atlaskit/media-ui/modalSpinner';
 import ErrorMessage from '../../errorMessage';
 import { MediaViewerError } from '../../errors';
+import { headerAndSidebarBackgroundColor } from '../../styles';
 export default class ArchiveViewerLoader extends React.PureComponent {
   constructor(...args) {
     super(...args);
@@ -53,8 +53,8 @@ export default class ArchiveViewerLoader extends React.PureComponent {
       return /*#__PURE__*/React.createElement(ArchiveViewer, this.props);
     } else {
       return /*#__PURE__*/React.createElement(ModalSpinner, {
-        blankedColor: DN30,
-        invertSpinnerColor: true
+        blankedColor: headerAndSidebarBackgroundColor,
+        invertSpinnerColor: false
       });
     }
   }

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

@@ -1,6 +1,7 @@
 import { css, keyframes } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-import { DN10, DN500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { DN500 } from '@atlaskit/theme/colors';
 export const ArchiveSideBarWidth = 300;
 export const archiveItemViewerWrapperStyles = css`
   width: 100%;
@@ -9,8 +10,7 @@ export const archiveItemViewerWrapperStyles = css`
 `;
 export const archiveSideBarStyles = css`
   padding: 22px 20px 20px 20px;
-  /** TODO [BMPT-370] Use new bg color after ThemeProvider is removed */
-  background-color: rgba(14, 22, 36);
+  background-color: ${token('elevation.surface', '#101214')};
   position: absolute;
   left: 0;
   top: 0;
@@ -41,11 +41,16 @@ export const archiveDownloadButtonWrapperStyles = css`
   border: none;
   border-radius: 3px;
   background-color: transparent;
+  color: ${token('color.icon', '#9FADBC')};
 
   &:hover {
     cursor: pointer;
-    background-color: #253a5f;
-    /** TODO [BMPT-370] Use new color after ThemeProvider is removed */
+    background-color: ${token('color.background.neutral.subtle.hovered', '#A1BDD914')};
+  }
+
+  &:active {
+    cursor: pointer;
+    background-color: ${token('color.background.neutral.subtle.pressed', '#A6C5E229')};
   }
 `;
 export const sidebarItemWrapperStyles = css`
@@ -76,7 +81,7 @@ export const separatorStyles = css`
   border-radius: 1px;
   height: 2px;
   margin: ${(gridSize() * 5 - 2) / 2}px 0;
-  background-color: rgb(36, 50, 76);
+  background-color: ${token('color.border', '#A6C5E229')};
   flex-shrink: 0;
 `;
 export const sidebarHeaderWrapperStyles = css`
@@ -96,16 +101,18 @@ export const sidebarHeaderEntryStyles = css`
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.14286;
-  color: ${DN500};
+  color: ${token('color.text', DN500)};
 `;
-/** TODO Replace background colors of item with theme from @atlaskit/tokens once ready*/
-
 export const itemStyle = {
-  backgroundColor: `${DN10}`,
-  fill: `${DN10}`,
-  color: `${DN500}`,
+  backgroundColor: `${token('color.background.neutral.subtle', '#101214')}`,
+  fill: `${token('color.icon.success', '#101214')}`,
+  color: `${token('color.text', DN500)}`,
   ':hover': {
-    backgroundColor: '#253a5f',
-    color: `${DN500}`
+    backgroundColor: `${token('color.background.neutral.subtle.hovered', '#A1BDD914')}`,
+    color: `${token('color.text', DN500)}`
+  },
+  ':active': {
+    backgroundColor: `${token('color.background.neutral.subtle.pressed', '#A6C5E229')}`,
+    color: `${token('color.text', DN500)}`
   }
 };