@atlaskit/media-viewer 52.4.36 → 52.5.0

package/dist/cjs/styleWrappers.js

@@ -1,3 +1,4 @@
+/* styleWrappers.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,139 +7,411 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
+require("./styleWrappers.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
-var _styleWrappersCompiled = require("./styleWrappers-compiled");
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reactScrolllock = require("react-scrolllock");
+var _useCallbackRef = require("use-callback-ref");
+var _primitives = require("@atlaskit/primitives");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/design-system/use-tokens-typography */ // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+var blanketStyles = null;
+var headerWrapperStyles = null;
+var archiveHeaderWrapperStyles = null;
+var listWrapperStyles = null;
+var closeButtonWrapperStyles = null;
+var contentWrapperStyles = null;
+var contentWrapperStyleWithSideBar = null;
+var zoomWrapperStyles = null;
+var zoomCenterControlsStyles = null;
+var zoomRightControlsStyles = null;
+var zoomLevelIndicatorStyles = null;
+var hdIconGroupWrapperStyles = null;
+var errorMessageWrapperStyles = null;
+var errorImageStyles = null;
+var videoStyles = null;
+var pdfWrapperStyles = null;
+var arrowStyles = null;
+var arrowWrapperStyles = null;
+var arrowsWrapperStyles = null;
+var leftWrapperStyles = null;
+var leftWrapperStylesWithSideBar = null;
+var rightWrapperStyles = null;
+var headerStyles = null;
+var headerStyleWithSideBar = null;
+var leftHeaderStyles = null;
+var imageWrapperStyles = null;
+var baselineExtendStyles = null;
+var imgStyles = null;
+var pixelatedImgStyles = null;
+var medatadataTextWrapperStyles = null;
+var metadataWrapperStyles = null;
+var metadataFileNameStyles = null;
+var metadataSubTextStyles = null;
+var metadataIconWrapperStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.050',
+  paddingRight: 'space.150'
+});
+var rightHeaderStyles = null;
+var customAudioPlayerWrapperStyles = null;
+var audioPlayerStyles = null;
+var audioStyles = null;
+var audioCoverStyles = null;
+var defaultCoverWrapperStyles = null;
+var downloadButtonWrapperStyles = null;
+var customVideoPlayerWrapperStyles = null;
+var sidebarWrapperStyles = null;
+var spinnerWrapperStyles = null;
+var formattedMessageWrapperStyles = null;
 // 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(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.Blanket, props);
-};
-var HeaderWrapper = exports.HeaderWrapper = function HeaderWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.HeaderWrapper, props);
+var Blanket = exports.Blanket = function Blanket(_ref) {
+  var datatestId = _ref['data-testid'],
+    className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.ax)(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", className]),
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "media.media-viewer.file.name"
+  }, children);
+};
+var HeaderWrapper = exports.HeaderWrapper = function HeaderWrapper(_ref2) {
+  var className = _ref2.className,
+    children = _ref2.children,
+    isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_11q75a80 _kqswstnw _154iidpf _1ltvidpf _1bsb1osq _4t3i1uc6 _tzy41w01 _ouxlidpf _syaz1poe _k48p1wq8 _ca0q1ejb _n3td1ejb _19bv1ejb _u5f31ejb _vchhusvi _lcxvglyw _1pby3tda", isArchiveSideBarVisible && "_ouxl1klg", className])
+  }, children);
 };
 HeaderWrapper.displayName = 'HeaderWrapper';
-var ListWrapper = exports.ListWrapper = function ListWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ListWrapper, props);
+var ListWrapper = exports.ListWrapper = function ListWrapper(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, children);
 };
 ListWrapper.displayName = 'ListWrapper';
