@atlaskit/media-viewer 48.3.3 → 48.3.4

package/dist/cjs/styleWrappers.js

@@ -4,140 +4,453 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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;
+exports.ZoomWrapper = exports.ZoomRightControls = exports.ZoomLevelIndicator = exports.ZoomCenterControls = 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.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _styles = require("./styles");
+var _mediaUi = require("@atlaskit/media-ui");
 var _reactScrolllock = require("react-scrolllock");
 var _useCallbackRef = require("use-callback-ref");
+var _modalSpinner = require("./viewers/modalSpinner");
+var _styles2 = require("./viewers/archiveSidebar/styles");
+var _constants = require("@atlaskit/theme/constants");
+var _primitives = require("@atlaskit/primitives");
 /** @jsx jsx */
 
+var SIDEBAR_WIDTH = 416;
+var blanketStyles = (0, _react.css)({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  backgroundColor: _styles.blanketColor,
+  zIndex: _styles.overlayZindex,
+  display: 'flex'
+});
+var headerWrapperStyles = function headerWrapperStyles(_ref) {
+  var isArchiveSideBarVisible = _ref.isArchiveSideBarVisible;
+  return (0, _react.css)({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '98px',
+    opacity: 0.85,
+    background: "linear-gradient( to bottom, ".concat(_modalSpinner.headerAndSidebarBackgroundColor, ", rgba(14, 22, 36, 0) ) no-repeat"),
+    backgroundPosition: isArchiveSideBarVisible ? "".concat(_styles2.ArchiveSideBarWidth, "px 0") : '0',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    color: '#c7d1db',
+    fontWeight: 500,
+    padding: "var(--ds-space-300, 24px)",
+    boxSizing: 'border-box',
+    pointerEvents: 'none',
+    zIndex: _styles.overlayZindex + 1
+  });
+};
+var listWrapperStyles = (0, _react.css)({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var closeButtonWrapperStyles = (0, _react.css)({
+  position: 'absolute',
+  top: "var(--ds-space-300, 24px)",
+  right: "var(--ds-space-250, 20px)",
+  zIndex: _styles.overlayZindex + 2
+});
+var contentWrapperStyles = function contentWrapperStyles(_ref2) {
+  var isSidebarVisible = _ref2.isSidebarVisible;
+  return (0, _react.css)({
+    width: isSidebarVisible ? "calc(100% - ".concat(SIDEBAR_WIDTH, "px)") : '100%'
+  });
+};
+var zoomWrapperStyles = (0, _react.css)({
+  width: '100%',
+  position: 'absolute',
+  bottom: '0px',
+  height: '98px',
+  backgroundImage: "linear-gradient( to top, ".concat(_modalSpinner.headerAndSidebarBackgroundColor, ", rgba(14, 22, 36, 0) )"),
+  opacity: 0.85,
+  pointerEvents: 'none',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'flex-end',
+  padding: "var(--ds-space-100, 10px)".concat(" ", "var(--ds-space-300, 24px)")
+});
+var zoomCenterControlsStyles = (0, _react.css)({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: "var(--ds-space-100, 10px)",
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+var zoomRightControlsStyles = (0, _react.css)({
+  position: 'absolute',
+  right: "var(--ds-space-300, 24px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db',
+  pointerEvents: 'all',
+  display: 'flex',
+  justifyContent: 'right',
+  gap: "var(--ds-space-100, 10px)"
+});
+var zoomLevelIndicatorStyles = (0, _react.css)({
+  height: '32px',
+  lineHeight: '32px',
+  verticalAlign: 'middle'
+});
+var hdIconGroupWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 10px)",
+  position: 'relative',
+  width: '24px',
+  '> *': {
+    position: 'absolute'
+  }
+});
+var errorMessageWrapperStyles = (0, _react.css)({
+  textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db',
+  p: {
+    lineHeight: '100%'
+  }
+});
+var errorImageStyles = (0, _react.css)({
+  marginBottom: "var(--ds-space-100, 10px)",
+  userSelect: 'none'
+});
+var videoStyles = (0, _react.css)({
+  width: '100vw',
+  height: '100vh'
+});
+var pdfWrapperStyles = (0, _react.css)((0, _defineProperty2.default)({
+  overflow: 'auto',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+}, ".".concat(_mediaUi.hideControlsClassName), {
+  position: 'fixed'
+}));
+var arrowStyles = (0, _react.css)({
+  cursor: 'pointer',
+  svg: {
+    filter: 'drop-shadow(0px 1px 1px rgb(9 30 66 / 25%)) drop-shadow(0px 0px 1px rgb(9 30 66 / 31%))'
+  },
+  '&& button': {
+    height: 'inherit',
+    background: 'none',
+    '&:hover': {
+      svg: {
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+        color: '#b6c2cf'
+      }
+    },
+    '&:active': {
+      svg: {
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+        color: '#c7d1db'
+      }
+    }
+  }
+});
+var arrowWrapperStyles = (0, _react.css)({
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  padding: "var(--ds-space-250, 20px)"
+});
+var arrowsWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  left: 0,
+  width: '100%'
+});
+var leftWrapperStyles = function leftWrapperStyles(_ref3) {
+  var isArchiveSideBarVisible = _ref3.isArchiveSideBarVisible;
+  return (0, _react.css)(arrowWrapperStyles, {
+    textAlign: 'left',
+    left: isArchiveSideBarVisible ? "".concat(_styles2.ArchiveSideBarWidth, "px") : '0'
+  });
+};
+var rightWrapperStyles = (0, _react.css)(arrowWrapperStyles, {
+  textAlign: 'right',
+  right: 0
+});
+var headerStyles = function headerStyles(_ref4) {
+  var isArchiveSideBarVisible = _ref4.isArchiveSideBarVisible;
+  return (0, _react.css)({
+    display: 'flex',
+    paddingLeft: isArchiveSideBarVisible ? "".concat(_styles2.ArchiveSideBarWidth, "px") : '0'
+  });
+};
+var leftHeaderStyles = (0, _react.css)({
+  flex: 1,
+  overflow: 'hidden',
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+var imageWrapperStyles = (0, _react.css)({
+  width: '100vw',
+  height: '100vh',
+  overflow: 'auto',
+  textAlign: 'center',
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap'
+});
+var baselineExtendStyles = (0, _react.css)({
+  height: '100%',
+  display: 'inline-block',
+  verticalAlign: 'middle'
+});
+var imgStyles = function imgStyles(_ref5) {
+  var cursor = _ref5.cursor,
+    shouldPixelate = _ref5.shouldPixelate;
+  return (0, _react.css)({
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    position: 'relative',
+    cursor: 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+           */" : "");
+};
+var medatadataTextWrapperStyles = (0, _react.css)({
+  overflow: 'hidden'
+});
+var metadataWrapperStyles = (0, _react.css)({
+  display: 'flex'
+});
+var metadataFileNameStyles = (0, _react.css)((0, _mediaUi.ellipsis)());
+var metadataSubTextStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db'
+}, (0, _mediaUi.ellipsis)());
+var metadataIconWrapperStyles = (0, _primitives.xcss)({
+  paddingTop: "var(--ds-space-050, 4px)",
+  paddingRight: "var(--ds-space-150, 12px)"
+});
+var rightHeaderStyles = (0, _react.css)({
+  textAlign: 'right',
+  marginRight: "var(--ds-space-500, 40px)",
+  minWidth: '200px',
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+var customAudioPlayerWrapperStyles = (0, _react.css)({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%'
+});
+var audioPlayerStyles = (0, _react.css)({
+  backgroundColor: _styles.blanketColor,
+  borderRadius: (0, _constants.borderRadius)(),
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '400px',
+  height: '400px',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative'
+});
+var audioStyles = (0, _react.css)({
+  width: '100%',
+  position: 'absolute',
+  bottom: 0,
+  left: 0
+});
+var audioCoverStyles = (0, _react.css)({
+  width: '100%',
+  height: '100%',
+  objectFit: 'scale-down',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  backgroundColor: '#000'
+});
+var defaultCoverWrapperStyles = (0, _react.css)({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '> *': {
+    transform: 'scale(2)'
+  }
+});
+var downloadButtonWrapperStyles = (0, _react.css)({
+  marginTop: "var(--ds-space-300, 28px)",
+  textAlign: 'center',
+  button: {
+    '&:hover, &:active': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+      color: '#161a1d !important'
+    }
+  }
+});
+var customVideoPlayerWrapperStyles = (0, _react.css)({
+  video: {
+    flex: 1,
+    width: '100vw',
+    height: '100vh',
+    maxHeight: '100vh'
+  }
+});
+var sidebarWrapperStyles = (0, _react.css)({
+  top: 0,
+  right: 0,
+  width: "".concat(SIDEBAR_WIDTH, "px"),
+  height: '100vh',
+  overflow: 'hidden auto',
+  backgroundColor: "var(--ds-surface, ".concat(_modalSpinner.headerAndSidebarBackgroundColor, ")"),
+  color: "var(--ds-text, #c7d1db)"
+});
+var spinnerWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%'
+});
+var formattedMessageWrapperStyles = (0, _react.css)({});
 // We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
-var Blanket = exports.Blanket = function Blanket(_ref) {
-  var datatestId = _ref['data-testid'],
-    className = _ref.className,
-    children = _ref.children;
+var Blanket = exports.Blanket = function Blanket(_ref6) {
+  var datatestId = _ref6['data-testid'],
+    className = _ref6.className,
+    children = _ref6.children;
   return (0, _react.jsx)("div", {
-    css: _styles.blanketStyles,
+    css: blanketStyles,
     "data-testid": datatestId,
     className: className
   }, children);
 };
-var HeaderWrapper = exports.HeaderWrapper = function HeaderWrapper(_ref2) {
-  var className = _ref2.className,
-    children = _ref2.children,
-    isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
+var HeaderWrapper = exports.HeaderWrapper = function HeaderWrapper(_ref7) {
+  var className = _ref7.className,
+    children = _ref7.children,
+    isArchiveSideBarVisible = _ref7.isArchiveSideBarVisible;
   return (0, _react.jsx)("div", {
-    css: (0, _styles.headerWrapperStyles)({
+    css: headerWrapperStyles({
       isArchiveSideBarVisible: isArchiveSideBarVisible
     }),
     className: className
   }, children);
 };
 HeaderWrapper.displayName = 'HeaderWrapper';
-var ListWrapper = exports.ListWrapper = function ListWrapper(_ref3) {
-  var children = _ref3.children;
+var ListWrapper = exports.ListWrapper = function ListWrapper(_ref8) {
+  var children = _ref8.children;
   return (0, _react.jsx)("div", {
-    css: _styles.listWrapperStyles
+    css: listWrapperStyles
   }, children);
 };
 ListWrapper.displayName = 'ListWrapper';
-var ArrowsWrapper = exports.ArrowsWrapper = function ArrowsWrapper(_ref4) {
-  var children = _ref4.children;
+var ArrowsWrapper = exports.ArrowsWrapper = function ArrowsWrapper(_ref9) {
+  var children = _ref9.children;
   return (0, _react.jsx)("div", {
-    css: _styles.arrowsWrapperStyles
+    id: "media-viewer-navigation",
+    css: arrowsWrapperStyles
   }, children);
 };
-var CloseButtonWrapper = exports.CloseButtonWrapper = function CloseButtonWrapper(_ref5) {
-  var className = _ref5.className,
-    children = _ref5.children;
+var CloseButtonWrapper = exports.CloseButtonWrapper = function CloseButtonWrapper(_ref10) {
+  var className = _ref10.className,
+    children = _ref10.children;
   return (0, _react.jsx)("div", {
-    css: _styles.closeButtonWrapperStyles,
+    css: closeButtonWrapperStyles,
     className: className
   }, children);
 };
-var ContentWrapper = exports.ContentWrapper = function ContentWrapper(_ref6) {
-  var isSidebarVisible = _ref6.isSidebarVisible,
-    children = _ref6.children;
+var ContentWrapper = exports.ContentWrapper = function ContentWrapper(_ref11) {
+  var isSidebarVisible = _ref11.isSidebarVisible,
+    children = _ref11.children;
   return (0, _react.jsx)("div", {
-    css: (0, _styles.contentWrapperStyles)({
+    css: contentWrapperStyles({
       isSidebarVisible: isSidebarVisible
     })
   }, children);
 };
-var ZoomWrapper = exports.ZoomWrapper = function ZoomWrapper(_ref7) {
-  var className = _ref7.className,
-    children = _ref7.children;
+var ZoomWrapper = exports.ZoomWrapper = function ZoomWrapper(_ref12) {
+  var className = _ref12.className,
+    children = _ref12.children;
   return (0, _react.jsx)("div", {
-    css: _styles.zoomWrapperStyles,
+    css: zoomWrapperStyles,
     className: className
   }, children);
 };
-var ZoomControlsWrapper = exports.ZoomControlsWrapper = function ZoomControlsWrapper(_ref8) {
-  var children = _ref8.children;
+var ZoomCenterControls = exports.ZoomCenterControls = function ZoomCenterControls(_ref13) {
+  var children = _ref13.children;
   return (0, _react.jsx)("div", {
-    css: _styles.zoomControlsWrapperStyles
+    css: zoomCenterControlsStyles
   }, children);
 };
-var ZoomLevelIndicator = exports.ZoomLevelIndicator = function ZoomLevelIndicator(_ref9) {
-  var children = _ref9.children;
-  return (0, _react.jsx)("span", {
-    css: _styles.zoomLevelIndicatorStyles
+var ZoomRightControls = exports.ZoomRightControls = function ZoomRightControls(_ref14) {
+  var children = _ref14.children;
+  return (0, _react.jsx)("div", {
+    css: zoomRightControlsStyles
   }, children);
 };
-var HDIconGroupWrapper = exports.HDIconGroupWrapper = function HDIconGroupWrapper(_ref10) {
-  var className = _ref10.className,
-    children = _ref10.children;
-  return (0, _react.jsx)("div", {
-    css: _styles.hdIconGroupWrapperStyles,
-    className: className
+var ZoomLevelIndicator = exports.ZoomLevelIndicator = function ZoomLevelIndicator(_ref15) {
+  var children = _ref15.children;
+  return (0, _react.jsx)("span", {
+    css: zoomLevelIndicatorStyles
   }, children);
 };
-var HDIconWrapper = exports.HDIconWrapper = function HDIconWrapper(_ref11) {
-  var children = _ref11.children;
+var HDIconGroupWrapper = exports.HDIconGroupWrapper = function HDIconGroupWrapper(_ref16) {
+  var className = _ref16.className,
+    children = _ref16.children;
   return (0, _react.jsx)("div", {
-    css: _styles.hdIconWrapperStyles
+    css: hdIconGroupWrapperStyles,
+    className: className
   }, children);
 };
-var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(_ref12) {
-  var datatestId = _ref12['data-testid'],
-    children = _ref12.children;
+var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(_ref17) {
+  var datatestId = _ref17['data-testid'],
+    children = _ref17.children;
   return (0, _react.jsx)("div", {
-    css: _styles.errorMessageWrapperStyles,
+    css: errorMessageWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-var ErrorImage = exports.ErrorImage = function ErrorImage(_ref13) {
-  var src = _ref13.src,
-    alt = _ref13.alt;
+var ErrorImage = exports.ErrorImage = function ErrorImage(_ref18) {
+  var src = _ref18.src,
+    alt = _ref18.alt;
   return (0, _react.jsx)("img", {
-    css: _styles.errorImageStyles,
+    css: errorImageStyles,
     alt: alt,
     src: src
   });
 };
-var Video = exports.Video = function Video(_ref14) {
-  var autoPlay = _ref14.autoPlay,
-    controls = _ref14.controls,
-    src = _ref14.src;
+var Video = exports.Video = function Video(_ref19) {
+  var autoPlay = _ref19.autoPlay,
+    controls = _ref19.controls,
+    src = _ref19.src;
   return (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     (0, _react.jsx)("video", {
-      css: _styles.videoStyles,
+      css: videoStyles,
       autoPlay: autoPlay,
       controls: controls,
       src: src
     })
   );
 };
-var PDFWrapperBody = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref15, ref) {
-  var innerRef = _ref15.innerRef,
-    datatestId = _ref15['data-testid'],
-    children = _ref15.children;
+var PDFWrapperBody = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref20, ref) {
+  var innerRef = _ref20.innerRef,
+    datatestId = _ref20['data-testid'],
+    children = _ref20.children;
   var bodyRef = (0, _useCallbackRef.useMergeRefs)([ref, innerRef]);
   return (0, _react.jsx)("div", {
-    css: _styles.pdfWrapperStyles,
+    css: pdfWrapperStyles,
     ref: bodyRef,
     "data-testid": datatestId
   }, children);
@@ -147,80 +460,80 @@ var PDFWrapper = exports.PDFWrapper = /*#__PURE__*/(0, _react2.forwardRef)(funct
     innerRef: ref
   }, props)));
 });
-var Arrow = exports.Arrow = function Arrow(_ref16) {
-  var className = _ref16.className,
-    children = _ref16.children;
+var Arrow = exports.Arrow = function Arrow(_ref21) {
+  var className = _ref21.className,
+    children = _ref21.children;
   return (0, _react.jsx)("span", {
-    css: _styles.arrowStyles,
+    css: arrowStyles,
     className: className
   }, children);
 };
-var LeftWrapper = exports.LeftWrapper = function LeftWrapper(_ref17) {
-  var children = _ref17.children,
-    isArchiveSideBarVisible = _ref17.isArchiveSideBarVisible;
+var LeftWrapper = exports.LeftWrapper = function LeftWrapper(_ref22) {
+  var children = _ref22.children,
+    isArchiveSideBarVisible = _ref22.isArchiveSideBarVisible;
   return (0, _react.jsx)("div", {
-    css: (0, _styles.leftWrapperStyles)({
+    css: leftWrapperStyles({
       isArchiveSideBarVisible: isArchiveSideBarVisible
     })
   }, children);
 };
-var RightWrapper = exports.RightWrapper = function RightWrapper(_ref18) {
-  var children = _ref18.children;
+var RightWrapper = exports.RightWrapper = function RightWrapper(_ref23) {
+  var children = _ref23.children;
   return (0, _react.jsx)("div", {
-    css: _styles.rightWrapperStyles
+    css: rightWrapperStyles
   }, children);
 };
 
 // header.tsx
 
-var Header = exports.Header = function Header(_ref19) {
-  var children = _ref19.children,
-    isArchiveSideBarVisible = _ref19.isArchiveSideBarVisible,
-    className = _ref19.className;
+var Header = exports.Header = function Header(_ref24) {
+  var children = _ref24.children,
+    isArchiveSideBarVisible = _ref24.isArchiveSideBarVisible,
+    className = _ref24.className;
   return (0, _react.jsx)("div", {
-    css: (0, _styles.headerStyles)({
+    css: headerStyles({
       isArchiveSideBarVisible: isArchiveSideBarVisible
     }),
     className: className
   }, children);
 };
-var LeftHeader = exports.LeftHeader = function LeftHeader(_ref20) {
-  var children = _ref20.children;
+var LeftHeader = exports.LeftHeader = function LeftHeader(_ref25) {
+  var children = _ref25.children;
   return (0, _react.jsx)("div", {
-    css: _styles.leftHeaderStyles
+    css: leftHeaderStyles
   }, children);
 };
-var ImageWrapper = exports.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;
+var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref26, ref) {
+  var children = _ref26.children,
+    datatestId = _ref26['data-testid'],
+    onClick = _ref26.onClick,
+    style = _ref26.style,
+    className = _ref26.className;
   return (0, _react.jsx)("div", {
     "data-testid": datatestId,
     onClick: onClick,
     ref: ref,
-    css: _styles.imageWrapperStyles,
+    css: imageWrapperStyles,
     style: style,
     className: className
   }, children);
 });
 var BaselineExtend = exports.BaselineExtend = function BaselineExtend() {
   return (0, _react.jsx)("div", {
-    css: _styles.baselineExtendStyles
+    css: baselineExtendStyles
   });
 };
-var Img = exports.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 Img = exports.Img = function Img(_ref27) {
+  var canDrag = _ref27.canDrag,
+    isDragging = _ref27.isDragging,
+    shouldPixelate = _ref27.shouldPixelate,
+    datatestId = _ref27['data-testid'],
+    src = _ref27.src,
+    style = _ref27.style,
+    onLoad = _ref27.onLoad,
+    onError = _ref27.onError,
+    onMouseDown = _ref27.onMouseDown,
+    className = _ref27.className;
   var cursor = (0, _react2.useMemo)(function () {
     if (canDrag && isDragging) {
       return 'grabbing';
@@ -232,7 +545,7 @@ var Img = exports.Img = function Img(_ref22) {
   }, [canDrag, isDragging]);
   return (0, _react.jsx)("img", {
     className: className,
-    css: (0, _styles.imgStyles)({
+    css: imgStyles({
       cursor: cursor,
       shouldPixelate: shouldPixelate
     }),
@@ -244,70 +557,70 @@ var Img = exports.Img = function Img(_ref22) {
     onMouseDown: onMouseDown
   });
 };
-var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(_ref23) {
-  var children = _ref23.children;
+var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(_ref28) {
+  var children = _ref28.children;
   return (0, _react.jsx)("div", {
-    css: _styles.medatadataTextWrapperStyles
+    css: medatadataTextWrapperStyles
   }, children);
 };
-var MetadataWrapper = exports.MetadataWrapper = function MetadataWrapper(_ref24) {
-  var children = _ref24.children;
+var MetadataWrapper = exports.MetadataWrapper = function MetadataWrapper(_ref29) {
+  var children = _ref29.children;
   return (0, _react.jsx)("div", {
-    css: _styles.metadataWrapperStyles
+    css: metadataWrapperStyles
   }, children);
 };
-var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref25) {
-  var datatestId = _ref25['data-testid'],
-    children = _ref25.children;
+var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref30) {
+  var datatestId = _ref30['data-testid'],
+    children = _ref30.children;
   return (0, _react.jsx)("div", {
-    css: _styles.metadataFileNameStyles,
+    css: metadataFileNameStyles,
     "data-testid": datatestId
   }, children);
 };
-var MetadataSubText = exports.MetadataSubText = function MetadataSubText(_ref26) {
-  var datatestId = _ref26['data-testid'],
-    children = _ref26.children;
+var MetadataSubText = exports.MetadataSubText = function MetadataSubText(_ref31) {
+  var datatestId = _ref31['data-testid'],
+    children = _ref31.children;
   return (0, _react.jsx)("div", {
-    css: _styles.metadataSubTextStyles,
+    css: metadataSubTextStyles,
     "data-testid": datatestId
   }, children);
 };
-var MetadataIconWrapper = exports.MetadataIconWrapper = function MetadataIconWrapper(_ref27) {
-  var children = _ref27.children;
-  return (0, _react.jsx)("div", {
-    css: _styles.metadataIconWrapperStyles
+var MetadataIconWrapper = exports.MetadataIconWrapper = function MetadataIconWrapper(_ref32) {
+  var children = _ref32.children;
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: metadataIconWrapperStyles
   }, children);
 };
-var RightHeader = exports.RightHeader = function RightHeader(_ref28) {
-  var children = _ref28.children;
+var RightHeader = exports.RightHeader = function RightHeader(_ref33) {
+  var children = _ref33.children;
   return (0, _react.jsx)("div", {
-    css: _styles.rightHeaderStyles
+    css: rightHeaderStyles
   }, children);
 };
-var CustomAudioPlayerWrapper = exports.CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref29) {
-  var children = _ref29.children;
+var CustomAudioPlayerWrapper = exports.CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref34) {
+  var children = _ref34.children;
   return (0, _react.jsx)("div", {
-    css: _styles.customAudioPlayerWrapperStyles
+    css: customAudioPlayerWrapperStyles
   }, children);
 };
-var AudioPlayer = exports.AudioPlayer = function AudioPlayer(_ref30) {
-  var datatestId = _ref30['data-testid'],
-    children = _ref30.children;
+var AudioPlayer = exports.AudioPlayer = function AudioPlayer(_ref35) {
+  var datatestId = _ref35['data-testid'],
+    children = _ref35.children;
   return (0, _react.jsx)("div", {
-    css: _styles.audioPlayerStyles,
+    css: audioPlayerStyles,
     "data-testid": datatestId
   }, children);
 };
 AudioPlayer.displayName = 'AudioPlayer';
-var Audio = exports.Audio = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref31, ref) {
-  var autoPlay = _ref31.autoPlay,
-    controls = _ref31.controls,
-    src = _ref31.src,
-    preload = _ref31.preload;
+var Audio = exports.Audio = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref36, ref) {
+  var autoPlay = _ref36.autoPlay,
+    controls = _ref36.controls,
+    src = _ref36.src,
+    preload = _ref36.preload;
   return (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     (0, _react.jsx)("audio", {
-      css: _styles.audioStyles,
+      css: audioStyles,
       ref: ref,
       autoPlay: autoPlay,
       controls: controls,
@@ -316,52 +629,52 @@ var Audio = exports.Audio = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref3
     })
   );
 });
-var AudioCover = exports.AudioCover = function AudioCover(_ref32) {
-  var src = _ref32.src,
-    alt = _ref32.alt;
+var AudioCover = exports.AudioCover = function AudioCover(_ref37) {
+  var src = _ref37.src,
+    alt = _ref37.alt;
   return (0, _react.jsx)("img", {
-    css: _styles.audioCoverStyles,
+    css: audioCoverStyles,
     alt: alt,
     src: src
   });
 };
-var DefaultCoverWrapper = exports.DefaultCoverWrapper = function DefaultCoverWrapper(_ref33) {
-  var children = _ref33.children;
+var DefaultCoverWrapper = exports.DefaultCoverWrapper = function DefaultCoverWrapper(_ref38) {
+  var children = _ref38.children;
   return (0, _react.jsx)("div", {
-    css: _styles.defaultCoverWrapperStyles
+    css: defaultCoverWrapperStyles
   }, children);
 };
-var DownloadButtonWrapper = exports.DownloadButtonWrapper = function DownloadButtonWrapper(_ref34) {
-  var children = _ref34.children;
+var DownloadButtonWrapper = exports.DownloadButtonWrapper = function DownloadButtonWrapper(_ref39) {
+  var children = _ref39.children;
   return (0, _react.jsx)("div", {
-    css: _styles.downloadButtonWrapperStyles
+    css: downloadButtonWrapperStyles
   }, children);
 };
-var CustomVideoPlayerWrapper = exports.CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref35) {
-  var datatestId = _ref35['data-testid'],
-    children = _ref35.children;
+var CustomVideoPlayerWrapper = exports.CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref40) {
+  var datatestId = _ref40['data-testid'],
+    children = _ref40.children;
   return (0, _react.jsx)("div", {
-    css: _styles.customVideoPlayerWrapperStyles,
+    css: customVideoPlayerWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-var SidebarWrapper = exports.SidebarWrapper = function SidebarWrapper(_ref36) {
-  var datatestId = _ref36['data-testid'],
-    children = _ref36.children;
+var SidebarWrapper = exports.SidebarWrapper = function SidebarWrapper(_ref41) {
+  var datatestId = _ref41['data-testid'],
+    children = _ref41.children;
   return (0, _react.jsx)("div", {
-    css: _styles.sidebarWrapperStyles,
+    css: sidebarWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-var SpinnerWrapper = exports.SpinnerWrapper = function SpinnerWrapper(_ref37) {
-  var children = _ref37.children;
+var SpinnerWrapper = exports.SpinnerWrapper = function SpinnerWrapper(_ref42) {
+  var children = _ref42.children;
   return (0, _react.jsx)("div", {
-    css: _styles.spinnerWrapperStyles
+    css: spinnerWrapperStyles
   }, children);
 };
-var FormattedMessageWrapper = exports.FormattedMessageWrapper = function FormattedMessageWrapper(_ref38) {
-  var children = _ref38.children;
+var FormattedMessageWrapper = exports.FormattedMessageWrapper = function FormattedMessageWrapper(_ref43) {
+  var children = _ref43.children;
   return (0, _react.jsx)("span", {
-    css: _styles.formattedMessageWrapperStyles
+    css: formattedMessageWrapperStyles
   }, children);
 };