@atlaskit/media-viewer 46.3.0 → 47.0.0

package/dist/cjs/styleWrappers.js

@@ -0,0 +1,458 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZoomWrapper = exports.ZoomLevelIndicator = exports.ZoomControlsWrapper = exports.Video = exports.SpinnerWrapper = exports.SidebarWrapper = exports.RightWrapper = exports.RightHeader = exports.PDFWrapper = exports.MetadataWrapper = exports.MetadataSubText = exports.MetadataIconWrapper = exports.MetadataFileName = exports.MedatadataTextWrapper = exports.ListWrapper = exports.LeftWrapper = exports.LeftHeader = exports.Img = exports.ImageWrapper = exports.HeaderWrapper = exports.Header = exports.HDIconWrapper = exports.HDIconGroupWrapper = exports.FormattedMessageWrapper = exports.ErrorMessageWrapper = exports.ErrorImage = exports.DownloadButtonWrapper = exports.DefaultCoverWrapper = exports.CustomVideoPlayerWrapper = exports.CustomAudioPlayerWrapper = exports.ContentWrapper = exports.CloseButtonWrapper = exports.Blanket = exports.BaselineExtend = exports.AudioPlayer = exports.AudioCover = exports.Audio = exports.ArrowsWrapper = exports.Arrow = void 0;
+
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
+
+var _styles = require("./styles");
+
+/** @jsx jsx */
+var Blanket = function Blanket(_ref) {
+  var datatestId = _ref['data-testid'],
+      className = _ref.className,
+      children = _ref.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.blanketStyles,
+    "data-testid": datatestId,
+    className: className
+  }, children);
+};
+
+exports.Blanket = Blanket;
+
+var HeaderWrapper = function HeaderWrapper(_ref2) {
+  var className = _ref2.className,
+      children = _ref2.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.headerWrapperStyles,
+    className: className
+  }, children);
+};
+
+exports.HeaderWrapper = HeaderWrapper;
+HeaderWrapper.displayName = 'HeaderWrapper';
+
+var ListWrapper = function ListWrapper(_ref3) {
+  var children = _ref3.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.listWrapperStyles
+  }, children);
+};
+
+exports.ListWrapper = ListWrapper;
+ListWrapper.displayName = 'ListWrapper';
+
+var ArrowsWrapper = function ArrowsWrapper(_ref4) {
+  var children = _ref4.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.arrowsWrapperStyles
+  }, children);
+};
+
+exports.ArrowsWrapper = ArrowsWrapper;
+
+var CloseButtonWrapper = function CloseButtonWrapper(_ref5) {
+  var className = _ref5.className,
+      children = _ref5.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.closeButtonWrapperStyles,
+    className: className
+  }, children);
+};
+
+exports.CloseButtonWrapper = CloseButtonWrapper;
+
+var ContentWrapper = function ContentWrapper(_ref6) {
+  var isSidebarVisible = _ref6.isSidebarVisible,
+      children = _ref6.children;
+  return (0, _react.jsx)("div", {
+    css: (0, _styles.contentWrapperStyles)({
+      isSidebarVisible: isSidebarVisible
+    })
+  }, children);
+};
+
+exports.ContentWrapper = ContentWrapper;
+
+var ZoomWrapper = function ZoomWrapper(_ref7) {
+  var className = _ref7.className,
+      children = _ref7.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.zoomWrapperStyles,
+    className: className
+  }, children);
+};
+
+exports.ZoomWrapper = ZoomWrapper;
+
+var ZoomControlsWrapper = function ZoomControlsWrapper(_ref8) {
+  var children = _ref8.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.zoomControlsWrapperStyles
+  }, children);
+};
+
+exports.ZoomControlsWrapper = ZoomControlsWrapper;
+
+var ZoomLevelIndicator = function ZoomLevelIndicator(_ref9) {
+  var children = _ref9.children;
+  return (0, _react.jsx)("span", {
+    css: _styles.zoomLevelIndicatorStyles
+  }, children);
+};
+
+exports.ZoomLevelIndicator = ZoomLevelIndicator;
+
+var HDIconGroupWrapper = function HDIconGroupWrapper(_ref10) {
+  var className = _ref10.className,
+      children = _ref10.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.hdIconGroupWrapperStyles,
+    className: className
+  }, children);
+};
+
+exports.HDIconGroupWrapper = HDIconGroupWrapper;
+
+var HDIconWrapper = function HDIconWrapper(_ref11) {
+  var children = _ref11.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.hdIconWrapperStyles
+  }, children);
+};
+
+exports.HDIconWrapper = HDIconWrapper;
+
+var ErrorMessageWrapper = function ErrorMessageWrapper(_ref12) {
+  var datatestId = _ref12['data-testid'],
+      children = _ref12.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.errorMessageWrapperStyles,
+    "data-testid": datatestId
+  }, children);
+};
+
+exports.ErrorMessageWrapper = ErrorMessageWrapper;
+
+var ErrorImage = function ErrorImage(_ref13) {
+  var src = _ref13.src,
+      alt = _ref13.alt;
+  return (0, _react.jsx)("img", {
+    css: _styles.errorImageStyles,
+    alt: alt,
+    src: src
+  });
+};
+
+exports.ErrorImage = ErrorImage;
+
+var Video = function Video(_ref14) {
+  var autoPlay = _ref14.autoPlay,
+      controls = _ref14.controls,
+      src = _ref14.src;
+  return (// eslint-disable-next-line jsx-a11y/media-has-caption
+    (0, _react.jsx)("video", {
+      css: _styles.videoStyles,
+      autoPlay: autoPlay,
+      controls: controls,
+      src: src
+    })
+  );
+};
+
+exports.Video = Video;
+var PDFWrapper = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref15, ref) {
+  var datatestId = _ref15['data-testid'],
+      children = _ref15.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.pdfWrapperStyles,
+    ref: ref,
+    "data-testid": datatestId
+  }, children);
+});
+exports.PDFWrapper = PDFWrapper;
+
+var Arrow = function Arrow(_ref16) {
+  var className = _ref16.className,
+      children = _ref16.children;
+  return (0, _react.jsx)("span", {
+    css: _styles.arrowStyles,
+    className: className
+  }, children);
+};
+
+exports.Arrow = Arrow;
+
+var LeftWrapper = function LeftWrapper(_ref17) {
+  var children = _ref17.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.leftWrapperStyles
+  }, children);
+};
+
+exports.LeftWrapper = LeftWrapper;
+
+var RightWrapper = function RightWrapper(_ref18) {
+  var children = _ref18.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.rightWrapperStyles
+  }, children);
+}; // header.tsx
+
+
+exports.RightWrapper = RightWrapper;
+
+var Header = function Header(_ref19) {
+  var children = _ref19.children,
+      isArchiveSideBarVisible = _ref19.isArchiveSideBarVisible,
+      className = _ref19.className;
+  return (0, _react.jsx)("div", {
+    css: (0, _styles.headerStyles)({
+      isArchiveSideBarVisible: isArchiveSideBarVisible
+    }),
+    className: className
+  }, children);
+};
+
+exports.Header = Header;
+
+var LeftHeader = function LeftHeader(_ref20) {
+  var children = _ref20.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.leftHeaderStyles
+  }, children);
+};
+
+exports.LeftHeader = LeftHeader;
+var ImageWrapper = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref21, ref) {
+  var children = _ref21.children,
+      datatestId = _ref21['data-testid'],
+      onClick = _ref21.onClick,
+      style = _ref21.style,
+      className = _ref21.className;
+  return (0, _react.jsx)("div", {
+    "data-testid": datatestId,
+    onClick: onClick,
+    ref: ref,
+    css: _styles.imageWrapperStyles,
+    style: style,
+    className: className
+  }, children);
+});
+exports.ImageWrapper = ImageWrapper;
+
+var BaselineExtend = function BaselineExtend() {
+  return (0, _react.jsx)("div", {
+    css: _styles.baselineExtendStyles
+  });
+};
+
+exports.BaselineExtend = BaselineExtend;
+
+var Img = function Img(_ref22) {
+  var canDrag = _ref22.canDrag,
+      isDragging = _ref22.isDragging,
+      shouldPixelate = _ref22.shouldPixelate,
+      datatestId = _ref22['data-testid'],
+      src = _ref22.src,
+      style = _ref22.style,
+      onLoad = _ref22.onLoad,
+      onError = _ref22.onError,
+      onMouseDown = _ref22.onMouseDown,
+      className = _ref22.className;
+  var cursor = (0, _react2.useMemo)(function () {
+    if (canDrag && isDragging) {
+      return 'grabbing';
+    } else if (canDrag) {
+      return 'grab';
+    } else {
+      return 'auto';
+    }
+  }, [canDrag, isDragging]);
+  return (0, _react.jsx)("img", {
+    className: className,
+    css: (0, _styles.imgStyles)({
+      cursor: cursor,
+      shouldPixelate: shouldPixelate
+    }),
+    "data-testid": datatestId,
+    src: src,
+    style: style,
+    onLoad: onLoad,
+    onError: onError,
+    onMouseDown: onMouseDown
+  });
+};
+
+exports.Img = Img;
+
+var MedatadataTextWrapper = function MedatadataTextWrapper(_ref23) {
+  var children = _ref23.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.medatadataTextWrapperStyles
+  }, children);
+};
+
+exports.MedatadataTextWrapper = MedatadataTextWrapper;
+
+var MetadataWrapper = function MetadataWrapper(_ref24) {
+  var children = _ref24.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.metadataWrapperStyles
+  }, children);
+};
+
+exports.MetadataWrapper = MetadataWrapper;
+
+var MetadataFileName = function MetadataFileName(_ref25) {
+  var datatestId = _ref25['data-testid'],
+      children = _ref25.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.metadataFileNameStyles,
+    "data-testid": datatestId
+  }, children);
+};
+
+exports.MetadataFileName = MetadataFileName;
+
+var MetadataSubText = function MetadataSubText(_ref26) {
+  var datatestId = _ref26['data-testid'],
+      children = _ref26.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.metadataSubTextStyles,
+    "data-testid": datatestId
+  }, children);
+};
+
+exports.MetadataSubText = MetadataSubText;
+
+var MetadataIconWrapper = function MetadataIconWrapper(_ref27) {
+  var children = _ref27.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.metadataIconWrapperStyles
+  }, children);
+};
+
+exports.MetadataIconWrapper = MetadataIconWrapper;
+
+var RightHeader = function RightHeader(_ref28) {
+  var children = _ref28.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.rightHeaderStyles
+  }, children);
+};
+
+exports.RightHeader = RightHeader;
+
+var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref29) {
+  var children = _ref29.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.customAudioPlayerWrapperStyles
+  }, children);
+};
+
+exports.CustomAudioPlayerWrapper = CustomAudioPlayerWrapper;
+
+var AudioPlayer = function AudioPlayer(_ref30) {
+  var datatestId = _ref30['data-testid'],
+      children = _ref30.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.audioPlayerStyles,
+    "data-testid": datatestId
+  }, children);
+};
+
+exports.AudioPlayer = AudioPlayer;
+AudioPlayer.displayName = 'AudioPlayer';
+var Audio = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref31, ref) {
+  var autoPlay = _ref31.autoPlay,
+      controls = _ref31.controls,
+      src = _ref31.src,
+      preload = _ref31.preload;
+  return (// eslint-disable-next-line jsx-a11y/media-has-caption
+    (0, _react.jsx)("audio", {
+      css: _styles.audioStyles,
+      ref: ref,
+      autoPlay: autoPlay,
+      controls: controls,
+      src: src,
+      preload: preload
+    })
+  );
+});
+exports.Audio = Audio;
+
+var AudioCover = function AudioCover(_ref32) {
+  var src = _ref32.src,
+      alt = _ref32.alt;
+  return (0, _react.jsx)("img", {
+    css: _styles.audioCoverStyles,
+    alt: alt,
+    src: src
+  });
+};
+
+exports.AudioCover = AudioCover;
+
+var DefaultCoverWrapper = function DefaultCoverWrapper(_ref33) {
+  var children = _ref33.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.downloadButtonWrapperStyles
+  }, children);
+};
+
+exports.DefaultCoverWrapper = DefaultCoverWrapper;
+
+var DownloadButtonWrapper = function DownloadButtonWrapper(_ref34) {
+  var children = _ref34.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.downloadButtonWrapperStyles
+  }, children);
+};
+
+exports.DownloadButtonWrapper = DownloadButtonWrapper;
+
+var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref35) {
+  var datatestId = _ref35['data-testid'],
+      children = _ref35.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.customVideoPlayerWrapperStyles,
+    "data-testid": datatestId
+  }, children);
+};
+
+exports.CustomVideoPlayerWrapper = CustomVideoPlayerWrapper;
+
+var SidebarWrapper = function SidebarWrapper(_ref36) {
+  var datatestId = _ref36['data-testid'],
+      children = _ref36.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.sidebarWrapperStyles,
+    "data-testid": datatestId
+  }, children);
+};
+
+exports.SidebarWrapper = SidebarWrapper;
+
+var SpinnerWrapper = function SpinnerWrapper(_ref37) {
+  var children = _ref37.children;
+  return (0, _react.jsx)("div", {
+    css: _styles.spinnerWrapperStyles
+  }, children);
+};
+
+exports.SpinnerWrapper = SpinnerWrapper;
+
+var FormattedMessageWrapper = function FormattedMessageWrapper(_ref38) {
+  var children = _ref38.children;
+  return (0, _react.jsx)("span", {
+    css: _styles.formattedMessageWrapperStyles
+  }, children);
+};
+
+exports.FormattedMessageWrapper = FormattedMessageWrapper;

