@atlaskit/media-viewer 48.3.3 → 48.3.4

package/dist/esm/styleWrappers.js

@@ -1,25 +1,337 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import { forwardRef, useMemo } from 'react';
-import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, defaultCoverWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
+import { blanketColor, overlayZindex } from './styles';
+import { ellipsis, hideControlsClassName } from '@atlaskit/media-ui';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
+import { headerAndSidebarBackgroundColor } from './viewers/modalSpinner';
+import { ArchiveSideBarWidth } from './viewers/archiveSidebar/styles';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { Box, xcss } from '@atlaskit/primitives';
+var SIDEBAR_WIDTH = 416;
+var blanketStyles = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  backgroundColor: blanketColor,
+  zIndex: overlayZindex,
+  display: 'flex'
+});
+var headerWrapperStyles = function headerWrapperStyles(_ref) {
+  var isArchiveSideBarVisible = _ref.isArchiveSideBarVisible;
+  return css({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '98px',
+    opacity: 0.85,
+    background: "linear-gradient( to bottom, ".concat(headerAndSidebarBackgroundColor, ", rgba(14, 22, 36, 0) ) no-repeat"),
+    backgroundPosition: isArchiveSideBarVisible ? "".concat(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: overlayZindex + 1
+  });
+};
+var listWrapperStyles = css({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var closeButtonWrapperStyles = css({
+  position: 'absolute',
+  top: "var(--ds-space-300, 24px)",
+  right: "var(--ds-space-250, 20px)",
+  zIndex: overlayZindex + 2
+});
+var contentWrapperStyles = function contentWrapperStyles(_ref2) {
+  var isSidebarVisible = _ref2.isSidebarVisible;
+  return css({
+    width: isSidebarVisible ? "calc(100% - ".concat(SIDEBAR_WIDTH, "px)") : '100%'
+  });
+};
+var zoomWrapperStyles = css({
+  width: '100%',
+  position: 'absolute',
+  bottom: '0px',
+  height: '98px',
+  backgroundImage: "linear-gradient( to top, ".concat(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 = css({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: "var(--ds-space-100, 10px)",
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+var zoomRightControlsStyles = 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 = css({
+  height: '32px',
+  lineHeight: '32px',
+  verticalAlign: 'middle'
+});
+var hdIconGroupWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: "var(--ds-space-100, 10px)",
+  position: 'relative',
+  width: '24px',
+  '> *': {
+    position: 'absolute'
+  }
+});
+var errorMessageWrapperStyles = css({
+  textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db',
+  p: {
+    lineHeight: '100%'
+  }
+});
+var errorImageStyles = css({
+  marginBottom: "var(--ds-space-100, 10px)",
+  userSelect: 'none'
+});
+var videoStyles = css({
+  width: '100vw',
+  height: '100vh'
+});
+var pdfWrapperStyles = css(_defineProperty({
+  overflow: 'auto',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+}, ".".concat(hideControlsClassName), {
+  position: 'fixed'
+}));
+var arrowStyles = css({
+  cursor: 'pointer',
+  svg: {
+    filter: 'drop-shadow(0px 1px 1px rgb(9 30 66 / 25%)) drop-shadow(0px 0px 1px rgb(9 30 66 / 31%))'
+  },
+  '&& button': {
+    height: 'inherit',
+    background: 'none',
+    '&: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 = css({
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  padding: "var(--ds-space-250, 20px)"
+});
+var arrowsWrapperStyles = css({
+  display: 'flex',
+  position: 'absolute',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  left: 0,
+  width: '100%'
+});
+var leftWrapperStyles = function leftWrapperStyles(_ref3) {
+  var isArchiveSideBarVisible = _ref3.isArchiveSideBarVisible;
+  return css(arrowWrapperStyles, {
+    textAlign: 'left',
+    left: isArchiveSideBarVisible ? "".concat(ArchiveSideBarWidth, "px") : '0'
+  });
+};
+var rightWrapperStyles = css(arrowWrapperStyles, {
+  textAlign: 'right',
+  right: 0
+});
+var headerStyles = function headerStyles(_ref4) {
+  var isArchiveSideBarVisible = _ref4.isArchiveSideBarVisible;
+  return css({
+    display: 'flex',
+    paddingLeft: isArchiveSideBarVisible ? "".concat(ArchiveSideBarWidth, "px") : '0'
+  });
+};
+var leftHeaderStyles = css({
+  flex: 1,
+  overflow: 'hidden',
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+var imageWrapperStyles = css({
+  width: '100vw',
+  height: '100vh',
+  overflow: 'auto',
+  textAlign: 'center',
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap'
+});
+var baselineExtendStyles = css({
+  height: '100%',
+  display: 'inline-block',
+  verticalAlign: 'middle'
+});
+var imgStyles = function imgStyles(_ref5) {
+  var cursor = _ref5.cursor,
+    shouldPixelate = _ref5.shouldPixelate;
+  return 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 = css({
+  overflow: 'hidden'
+});
+var metadataWrapperStyles = css({
+  display: 'flex'
+});
+var metadataFileNameStyles = css(ellipsis());
+var metadataSubTextStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  color: '#c7d1db'
+}, ellipsis());
+var metadataIconWrapperStyles = xcss({
+  paddingTop: "var(--ds-space-050, 4px)",
+  paddingRight: "var(--ds-space-150, 12px)"
+});
+var rightHeaderStyles = css({
+  textAlign: 'right',
+  marginRight: "var(--ds-space-500, 40px)",
+  minWidth: '200px',
+  '> *': {
+    pointerEvents: 'all'
+  }
+});
+var customAudioPlayerWrapperStyles = css({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%'
+});
+var audioPlayerStyles = css({
+  backgroundColor: blanketColor,
+  borderRadius: borderRadius(),
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '400px',
+  height: '400px',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative'
+});
+var audioStyles = css({
+  width: '100%',
+  position: 'absolute',
+  bottom: 0,
+  left: 0
+});
+var audioCoverStyles = css({
+  width: '100%',
+  height: '100%',
+  objectFit: 'scale-down',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  backgroundColor: '#000'
+});
+var defaultCoverWrapperStyles = css({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '> *': {
+    transform: 'scale(2)'
+  }
+});
+var downloadButtonWrapperStyles = 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 = css({
+  video: {
+    flex: 1,
+    width: '100vw',
+    height: '100vh',
+    maxHeight: '100vh'
+  }
+});
+var sidebarWrapperStyles = css({
+  top: 0,
+  right: 0,
+  width: "".concat(SIDEBAR_WIDTH, "px"),
+  height: '100vh',
+  overflow: 'hidden auto',
+  backgroundColor: "var(--ds-surface, ".concat(headerAndSidebarBackgroundColor, ")"),
+  color: "var(--ds-text, #c7d1db)"
+});
+var spinnerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%'
+});
+var formattedMessageWrapperStyles = 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
-export var Blanket = function Blanket(_ref) {
-  var datatestId = _ref['data-testid'],
-    className = _ref.className,
-    children = _ref.children;
+export var Blanket = function Blanket(_ref6) {
+  var datatestId = _ref6['data-testid'],
+    className = _ref6.className,
+    children = _ref6.children;
   return jsx("div", {
     css: blanketStyles,
     "data-testid": datatestId,
     className: className
   }, children);
 };
-export var HeaderWrapper = function HeaderWrapper(_ref2) {
-  var className = _ref2.className,
-    children = _ref2.children,
-    isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
+export var HeaderWrapper = function HeaderWrapper(_ref7) {
+  var className = _ref7.className,
+    children = _ref7.children,
+    isArchiveSideBarVisible = _ref7.isArchiveSideBarVisible;
   return jsx("div", {
     css: headerWrapperStyles({
       isArchiveSideBarVisible: isArchiveSideBarVisible
@@ -28,91 +340,92 @@ export var HeaderWrapper = function HeaderWrapper(_ref2) {
   }, children);
 };
 HeaderWrapper.displayName = 'HeaderWrapper';
-export var ListWrapper = function ListWrapper(_ref3) {
-  var children = _ref3.children;
+export var ListWrapper = function ListWrapper(_ref8) {
+  var children = _ref8.children;
   return jsx("div", {
     css: listWrapperStyles
   }, children);
 };
 ListWrapper.displayName = 'ListWrapper';
-export var ArrowsWrapper = function ArrowsWrapper(_ref4) {
-  var children = _ref4.children;
+export var ArrowsWrapper = function ArrowsWrapper(_ref9) {
+  var children = _ref9.children;
   return jsx("div", {
+    id: "media-viewer-navigation",
     css: arrowsWrapperStyles
   }, children);
 };
-export var CloseButtonWrapper = function CloseButtonWrapper(_ref5) {
-  var className = _ref5.className,
-    children = _ref5.children;
+export var CloseButtonWrapper = function CloseButtonWrapper(_ref10) {
+  var className = _ref10.className,
+    children = _ref10.children;
   return jsx("div", {
     css: closeButtonWrapperStyles,
     className: className
   }, children);
 };
-export var ContentWrapper = function ContentWrapper(_ref6) {
-  var isSidebarVisible = _ref6.isSidebarVisible,
-    children = _ref6.children;
+export var ContentWrapper = function ContentWrapper(_ref11) {
+  var isSidebarVisible = _ref11.isSidebarVisible,
+    children = _ref11.children;
   return jsx("div", {
     css: contentWrapperStyles({
       isSidebarVisible: isSidebarVisible
     })
   }, children);
 };
-export var ZoomWrapper = function ZoomWrapper(_ref7) {
-  var className = _ref7.className,
-    children = _ref7.children;
+export var ZoomWrapper = function ZoomWrapper(_ref12) {
+  var className = _ref12.className,
+    children = _ref12.children;
   return jsx("div", {
     css: zoomWrapperStyles,
     className: className
   }, children);
 };
-export var ZoomControlsWrapper = function ZoomControlsWrapper(_ref8) {
-  var children = _ref8.children;
+export var ZoomCenterControls = function ZoomCenterControls(_ref13) {
+  var children = _ref13.children;
   return jsx("div", {
-    css: zoomControlsWrapperStyles
+    css: zoomCenterControlsStyles
   }, children);
 };
-export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref9) {
-  var children = _ref9.children;
+export var ZoomRightControls = function ZoomRightControls(_ref14) {
+  var children = _ref14.children;
+  return jsx("div", {
+    css: zoomRightControlsStyles
+  }, children);
+};
+export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref15) {
+  var children = _ref15.children;
   return jsx("span", {
     css: zoomLevelIndicatorStyles
   }, children);
 };
-export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref10) {
-  var className = _ref10.className,
-    children = _ref10.children;
+export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref16) {
+  var className = _ref16.className,
+    children = _ref16.children;
   return jsx("div", {
     css: hdIconGroupWrapperStyles,
     className: className
   }, children);
 };
-export var HDIconWrapper = function HDIconWrapper(_ref11) {
-  var children = _ref11.children;
-  return jsx("div", {
-    css: hdIconWrapperStyles
-  }, children);
-};
-export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref12) {
-  var datatestId = _ref12['data-testid'],
-    children = _ref12.children;
+export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref17) {
+  var datatestId = _ref17['data-testid'],
+    children = _ref17.children;
   return jsx("div", {
     css: errorMessageWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-export var ErrorImage = function ErrorImage(_ref13) {
-  var src = _ref13.src,
-    alt = _ref13.alt;
+export var ErrorImage = function ErrorImage(_ref18) {
+  var src = _ref18.src,
+    alt = _ref18.alt;
   return jsx("img", {
     css: errorImageStyles,
     alt: alt,
     src: src
   });
 };
-export var Video = function Video(_ref14) {
-  var autoPlay = _ref14.autoPlay,
-    controls = _ref14.controls,
-    src = _ref14.src;
+export var Video = function Video(_ref19) {
+  var autoPlay = _ref19.autoPlay,
+    controls = _ref19.controls,
+    src = _ref19.src;
   return (
     // eslint-disable-next-line jsx-a11y/media-has-caption
     jsx("video", {
@@ -123,10 +436,10 @@ export var Video = function Video(_ref14) {
     })
   );
 };
-var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref15, ref) {
-  var innerRef = _ref15.innerRef,
-    datatestId = _ref15['data-testid'],
-    children = _ref15.children;
+var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref20, ref) {
+  var innerRef = _ref20.innerRef,
+    datatestId = _ref20['data-testid'],
+    children = _ref20.children;
   var bodyRef = useMergeRefs([ref, innerRef]);
   return jsx("div", {
     css: pdfWrapperStyles,
@@ -139,25 +452,25 @@ export var PDFWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     innerRef: ref
   }, props)));
 });
-export var Arrow = function Arrow(_ref16) {
-  var className = _ref16.className,
-    children = _ref16.children;
+export var Arrow = function Arrow(_ref21) {
+  var className = _ref21.className,
+    children = _ref21.children;
   return jsx("span", {
     css: arrowStyles,
     className: className
   }, children);
 };
-export var LeftWrapper = function LeftWrapper(_ref17) {
-  var children = _ref17.children,
-    isArchiveSideBarVisible = _ref17.isArchiveSideBarVisible;
+export var LeftWrapper = function LeftWrapper(_ref22) {
+  var children = _ref22.children,
+    isArchiveSideBarVisible = _ref22.isArchiveSideBarVisible;
   return jsx("div", {
     css: leftWrapperStyles({
       isArchiveSideBarVisible: isArchiveSideBarVisible
     })
   }, children);
 };
-export var RightWrapper = function RightWrapper(_ref18) {
-  var children = _ref18.children;
+export var RightWrapper = function RightWrapper(_ref23) {
+  var children = _ref23.children;
   return jsx("div", {
     css: rightWrapperStyles
   }, children);
@@ -165,10 +478,10 @@ export var RightWrapper = function RightWrapper(_ref18) {
 
 // header.tsx
 
-export var Header = function Header(_ref19) {
-  var children = _ref19.children,
-    isArchiveSideBarVisible = _ref19.isArchiveSideBarVisible,
-    className = _ref19.className;
+export var Header = function Header(_ref24) {
+  var children = _ref24.children,
+    isArchiveSideBarVisible = _ref24.isArchiveSideBarVisible,
+    className = _ref24.className;
   return jsx("div", {
     css: headerStyles({
       isArchiveSideBarVisible: isArchiveSideBarVisible
@@ -176,18 +489,18 @@ export var Header = function Header(_ref19) {
     className: className
   }, children);
 };
-export var LeftHeader = function LeftHeader(_ref20) {
-  var children = _ref20.children;
+export var LeftHeader = function LeftHeader(_ref25) {
+  var children = _ref25.children;
   return jsx("div", {
     css: leftHeaderStyles
   }, children);
 };
-export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref21, ref) {
-  var children = _ref21.children,
-    datatestId = _ref21['data-testid'],
-    onClick = _ref21.onClick,
-    style = _ref21.style,
-    className = _ref21.className;
+export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref26, ref) {
+  var children = _ref26.children,
+    datatestId = _ref26['data-testid'],
+    onClick = _ref26.onClick,
+    style = _ref26.style,
+    className = _ref26.className;
   return jsx("div", {
     "data-testid": datatestId,
     onClick: onClick,
@@ -202,17 +515,17 @@ export var BaselineExtend = function BaselineExtend() {
     css: baselineExtendStyles
   });
 };
-export 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;
+export var 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 = useMemo(function () {
     if (canDrag && isDragging) {
       return 'grabbing';
@@ -236,66 +549,66 @@ export var Img = function Img(_ref22) {
     onMouseDown: onMouseDown
   });
 };
-export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref23) {
-  var children = _ref23.children;
+export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref28) {
+  var children = _ref28.children;
   return jsx("div", {
     css: medatadataTextWrapperStyles
   }, children);
 };
-export var MetadataWrapper = function MetadataWrapper(_ref24) {
-  var children = _ref24.children;
+export var MetadataWrapper = function MetadataWrapper(_ref29) {
+  var children = _ref29.children;
   return jsx("div", {
     css: metadataWrapperStyles
   }, children);
 };
-export var MetadataFileName = function MetadataFileName(_ref25) {
-  var datatestId = _ref25['data-testid'],
-    children = _ref25.children;
+export var MetadataFileName = function MetadataFileName(_ref30) {
+  var datatestId = _ref30['data-testid'],
+    children = _ref30.children;
   return jsx("div", {
     css: metadataFileNameStyles,
     "data-testid": datatestId
   }, children);
 };
-export var MetadataSubText = function MetadataSubText(_ref26) {
-  var datatestId = _ref26['data-testid'],
-    children = _ref26.children;
+export var MetadataSubText = function MetadataSubText(_ref31) {
+  var datatestId = _ref31['data-testid'],
+    children = _ref31.children;
   return jsx("div", {
     css: metadataSubTextStyles,
     "data-testid": datatestId
   }, children);
 };
-export var MetadataIconWrapper = function MetadataIconWrapper(_ref27) {
-  var children = _ref27.children;
-  return jsx("div", {
-    css: metadataIconWrapperStyles
+export var MetadataIconWrapper = function MetadataIconWrapper(_ref32) {
+  var children = _ref32.children;
+  return jsx(Box, {
+    xcss: metadataIconWrapperStyles
   }, children);
 };
-export var RightHeader = function RightHeader(_ref28) {
-  var children = _ref28.children;
+export var RightHeader = function RightHeader(_ref33) {
+  var children = _ref33.children;
   return jsx("div", {
     css: rightHeaderStyles
   }, children);
 };
-export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref29) {
-  var children = _ref29.children;
+export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref34) {
+  var children = _ref34.children;
   return jsx("div", {
     css: customAudioPlayerWrapperStyles
   }, children);
 };
-export var AudioPlayer = function AudioPlayer(_ref30) {
-  var datatestId = _ref30['data-testid'],
-    children = _ref30.children;
+export var AudioPlayer = function AudioPlayer(_ref35) {
+  var datatestId = _ref35['data-testid'],
+    children = _ref35.children;
   return jsx("div", {
     css: audioPlayerStyles,
     "data-testid": datatestId
   }, children);
 };
 AudioPlayer.displayName = 'AudioPlayer';
-export var Audio = /*#__PURE__*/forwardRef(function (_ref31, ref) {
-  var autoPlay = _ref31.autoPlay,
-    controls = _ref31.controls,
-    src = _ref31.src,
-    preload = _ref31.preload;
+export var Audio = /*#__PURE__*/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
     jsx("audio", {
@@ -308,51 +621,51 @@ export var Audio = /*#__PURE__*/forwardRef(function (_ref31, ref) {
     })
   );
 });
-export var AudioCover = function AudioCover(_ref32) {
-  var src = _ref32.src,
-    alt = _ref32.alt;
+export var AudioCover = function AudioCover(_ref37) {
+  var src = _ref37.src,
+    alt = _ref37.alt;
   return jsx("img", {
     css: audioCoverStyles,
     alt: alt,
     src: src
   });
 };
-export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref33) {
-  var children = _ref33.children;
+export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref38) {
+  var children = _ref38.children;
   return jsx("div", {
     css: defaultCoverWrapperStyles
   }, children);
 };
-export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref34) {
-  var children = _ref34.children;
+export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref39) {
+  var children = _ref39.children;
   return jsx("div", {
     css: downloadButtonWrapperStyles
   }, children);
 };
-export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref35) {
-  var datatestId = _ref35['data-testid'],
-    children = _ref35.children;
+export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref40) {
+  var datatestId = _ref40['data-testid'],
+    children = _ref40.children;
   return jsx("div", {
     css: customVideoPlayerWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-export var SidebarWrapper = function SidebarWrapper(_ref36) {
-  var datatestId = _ref36['data-testid'],
-    children = _ref36.children;
+export var SidebarWrapper = function SidebarWrapper(_ref41) {
+  var datatestId = _ref41['data-testid'],
+    children = _ref41.children;
   return jsx("div", {
     css: sidebarWrapperStyles,
     "data-testid": datatestId
   }, children);
 };
-export var SpinnerWrapper = function SpinnerWrapper(_ref37) {
-  var children = _ref37.children;
+export var SpinnerWrapper = function SpinnerWrapper(_ref42) {
+  var children = _ref42.children;
   return jsx("div", {
     css: spinnerWrapperStyles
   }, children);
 };
-export var FormattedMessageWrapper = function FormattedMessageWrapper(_ref38) {
-  var children = _ref38.children;
+export var FormattedMessageWrapper = function FormattedMessageWrapper(_ref43) {
+  var children = _ref43.children;
   return jsx("span", {
     css: formattedMessageWrapperStyles
   }, children);