@atlaskit/media-viewer 46.5.0 → 47.0.2

package/dist/cjs/viewers/archiveSidebar/archive-sidebar-renderer.js

@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styled = require("../../styled");
+var _styleWrappers = require("../../styleWrappers");
 
 var _archiveSidebar = require("./archive-sidebar");
 
@@ -39,7 +39,7 @@ var _loading = require("../../loading");
 
 var _errors = require("../../errors");
 
-var _styled2 = require("./styled");
+var _styleWrappers2 = require("./styleWrappers");
 
 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); }
 
@@ -131,7 +131,7 @@ var ArchiveSidebarRenderer = /*#__PURE__*/function (_Component) {
           isArchiveEntryLoading = _this$props2.isArchiveEntryLoading,
           onSelectedArchiveEntryChange = _this$props2.onSelectedArchiveEntryChange,
           onError = _this$props2.onError;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, status === 'loading' && /*#__PURE__*/_react.default.createElement(_styled2.ArchiveSideBar, null, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, null, /*#__PURE__*/_react.default.createElement(_loading.Spinner, null))) || /*#__PURE__*/_react.default.createElement(_archiveSidebar.ArchiveSidebar, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, status === 'loading' && /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveSideBar, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.SpinnerWrapper, null, /*#__PURE__*/_react.default.createElement(_loading.Spinner, null))) || /*#__PURE__*/_react.default.createElement(_archiveSidebar.ArchiveSidebar, {
         entries: entries,
         onEntrySelected: onSelectedArchiveEntryChange,
         onHeaderClicked: onHeaderClicked,

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ArchiveSidebar = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -31,7 +31,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _unzipit = require("unzipit");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _archiveSidebarFolderEntry = require("./archive-sidebar-folder-entry");
 
@@ -246,10 +246,10 @@ var ArchiveSidebar = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var currentArchiveSidebarFolder = this.state.currentArchiveSidebarFolder;
       var onError = this.props.onError;
-      return /*#__PURE__*/_react.default.createElement(_styled.ArchiveSideBar, null, /*#__PURE__*/_react.default.createElement(_archiveSidebarHeader.ArchiveSidebarHeader, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArchiveSideBar, null, /*#__PURE__*/_react.default.createElement(_archiveSidebarHeader.ArchiveSidebarHeader, {
         folderName: currentArchiveSidebarFolder.root,
         onHeaderClick: this.onHeaderClicked
-      }), /*#__PURE__*/_react.default.createElement(_styled.Separator, null), /*#__PURE__*/_react.default.createElement(_archiveSidebarFolderEntry.ArchiveSidebarFolderEntry, (0, _extends2.default)({}, currentArchiveSidebarFolder, {
+      }), /*#__PURE__*/_react.default.createElement(_styleWrappers.Separator, null), /*#__PURE__*/_react.default.createElement(_archiveSidebarFolderEntry.ArchiveSidebarFolderEntry, (0, _extends2.default)({}, currentArchiveSidebarFolder, {
         onError: onError
       })));
     }

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getArchiveEntriesFromFileState = exports.ArchiveViewerBase = exports.ArchiveViewer = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -21,8 +23,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -35,7 +35,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _domain = require("../../domain");
 
-var _styled = require("../../styled");
+var _styleWrappers = require("../../styleWrappers");
 
 var _audio = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/audio"));
 
@@ -47,7 +47,9 @@ var _interactiveImg = require("../image/interactive-img");
 
 var _pdfRenderer = require("../doc/pdfRenderer");
 
-var _styled2 = require("./styled");
+var _styles = require("../../styles");
+
+var _styleWrappers2 = require("./styleWrappers");
 
 var _archiveSidebarRenderer = _interopRequireDefault(require("./archive-sidebar-renderer"));
 
@@ -282,7 +284,7 @@ var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
       var selectedArchiveEntry = content.selectedArchiveEntry,
           hasLoadedEntries = content.hasLoadedEntries;
       var hasSelectedArchiveEntry = selectedArchiveEntry !== undefined;
-      return /*#__PURE__*/_react.default.createElement(_styled2.ArchiveLayout, null, /*#__PURE__*/_react.default.createElement(_archiveSidebarRenderer.default, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveLayout, null, /*#__PURE__*/_react.default.createElement(_archiveSidebarRenderer.default, {
         selectedFileState: item,
         mediaClient: mediaClient,
         onSelectedArchiveEntryChange: this.onSelectedArchiveEntryChange,
@@ -291,7 +293,7 @@ var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
         collectionName: collectionName,
         onError: this.onError,
         onSuccess: this.onSidebarLoaded
-      }), /*#__PURE__*/_react.default.createElement(_styled2.ArchiveViewerWrapper, null, !hasSelectedArchiveEntry && !hasLoadedEntries ? /*#__PURE__*/_react.default.createElement(_styled2.ArchiveViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_loading.Spinner, null)) : this.renderArchiveItemViewer(content)));
+      }), /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveViewerWrapper, null, !hasSelectedArchiveEntry && !hasLoadedEntries ? /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_loading.Spinner, null)) : this.renderArchiveItemViewer(content)));
     }
   }, {
     key: "renderArchiveItemViewer",
@@ -316,14 +318,14 @@ var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
 
         switch (mediaType) {
           case 'image':
-            return /*#__PURE__*/_react.default.createElement(_styled2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_interactiveImg.InteractiveImg, {
+            return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_interactiveImg.InteractiveImg, {
               src: src,
               onLoad: this.onViewerLoad(selectedArchiveEntry),
               onError: this.onViewerError('archiveviewer-imageviewer-onerror', selectedArchiveEntry)
             }));
 
           case 'video':
-            return /*#__PURE__*/_react.default.createElement(_styled2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.CustomVideoPlayerWrapper, {
+            return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomVideoPlayerWrapper, {
               "data-testid": "media-viewer-video-content"
             }, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
               type: "video",
@@ -334,13 +336,13 @@ var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
             })));
 
           case 'audio':
