/* styleWrappers-compiled.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./styleWrappers-compiled.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @atlaskit/design-system/use-tokens-typography */

import { forwardRef, useMemo } from 'react';
import { TouchScrollable } from 'react-scrolllock';
import { useMergeRefs } from 'use-callback-ref';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, xcss } from '@atlaskit/primitives';
import Heading from '@atlaskit/heading';
const blanketStyles = null;
const headerWrapperStyles = null;
const archiveHeaderWrapperStyles = null;
const listWrapperStyles = null;
const closeButtonWrapperStyles = null;
const contentWrapperStyles = null;
const contentWrapperStyleWithSideBar = null;
const zoomWrapperStyles = null;
const zoomCenterControlsStyles = null;
const zoomRightControlsStyles = null;
const zoomLevelIndicatorStyles = null;
const hdIconGroupWrapperStyles = null;
const errorMessageWrapperStyles = null;
const errorImageStyles = null;
const videoStyles = null;
const pdfWrapperStyles = null;
const arrowStyles = null;
const arrowWrapperStyles = null;
const arrowsWrapperStyles = null;
const leftWrapperStyles = null;
const leftWrapperStylesWithSideBar = null;
const rightWrapperStyles = null;
const headerStyles = null;
const headerStyleWithSideBar = null;
const leftHeaderStyles = null;
const imageWrapperStyles = null;
const baselineExtendStyles = null;
const imgStyles = null;
const pixelatedImgStyles = null;
const medatadataTextWrapperStyles = null;
const metadataWrapperStyles = null;
const metadataFileNameStyles = null;
const metadataSubTextStyles = null;
const metadataIconWrapperStyles = xcss({
  paddingTop: 'space.050',
  paddingRight: 'space.150'
});
const rightHeaderStyles = null;
const customAudioPlayerWrapperStyles = null;
const audioPlayerStyles = null;
const audioStyles = null;
const audioCoverStyles = null;
const defaultCoverWrapperStyles = null;
const downloadButtonWrapperStyles = null;
const customVideoPlayerWrapperStyles = null;
const sidebarWrapperStyles = null;
const spinnerWrapperStyles = null;
const 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
export const Blanket = ({
  'data-testid': datatestId,
  className,
  children
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": datatestId
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
  ,
  className: ax(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", className]),
  role: "dialog",
  "aria-modal": "true",
  "aria-labelledby": "media.media-viewer.file.name"
}, children);
export const HeaderWrapper = ({
  className,
  children,
  isArchiveSideBarVisible
}) => {
  return /*#__PURE__*/React.createElement("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: 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';
export const ListWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o"])
}, children);
ListWrapper.displayName = 'ListWrapper';
export const ArrowsWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  id: "media-viewer-navigation",
  className: ax(["_1e0c1txw _kqswstnw _154i1ssb _t9ec1i34 _1ltvidpf _1bsb1osq"])
}, children);
export const CloseButtonWrapper = ({
  className,
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_kqswstnw _154i1ejb _1xi2v47k _1pbyuou7", className])
}, children);
export const ContentWrapper = ({
  isSidebarVisible,
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1bsb1osq", isSidebarVisible && "_1bsbyazj"])
}, children);
export const ZoomWrapper = ({
  className,
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1bsb1osq _kqswstnw _94n5idpf _4t3i1uc6 _1itkdlpg _tzy41w01 _lcxvglyw _vchhusvi _1e0c1txw _4cvresu3 _ca0qymxu _n3td1yov _u5f31ejb _19bv1ejb", className])
}, children);
export const ZoomCenterControls = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_zulp1yov _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
}, children);
export const ZoomRightControls = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_zulp1yov _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
}, children);
export const ZoomLevelIndicator = ({
  children
}) => /*#__PURE__*/React.createElement("span", {
  "data-testid": "zoom-level-indicator",
  className: ax(["_vwz4zwfg _4t3izwfg _s7n4nkob"])
}, children);
export const HDIconGroupWrapper = ({
  className,
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_zulp1yov _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
}, children);
export const ErrorMessageWrapper = ({
  'data-testid': datatestId,
  children
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": datatestId,
  className: ax(["_y3gn1h6o _syaz1poe _zcqx1osq"])
}, children);
export const ErrorImage = ({
  src,
  alt
}) => /*#__PURE__*/React.createElement("img", {
  alt: alt,
  src: src,
  className: ax(["_otyr1yov _uiztglyw"])
});
export const Video = ({
  autoPlay,
  controls,
  src
}) => /*#__PURE__*/React.createElement("video", {
  autoPlay: autoPlay,
  controls: controls,
  src: src,
  className: ax(["_1bsbauwl _4t3i1kxc"])
});
const PDFWrapperBody = /*#__PURE__*/forwardRef(({
  innerRef,
  'data-testid': datatestId,
  children
}, ref) => {
  const bodyRef = useMergeRefs([ref, innerRef]);
  return /*#__PURE__*/React.createElement("div", {
    ref: bodyRef,
    "data-testid": datatestId,
    className: ax(["_1reo1wug _18m91wug _kqswstnw _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _1l1f1n9t"])
  }, children);
});
export const PDFWrapper = /*#__PURE__*/forwardRef((props, ref) => {
  return /*#__PURE__*/React.createElement(TouchScrollable, null, /*#__PURE__*/React.createElement(PDFWrapperBody, _extends({
    innerRef: ref
  }, props)));
});
export const Arrow = ({
  className,
  children
}) => /*#__PURE__*/React.createElement("span", {
  className: ax(["_80omtlke _11pt15ty _di7o9txx _20ka1poe", className])
}, children);
export const LeftWrapper = ({
  children,
  isArchiveSideBarVisible
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv"])
}, children);
export const RightWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf"])
}, children);

