@atlaskit/media-viewer 52.9.0 → 52.9.1

package/dist/cjs/viewers/codeViewer/styles.js

@@ -5,12 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.codeViewerHeaderBarStyles = exports.codeViewerHTMLStyles = exports.codeViewWrapperStyles = void 0;
 var _react = require("@emotion/react");
-var _theme = require("@atlaskit/theme");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var codeViewWrapperStyles = exports.codeViewWrapperStyles = (0, _react.css)({
   position: 'absolute',
@@ -19,7 +15,7 @@ var codeViewWrapperStyles = exports.codeViewWrapperStyles = (0, _react.css)({
   right: 0,
   bottom: 0,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: "var(--ds-surface, ".concat(_theme.colors.N20, ")"),
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
   overflow: 'auto'
 });
 
@@ -35,6 +31,6 @@ var codeViewerHTMLStyles = exports.codeViewerHTMLStyles = (0, _react.css)({
   display: 'flex',
   overflowX: 'auto',
   whiteSpace: 'pre',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   padding: "var(--ds-space-100, 8px)"
 });

package/dist/es2019/item-viewer.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useState, useRef } from 'react';
+import React, { Suspense, useCallback, useEffect, useState, useRef } from 'react';
 import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier, toCommonMediaClientError } from '@atlaskit/media-client';
 import { Text } from '@atlaskit/primitives/compiled';
@@ -21,32 +21,73 @@ import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
 import { CustomViewer } from './viewers/customViewer/customViewer';