-            return /*#__PURE__*/_react.default.createElement(_styled2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.AudioPlayer, {
+            return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.AudioPlayer, {
               "data-testid": "media-viewer-audio-content"
-            }, /*#__PURE__*/_react.default.createElement(_styled.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
+            }, /*#__PURE__*/_react.default.createElement(_styleWrappers.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
               label: "cover",
               size: "xlarge",
-              primaryColor: _styled.blanketColor
-            })), /*#__PURE__*/_react.default.createElement(_styled.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
+              primaryColor: _styles.blanketColor
+            })), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
               type: "audio",
               isAutoPlay: false,
               src: src,
@@ -349,7 +351,7 @@ var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
             }))));
 
           case 'doc':
-            return /*#__PURE__*/_react.default.createElement(_styled2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_pdfRenderer.PDFRenderer, {
+            return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_pdfRenderer.PDFRenderer, {
               item: item,
               src: src,
               onSuccess: this.onViewerLoad(selectedArchiveEntry),
@@ -358,7 +360,7 @@ var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
 
           case 'archive':
             //BMPT-388 - Add illustration here, currently empty viewer
-            return /*#__PURE__*/_react.default.createElement(_styled2.ArchiveItemViewerWrapper, null);
+            return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null);
 
           default:
             return this.renderPreviewError(new _errors.ArchiveViewerError('archiveviewer-unsupported'), selectedArchiveEntry);

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarItemWrapper = exports.SidebarHeaderWrapper = exports.SidebarHeaderIcon = exports.SidebarHeaderEntry = exports.Separator = exports.ArchiveViewerWrapper = exports.ArchiveSidebarFolderWrapper = exports.ArchiveSidebarFileEntryWrapper = exports.ArchiveSideBar = exports.ArchiveLayout = exports.ArchiveItemViewerWrapper = exports.ArchiveDownloadButtonWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/** @jsx jsx */
+var ArchiveItemViewerWrapper = function ArchiveItemViewerWrapper(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.archiveItemViewerWrapperStyles
+  }, children);
+};
+
+exports.ArchiveItemViewerWrapper = ArchiveItemViewerWrapper;
+
+var ArchiveSideBar = function ArchiveSideBar(_ref2) {
+  var children = _ref2.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.archiveSideBarStyles
+  }, children);
+};
+
+exports.ArchiveSideBar = ArchiveSideBar;
+
+var ArchiveSidebarFolderWrapper = function ArchiveSidebarFolderWrapper(_ref3) {
+  var children = _ref3.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.archiveSidebarFolderWrapperStyles,
+    "data-testid": "archive-sidebar-folder-wrapper"
+  }, children);
+};
+
+exports.ArchiveSidebarFolderWrapper = ArchiveSidebarFolderWrapper;
+
+var ArchiveDownloadButtonWrapper = function ArchiveDownloadButtonWrapper(_ref4) {
+  var children = _ref4.children,
+      onClick = _ref4.onClick;
+  return (0, _react.jsx)("div", {
+    css: _styles.archiveDownloadButtonWrapperStyles,
+    onClick: onClick
+  }, children);
+};
+
+exports.ArchiveDownloadButtonWrapper = ArchiveDownloadButtonWrapper;
+
+var SidebarItemWrapper = function SidebarItemWrapper(_ref5) {
+  var children = _ref5.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.sidebarItemWrapperStyles
+  }, children);
+};
+
+exports.SidebarItemWrapper = SidebarItemWrapper;
+
+var ArchiveSidebarFileEntryWrapper = function ArchiveSidebarFileEntryWrapper(_ref6) {
+  var children = _ref6.children,
+      index = _ref6.index;
+  return (0, _react.jsx)("div", {
+    css: _styles.archiveSidebarFileEntryWrapperStyles,
+    key: index
+  }, children);
+};
+
+exports.ArchiveSidebarFileEntryWrapper = ArchiveSidebarFileEntryWrapper;
+
+var ArchiveLayout = function ArchiveLayout(_ref7) {
+  var children = _ref7.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.archiveLayoutStyles
+  }, children);
+};
+
+exports.ArchiveLayout = ArchiveLayout;
+
+var ArchiveViewerWrapper = function ArchiveViewerWrapper(_ref8) {
+  var children = _ref8.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.archiveViewerWrapperStyles
+  }, children);
+};
+
+exports.ArchiveViewerWrapper = ArchiveViewerWrapper;
+
+var Separator = function Separator() {
+  return (0, _react.jsx)("div", {
+    css: _styles.separatorStyles
+  });
+};
+
+exports.Separator = Separator;
+
+var SidebarHeaderWrapper = function SidebarHeaderWrapper(_ref9) {
+  var children = _ref9.children;
+  return (0, _react.jsx)("span", {
+    css: _styles.sidebarHeaderWrapperStyles
+  }, children);
+};
+
+exports.SidebarHeaderWrapper = SidebarHeaderWrapper;
+
+var SidebarHeaderIcon = function SidebarHeaderIcon(_ref10) {
+  var children = _ref10.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.sidebarHeaderIconStyles
+  }, children);
+};
+
+exports.SidebarHeaderIcon = SidebarHeaderIcon;
+
+var SidebarHeaderEntry = function SidebarHeaderEntry(_ref11) {
+  var children = _ref11.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.sidebarHeaderEntryStyles
+  }, children);
+};
+
+exports.SidebarHeaderEntry = SidebarHeaderEntry;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sidebarItemWrapperStyles = exports.sidebarHeaderWrapperStyles = exports.sidebarHeaderIconStyles = exports.sidebarHeaderEntryStyles = exports.separatorStyles = exports.itemStyle = exports.archiveViewerWrapperStyles = exports.archiveSidebarFolderWrapperStyles = exports.archiveSidebarFileEntryWrapperStyles = exports.archiveSideBarStyles = exports.archiveLayoutStyles = exports.archiveItemViewerWrapperStyles = exports.archiveDownloadButtonWrapperStyles = exports.ArchiveSideBarWidth = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+
+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);
+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"])));
+exports.archiveDownloadButtonWrapperStyles = archiveDownloadButtonWrapperStyles;
+var sidebarItemWrapperStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 85%;\n"])));
+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"])));
+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);
+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*/
+
+exports.sidebarHeaderEntryStyles = sidebarHeaderEntryStyles;
+var itemStyle = {
+  backgroundColor: "".concat(_colors.DN10),
+  fill: "".concat(_colors.DN10),
+  color: "".concat(_colors.DN500),
+  ':hover': {
+    backgroundColor: '#253a5f',
+    color: "".concat(_colors.DN500)
+  }
+};
+exports.itemStyle = itemStyle;