// header.tsx

export const Header = ({
  children,
  isArchiveSideBarVisible,
  className
}) => /*#__PURE__*/React.createElement("div", {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
  className: ax(["_1e0c1txw _19bvidpf", isArchiveSideBarVisible && "_19bv1mjv", className])
}, children);
export const LeftHeader = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1vgl1rj4"])
}, children);
export const ImageWrapper = /*#__PURE__*/forwardRef(({
  children,
  'data-testid': datatestId,
  onClick,
  style,
  className
}, ref) => /*#__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: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
}, children));
export const BaselineExtend = () => /*#__PURE__*/React.createElement("div", {
  className: ax(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
});
export const Img = ({
  canDrag,
  isDragging,
  shouldPixelate,
  'data-testid': datatestId,
  src,
  style,
  onLoad,
  onError,
  onMouseDown,
  alt,
  className
}) => {
  const cursor = useMemo(() => {
    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: 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: {
      cursor,
      ...style
    },
    onLoad: onLoad,
    onError: onError,
    onMouseDown: onMouseDown
  });
};
export const MedatadataTextWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1reo15vq _18m915vq"])
}, children);
export const MetadataWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1e0c1txw"])
}, children);
export const MetadataFileName = ({
  'data-testid': datatestId,
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1pnf15vq _1kvn15vq _12nx2smr _1e8s1osq _kmu51l2s _7csf1q9c _1twl1wq8 _1nda1poe"])
}, /*#__PURE__*/React.createElement(Heading, {
  as: "h1",
  size: "medium",
  id: "media.media-viewer.file.name",
  testId: datatestId
}, children));
export const MetadataSubText = ({
  'data-testid': datatestId,
  children
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": datatestId,
  className: ax(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _syaz1poe"])
}, children);
export const MetadataIconWrapper = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: metadataIconWrapperStyles
}, children);
export const RightHeader = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_y3gnusic _2hwx1jfw _1ul9uuw1 _1vgl1rj4"])
}, children);
export const CustomAudioPlayerWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_kqswstnw _94n5idpf _1ltvidpf _1bsb1osq"])
}, children);
export const AudioPlayer = ({
  'data-testid': datatestId,
  children
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": datatestId,
  className: ax(["_2rkofajl _1reo15vq _18m915vq _bfhk1tzm _4cvr1h6o _1bah1h6o _1bsb1kdj _4t3i1kdj _1e0c1txw _2lx21bp4 _kqswh2mm"])
}, children);
AudioPlayer.displayName = 'AudioPlayer';
export const Audio = /*#__PURE__*/forwardRef(({
  autoPlay,
  controls,
  src,
  preload
}, ref) => /*#__PURE__*/React.createElement("audio", {
  ref: ref,
  autoPlay: autoPlay,
  controls: controls,
  src: src,
  preload: preload,
  className: ax(["_1bsb1osq _kqswstnw _94n5idpf _1ltvidpf"])
}));
export const AudioCover = ({
  src,
  alt
}) => /*#__PURE__*/React.createElement("img", {
  alt: alt,
  src: src,
  className: ax(["_1bsb1osq _4t3i1osq _5ralzm06 _bfhkr3uz"])
});
export const DefaultCoverWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syaz1rlb _umc418ws"])
}, children);
export const DownloadButtonWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_19pk1cfm _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
}, children);
export const CustomVideoPlayerWrapper = ({
  'data-testid': datatestId,
  children
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": datatestId,
  className: ax(["_1p6zkb7n _1vnlkb7n _qbrxf1ug _1y2kauwl _z18o1kxc _1ghp1kxc"])
}, children);
export const SidebarWrapper = ({
  'data-testid': datatestId,
  children
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": datatestId,
  className: ax(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhky0hh _syaz1vvf"])
}, children);
export const SpinnerWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq"])
}, children);
export const FormattedMessageWrapper = ({
  children
}) => /*#__PURE__*/React.createElement("span", null, children);