@atlaskit/media-viewer 47.1.2 → 47.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-viewer
 
+## 47.2.0
+
+### Minor Changes
+
+- [`0213586e12e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0213586e12e) - [ux] Instrumented '@atlaskit/media-viewer' with the new theming package, `@atlaskit/tokens`, and updated the lightbox experience to use new colors from the new color palette.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`75a4a904bcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/75a4a904bcb) - fix archive sidebar content if some directory entries are missing
+- Updated dependencies
+
 ## 47.1.2
 
 ### Patch 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.1.2";
+var packageVersion = "47.2.0";
 exports.packageVersion = packageVersion;
 var relevantFlags = {
   newCardExperience: false,

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.1.2";
+var packageVersion = "47.2.0";
 var ufoExperience;
 
 var getExperience = function getExperience() {

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.AsyncMediaViewer = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -33,7 +33,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _styles = require("../styles");
+
+var _useThemeObserverHoc = _interopRequireDefault(require("../viewers/useThemeObserverHoc"));
 
 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); }
 
@@ -128,14 +130,15 @@ var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
+      var theme = this.props.theme;
       var _this$state = this.state,
           MediaViewer = _this$state.MediaViewer,
           MediaViewerErrorBoundary = _this$state.MediaViewerErrorBoundary;
 
       if (!MediaViewer || !MediaViewerErrorBoundary) {
         return /*#__PURE__*/_react.default.createElement(_mediaUi.ModalSpinner, {
-          blankedColor: colors.DN30,
-          invertSpinnerColor: true
+          blankedColor: _styles.headerAndSidebarBackgroundColor,
+          invertSpinnerColor: theme !== 'dark'
         });
       }
 
@@ -145,5 +148,9 @@ var AsyncMediaViewer = /*#__PURE__*/function (_React$PureComponent) {
   return AsyncMediaViewer;
 }(_react.default.PureComponent);
 
-exports.default = AsyncMediaViewer;
-(0, _defineProperty2.default)(AsyncMediaViewer, "displayName", 'AsyncMediaViewer');
+exports.AsyncMediaViewer = AsyncMediaViewer;
+(0, _defineProperty2.default)(AsyncMediaViewer, "displayName", 'AsyncMediaViewer');
+
+var _default = (0, _useThemeObserverHoc.default)(AsyncMediaViewer);
+
+exports.default = _default;

package/dist/cjs/header.js