package/dist/cjs/viewers/audio.js

@@ -35,7 +35,7 @@ var _domain = require("../domain");
 
 var _errors = require("../errors");
 
-var _styled = require("../styled");
+var _styleWrappers = require("../styleWrappers");
 
 var _baseViewer = require("./base-viewer");
 
@@ -45,14 +45,16 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _getObjectUrlFromFileState = require("../utils/getObjectUrlFromFileState");
 
+var _styles = require("../styles");
+
 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 defaultCover = /*#__PURE__*/_react.default.createElement(_styled.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
+var defaultCover = /*#__PURE__*/_react.default.createElement(_styleWrappers.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
   label: "cover",
   size: "xlarge",
-  primaryColor: _styled.blanketColor
+  primaryColor: _styles.blanketColor
 }));
 
 var getCoverUrl = function getCoverUrl(item, mediaClient, collectionName) {
@@ -81,7 +83,7 @@ var AudioViewer = /*#__PURE__*/function (_BaseViewer) {
       var coverUrl = _this.state.coverUrl;
 
       if (coverUrl && item.status !== 'error') {
-        return /*#__PURE__*/_react.default.createElement(_styled.AudioCover, {
+        return /*#__PURE__*/_react.default.createElement(_styleWrappers.AudioCover, {
           src: coverUrl,
           alt: item.name
         });
@@ -199,9 +201,9 @@ var AudioViewer = /*#__PURE__*/function (_BaseViewer) {
           onCanPlay = _this$props2.onCanPlay;
       var useCustomAudioPlayer = !(0, _isIE.isIE)();
       var isAutoPlay = previewCount === 0;
-      return useCustomAudioPlayer ? /*#__PURE__*/_react.default.createElement(_styled.AudioPlayer, {
+      return useCustomAudioPlayer ? /*#__PURE__*/_react.default.createElement(_styleWrappers.AudioPlayer, {
         "data-testid": "media-viewer-audio-content"
-      }, this.renderCover(), /*#__PURE__*/_react.default.createElement(_styled.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
+      }, this.renderCover(), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
         type: "audio",
         isAutoPlay: isAutoPlay,
         src: src,
@@ -211,10 +213,10 @@ var AudioViewer = /*#__PURE__*/function (_BaseViewer) {
         onCanPlay: onCanPlay,
         onFirstPlay: this.onFirstPlay,
         onError: this.onError
-      }))) : /*#__PURE__*/_react.default.createElement(_styled.AudioPlayer, null, this.renderCover(), /*#__PURE__*/_react.default.createElement(_styled.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.Audio, {
+      }))) : /*#__PURE__*/_react.default.createElement(_styleWrappers.AudioPlayer, null, this.renderCover(), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.Audio, {
         autoPlay: isAutoPlay,
         controls: true,
-        innerRef: this.saveAudioElement,
+        ref: this.saveAudioElement,
         src: src,
         preload: "metadata"
       })));

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CodeViewRenderer = void 0;
+exports.CodeViewerHeaderBar = exports.CodeViewWrapper = exports.CodeViewRenderer = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -25,7 +25,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _domain = require("../../domain");
 
@@ -37,14 +39,32 @@ var _errorMessage = _interopRequireDefault(require("../../errorMessage"));
 
 var _errors = require("../../errors");
 
-var _styled = require("./styled");
-
 var _util = require("./util");
 
+var _styles = require("./styles");
+
 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 CodeViewWrapper = function CodeViewWrapper(_ref) {
+  var children = _ref.children,
+      testId = _ref['data-testid'];
+  return (0, _react.jsx)("div", {
+    css: _styles.codeViewWrapperStyles,
+    "data-testid": testId
+  }, children);
+};
+
+exports.CodeViewWrapper = CodeViewWrapper;
+
+var CodeViewerHeaderBar = function CodeViewerHeaderBar() {
+  return (0, _react.jsx)("div", {
+    css: _styles.codeViewerHeaderBarStyles
+  });
+};
+
+exports.CodeViewerHeaderBar = CodeViewerHeaderBar;
 var initialState = {
   doc: _domain.Outcome.pending()
 }; // Based on some basic benchmarking with @atlaskit/code it was found that ~10,000 lines took around ~5secs to render, which locks the main thread.
@@ -53,8 +73,8 @@ var initialState = {
 
 var MAX_FORMATTED_LINES = 10000;
 
-var CodeViewRenderer = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(CodeViewRenderer, _React$Component);
+var CodeViewRenderer = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CodeViewRenderer, _Component);
 
   var _super = _createSuper(CodeViewRenderer);
 
@@ -135,18 +155,19 @@ var CodeViewRenderer = /*#__PURE__*/function (_React$Component) {
       var selectedLanguage = (0, _util.lineCount)(src) > MAX_FORMATTED_LINES ? 'text' : language;
       return this.state.doc.match({
         pending: function pending() {
-          return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+          return (0, _react.jsx)(_loading.Spinner, null);
         },
         successful: function successful() {
-          return /*#__PURE__*/_react.default.createElement(_styled.CodeViewWrapper, {
+          return (0, _react.jsx)(CodeViewWrapper, {
             "data-testid": testId
-          }, /*#__PURE__*/_react.default.createElement(_styled.CodeViewerHeaderBar, null), /*#__PURE__*/_react.default.createElement(_block.default, {
+          }, (0, _react.jsx)(CodeViewerHeaderBar, null), (0, _react.jsx)(_block.default, {
             language: selectedLanguage,
-            text: src
+            text: src,
+            testId: "code-block"
           }));
         },
         failed: function failed(error) {
-          return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
+          return (0, _react.jsx)(_errorMessage.default, {
             fileId: item.id,
             fileState: item,
             error: error,
@@ -158,6 +179,6 @@ var CodeViewRenderer = /*#__PURE__*/function (_React$Component) {
     }
   }]);
   return CodeViewRenderer;
-}(_react.default.Component);
+}(_react2.Component);
 
 exports.CodeViewRenderer = CodeViewRenderer;

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CodeViewer = void 0;
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeViewerHeaderBarStyles = exports.codeViewWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _theme = require("@atlaskit/theme");
+
+var _templateObject, _templateObject2;
+
+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);
+exports.codeViewWrapperStyles = codeViewWrapperStyles;
+var codeViewerHeaderBarStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 75px;\n  background-color: #0e1624;\n"])));
+exports.codeViewerHeaderBarStyles = codeViewerHeaderBarStyles;

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DocViewer = void 0;
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

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

@@ -35,11 +35,11 @@ var PDFJSViewer = _interopRequireWildcard(require("pdfjs-dist/web/pdf_viewer"));
 
 var pdfjsLib = _interopRequireWildcard(require("pdfjs-dist/build/pdf"));
 
-var _styledComponents = require("styled-components");
+var _react2 = require("@emotion/react");
 
 var _zoomControls = require("../../zoomControls");
 
-var _styled = require("../../styled");
+var _styleWrappers = require("../../styleWrappers");
 
 var _closeOnDirectClick = require("../../utils/closeOnDirectClick");
 
@@ -64,10 +64,8 @@ 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 no-unused-expressions */
-
 exports.pdfViewerClassName = pdfViewerClassName;
-(0, _styledComponents.injectGlobal)(_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, .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\") 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: 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 */
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = '/'; // TODO: use web workers instead of fake worker.
@@ -207,16 +205,18 @@ var PDFRenderer = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
         },
         successful: function successful() {
-          return /*#__PURE__*/_react.default.createElement(_styled.PDFWrapper, {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Global, {
+            styles: globalStyles
+          }), /*#__PURE__*/_react.default.createElement(_styleWrappers.PDFWrapper, {
             "data-testid": "media-viewer-pdf-content",
-            innerRef: _this3.savePdfElement
+            ref: _this3.savePdfElement
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: pdfViewerClassName,
             onClick: (0, _closeOnDirectClick.closeOnDirectClick)(_this3.props.onClose)
           }), /*#__PURE__*/_react.default.createElement(_zoomControls.ZoomControls, {
             zoomLevel: _this3.state.zoomLevel,
             onChange: _this3.handleZoom
-          }));
+          })));
         },
         failed: function failed(error) {
           var item = _this3.props.item;