package/dist/cjs/styles.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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;
+
+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 _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 overlayZindex = _constants.layers.modal() + 10;
+var sidebarWidth = 416;
+var blanketColor = _colors.DN30;
+exports.blanketColor = blanketColor;
+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);
+exports.headerWrapperStyles = headerWrapperStyles;
+var listWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+exports.listWrapperStyles = listWrapperStyles;
+var arrowsWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n  width: 100%;\n"])));
+exports.arrowsWrapperStyles = arrowsWrapperStyles;
+var closeButtonWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 24px;\n  right: 20px;\n  z-index: ", ";\n"])), overlayZindex + 2);
+exports.closeButtonWrapperStyles = closeButtonWrapperStyles;
+
+var contentWrapperStyles = function contentWrapperStyles(_ref) {
+  var isSidebarVisible = _ref.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"])));
+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"])));
+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"])));
+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;
+var videoStyles = (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100vw;\n  height: 100vh;\n"])));
+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"])));
+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);
+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;
+  return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding-left: ", ";\n"])), isArchiveSideBarVisible ? "".concat(_styles.ArchiveSideBarWidth, "px") : '0');
+};
+
+exports.headerStyles = headerStyles;
+var leftHeaderStyles = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  overflow: hidden;\n  > * {\n    pointer-events: all;\n  }\n"])));
+exports.leftHeaderStyles = leftHeaderStyles;
+var imageWrapperStyles = (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100vw;\n  height: 100vh;\n  overflow: auto;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n"])));
+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;
+  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+           */" : "");
+};
+
+exports.imgStyles = imgStyles;
+var medatadataTextWrapperStyles = (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
+exports.medatadataTextWrapperStyles = medatadataTextWrapperStyles;
+var metadataWrapperStyles = (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+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)());
+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;
+var rightHeaderStyles = (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: right;\n  margin-right: 40px;\n  min-width: 200px;\n  > * {\n    pointer-events: all;\n  }\n"])));
+exports.rightHeaderStyles = rightHeaderStyles;
+var customAudioPlayerWrapperStyles = (0, _react.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
+exports.customAudioPlayerWrapperStyles = customAudioPlayerWrapperStyles;
+var audioPlayerStyles = (0, _react.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", ";\n  align-items: center;\n  justify-content: center;\n  width: 400px;\n  height: 400px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])), blanketColor, (0, _constants.borderRadius)());
+exports.audioPlayerStyles = audioPlayerStyles;
+var audioStyles = (0, _react.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n"])));
+exports.audioStyles = audioStyles;
+var audioCoverStyles = (0, _react.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000;\n"])));
+exports.audioCoverStyles = audioCoverStyles;
+var defaultCoverWrapperStyles = (0, _react.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > * {\n    transform: scale(2);\n  }\n"])));
+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"])));
+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);
+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)([""])));
+exports.formattedMessageWrapperStyles = formattedMessageWrapperStyles;