@@ -184,7 +184,8 @@ var Header = /*#__PURE__*/function (_React$Component) {
 
       this.setState(initialState, function () {
         var mediaClient = props.mediaClient,
-            identifier = props.identifier;
+            identifier = props.identifier,
+            onSetArchiveSideBarVisible = props.onSetArchiveSideBarVisible;
 
         if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
           var _identifier$name = identifier.name,
@@ -212,6 +213,10 @@ var Header = /*#__PURE__*/function (_React$Component) {
           collectionName: identifier.collectionName
         }).subscribe({
           next: function next(file) {
+            if (!(0, _mediaClient.isErrorFileState)(file) && file.mediaType === 'archive' && onSetArchiveSideBarVisible) {
+              onSetArchiveSideBarVisible(true);
+            }
+
             _this2.setState({
               item: _domain.Outcome.successful(file)
             });

package/dist/cjs/list.js

@@ -54,7 +54,8 @@ var List = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       selectedItem: _this.props.defaultSelectedItem,
-      previewCount: 0
+      previewCount: 0,
+      isArchiveSideBarVisible: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onNavigationChange", function (selectedItem) {
       var _this$props = _this.props,
@@ -86,6 +87,8 @@ var List = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderContent",
     value: function renderContent(items) {
+      var _this2 = this;
+
       var _this$props2 = this.props,
           mediaClient = _this$props2.mediaClient,
           onClose = _this$props2.onClose,
@@ -95,9 +98,12 @@ var List = /*#__PURE__*/function (_React$Component) {
           isSidebarVisible = _this$props2.isSidebarVisible,
           contextId = _this$props2.contextId,
           featureFlags = _this$props2.featureFlags;
-      var selectedItem = this.state.selectedItem;
+      var _this$state = this.state,
+          selectedItem = _this$state.selectedItem,
+          isArchiveSideBarVisible = _this$state.isArchiveSideBarVisible;
       return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.HeaderWrapper, {
-        className: _mediaUi.hideControlsClassName
+        className: _mediaUi.hideControlsClassName,
+        isArchiveSideBarVisible: isArchiveSideBarVisible
       }, /*#__PURE__*/_react.default.createElement(_header.default, {
         mediaClient: mediaClient,
         identifier: selectedItem,
@@ -105,7 +111,12 @@ var List = /*#__PURE__*/function (_React$Component) {
         extensions: extensions,
         onSidebarButtonClick: onSidebarButtonClick,
         isSidebarVisible: isSidebarVisible,
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        onSetArchiveSideBarVisible: function onSetArchiveSideBarVisible(isVisible) {
+          return _this2.setState({
+            isArchiveSideBarVisible: isVisible
+          });
+        }
       })), /*#__PURE__*/_react.default.createElement(_itemViewer.ItemViewer, {
         mediaClient: mediaClient,
         identifier: selectedItem,
@@ -117,7 +128,8 @@ var List = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement(_navigation.Navigation, {
         items: items,
         selectedItem: selectedItem,
-        onChange: this.onNavigationChange
+        onChange: this.onNavigationChange,
+        isArchiveSideBarVisible: isArchiveSideBarVisible
       }));
     }
   }]);

package/dist/cjs/navigation.js

@@ -25,8 +25,6 @@ var _chevronLeftCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/ch
 
 var _chevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-circle"));
 
-var _colors = require("@atlaskit/theme/colors");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
@@ -95,7 +93,9 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var items = this.props.items;
+      var _this$props3 = this.props,
+          items = _this$props3.items,
+          isArchiveSideBarVisible = _this$props3.isArchiveSideBarVisible;
       var selectedIndex = this.selectedIndex;
 
       if (selectedIndex === -1) {
@@ -113,7 +113,9 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
         return _this2.navigate('next', source);
       };
 
-      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArrowsWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.LeftWrapper, null, isLeftVisible ? /*#__PURE__*/_react.default.createElement(_styleWrappers.Arrow, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArrowsWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.LeftWrapper, {
+        isArchiveSideBarVisible: !!isArchiveSideBarVisible
+      }, isLeftVisible ? /*#__PURE__*/_react.default.createElement(_styleWrappers.Arrow, {
         className: _mediaUi.hideControlsClassName
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
         keyCode: 37,
@@ -121,8 +123,11 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         testId: prevNavButtonId,
         onClick: prev('mouse'),
-        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronLeftCircle.default, {
-          primaryColor: _colors.N800,
+        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronLeftCircle.default // DN800
+        , {
+          primaryColor: "#9FADBC" // DN0
+          ,
+          secondaryColor: "#161A1D",
           size: "xlarge",
           label: "Previous"
         })
@@ -134,8 +139,11 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         testId: nextNavButtonId,
         onClick: next('mouse'),
-        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronRightCircle.default, {
-          primaryColor: _colors.N800,
+        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronRightCircle.default // DN800
+        , {
+          primaryColor: "#9FADBC" // DN0
+          ,
+          secondaryColor: "#161A1D",
           size: "xlarge",
           label: "Next"
         })

package/dist/cjs/styleWrappers.js

@@ -27,9 +27,12 @@ exports.Blanket = Blanket;
 
 var HeaderWrapper = function HeaderWrapper(_ref2) {
   var className = _ref2.className,
-      children = _ref2.children;
+      children = _ref2.children,
+      isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
   return (0, _react.jsx)("div", {
-    css: _styles.headerWrapperStyles,
+    css: (0, _styles.headerWrapperStyles)({
+      isArchiveSideBarVisible: isArchiveSideBarVisible
+    }),
     className: className
   }, children);
 };
@@ -189,9 +192,12 @@ var Arrow = function Arrow(_ref16) {
 exports.Arrow = Arrow;
 
 var LeftWrapper = function LeftWrapper(_ref17) {
-  var children = _ref17.children;
+  var children = _ref17.children,
+      isArchiveSideBarVisible = _ref17.isArchiveSideBarVisible;
   return (0, _react.jsx)("div", {
-    css: _styles.leftWrapperStyles
+    css: (0, _styles.leftWrapperStyles)({
+      isArchiveSideBarVisible: isArchiveSideBarVisible
+    })
   }, children);
 };
 
@@ -402,7 +408,7 @@ exports.AudioCover = AudioCover;
 var DefaultCoverWrapper = function DefaultCoverWrapper(_ref33) {
   var children = _ref33.children;
   return (0, _react.jsx)("div", {
-    css: _styles.downloadButtonWrapperStyles
+    css: _styles.defaultCoverWrapperStyles
   }, children);
 };
 

package/dist/cjs/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.zoomWrapperStyles = exports.zoomLevelIndicatorStyles = exports.zoomControlsWrapperStyles = exports.videoStyles = exports.spinnerWrapperStyles = exports.sidebarWrapperStyles = exports.rightWrapperStyles = exports.rightHeaderStyles = exports.pdfWrapperStyles = exports.metadataWrapperStyles = exports.metadataSubTextStyles = exports.metadataIconWrapperStyles = exports.metadataFileNameStyles = exports.medatadataTextWrapperStyles = exports.listWrapperStyles = exports.leftWrapperStyles = exports.leftHeaderStyles = exports.imgStyles = exports.imageWrapperStyles = exports.headerWrapperStyles = exports.headerStyles = exports.hdIconWrapperStyles = exports.hdIconGroupWrapperStyles = exports.formattedMessageWrapperStyles = exports.errorReasonTipStyles = exports.errorMessageWrapperStyles = exports.errorImageStyles = exports.downloadButtonWrapperStyles = exports.defaultCoverWrapperStyles = exports.customVideoPlayerWrapperStyles = exports.customAudioPlayerWrapperStyles = exports.contentWrapperStyles = exports.closeButtonWrapperStyles = exports.blanketStyles = exports.blanketColor = exports.baselineExtendStyles = exports.audioStyles = exports.audioPlayerStyles = exports.audioCoverStyles = exports.arrowsWrapperStyles = exports.arrowStyles = void 0;
+exports.zoomWrapperStyles = exports.zoomLevelIndicatorStyles = exports.zoomControlsWrapperStyles = exports.videoStyles = exports.spinnerWrapperStyles = exports.sidebarWrapperStyles = exports.rightWrapperStyles = exports.rightHeaderStyles = exports.pdfWrapperStyles = exports.metadataWrapperStyles = exports.metadataSubTextStyles = exports.metadataIconWrapperStyles = exports.metadataFileNameStyles = exports.medatadataTextWrapperStyles = exports.listWrapperStyles = exports.leftWrapperStyles = exports.leftHeaderStyles = exports.imgStyles = exports.imageWrapperStyles = exports.headerWrapperStyles = exports.headerStyles = exports.headerAndSidebarBackgroundColor = exports.hdIconWrapperStyles = exports.hdIconGroupWrapperStyles = exports.formattedMessageWrapperStyles = exports.errorMessageWrapperStyles = exports.errorImageStyles = exports.downloadButtonWrapperStyles = exports.defaultCoverWrapperStyles = exports.customVideoPlayerWrapperStyles = exports.customAudioPlayerWrapperStyles = exports.contentWrapperStyles = exports.closeButtonWrapperStyles = exports.blanketStyles = exports.blanketColor = exports.baselineExtendStyles = exports.audioStyles = exports.audioPlayerStyles = exports.audioCoverStyles = exports.arrowsWrapperStyles = exports.arrowStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -13,21 +13,28 @@ var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _colors = require("@atlaskit/theme/colors");
+var _tokens = require("@atlaskit/tokens");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _styles = require("./viewers/archiveSidebar/styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40;
 
 var overlayZindex = _constants.layers.modal() + 10;
 var sidebarWidth = 416;
-var blanketColor = _colors.DN30;
+var blanketColor = '#22272B';
 exports.blanketColor = blanketColor;
+var headerAndSidebarBackgroundColor = '#101214';
+exports.headerAndSidebarBackgroundColor = headerAndSidebarBackgroundColor;
 var blanketStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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);
 exports.blanketStyles = blanketStyles;
-var headerWrapperStyles = (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-image: linear-gradient(to bottom, #0e1624, rgba(14, 22, 36, 0));\n  color: #b8c7e0;\n  font-weight: 500;\n  padding-top: 15px;\n  padding: 24px;\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: ", ";\n"])), overlayZindex + 1);
+
+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"])), headerAndSidebarBackgroundColor, isArchiveSideBarVisible ? "".concat(_styles.ArchiveSideBarWidth, "px 0") : '0', 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;
@@ -36,23 +43,23 @@ 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);
 exports.closeButtonWrapperStyles = closeButtonWrapperStyles;
 
-var contentWrapperStyles = function contentWrapperStyles(_ref) {
-  var isSidebarVisible = _ref.isSidebarVisible;
+var contentWrapperStyles = function contentWrapperStyles(_ref2) {
+  var isSidebarVisible = _ref2.isSidebarVisible;
   return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n"])), isSidebarVisible ? "calc(100% - ".concat(sidebarWidth, "px)") : '100%');
 };
 
 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(to top, #0e1624, rgba(14, 22, 36, 0));\n  opacity: 0.85;\n  pointer-events: none;\n"])));
+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"])), headerAndSidebarBackgroundColor);
 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"])));
 exports.zoomControlsWrapperStyles = zoomControlsWrapperStyles;
-var zoomLevelIndicatorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 24px;\n  bottom: 22px;\n  color: #b8c7e0;\n  pointer-events: all;\n"])));
+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"])));
 exports.zoomLevelIndicatorStyles = zoomLevelIndicatorStyles;
 var hdIconGroupWrapperStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 69px;\n  bottom: 16px;\n"])));
 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"])));
 exports.hdIconWrapperStyles = hdIconWrapperStyles;
-var errorMessageWrapperStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  color: #b8c7e0;\n  p {\n    line-height: 100%;\n  }\n"])));
+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"])));
 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;
@@ -60,17 +67,22 @@ var videoStyles = (0, _react.css)(_templateObject14 || (_templateObject14 = (0,
 exports.videoStyles = videoStyles;
 var pdfWrapperStyles = (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\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"])), _mediaUi.hideControlsClassName);
 exports.pdfWrapperStyles = pdfWrapperStyles;
-var arrowStyles = (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  && button {\n    height: inherit;\n    background: none;\n  }\n  > span {\n    color: rgba(27, 38, 56, 0.5);\n    fill: #9fb0cc;\n    filter: drop-shadow(1px 1px 1px rgba(27, 38, 56, 0.2));\n\n    &:hover {\n      color: #fff;\n    }\n  }\n"])));
+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 leftWrapperStyles = (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-align: left;\n  left: 0;\n"])), arrowWrapperStyles);
+
+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');
+};
+
 exports.leftWrapperStyles = leftWrapperStyles;
 var rightWrapperStyles = (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-align: right;\n  right: 0;\n"])), arrowWrapperStyles); // header.tsx
 
 exports.rightWrapperStyles = rightWrapperStyles;
 
-var headerStyles = function headerStyles(_ref2) {
-  var isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
+var headerStyles = function headerStyles(_ref4) {
+  var isArchiveSideBarVisible = _ref4.isArchiveSideBarVisible;
   return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding-left: ", ";\n"])), isArchiveSideBarVisible ? "".concat(_styles.ArchiveSideBarWidth, "px") : '0');
 };
 
@@ -82,9 +94,9 @@ exports.imageWrapperStyles = imageWrapperStyles;
 var baselineExtendStyles = (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  display: inline-block;\n  vertical-align: middle;\n"])));
 exports.baselineExtendStyles = baselineExtendStyles;
 
-var imgStyles = function imgStyles(_ref3) {
-  var cursor = _ref3.cursor,
-      shouldPixelate = _ref3.shouldPixelate;
+var imgStyles = function imgStyles(_ref5) {
+  var cursor = _ref5.cursor,
+      shouldPixelate = _ref5.shouldPixelate;
   return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  cursor: ", ";\n  ", "\n"])), cursor, shouldPixelate ? "/* Prevent images from being smoothed when scaled up */\n    image-rendering: optimizeSpeed; /* Legal fallback */\n    image-rendering: -moz-crisp-edges; /* Firefox        */\n    image-rendering: -o-crisp-edges; /* Opera          */\n    image-rendering: -webkit-optimize-contrast; /* Safari         */\n    image-rendering: optimize-contrast; /* CSS3 Proposed  */\n    image-rendering: crisp-edges; /* CSS4 Proposed  */\n    image-rendering: pixelated; /* CSS4 Proposed  */\n    -ms-interpolation-mode: nearest-neighbor; /* IE8+           */" : "");
 };
 
@@ -95,7 +107,7 @@ var metadataWrapperStyles = (0, _react.css)(_templateObject26 || (_templateObjec
 exports.metadataWrapperStyles = metadataWrapperStyles;
 var metadataFileNameStyles = (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n  &::first-letter {\n    text-transform: uppercase;\n  }\n  ", ";\n"])), (0, _mediaUi.ellipsis)());
 exports.metadataFileNameStyles = metadataFileNameStyles;
-var metadataSubTextStyles = (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _colors.DN400, (0, _mediaUi.ellipsis)());
+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"])));
 exports.metadataIconWrapperStyles = metadataIconWrapperStyles;
@@ -111,15 +123,13 @@ var audioCoverStyles = (0, _react.css)(_templateObject34 || (_templateObject34 =
 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"])));
 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    font-weight: bold;\n  }\n"])));
+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;
 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, _colors.DN50, _colors.N0);
+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'));
 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;
-var errorReasonTipStyles = (0, _react.css)(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 10pt;\n  margin: 10px 0 40px 0;\n  color: ", ";\n"])), _colors.DN400);
-exports.errorReasonTipStyles = errorReasonTipStyles;
-var formattedMessageWrapperStyles = (0, _react.css)(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteral2.default)([""])));
+var formattedMessageWrapperStyles = (0, _react.css)(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.formattedMessageWrapperStyles = formattedMessageWrapperStyles;

package/dist/cjs/version.json

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

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

@@ -148,32 +148,46 @@ var ArchiveSidebarFolderEntry = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2.default)(ArchiveSidebarFolderEntry, [{
-    key: "isDirectChild",
-    value: function isDirectChild(root, entry) {
-      return entry.name.startsWith(root) && entry.name.replace(root, '').match(/^[^/]+\/?$/g);
-    }
-  }, {
     key: "formatName",
     value: function formatName(root, name) {
       return name.replace(root, '');
     }
+  }, {
+    key: "renderSidebarContent",
+    value: function renderSidebarContent(root, entries) {
+      var navItems = new Map();
+
+      for (var _i = 0, _Object$values = Object.values(entries); _i < _Object$values.length; _i++) {
+        var value = _Object$values[_i];
+        var name = value.name;
+
+        if (!name.startsWith(root) || (0, _utils.isMacPrivateFile)(name)) {
+          continue;
+        }
+
+        var paths = name.replace(root, '').split('/').filter(Boolean);
+
+        if (paths.length > 1) {
+          if (!navItems.has(paths[0])) {
+            navItems.set(paths[0], {
+              name: "".concat(root).concat(paths[0], "/"),
+              isDirectory: true
+            });
+          }
+        } else if (paths.length === 1) {
+          navItems.set(paths[0], value);
+        }
+      }
+
+      return Array.from(navItems.values()).map(this.renderEntry);
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props2 = this.props,
           root = _this$props2.root,
           entries = _this$props2.entries;
-      var entriesContent = Object.values(entries).filter(function (entry) {
-        return _this2.isDirectChild(root, entry);
-      }).filter(function (entry) {
-        return !(0, _utils.isMacPrivateFile)(entry.name);
-      }).map(this.renderEntry);
-
-      var archiveSidebarFolder = /*#__PURE__*/_react.default.createElement(_styleWrappers.ArchiveSidebarFolderWrapper, null, entriesContent);
-
-      return archiveSidebarFolder;
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArchiveSidebarFolderWrapper, null, this.renderSidebarContent(root, entries));
     }
   }]);
   return ArchiveSidebarFolderEntry;

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

@@ -386,7 +386,8 @@ var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
             }, /*#__PURE__*/_react.default.createElement(_styleWrappers.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
               label: "cover",
               size: "xlarge",
-              primaryColor: _styles.blanketColor
+              primaryColor: _styles.blanketColor,
+              secondaryColor: "#9FADBC"
             })), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
               type: "audio",
               isAutoPlay: false,

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

@@ -29,14 +29,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _colors = require("@atlaskit/theme/colors");
-
 var _modalSpinner = _interopRequireDefault(require("@atlaskit/media-ui/modalSpinner"));
 
 var _errorMessage = _interopRequireDefault(require("../../errorMessage"));
 
 var _errors = require("../../errors");
 
+var _styles = require("../../styles");
+
 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; }
@@ -137,8 +137,8 @@ var ArchiveViewerLoader = /*#__PURE__*/function (_React$PureComponent) {
         return /*#__PURE__*/_react.default.createElement(ArchiveViewer, this.props);
       } else {
         return /*#__PURE__*/_react.default.createElement(_modalSpinner.default, {
-          blankedColor: _colors.DN30,
-          invertSpinnerColor: true
+          blankedColor: _styles.headerAndSidebarBackgroundColor,
+          invertSpinnerColor: false
         });
       }
     }

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

@@ -13,6 +13,8 @@ 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;
@@ -21,12 +23,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  /** TODO [BMPT-370] Use new bg color after ThemeProvider is removed */\n  background-color: rgba(14, 22, 36);\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"])), 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"])), (0, _tokens.token)('elevation.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\n  &:hover {\n    cursor: pointer;\n    background-color: #253a5f;\n    /** TODO [BMPT-370] Use new color after ThemeProvider is removed */\n  }\n"])));
+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'));
 exports.archiveDownloadButtonWrapperStyles = archiveDownloadButtonWrapperStyles;
 var sidebarItemWrapperStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 85%;\n"])));
 exports.sidebarItemWrapperStyles = sidebarItemWrapperStyles;
@@ -36,23 +38,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: rgb(36, 50, 76);\n  flex-shrink: 0;\n"])), ((0, _constants.gridSize)() * 5 - 2) / 2);
+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'));
 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"])), _colors.DN500);
-/** TODO Replace background colors of item with theme from @atlaskit/tokens once ready*/
-
+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));
 exports.sidebarHeaderEntryStyles = sidebarHeaderEntryStyles;
 var itemStyle = {
-  backgroundColor: "".concat(_colors.DN10),
-  fill: "".concat(_colors.DN10),
-  color: "".concat(_colors.DN500),
+  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)),
   ':hover': {
-    backgroundColor: '#253a5f',
-    color: "".concat(_colors.DN500)
+    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', '#A1BDD914')),
+    color: "".concat((0, _tokens.token)('color.text', _colors.DN500))
+  },
+  ':active': {
+    backgroundColor: "".concat((0, _tokens.token)('color.background.neutral.subtle.pressed', '#A6C5E229')),
+    color: "".concat((0, _tokens.token)('color.text', _colors.DN500))
   }
 };
 exports.itemStyle = itemStyle;

package/dist/cjs/viewers/audio.js

@@ -54,7 +54,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var defaultCover = /*#__PURE__*/_react.default.createElement(_styleWrappers.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
   label: "cover",
   size: "xlarge",
-  primaryColor: _styles.blanketColor
+  primaryColor: _styles.blanketColor // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  ,
+  secondaryColor: "#9FADBC"
 }));
 
 var getCoverUrl = function getCoverUrl(item, mediaClient, collectionName) {