-var ArrowsWrapper = exports.ArrowsWrapper = function ArrowsWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ArrowsWrapper, props);
-};
-var CloseButtonWrapper = exports.CloseButtonWrapper = function CloseButtonWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.CloseButtonWrapper, props);
-};
-var ContentWrapper = exports.ContentWrapper = function ContentWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ContentWrapper, props);
-};
-var ZoomWrapper = exports.ZoomWrapper = function ZoomWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ZoomWrapper, props);
-};
-var ZoomCenterControls = exports.ZoomCenterControls = function ZoomCenterControls(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ZoomCenterControls, props);
-};
-var ZoomRightControls = exports.ZoomRightControls = function ZoomRightControls(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ZoomRightControls, props);
-};
-var ZoomLevelIndicator = exports.ZoomLevelIndicator = function ZoomLevelIndicator(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ZoomLevelIndicator, (0, _extends2.default)({}, props, {
-    "data-testid": "zoom-level-indicator"
-  }));
-};
-var HDIconGroupWrapper = exports.HDIconGroupWrapper = function HDIconGroupWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.HDIconGroupWrapper, props);
-};
-var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ErrorMessageWrapper, props);
-};
-var ErrorImage = exports.ErrorImage = function ErrorImage(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ErrorImage, props);
-};
-var Video = exports.Video = function Video(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.Video, props);
-};
+var ArrowsWrapper = exports.ArrowsWrapper = function ArrowsWrapper(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "media-viewer-navigation",
+    className: (0, _runtime.ax)(["_1e0c1txw _kqswstnw _154i1ssb _t9ec1i34 _1ltvidpf _1bsb1osq"])
+  }, children);
+};
+var CloseButtonWrapper = exports.CloseButtonWrapper = function CloseButtonWrapper(_ref5) {
+  var className = _ref5.className,
+    children = _ref5.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _154i1ejb _1xi2v47k _1pbyuou7", className])
+  }, children);
+};
+var ContentWrapper = exports.ContentWrapper = function ContentWrapper(_ref6) {
+  var isSidebarVisible = _ref6.isSidebarVisible,
+    children = _ref6.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1bsb1osq", isSidebarVisible && "_1bsbyazj"])
+  }, children);
+};
+var ZoomWrapper = exports.ZoomWrapper = function ZoomWrapper(_ref7) {
+  var className = _ref7.className,
+    children = _ref7.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1bsb1osq _kqswstnw _94n5idpf _4t3i1uc6 _1itkdlpg _tzy41w01 _lcxvglyw _vchhusvi _1e0c1txw _4cvresu3 _ca0qymxu _n3td1yov _u5f31ejb _19bv1ejb", className])
+  }, children);
+};
+var ZoomCenterControls = exports.ZoomCenterControls = function ZoomCenterControls(_ref8) {
+  var children = _ref8.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulp1yov _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
+  }, children);
+};
+var ZoomRightControls = exports.ZoomRightControls = function ZoomRightControls(_ref9) {
+  var children = _ref9.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulp1yov _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
+  }, children);
+};
+var ZoomLevelIndicator = exports.ZoomLevelIndicator = function ZoomLevelIndicator(_ref0) {
+  var children = _ref0.children;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "zoom-level-indicator",
+    className: (0, _runtime.ax)(["_vwz4zwfg _4t3izwfg _s7n4nkob"])
+  }, children);
+};
+var HDIconGroupWrapper = exports.HDIconGroupWrapper = function HDIconGroupWrapper(_ref1) {
+  var className = _ref1.className,
+    children = _ref1.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulp1yov _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
+  }, children);
+};
+var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(_ref10) {
+  var datatestId = _ref10['data-testid'],
+    children = _ref10.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: (0, _runtime.ax)(["_y3gn1h6o _syaz1poe _zcqx1osq"])
+  }, children);
+};
+var ErrorImage = exports.ErrorImage = function ErrorImage(_ref11) {
+  var src = _ref11.src,
+    alt = _ref11.alt;
+  return /*#__PURE__*/React.createElement("img", {
+    alt: alt,
+    src: src,
+    className: (0, _runtime.ax)(["_otyr1yov _uiztglyw"])
+  });
+};
+var Video = exports.Video = function Video(_ref12) {
+  var autoPlay = _ref12.autoPlay,
+    controls = _ref12.controls,
+    src = _ref12.src;
+  return /*#__PURE__*/React.createElement("video", {
+    autoPlay: autoPlay,
+    controls: controls,
+    src: src,
+    className: (0, _runtime.ax)(["_1bsbauwl _4t3i1kxc"])
+  });
+};
+var PDFWrapperBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref13, ref) {
+  var innerRef = _ref13.innerRef,
+    datatestId = _ref13['data-testid'],
+    children = _ref13.children;
+  var bodyRef = (0, _useCallbackRef.useMergeRefs)([ref, innerRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: bodyRef,
+    "data-testid": datatestId,
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _kqswstnw _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _1l1f1n9t"])
+  }, children);
+});
 var PDFWrapper = exports.PDFWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.PDFWrapper, (0, _extends2.default)({
-    ref: ref
-  }, props));
+  return /*#__PURE__*/React.createElement(_reactScrolllock.TouchScrollable, null, /*#__PURE__*/React.createElement(PDFWrapperBody, (0, _extends2.default)({
+    innerRef: ref
+  }, props)));
 });