package/dist/cjs/version.json

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

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

@@ -37,10 +37,12 @@ var _mediaCommon = require("@atlaskit/media-common");
 
 var _mediaTypeIcon = require("@atlaskit/media-ui/media-type-icon");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
 
 var _utils = require("../../utils");
 
+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; } }
@@ -69,13 +71,14 @@ var ArchiveSidebarFolderEntry = /*#__PURE__*/function (_React$Component) {
         return onEntrySelected(entry);
       };
 
-      return /*#__PURE__*/_react.default.createElement(_styled.ArchiveSidebarFileEntryWrapper, {
-        key: entry.name
-      }, /*#__PURE__*/_react.default.createElement(_styled.SidebarItemWrapper, null, /*#__PURE__*/_react.default.createElement(_sideNavigation.ButtonItem, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArchiveSidebarFileEntryWrapper, {
+        key: entry.name,
+        index: entry.name
+      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.SidebarItemWrapper, null, /*#__PURE__*/_react.default.createElement(_sideNavigation.ButtonItem, {
         iconBefore: _this.renderEntryIcon(entry),
         onClick: onClick,
         cssFn: function cssFn() {
-          return _styled.itemStyle;
+          return _styles.itemStyle;
         }
       }, _this.formatName(root, entry.name))), entry.isDirectory ? null : _this.renderDownloadButton(entry, root));
     });
