@atlaskit/media-viewer 52.9.0 → 52.9.2

package/dist/esm/item-viewer.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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';
@@ -22,9 +22,12 @@ 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';
-var ImageViewer = Loadable({
+function loadImageViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image');
+}
+var LoadableImageViewer = Loadable({
   loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image').then(function (mod) {
+    return loadImageViewer().then(function (mod) {
       return mod.ImageViewer;
     });
   },
@@ -32,9 +35,19 @@ var ImageViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var VideoViewer = Loadable({
+var LazyImageViewer = /*#__PURE__*/React.lazy(function () {
+  return loadImageViewer().then(function (mod) {
+    return {
+      default: mod.ImageViewer
+    };
+  });
+});
+function loadVideoViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'./viewers/video');
+}
+var LoadableVideoViewer = Loadable({
   loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'./viewers/video').then(function (mod) {
+    return loadVideoViewer().then(function (mod) {
       return mod.VideoViewer;
     });
   },
@@ -42,9 +55,19 @@ var VideoViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var AudioViewer = Loadable({
+var LazyVideoViewer = /*#__PURE__*/React.lazy(function () {
+  return loadVideoViewer().then(function (mod) {
+    return {
+      default: mod.VideoViewer
+    };
+  });
+});
+function loadAudioViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'./viewers/audio');
+}
+var LoadableAudioViewer = Loadable({
   loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'./viewers/audio').then(function (mod) {
+    return loadAudioViewer().then(function (mod) {
       return mod.AudioViewer;
     });
   },
@@ -52,9 +75,19 @@ var AudioViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var DocViewer = Loadable({
+var LazyAudioViewer = /*#__PURE__*/React.lazy(function () {
+  return loadAudioViewer().then(function (mod) {
+    return {
+      default: mod.AudioViewer
+    };
+  });
+});
+function loadDocViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'./viewers/doc');
+}
+var LoadableDocViewer = Loadable({
   loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'./viewers/doc').then(function (mod) {
+    return loadDocViewer().then(function (mod) {
       return mod.DocViewer;
     });
   },
@@ -62,9 +95,19 @@ var DocViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var CodeViewer = Loadable({
+var LazyDocViewer = /*#__PURE__*/React.lazy(function () {
+  return loadDocViewer().then(function (mod) {
+    return {
+      default: mod.DocViewer
+    };
+  });
+});
+function loadCodeViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer');
+}
+var LoadableCodeViewer = Loadable({
   loader: function loader() {
-    return import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'./viewers/codeViewer').then(function (mod) {
+    return loadCodeViewer().then(function (mod) {
       return mod.CodeViewer;
     });
   },
@@ -72,10 +115,20 @@ var CodeViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var SvgViewer = Loadable({
+var LazyCodeViewer = /*#__PURE__*/React.lazy(function () {
+  return loadCodeViewer().then(function (mod) {
+    return {
+      default: mod.CodeViewer
+    };
+  });
+});
+function loadSvgViewer() {
+  return import( /* webpackChunkName: "@atlaskit-internal_svgViewer" */'./viewers/svg');
+}
+var LoadableSvgViewer = Loadable({
   loader: function loader() {
     return (
-      // @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(function (mod) {
         return mod.SvgViewer;
       })
@@ -85,6 +138,19 @@ var SvgViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
+var LazySvgViewer = /*#__PURE__*/React.lazy(function () {
+  return loadSvgViewer().then(function (mod) {
+    return {
+      default: mod.SvgViewer
+    };
+  });
+});
+var ViewerSuspense = function ViewerSuspense(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(Spinner, null)
+  }, children);
+};
 // Consts
 export var isExternalImageItem = function isExternalImageItem(fileItem) {
   return fileItem === 'external-image';
@@ -146,15 +212,15 @@ var createProcessedFileState = function createProcessedFileState(fileState) {
     createdAt: fileState.createdAt
   };
 };
-export var ItemViewerBase = function ItemViewerBase(_ref) {
-  var identifier = _ref.identifier,
-    showControls = _ref.showControls,
-    onClose = _ref.onClose,
-    previewCount = _ref.previewCount,
-    contextId = _ref.contextId,
-    createAnalyticsEvent = _ref.createAnalyticsEvent,
-    viewerOptions = _ref.viewerOptions,
-    traceContext = _ref.traceContext;
+export var ItemViewerBase = function ItemViewerBase(_ref2) {
+  var identifier = _ref2.identifier,
+    showControls = _ref2.showControls,
+    onClose = _ref2.onClose,
+    previewCount = _ref2.previewCount,
+    contextId = _ref2.contextId,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent,
+    viewerOptions = _ref2.viewerOptions,
+    traceContext = _ref2.traceContext;
   // States and Refs
   var _useState = useState(Outcome.pending()),
     _useState2 = _slicedToArray(_useState, 2),
@@ -286,13 +352,22 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
       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,
@@ -303,26 +378,42 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
     var mediaType = fileItem.mediaType;
     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));
@@ -366,9 +457,9 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
     successful: function successful(fileItem) {
       if (fileItem === 'external-image') {
         // render an external image
-        var _ref2 = identifier,
-          dataURI = _ref2.dataURI,
-          name = _ref2.name;
+        var _ref3 = identifier,
+          dataURI = _ref3.dataURI,
+          name = _ref3.name;
         return /*#__PURE__*/React.createElement(InteractiveImg, {
           src: dataURI,
           alt: name !== null && name !== void 0 ? name : '',

package/dist/esm/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/esm/styleWrappers.js

@@ -119,19 +119,19 @@ export var ZoomWrapper = function ZoomWrapper(_ref7) {
   var className = _ref7.className,
     children = _ref7.children;
   return /*#__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 var ZoomCenterControls = function ZoomCenterControls(_ref8) {
   var children = _ref8.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp1yov _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
+    className: ax(["_zulpu2gc _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
   }, children);
 };
 export var ZoomRightControls = function ZoomRightControls(_ref9) {
   var children = _ref9.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp1yov _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
+    className: ax(["_zulpu2gc _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
   }, children);
 };
 export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref0) {
@@ -145,7 +145,7 @@ export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref1) {
   var className = _ref1.className,
     children = _ref1.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_zulp1yov _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
+    className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
   }, children);
 };
 export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref10) {
@@ -162,7 +162,7 @@ export var ErrorImage = function ErrorImage(_ref11) {
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     src: src,
-    className: ax(["_otyr1yov _uiztglyw"])
+    className: ax(["_otyru2gc _uiztglyw"])
   });
 };
 export var Video = function Video(_ref12) {
@@ -374,13 +374,13 @@ export var AudioCover = function AudioCover(_ref30) {
 export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref31) {
   var children = _ref31.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syaz1rlb _umc418ws"])
+    className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syazi7uo _umc418ws"])
   }, children);
 };
 export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref32) {
   var children = _ref32.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_19pk1cfm _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
+    className: ax(["_19pk1ejb _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
   }, children);
 };
 export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref33) {
@@ -396,7 +396,7 @@ export var SidebarWrapper = function SidebarWrapper(_ref34) {
     children = _ref34.children;
   return /*#__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 var SpinnerWrapper = function SpinnerWrapper(_ref35) {

package/dist/esm/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)}
-._syaz13q9{color:var(--_1qpk0k2)}
-._30l313q9:hover{color:var(--_1qpk0k2)}
-._irr3ebx2:hover{background-color:var(--ds-background-neutral-subtle-hovered,#a1bdd914)}._1di6j4ot:active{background-color:var(--ds-background-neutral-subtle-pressed,#a6c5e229)}
-._9h8h13q9:active{color:var(--_1qpk0k2)}
+._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/esm/viewers/archiveSidebar/custom-button-item.js

@@ -6,7 +6,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';
 var itemStyles = null;
 export function CustomButtonItem(_ref) {
   var children = _ref.children,
@@ -16,9 +15,6 @@ export function CustomButtonItem(_ref) {
     onClick: onClick
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
   }, rest, {
-    className: ax(["_bfhk3nif _lswu1fjw _syaz13q9 _irr3ebx2 _30l313q9 _1di6j4ot _9h8h13q9"]),
-    style: {
-      "--_1qpk0k2": ix("".concat("var(--ds-text, ".concat(DN500, ")")))
-    }
+    className: ax(["_bfhksm61 _lswu4pcx _syazi7uo _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo"])
   }), children);
 }

package/dist/esm/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%}
 ._1bsb15ov{width:var(--_53yrec)}
@@ -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)}
-._syazrsv4{color:var(--_1k41sl)}
-._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/esm/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 var ARCHIVE_SIDE_BAR_WIDTH = 300;
 var archiveItemViewerWrapperStyles = null;
 var archiveSideBarStyles = null;
@@ -33,7 +32,7 @@ export var ArchiveSideBar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax(["_ca0qqslr _u5f3v47k _19bvv47k _n3tdv47k _bfhky0hh _kqswstnw _1ltvidpf _154iidpf _1bsb15ov _94n5idpf _vchhusvi _18m915zi"]),
+    className: ax(["_ca0qqslr _u5f3v47k _19bvv47k _n3tdv47k _bfhkvuon _kqswstnw _1ltvidpf _154iidpf _1bsb15ov _94n5idpf _vchhusvi _18m915zi"]),
     style: {
       "--_53yrec": ix("".concat(ARCHIVE_SIDE_BAR_WIDTH, "px"))
     }
@@ -52,14 +51,14 @@ export var ArchiveDownloadButtonWrapper = function 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 var DisabledArchiveDownloadButtonWrapper = function DisabledArchiveDownloadButtonWrapper(_ref5) {
   var children = _ref5.children;
   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 var SidebarItemWrapper = function SidebarItemWrapper(_ref6) {
@@ -73,7 +72,7 @@ export var ArchiveSidebarFileEntryWrapper = function ArchiveSidebarFileEntryWrap
     index = _ref7.index;
   return /*#__PURE__*/React.createElement("div", {
     key: index,
-    className: ax(["_v564rca0 _n3td1vik _1e0c1txw _4cvr1h6o _80omtlke"])
+    className: ax(["_v564rca0 _n3td12x7 _1e0c1txw _4cvr1h6o _80omtlke"])
   }, children);
 };
 export var ArchiveLayout = function ArchiveLayout(_ref8) {
@@ -94,7 +93,7 @@ export var ArchiveViewerWrapper = function ArchiveViewerWrapper(_ref9) {
 };
 export var Separator = function 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 var SidebarHeaderWrapper = function SidebarHeaderWrapper(_ref0) {
@@ -106,15 +105,12 @@ export var SidebarHeaderWrapper = function SidebarHeaderWrapper(_ref0) {
 export var SidebarHeaderIcon = function SidebarHeaderIcon(_ref1) {
   var children = _ref1.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw _4cvr1h6o _2hwx1yov _1o9zidpf"])
+    className: ax(["_1e0c1txw _4cvr1h6o _2hwxu2gc _1o9zidpf"])
   }, children);
 };
 export var SidebarHeaderEntry = function SidebarHeaderEntry(_ref10) {
   var children = _ref10.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _1bto1l2s _o5721q9c _vwz41xde _syazrsv4"]),
-    style: {
-      "--_1k41sl": ix("var(--ds-text, ".concat(DN500, ")"))
-    }
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _1bto1l2s _o5721q9c _vwz41xde _syazi7uo"])
   }, children);
 };

package/dist/esm/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/esm/viewers/codeViewer/CodeRendererAdvanced/CodeRendererAdvanced.js

@@ -37,7 +37,7 @@ export var CodeRendererAdvanced = function 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/esm/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/esm/viewers/codeViewer/codeViewerRenderer-compiled.js

@@ -38,7 +38,7 @@ export var CodeViewWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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 var CodeViewerHeaderBar = function CodeViewerHeaderBar() {
@@ -118,7 +118,7 @@ export var CodeViewRenderer = /*#__PURE__*/function (_Component) {
       var fileSize = new Blob([src]).size;
       var 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/esm/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 var codeViewWrapperStyles = css({
   position: 'absolute',
@@ -11,7 +8,7 @@ export var 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, ".concat(colors.N20, ")"),
+  backgroundColor: "var(--ds-surface, #FFFFFF)",
   overflow: 'auto'
 });
 
@@ -27,6 +24,6 @@ export var 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)"
 });

package/example-helpers/styles.ts

@@ -11,7 +11,7 @@ export const containerStyles: SerializedStyles = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const groupStyles: SerializedStyles = css({
 	width: '250px',
-	padding: token('space.250', '20px'),
+	padding: token('space.250'),
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -23,12 +23,12 @@ export const buttonListStyles: SerializedStyles = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const mVSidebarStyles: SerializedStyles = css({
 	height: 'calc(100vh - 64px)',
-	padding: token('space.400', '32px'),
+	padding: token('space.400'),
 	overflow: 'auto',
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	h2: {
-		color: token('color.text', '#c7d1db'),
-		marginBottom: token('space.200', '16px'),
+		color: token('color.text'),
+		marginBottom: token('space.200'),
 	},
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
 	tbody: {