-var Arrow = exports.Arrow = function Arrow(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.Arrow, props);
-};
-var LeftWrapper = exports.LeftWrapper = function LeftWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.LeftWrapper, props);
-};
-var RightWrapper = exports.RightWrapper = function RightWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.RightWrapper, props);
+var Arrow = exports.Arrow = function Arrow(_ref14) {
+  var className = _ref14.className,
+    children = _ref14.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_80omtlke _11pt15ty _di7o9txx _20ka1poe", className])
+  }, children);
+};
+var LeftWrapper = exports.LeftWrapper = function LeftWrapper(_ref15) {
+  var children = _ref15.children,
+    isArchiveSideBarVisible = _ref15.isArchiveSideBarVisible;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv"])
+  }, children);
+};
+var RightWrapper = exports.RightWrapper = function RightWrapper(_ref16) {
+  var children = _ref16.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf"])
+  }, children);
 };
 
 // header.tsx
 
-var Header = exports.Header = function Header(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.Header, props);
-};
-var LeftHeader = exports.LeftHeader = function LeftHeader(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.LeftHeader, props);
-};
-var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.ImageWrapper, (0, _extends2.default)({
-    ref: ref
-  }, props));
+var Header = exports.Header = function Header(_ref17) {
+  var children = _ref17.children,
+    isArchiveSideBarVisible = _ref17.isArchiveSideBarVisible,
+    className = _ref17.className;
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)(["_1e0c1txw _19bvidpf", isArchiveSideBarVisible && "_19bv1mjv", className])
+  }, children);
+};
+var LeftHeader = exports.LeftHeader = function LeftHeader(_ref18) {
+  var children = _ref18.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1vgl1rj4"])
+  }, children);
+};
+var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref19, ref) {
+  var children = _ref19.children,
+    datatestId = _ref19['data-testid'],
+    onClick = _ref19.onClick,
+    style = _ref19.style,
+    className = _ref19.className;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    onClick: onClick,
+    ref: ref,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
+  }, children);
 });
 var BaselineExtend = exports.BaselineExtend = function BaselineExtend() {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.BaselineExtend, null);
-};
-var Img = exports.Img = function Img(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.Img, props);
-};
-var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.MedatadataTextWrapper, props);
-};
-var MetadataWrapper = exports.MetadataWrapper = function MetadataWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.MetadataWrapper, props);
-};
-var MetadataFileName = exports.MetadataFileName = function MetadataFileName(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.MetadataFileName, props);
-};
-var MetadataSubText = exports.MetadataSubText = function MetadataSubText(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.MetadataSubText, props);
-};
-var MetadataIconWrapper = exports.MetadataIconWrapper = function MetadataIconWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.MetadataIconWrapper, props);
-};
-var RightHeader = exports.RightHeader = function RightHeader(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.RightHeader, props);
-};
-var CustomAudioPlayerWrapper = exports.CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.CustomAudioPlayerWrapper, props);
-};
-var AudioPlayer = exports.AudioPlayer = function AudioPlayer(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.AudioPlayer, props);
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
+  });
+};
+var Img = exports.Img = function Img(_ref20) {
+  var canDrag = _ref20.canDrag,
+    isDragging = _ref20.isDragging,
+    shouldPixelate = _ref20.shouldPixelate,
+    datatestId = _ref20['data-testid'],
+    src = _ref20.src,
+    style = _ref20.style,
+    onLoad = _ref20.onLoad,
+    onError = _ref20.onError,
+    onMouseDown = _ref20.onMouseDown,
+    alt = _ref20.alt,
+    className = _ref20.className;
+  var cursor = (0, _react.useMemo)(function () {
+    if (canDrag && isDragging) {
+      return 'grabbing';
+    } else if (canDrag) {
+      return 'grab';
+    } else {
+      return 'auto';
+    }
+  }, [canDrag, isDragging]);
+  return /*#__PURE__*/React.createElement("img", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
+    alt: alt,
+    "data-testid": datatestId,
+    src: src
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: _objectSpread({
+      cursor: cursor
+    }, style),
+    onLoad: onLoad,
+    onError: onError,
+    onMouseDown: onMouseDown
+  });
+};
+var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {
+  var children = _ref21.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
+  }, children);
+};
+var MetadataWrapper = exports.MetadataWrapper = function MetadataWrapper(_ref22) {
+  var children = _ref22.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw"])
+  }, children);
+};
+var MetadataFileName = exports.MetadataFileName = function MetadataFileName(_ref23) {
+  var datatestId = _ref23['data-testid'],
+    children = _ref23.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1pnf15vq _1kvn15vq _12nx2smr _1e8s1osq _kmu51l2s _7csf1q9c _1twl1wq8 _1nda1poe"])
+  }, /*#__PURE__*/React.createElement(_heading.default, {
+    as: "h1",
+    size: "medium",
+    id: "media.media-viewer.file.name",
+    testId: datatestId
+  }, children));
+};
+var MetadataSubText = exports.MetadataSubText = function MetadataSubText(_ref24) {
+  var datatestId = _ref24['data-testid'],
+    children = _ref24.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _syaz1poe"])
+  }, children);
+};
+var MetadataIconWrapper = exports.MetadataIconWrapper = function MetadataIconWrapper(_ref25) {
+  var children = _ref25.children;
+  return /*#__PURE__*/React.createElement(_primitives.Box, {
+    xcss: metadataIconWrapperStyles
+  }, children);
+};
+var RightHeader = exports.RightHeader = function RightHeader(_ref26) {
+  var children = _ref26.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_y3gnusic _2hwx1jfw _1ul9uuw1 _1vgl1rj4"])
+  }, children);
+};
+var CustomAudioPlayerWrapper = exports.CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref27) {
+  var children = _ref27.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _94n5idpf _1ltvidpf _1bsb1osq"])
+  }, children);
+};
+var AudioPlayer = exports.AudioPlayer = function AudioPlayer(_ref28) {
+  var datatestId = _ref28['data-testid'],
+    children = _ref28.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: (0, _runtime.ax)(["_2rkofajl _1reo15vq _18m915vq _bfhk1tzm _4cvr1h6o _1bah1h6o _1bsb1kdj _4t3i1kdj _1e0c1txw _2lx21bp4 _kqswh2mm"])
+  }, children);
 };
 AudioPlayer.displayName = 'AudioPlayer';