@@ -92,7 +95,7 @@ var ArchiveSidebarFolderEntry = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDownloadButton", function (entry, root) {
-      return /*#__PURE__*/_react.default.createElement(_styled.ArchiveDownloadButtonWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ArchiveDownloadButtonWrapper, {
         onClick: function onClick() {
           return _this.downloadZipEntry(entry, root);
         }
@@ -167,7 +170,7 @@ var ArchiveSidebarFolderEntry = /*#__PURE__*/function (_React$Component) {
         return !(0, _utils.isMacPrivateFile)(entry.name);
       }).map(this.renderEntry);
 
-      var archiveSidebarFolder = /*#__PURE__*/_react.default.createElement(_styled.ArchiveSidebarFolderWrapper, null, entriesContent);
+      var archiveSidebarFolder = /*#__PURE__*/_react.default.createElement(_styleWrappers.ArchiveSidebarFolderWrapper, null, entriesContent);
 
       return archiveSidebarFolder;
     }

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

@@ -31,7 +31,9 @@ var _home = _interopRequireDefault(require("@atlaskit/icon/glyph/home"));
 
 var _utils = require("../../utils");
 
-var _styled = require("./styled");
+var _styleWrappers = require("./styleWrappers");
+
+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); }; }
 
@@ -71,9 +73,9 @@ var ArchiveSidebarHeader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_sideNavigation.ButtonItem, {
         onClick: onHeaderClick,
         cssFn: function cssFn() {
-          return _styled.itemStyle;
+          return _styles.itemStyle;
         }
-      }, /*#__PURE__*/_react.default.createElement(_styled.SidebarHeaderWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.SidebarHeaderIcon, null, this.getHeaderIcon()), /*#__PURE__*/_react.default.createElement(_styled.SidebarHeaderEntry, null, (0, _utils.getFormattedFolderName)(folderName))));
+      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.SidebarHeaderWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.SidebarHeaderIcon, null, this.getHeaderIcon()), /*#__PURE__*/_react.default.createElement(_styleWrappers.SidebarHeaderEntry, null, (0, _utils.getFormattedFolderName)(folderName))));
     }
   }]);
   return ArchiveSidebarHeader;