-const ImageViewer = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image').then(mod => mod.ImageViewer),
+function loadImageViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image');
+}
+const LoadableImageViewer = Loadable({
+  loader: () => loadImageViewer().then(mod => mod.ImageViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const VideoViewer = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'./viewers/video').then(mod => mod.VideoViewer),
+const LazyImageViewer = /*#__PURE__*/React.lazy(() => loadImageViewer().then(mod => ({
+  default: mod.ImageViewer
+})));
+function loadVideoViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'./viewers/video');
+}
+const LoadableVideoViewer = Loadable({
+  loader: () => loadVideoViewer().then(mod => mod.VideoViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const AudioViewer = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'./viewers/audio').then(mod => mod.AudioViewer),
+const LazyVideoViewer = /*#__PURE__*/React.lazy(() => loadVideoViewer().then(mod => ({
+  default: mod.VideoViewer
+})));
+function loadAudioViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'./viewers/audio');
+}
+const LoadableAudioViewer = Loadable({
+  loader: () => loadAudioViewer().then(mod => mod.AudioViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const DocViewer = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'./viewers/doc').then(mod => mod.DocViewer),
+const LazyAudioViewer = /*#__PURE__*/React.lazy(() => loadAudioViewer().then(mod => ({
+  default: mod.AudioViewer
+})));
+function loadDocViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'./viewers/doc');
+}
+const LoadableDocViewer = Loadable({
+  loader: () => loadDocViewer().then(mod => mod.DocViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const CodeViewer = Loadable({
-  loader: () => import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer').then(mod => mod.CodeViewer),
+const LazyDocViewer = /*#__PURE__*/React.lazy(() => loadDocViewer().then(mod => ({
+  default: mod.DocViewer
+})));
+function loadCodeViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer');
+}
+const LoadableCodeViewer = Loadable({
+  loader: () => loadCodeViewer().then(mod => mod.CodeViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const SvgViewer = Loadable({
+const LazyCodeViewer = /*#__PURE__*/React.lazy(() => loadCodeViewer().then(mod => ({
+  default: mod.CodeViewer
+})));
+function loadSvgViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_svgViewer" */'./viewers/svg');
+}
+const LoadableSvgViewer = Loadable({
   loader: () =>
-  // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+  // @ts-ignore [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
   import( /* webpackChunkName: "@atlaskit-internal_svgViewer" */'./viewers/svg').then(mod => mod.SvgViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
+const LazySvgViewer = /*#__PURE__*/React.lazy(() => loadSvgViewer().then(mod => ({
+  default: mod.SvgViewer
+})));
+const ViewerSuspense = ({
+  children
+}) => /*#__PURE__*/React.createElement(Suspense, {
+  fallback: /*#__PURE__*/React.createElement(Spinner, null)
+}, children);
 // Consts
 export const isExternalImageItem = fileItem => fileItem === 'external-image';
 export const isFileStateItem = fileItem => !isExternalImageItem(fileItem);
@@ -243,13 +284,22 @@ export const ItemViewerBase = ({
       if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
         return renderError(new MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
       }
-      return /*#__PURE__*/React.createElement(CodeViewer, _extends({
+      return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyCodeViewer, _extends({
+        onSuccess: onSuccess,
+        onError: onLoadFail
+      }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableCodeViewer, _extends({
         onSuccess: onSuccess,
         onError: onLoadFail
       }, viewerProps));
     }
     if (isFileIdentifier(identifier) && fileItem.mimeType === 'image/svg+xml') {
-      return /*#__PURE__*/React.createElement(SvgViewer, {
+      return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazySvgViewer, {
+        identifier: identifier,
+        onLoad: onSuccess,
+        onError: onLoadFail,
+        onClose: onClose,
+        traceContext: traceContext
+      })) : /*#__PURE__*/React.createElement(LoadableSvgViewer, {
         identifier: identifier,
         onLoad: onSuccess,
         onError: onLoadFail,
@@ -262,26 +312,42 @@ export const ItemViewerBase = ({
     } = fileItem;
     switch (mediaType) {
       case 'image':
-        return /*#__PURE__*/React.createElement(ImageViewer, _extends({
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyImageViewer, _extends({
+          onLoad: onSuccess,
+          onError: onLoadFail,
+          contextId: contextId
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableImageViewer, _extends({
           onLoad: onSuccess,
           onError: onLoadFail,
           contextId: contextId
         }, viewerProps));
       case 'audio':
-        return /*#__PURE__*/React.createElement(AudioViewer, _extends({
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyAudioViewer, _extends({
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableAudioViewer, _extends({
           showControls: showControls,
           onCanPlay: onSuccess,
           onError: onLoadFail
         }, viewerProps));
       case 'video':
-        return /*#__PURE__*/React.createElement(VideoViewer, _extends({
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyVideoViewer, _extends({
+          identifier: identifier,
+          showControls: showControls,
+          onCanPlay: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableVideoViewer, _extends({
           identifier: identifier,
           showControls: showControls,
           onCanPlay: onSuccess,
           onError: onLoadFail
         }, viewerProps));
       case 'doc':
-        return /*#__PURE__*/React.createElement(DocViewer, _extends({
+        return fg('platform_media_react19_support') ? /*#__PURE__*/React.createElement(ViewerSuspense, null, /*#__PURE__*/React.createElement(LazyDocViewer, _extends({
+          onSuccess: onSuccess,
+          onError: onLoadFail
+        }, viewerProps))) : /*#__PURE__*/React.createElement(LoadableDocViewer, _extends({
           onSuccess: onSuccess,
           onError: onLoadFail
         }, viewerProps));

package/dist/es2019/styleWrappers.compiled.css

@@ -2,7 +2,7 @@
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
-._zulp1yov{gap:var(--ds-space-100,10px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
 ._154i1ejb{top:var(--ds-space-300,24px)}
 ._154i1ssb{top:50%}
 ._154iidpf{top:0}
@@ -15,7 +15,7 @@
 ._19bvidpf{padding-left:0}
 ._19bvv47k{padding-left:var(--ds-space-250,20px)}
 ._19kzstnw >*{position:absolute}
-._19pk1cfm{margin-top:var(--ds-space-300,28px)}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
 ._1bah1h6o{justify-content:center}
 ._1bahusic{justify-content:right}
 ._1bsb1ber{width:26pc}
@@ -67,10 +67,10 @@
 ._94n5idpf{bottom:0}
 ._bfhk1tzm{background-color:#22272b}
 ._bfhkr3uz{background-color:#000}
-._bfhky0hh{background-color:var(--ds-surface,#101214)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0q1azu{padding-top:var(--ds-space-100,8px) var(--ds-space-300,24px)}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
 ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
-._ca0qymxu{padding-top:var(--ds-space-100,10px) var(--ds-space-300,24px)}
 ._di7o9txx._di7o9txx button:hover svg{color:#b6c2cf}
 ._i0dlf1ug{flex-basis:0%}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
@@ -80,10 +80,10 @@
 ._lcxv1rj4{pointer-events:all}
 ._lcxvglyw{pointer-events:none}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
-._n3td1yov{padding-bottom:var(--ds-space-100,10px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
 ._o5721q9c{white-space:nowrap}
-._otyr1yov{margin-bottom:var(--ds-space-100,10px)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
 ._ouxl1klg{background-position:300px 0}
 ._ouxlidpf{background-position:0}
 ._p12f1osq{max-width:100%}
@@ -91,8 +91,7 @@
 ._qvww1osq._qvww1osq h1{max-width:100%}
 ._s7n4nkob{vertical-align:middle}
 ._syaz1poe{color:#c7d1db}
-._syaz1rlb{color:var(--ds-text,#9fadbc)}
-._syaz1vvf{color:var(--ds-text,#c7d1db)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._t9ec1i34{transform:translateY(-50%)}
 ._tzy41w01{opacity:.85}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}

package/dist/es2019/styleWrappers.js

@@ -112,17 +112,17 @@ 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])
+  className: ax(["_1bsb1osq _kqswstnw _94n5idpf _4t3i1uc6 _1itkdlpg _tzy41w01 _lcxvglyw _vchhusvi _1e0c1txw _4cvresu3 _ca0q1azu _n3tdu2gc _u5f31ejb _19bv1ejb", className])
 }, children);
 export const ZoomCenterControls = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_zulp1yov _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
+  className: ax(["_zulpu2gc _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
 }, children);
 export const ZoomRightControls = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_zulp1yov _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
+  className: ax(["_zulpu2gc _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
 }, children);
 export const ZoomLevelIndicator = ({
   children
@@ -134,7 +134,7 @@ export const HDIconGroupWrapper = ({
   className,
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_zulp1yov _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
+  className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
 }, children);
 export const ErrorMessageWrapper = ({
   'data-testid': datatestId,
@@ -149,7 +149,7 @@ export const ErrorImage = ({
 }) => /*#__PURE__*/React.createElement("img", {
   alt: alt,
   src: src,
-  className: ax(["_otyr1yov _uiztglyw"])
+  className: ax(["_otyru2gc _uiztglyw"])
 });
 export const Video = ({
   autoPlay,
@@ -344,12 +344,12 @@ export const AudioCover = ({
 export const DefaultCoverWrapper = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syaz1rlb _umc418ws"])
+  className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syazi7uo _umc418ws"])
 }, children);
 export const DownloadButtonWrapper = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
-  className: ax(["_19pk1cfm _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
+  className: ax(["_19pk1ejb _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
 }, children);
 export const CustomVideoPlayerWrapper = ({
   'data-testid': datatestId,
@@ -363,7 +363,7 @@ export const SidebarWrapper = ({
   children
 }) => /*#__PURE__*/React.createElement("div", {
   "data-testid": datatestId,
-  className: ax(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhky0hh _syaz1vvf"])
+  className: ax(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhkvuon _syazi7uo"])
 }, children);
 export const SpinnerWrapper = ({
   children

package/dist/es2019/viewers/archiveSidebar/custom-button-item.compiled.css

@@ -1,7 +1,7 @@
 
-._bfhk3nif{background-color:var(--ds-background-neutral-subtle,#101214)}
-._lswu1fjw{fill:var(--ds-icon-success,#101214)}
-._syazg8nh{color:var(--ds-text,#abbbd6)}
-._30l3g8nh:hover{color:var(--ds-text,#abbbd6)}
-._irr3ebx2:hover{background-color:var(--ds-background-neutral-subtle-hovered,#a1bdd914)}._1di6j4ot:active{background-color:var(--ds-background-neutral-subtle-pressed,#a6c5e229)}
-._9h8hg8nh:active{color:var(--ds-text,#abbbd6)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._lswu4pcx{fill:var(--ds-icon-success,#6a9a23)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._30l3i7uo:hover{color:var(--ds-text,#292a2e)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
+._9h8hi7uo:active{color:var(--ds-text,#292a2e)}

package/dist/es2019/viewers/archiveSidebar/custom-button-item.js

@@ -4,7 +4,6 @@ import "./custom-button-item.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { ButtonItem } from '@atlaskit/side-navigation';
-import { DN500 } from '@atlaskit/theme/colors';
 const itemStyles = null;
 export function CustomButtonItem({
   children,
@@ -15,6 +14,6 @@ export function CustomButtonItem({
     onClick: onClick
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
   }, rest, {
-    className: ax(["_bfhk3nif _lswu1fjw _syazg8nh _irr3ebx2 _30l3g8nh _1di6j4ot _9h8hg8nh"])
+    className: ax(["_bfhksm61 _lswu4pcx _syazi7uo _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo"])
   }), children);
 }

package/dist/es2019/viewers/archiveSidebar/styleWrappers.compiled.css

@@ -10,7 +10,7 @@
 ._18u0idpf{margin-left:0}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvv47k{padding-left:var(--ds-space-250,20px)}
-._19pk1te7{margin-top:var(--ds-space-200,19px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
 ._1bah1h6o{justify-content:center}
 ._1bsb13sl{width:85%}
 ._1bsb1mjv{width:300px}
@@ -24,8 +24,8 @@
 ._1o9zkb7n{flex-shrink:1}
 ._1reo15vq{overflow-x:hidden}
 ._1xi2idpf{right:0}
-._2hwx1yov{margin-right:var(--ds-space-100,10px)}
 ._2hwxidpf{margin-right:0}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
 ._4cvr1h6o{align-items:center}
 ._4t3i1osq{height:100%}
 ._4t3iyh40{height:2px}
@@ -34,20 +34,20 @@
 ._80omtlke{cursor:pointer}
 ._94n5idpf{bottom:0}
 ._bfhk1j28{background-color:transparent}
-._bfhk21we{background-color:var(--ds-border,#a6c5e229)}
-._bfhky0hh{background-color:var(--ds-surface,#101214)}
+._bfhk1l7x{background-color:var(--ds-border,#0b120e24)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0qqslr{padding-top:22px}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._i0dl1wug{flex-basis:auto}
 ._j7hq1kq8{animation-name:k10ssv7b}
 ._kqswstnw{position:absolute}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td14y2{padding-bottom:5px}
-._n3td1vik{padding-bottom:var(--ds-space-075,5px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
 ._o5721q9c{white-space:nowrap}
-._otyr1te7{margin-bottom:var(--ds-space-200,19px)}
-._syazg8nh{color:var(--ds-text,#abbbd6)}
-._syazwydc{color:var(--ds-icon,#9fadbc)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._syaz1q3r{color:var(--ds-icon,#292a2e)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._t9ecz6y5{transform:translateY(-100%)}
 ._tzy4idpf{opacity:0}
 ._u5f31v6z{padding-right:7px}
@@ -55,7 +55,7 @@
 ._vchhusvi{box-sizing:border-box}
 ._vwz41xde{line-height:1.14286}
 ._d0altlke:hover{cursor:pointer}
-._irr3ebx2:hover{background-color:var(--ds-background-neutral-subtle-hovered,#a1bdd914)}
-._1di6j4ot:active{background-color:var(--ds-background-neutral-subtle-pressed,#a6c5e229)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
 ._1qamtlke:active{cursor:pointer}
 @keyframes k10ssv7b{0%{opacity:0;transform:translateY(-100%)}to{transform:translateY(0);opacity:1}}

package/dist/es2019/viewers/archiveSidebar/styleWrappers.js

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-import { DN500 } from '@atlaskit/theme/colors';
 export const ARCHIVE_SIDE_BAR_WIDTH = 300;
 const archiveItemViewerWrapperStyles = null;
 const archiveSideBarStyles = null;
@@ -35,7 +34,7 @@ export const ArchiveSideBar = /*#__PURE__*/forwardRef(({
 }, ref) => {
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax(["_ca0qqslr _u5f3v47k _19bvv47k _n3tdv47k _bfhky0hh _kqswstnw _1ltvidpf _154iidpf _1bsb1mjv _94n5idpf _vchhusvi _18m915zi"])
+    className: ax(["_ca0qqslr _u5f3v47k _19bvv47k _n3tdv47k _bfhkvuon _kqswstnw _1ltvidpf _154iidpf _1bsb1mjv _94n5idpf _vchhusvi _18m915zi"])
   }, children);
 });
 export const ArchiveSidebarFolderWrapper = ({
@@ -53,7 +52,7 @@ export const ArchiveDownloadButtonWrapper = ({
   return /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
     "data-testid": "media-archiveDownloadButton",
-    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syazwydc _d0altlke _irr3ebx2 _1qamtlke _1di6j4ot"])
+    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
   }, children);
 };
 export const DisabledArchiveDownloadButtonWrapper = ({
@@ -61,7 +60,7 @@ export const DisabledArchiveDownloadButtonWrapper = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "media-disabledArchiveDownloadButton",
-    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syazwydc _80om13gf"])
+    className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _80om13gf"])
   }, children);
 };
 export const SidebarItemWrapper = ({
@@ -77,7 +76,7 @@ export const ArchiveSidebarFileEntryWrapper = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     key: index,
-    className: ax(["_v564rca0 _n3td1vik _1e0c1txw _4cvr1h6o _80omtlke"])
+    className: ax(["_v564rca0 _n3td12x7 _1e0c1txw _4cvr1h6o _80omtlke"])
   }, children);
 };
 export const ArchiveLayout = ({
@@ -97,7 +96,7 @@ export const ArchiveViewerWrapper = ({
 };
 export const Separator = () => {
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_2rko1rr0 _4t3iyh40 _19pk1te7 _2hwxidpf _otyr1te7 _18u0idpf _bfhk21we _1o9zidpf"])
+    className: ax(["_2rko1rr0 _4t3iyh40 _19pkpxbi _2hwxidpf _otyrpxbi _18u0idpf _bfhk1l7x _1o9zidpf"])
   });
 };
 export const SidebarHeaderWrapper = ({
@@ -111,13 +110,13 @@ export const SidebarHeaderIcon = ({
   children
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw _4cvr1h6o _2hwx1yov _1o9zidpf"])
+    className: ax(["_1e0c1txw _4cvr1h6o _2hwxu2gc _1o9zidpf"])
   }, children);
 };
 export const SidebarHeaderEntry = ({
   children
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _1bto1l2s _o5721q9c _vwz41xde _syazg8nh"])
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _1bto1l2s _o5721q9c _vwz41xde _syazi7uo"])
   }, children);
 };

package/dist/es2019/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.compiled.css

@@ -5,6 +5,6 @@
 ._1xi2idpf{right:0}
 ._4t3i8ved{height:75px}
 ._94n5idpf{bottom:0}
-._bfhk15j7{background-color:var(--ds-surface,#f4f5f7)}
 ._bfhk1nox{background-color:#1d2125}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._kqswstnw{position:absolute}

package/dist/es2019/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.js

@@ -35,7 +35,7 @@ export const CodeRendererAdvanced = props => {
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": props.testId,
-    className: ax(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhk15j7"])
+    className: ax(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhkvuon"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_4t3i8ved _bfhk1nox"])
   }), /*#__PURE__*/React.createElement("div", {

package/dist/es2019/viewers/codeViewer/codeViewerRenderer-compiled.compiled.css

@@ -1,4 +1,4 @@
-._11c8rymc{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._154iidpf{top:0}
 ._18m91wug{overflow-y:auto}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
@@ -8,8 +8,8 @@
 ._1xi2idpf{right:0}
 ._4t3i8ved{height:75px}
 ._94n5idpf{bottom:0}
-._bfhk15j7{background-color:var(--ds-surface,#f4f5f7)}
 ._bfhk1nox{background-color:#1d2125}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._kqswstnw{position:absolute}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}

package/dist/es2019/viewers/codeViewer/codeViewerRenderer-compiled.js

@@ -30,7 +30,7 @@ export const CodeViewWrapper = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
     ref: ref,
-    className: ax(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhk15j7"])
+    className: ax(["_1reo1wug _18m91wug _kqswstnw _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhkvuon"])
   }, children);
 });
 export const CodeViewerHeaderBar = () => {
@@ -85,7 +85,7 @@ export class CodeViewRenderer extends Component {
     const fileSize = new Blob([src]).size;
     const codeViewer = lineCount(src) > MAX_FORMATTED_LINES || fileSize > MAX_FILE_SIZE_USE_CODE_VIEWER ? /*#__PURE__*/React.createElement("code", {
       "data-testid": "code-block",
-      className: ax(["_11c8rymc _1e0c1txw _1reo1wug _o572qvpr _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"])
+      className: ax(["_11c8wadc _1e0c1txw _1reo1wug _o572qvpr _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"])
     }, src) : /*#__PURE__*/React.createElement(CodeBlock, {
       language: language,
       text: src,

package/dist/es2019/viewers/codeViewer/styles.js

@@ -1,8 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { colors } from '@atlaskit/theme';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const codeViewWrapperStyles = css({
   position: 'absolute',
@@ -11,7 +8,7 @@ export const codeViewWrapperStyles = css({
   right: 0,
   bottom: 0,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(--ds-surface, ${colors.N20})`,
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
   overflow: 'auto'
 });
 
@@ -27,6 +24,6 @@ export const codeViewerHTMLStyles = css({
   display: 'flex',
   overflowX: 'auto',
   whiteSpace: 'pre',
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   padding: "var(--ds-space-100, 8px)"
 });