-var Audio = exports.Audio = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.Audio, (0, _extends2.default)({
-    ref: ref
-  }, props));
+var Audio = exports.Audio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref29, ref) {
+  var autoPlay = _ref29.autoPlay,
+    controls = _ref29.controls,
+    src = _ref29.src,
+    preload = _ref29.preload;
+  return /*#__PURE__*/React.createElement("audio", {
+    ref: ref,
+    autoPlay: autoPlay,
+    controls: controls,
+    src: src,
+    preload: preload,
+    className: (0, _runtime.ax)(["_1bsb1osq _kqswstnw _94n5idpf _1ltvidpf"])
+  });
 });
-var AudioCover = exports.AudioCover = function AudioCover(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.AudioCover, props);
-};
-var DefaultCoverWrapper = exports.DefaultCoverWrapper = function DefaultCoverWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.DefaultCoverWrapper, props);
-};
-var DownloadButtonWrapper = exports.DownloadButtonWrapper = function DownloadButtonWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.DownloadButtonWrapper, props);
-};
-var CustomVideoPlayerWrapper = exports.CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.CustomVideoPlayerWrapper, props);
-};
-var SidebarWrapper = exports.SidebarWrapper = function SidebarWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.SidebarWrapper, props);
-};
-var SpinnerWrapper = exports.SpinnerWrapper = function SpinnerWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.SpinnerWrapper, props);
-};
-var FormattedMessageWrapper = exports.FormattedMessageWrapper = function FormattedMessageWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(_styleWrappersCompiled.FormattedMessageWrapper, props);
+var AudioCover = exports.AudioCover = function AudioCover(_ref30) {
+  var src = _ref30.src,
+    alt = _ref30.alt;
+  return /*#__PURE__*/React.createElement("img", {
+    alt: alt,
+    src: src,
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _5ralzm06 _bfhkr3uz"])
+  });
+};
+var DefaultCoverWrapper = exports.DefaultCoverWrapper = function DefaultCoverWrapper(_ref31) {
+  var children = _ref31.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syaz1rlb _umc418ws"])
+  }, children);
+};
+var DownloadButtonWrapper = exports.DownloadButtonWrapper = function DownloadButtonWrapper(_ref32) {
+  var children = _ref32.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_19pk1cfm _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
+  }, children);
+};
+var CustomVideoPlayerWrapper = exports.CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref33) {
+  var datatestId = _ref33['data-testid'],
+    children = _ref33.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: (0, _runtime.ax)(["_1p6zkb7n _1vnlkb7n _qbrxf1ug _1y2kauwl _z18o1kxc _1ghp1kxc"])
+  }, children);
+};
+var SidebarWrapper = exports.SidebarWrapper = function SidebarWrapper(_ref34) {
+  var datatestId = _ref34['data-testid'],
+    children = _ref34.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": datatestId,
+    className: (0, _runtime.ax)(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhky0hh _syaz1vvf"])
+  }, children);
+};
+var SpinnerWrapper = exports.SpinnerWrapper = function SpinnerWrapper(_ref35) {
+  var children = _ref35.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq"])
+  }, children);
+};
+var FormattedMessageWrapper = exports.FormattedMessageWrapper = function FormattedMessageWrapper(_ref36) {
+  var children = _ref36.children;
+  return /*#__PURE__*/React.createElement("span", null, children);
 };