@atlaskit/media-viewer 54.9.9 → 54.10.0

package/dist/esm/styleWrappers.js

@@ -16,13 +16,25 @@ import { useMergeRefs } from 'use-callback-ref';
 import Heading from '@atlaskit/heading/heading';
 // 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 { useIsInsetViewer } from './insetViewerContext';
+var INSET_HEADER_HEIGHT = "var(--ds-space-800, 64px)";
 var blanketStyles = null;
+var insetViewerBlanketStyles = null;
+var blanketCloseButtonStyles = null;
+var insetViewerShellStyles = null;
+var insetViewerLayoutStyles = null;
 var headerWrapperStyles = null;
 var archiveHeaderWrapperStyles = null;
+var insetViewerMediaColumnStyles = null;
+var insetViewerMediaStageStyles = null;
 var listWrapperStyles = null;
+var insetViewerListWrapperStyles = null;
+var itemStageStyles = null;
+var insetViewerItemStageStyles = null;
 var closeButtonWrapperStyles = null;
 var contentWrapperStyles = null;
 var contentWrapperStyleWithSideBar = null;
+var insetViewerContentWrapperStyles = null;
 var zoomWrapperStyles = null;
 var zoomCenterControlsStyles = null;
 var zoomRightControlsStyles = null;
@@ -34,6 +46,10 @@ var videoStyles = null;
 var pdfWrapperStyles = null;
 var arrowStyles = null;
 var arrowWrapperStyles = null;
+var insetViewerArrowStyles = null;
+var insetViewerArrowWrapperStyles = null;
+var insetViewerLeftWrapperStyles = null;
+var insetViewerRightWrapperStyles = null;
 var arrowsWrapperStyles = null;
 var leftWrapperStyles = null;
 var leftWrapperStylesWithSideBar = null;
@@ -72,108 +88,156 @@ export var Blanket = function Blanket(_ref) {
   var datatestId = _ref['data-testid'],
     className = _ref.className,
     children = _ref.children;
+  var isInsetViewer = useIsInsetViewer();
   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: ax(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", className]),
+    className: ax(["_kqsw1n9t _154iidpf _1ltvidpf _94n5idpf _1xi2idpf _bfhk1tzm _1pby1qpw _1e0c1txw", isInsetViewer && "_4cvr1h6o _1bah1h6o _bfhk1i5c _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _vchhusvi", className]),
     role: "dialog",
     "aria-modal": "true",
     "aria-labelledby": "media.media-viewer.file.name"
   }, children);
 };
-export var HeaderWrapper = function HeaderWrapper(_ref2) {
-  var className = _ref2.className,
-    children = _ref2.children,
-    isArchiveSideBarVisible = _ref2.isArchiveSideBarVisible;
+
+// Mouse-only: keyboard and screen reader users close with Escape or the visible close button.
+export var BlanketCloseButton = function BlanketCloseButton(_ref2) {
+  var onClick = _ref2.onClick;
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-hidden": true,
+    tabIndex: -1,
+    onClick: onClick,
+    className: ax(["_189eidpf _kqswstnw _152tidpf _rjxpidpf _u7coidpf _1e02idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80om73ad"])
+  });
+};
+export var InsetViewerShell = function InsetViewerShell(_ref3) {
+  var children = _ref3.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _2rkopb1k _1e0c1txw _2lx21bp4 _kqswh2mm _1pbykb7n _1bsb1osq _4t3i1osq _1tkeidpf _c71l1osq _bfhk1bhr _16qs130s"])
+  }, children);
+};
+export var InsetViewerLayout = function InsetViewerLayout(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c11p5 _yv0ehpfy _2z055wi5 _1bsb1osq _4t3i1osq _1tkeidpf"]),
+    style: {
+      "--_1dd8ooc": ix("".concat(INSET_HEADER_HEIGHT, " minmax(0, 1fr)"))
+    }
+  }, children);
+};
+export var HeaderWrapper = function HeaderWrapper(_ref5) {
+  var className = _ref5.className,
+    children = _ref5.children,
+    isArchiveSideBarVisible = _ref5.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 var ListWrapper = function ListWrapper(_ref3) {
-  var children = _ref3.children;
+export var MediaColumn = function MediaColumn(_ref6) {
+  var children = _ref6.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _yyhykb7n _1ii7cs5v _1e0c1txw _2lx21bp4 _4t3i1osq _1ul9idpf _1tkeidpf"])
+  }, children);
+};
+export var MediaStage = function MediaStage(_ref7) {
+  var children = _ref7.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o"])
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1ul9idpf _1tkeidpf _kqswh2mm"])
+  }, children);
+};
+export var ListWrapper = function ListWrapper(_ref8) {
+  var children = _ref8.children;
+  var isInsetViewer = useIsInsetViewer();
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1bsb1osq _4t3i1osq _kqswh2mm _1e0c1txw _4cvr1h6o _1bah1h6o", isInsetViewer && "_1reo15vq _18m915vq _2lx21bp4 _4cvr1fhb _1bah1y6m"])
   }, children);
 };
 ListWrapper.displayName = 'ListWrapper';
-export var ArrowsWrapper = function ArrowsWrapper(_ref4) {
-  var children = _ref4.children;
+export var ItemStage = function ItemStage(_ref9) {
+  var children = _ref9.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _kqswh2mm _1bsb1osq _1ul9idpf _1tkeidpf", "_1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, children);
+};
+export var ArrowsWrapper = function ArrowsWrapper(_ref0) {
+  var children = _ref0.children;
   return /*#__PURE__*/React.createElement("div", {
     id: "media-viewer-navigation",
     className: ax(["_1e0c1txw _kqswstnw _154i1ssb _t9ec1i34 _1ltvidpf _1bsb1osq"])
   }, children);
 };
-export var CloseButtonWrapper = function CloseButtonWrapper(_ref5) {
-  var className = _ref5.className,
-    children = _ref5.children;
+export var CloseButtonWrapper = function CloseButtonWrapper(_ref1) {
+  var className = _ref1.className,
+    children = _ref1.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_kqswstnw _154i1ejb _1xi2v47k _1pbyuou7", className])
   }, children);
 };
-export var ContentWrapper = function ContentWrapper(_ref6) {
-  var isSidebarVisible = _ref6.isSidebarVisible,
-    children = _ref6.children;
+export var ContentWrapper = function ContentWrapper(_ref10) {
+  var isSidebarVisible = _ref10.isSidebarVisible,
+    children = _ref10.children;
+  var isInsetViewer = useIsInsetViewer();
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1bsb1osq", isSidebarVisible && "_1bsbyazj"])
+    className: ax([!isInsetViewer && "_1bsb1osq", isInsetViewer && "_16jlidpf _1o9zidpf _i0dl1wug _1reo15vq _18m915vq _1bsb1osq _1ul9idpf _1tkeidpf _4t3i1osq _kqswh2mm", isSidebarVisible && !isInsetViewer && "_1bsbyazj"])
   }, children);
 };
-export var ZoomWrapper = function ZoomWrapper(_ref7) {
-  var className = _ref7.className,
-    children = _ref7.children;
+export var ZoomWrapper = function ZoomWrapper(_ref11) {
+  var className = _ref11.className,
+    children = _ref11.children;
   return /*#__PURE__*/React.createElement("div", {
     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;
+export var ZoomCenterControls = function ZoomCenterControls(_ref12) {
+  var children = _ref12.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpu2gc _1bsb1osq _1e0c1txw _1bah1h6o _1vgl1rj4"])
   }, children);
 };
-export var ZoomRightControls = function ZoomRightControls(_ref9) {
-  var children = _ref9.children;
+export var ZoomRightControls = function ZoomRightControls(_ref13) {
+  var children = _ref13.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpu2gc _kqswstnw _1xi21ejb _syaz1poe _lcxv1rj4 _1e0c1txw _1bahusic"])
   }, children);
 };
-export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref0) {
-  var children = _ref0.children;
+export var ZoomLevelIndicator = function ZoomLevelIndicator(_ref14) {
+  var children = _ref14.children;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "zoom-level-indicator",
     className: ax(["_vwz4zwfg _4t3izwfg _s7n4nkob"])
   }, children);
 };
-export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref1) {
-  var className = _ref1.className,
-    children = _ref1.children;
+export var HDIconGroupWrapper = function HDIconGroupWrapper(_ref15) {
+  var className = _ref15.className,
+    children = _ref15.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _kqswh2mm _1bsb1tcg _19kzstnw", className])
   }, children);
 };
-export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref10) {
-  var datatestId = _ref10['data-testid'],
-    children = _ref10.children;
+export var ErrorMessageWrapper = function ErrorMessageWrapper(_ref16) {
+  var datatestId = _ref16['data-testid'],
+    children = _ref16.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: ax(["_y3gn1h6o _syaz1poe _zcqx1osq"])
   }, children);
 };
-export var ErrorImage = function ErrorImage(_ref11) {
-  var src = _ref11.src,
-    alt = _ref11.alt;
+export var ErrorImage = function ErrorImage(_ref17) {
+  var src = _ref17.src,
+    alt = _ref17.alt;
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     src: src,
     className: ax(["_otyru2gc _uiztglyw"])
   });
 };
-export var Video = function Video(_ref12) {
-  var autoPlay = _ref12.autoPlay,
-    controls = _ref12.controls,
-    src = _ref12.src;
+export var Video = function Video(_ref18) {
+  var autoPlay = _ref18.autoPlay,
+    controls = _ref18.controls,
+    src = _ref18.src;
   return /*#__PURE__*/React.createElement("video", {
     autoPlay: autoPlay,
     controls: controls,
@@ -181,10 +245,10 @@ export var Video = function Video(_ref12) {
     className: ax(["_1bsbauwl _4t3i1kxc"])
   });
 };
-var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref13, ref) {
-  var innerRef = _ref13.innerRef,
-    datatestId = _ref13['data-testid'],
-    children = _ref13.children;
+var PDFWrapperBody = /*#__PURE__*/forwardRef(function (_ref19, ref) {
+  var innerRef = _ref19.innerRef,
+    datatestId = _ref19['data-testid'],
+    children = _ref19.children;
   var bodyRef = useMergeRefs([ref, innerRef]);
   return /*#__PURE__*/React.createElement("div", {
     ref: bodyRef,
@@ -197,50 +261,54 @@ export var PDFWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     innerRef: ref
   }, props)));
 });
-export var Arrow = function Arrow(_ref14) {
-  var className = _ref14.className,
-    children = _ref14.children;
+export var Arrow = function Arrow(_ref20) {
+  var className = _ref20.className,
+    children = _ref20.children;
+  var isInsetViewer = useIsInsetViewer();
   return /*#__PURE__*/React.createElement("span", {
-    className: ax(["_80omtlke _11pt15ty _di7o9txx _20ka1poe", className])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax([!isInsetViewer && "_80omtlke _11pt15ty _di7o9txx _20ka1poe", isInsetViewer && "_80omtlke _7dir1j9a _6pupl4ek", className])
   }, children);
 };
-export var LeftWrapper = function LeftWrapper(_ref15) {
-  var children = _ref15.children,
-    isArchiveSideBarVisible = _ref15.isArchiveSideBarVisible;
+export var LeftWrapper = function LeftWrapper(_ref21) {
+  var children = _ref21.children,
+    isArchiveSideBarVisible = _ref21.isArchiveSideBarVisible;
+  var isInsetViewer = useIsInsetViewer();
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv"])
+    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gn1e5h _1ltvidpf", isArchiveSideBarVisible && "_1ltv1mjv", isInsetViewer && "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t", isInsetViewer && "_1ltv1ejb"])
   }, children);
 };
-export var RightWrapper = function RightWrapper(_ref16) {
-  var children = _ref16.children;
+export var RightWrapper = function RightWrapper(_ref22) {
+  var children = _ref22.children;
+  var isInsetViewer = useIsInsetViewer();
   return /*#__PURE__*/React.createElement("div", {
-    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf"])
+    className: ax(["_kqswstnw _154i1ssb _t9ec1i34 _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k", "_y3gnusic _1xi2idpf", isInsetViewer && "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t", isInsetViewer && "_1xi21ejb"])
   }, children);
 };
 
 // header.tsx
 
-export var Header = function Header(_ref17) {
-  var children = _ref17.children,
-    isArchiveSideBarVisible = _ref17.isArchiveSideBarVisible,
-    className = _ref17.className;
+export var Header = function Header(_ref23) {
+  var children = _ref23.children,
+    isArchiveSideBarVisible = _ref23.isArchiveSideBarVisible,
+    className = _ref23.className;
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: ax(["_1e0c1txw _19bvidpf", isArchiveSideBarVisible && "_19bv1mjv", className])
   }, children);
 };
-export var LeftHeader = function LeftHeader(_ref18) {
-  var children = _ref18.children;
+export var LeftHeader = function LeftHeader(_ref24) {
+  var children = _ref24.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1vgl1rj4"])
   }, children);
 };
-export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref19, ref) {
-  var children = _ref19.children,
-    datatestId = _ref19['data-testid'],
-    onClick = _ref19.onClick,
-    style = _ref19.style,
-    className = _ref19.className;
+export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref25, ref) {
+  var children = _ref25.children,
+    datatestId = _ref25['data-testid'],
+    onClick = _ref25.onClick,
+    style = _ref25.style,
+    className = _ref25.className;
   return /*#__PURE__*/React.createElement("div", {
     role: "none",
     "data-testid": datatestId,
@@ -258,18 +326,18 @@ export var BaselineExtend = function BaselineExtend() {
     className: ax(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
   });
 };
-export var 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,
-    alt = _ref20.alt,
-    className = _ref20.className,
-    rest = _objectWithoutProperties(_ref20, _excluded);
+export var Img = function Img(_ref26) {
+  var canDrag = _ref26.canDrag,
+    isDragging = _ref26.isDragging,
+    shouldPixelate = _ref26.shouldPixelate,
+    datatestId = _ref26['data-testid'],
+    src = _ref26.src,
+    style = _ref26.style,
+    onLoad = _ref26.onLoad,
+    onError = _ref26.onError,
+    alt = _ref26.alt,
+    className = _ref26.className,
+    rest = _objectWithoutProperties(_ref26, _excluded);
   var cursor = useMemo(function () {
     if (canDrag && isDragging) {
       return 'grabbing';
@@ -294,21 +362,21 @@ export var Img = function Img(_ref20) {
     onError: onError
   }));
 };
-export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {
-  var children = _ref21.children;
+export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref27) {
+  var children = _ref27.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_1reo15vq _18m915vq"])
   }, children);
 };
-export var MetadataWrapper = function MetadataWrapper(_ref22) {
-  var children = _ref22.children;
+export var MetadataWrapper = function MetadataWrapper(_ref28) {
+  var children = _ref28.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw"])
   }, children);
 };
-export var MetadataFileName = function MetadataFileName(_ref23) {
-  var datatestId = _ref23['data-testid'],
-    children = _ref23.children;
+export var MetadataFileName = function MetadataFileName(_ref29) {
+  var datatestId = _ref29['data-testid'],
+    children = _ref29.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_8at415vq _1p8j15vq _151kfhey _qvww1osq _1p351l2s _8g8b1q9c _18ew1wq8 _1jyy1poe"])
   }, /*#__PURE__*/React.createElement(Heading, {
@@ -318,46 +386,46 @@ export var MetadataFileName = function MetadataFileName(_ref23) {
     testId: datatestId
   }, children));
 };
-export var MetadataSubText = function MetadataSubText(_ref24) {
-  var datatestId = _ref24['data-testid'],
-    children = _ref24.children;
+export var MetadataSubText = function MetadataSubText(_ref30) {
+  var datatestId = _ref30['data-testid'],
+    children = _ref30.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: ax(["_1reo15vq _18m915vq _p12f1osq _1bto1l2s _o5721q9c _syaz1poe"])
   }, children);
 };
-export var MetadataIconWrapper = function MetadataIconWrapper(_ref25) {
-  var children = _ref25.children;
+export var MetadataIconWrapper = function MetadataIconWrapper(_ref31) {
+  var children = _ref31.children;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: metadataIconWrapperStyles
   }, children);
 };
-export var RightHeader = function RightHeader(_ref26) {
-  var children = _ref26.children;
+export var RightHeader = function RightHeader(_ref32) {
+  var children = _ref32.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_y3gnusic _2hwx1jfw _1ul9uuw1 _1vgl1rj4"])
   }, children);
 };
-export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref27) {
-  var children = _ref27.children;
+export var CustomAudioPlayerWrapper = function CustomAudioPlayerWrapper(_ref33) {
+  var children = _ref33.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_kqswstnw _94n5idpf _1ltvidpf _1bsb1osq"])
   }, children);
 };
-export var AudioPlayer = function AudioPlayer(_ref28) {
-  var datatestId = _ref28['data-testid'],
-    children = _ref28.children;
+export var AudioPlayer = function AudioPlayer(_ref34) {
+  var datatestId = _ref34['data-testid'],
+    children = _ref34.children;
   return /*#__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 var Audio = /*#__PURE__*/forwardRef(function (_ref29, ref) {
-  var autoPlay = _ref29.autoPlay,
-    controls = _ref29.controls,
-    src = _ref29.src,
-    preload = _ref29.preload;
+export var Audio = /*#__PURE__*/forwardRef(function (_ref35, ref) {
+  var autoPlay = _ref35.autoPlay,
+    controls = _ref35.controls,
+    src = _ref35.src,
+    preload = _ref35.preload;
   return /*#__PURE__*/React.createElement("audio", {
     ref: ref,
     autoPlay: autoPlay,
@@ -367,50 +435,50 @@ export var Audio = /*#__PURE__*/forwardRef(function (_ref29, ref) {
     className: ax(["_1bsb1osq _kqswstnw _94n5idpf _1ltvidpf"])
   });
 });
-export var AudioCover = function AudioCover(_ref30) {
-  var src = _ref30.src,
-    alt = _ref30.alt;
+export var AudioCover = function AudioCover(_ref36) {
+  var src = _ref36.src,
+    alt = _ref36.alt;
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     src: src,
     className: ax(["_1bsb1osq _4t3i1osq _5ralzm06 _bfhkr3uz"])
   });
 };
-export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref31) {
-  var children = _ref31.children;
+export var DefaultCoverWrapper = function DefaultCoverWrapper(_ref37) {
+  var children = _ref37.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_1bsb1osq _4t3i1osq _1e0c1txw _4cvr1h6o _1bah1h6o _syazi7uo _umc418ws"])
   }, children);
 };
-export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref32) {
-  var children = _ref32.children;
+export var DownloadButtonWrapper = function DownloadButtonWrapper(_ref38) {
+  var children = _ref38.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_19pk1ejb _y3gn1h6o _1sfy1fjg _4pkp1fjg"])
   }, children);
 };
-export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref33) {
-  var datatestId = _ref33['data-testid'],
-    children = _ref33.children;
+export var CustomVideoPlayerWrapper = function CustomVideoPlayerWrapper(_ref39) {
+  var datatestId = _ref39['data-testid'],
+    children = _ref39.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: ax(["_1p6zkb7n _1vnlkb7n _qbrxf1ug _1y2kauwl _z18o1kxc _1ghp1kxc"])
   }, children);
 };
-export var SidebarWrapper = function SidebarWrapper(_ref34) {
-  var datatestId = _ref34['data-testid'],
-    children = _ref34.children;
+export var SidebarWrapper = function SidebarWrapper(_ref40) {
+  var datatestId = _ref40['data-testid'],
+    children = _ref40.children;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": datatestId,
     className: ax(["_1reo15vq _18m91wug _154iidpf _1xi2idpf _1bsb1ber _4t3i1kxc _bfhkvuon _syazi7uo"])
   }, children);
 };
-export var SpinnerWrapper = function SpinnerWrapper(_ref35) {
-  var children = _ref35.children;
+export var SpinnerWrapper = function SpinnerWrapper(_ref41) {
+  var children = _ref41.children;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq"])
   }, children);
 };
-export var FormattedMessageWrapper = function FormattedMessageWrapper(_ref36) {
-  var children = _ref36.children;
+export var FormattedMessageWrapper = function FormattedMessageWrapper(_ref42) {
+  var children = _ref42.children;
   return /*#__PURE__*/React.createElement("span", null, children);
 };

package/dist/esm/viewers/image/interactive-img-component.js

@@ -55,7 +55,11 @@ export var InteractiveImgComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "onImageClicked", function (e) {
       var _this$props = _this.props,
         onClose = _this$props.onClose,
-        onBlanketClicked = _this$props.onBlanketClicked;
+        onBlanketClicked = _this$props.onBlanketClicked,
+        isInsetViewer = _this$props.isInsetViewer;
+      if (isInsetViewer) {
+        return;
+      }
       if (e.target === e.currentTarget && onBlanketClicked) {
         onBlanketClicked();
       }

package/dist/esm/viewers/image/interactive-img.js

@@ -1,10 +1,11 @@
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createClosedEvent } from '../../analytics/events/ui/closed';
+import { withInsetViewer } from '../../insetViewerContext';
 import { InteractiveImgComponent } from './interactive-img-component';
-export var InteractiveImg = withAnalyticsEvents({
+export var InteractiveImg = withInsetViewer(withAnalyticsEvents({
   onBlanketClicked: function onBlanketClicked(createAnalyticsEvent) {
     var event = createAnalyticsEvent(createClosedEvent('blanket'));
     event.fire(ANALYTICS_MEDIA_CHANNEL);
   }
-})(InteractiveImgComponent);
+})(InteractiveImgComponent));

package/dist/esm/viewers/svg/index.js

@@ -9,6 +9,7 @@ import { messages } from '@atlaskit/media-ui/messages';
 import { Vector2 } from '@atlaskit/media-ui/vector2';
 import { createClosedEvent } from '../../analytics/events/ui/closed';
 import { ZoomLevel } from '../../domain/zoomLevel';
+import { useIsInsetViewer } from '../../insetViewerContext';
 import { MediaViewerError } from '../../MediaViewerError';
 import { BaselineExtend } from '../../styleWrappers';
 import { ZoomControls } from '../../zoomControls';
@@ -45,6 +46,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     wrapperScroll = _useState0[0],
     setWrapperScroll = _useState0[1];
   var intl = useIntl();
+  var isInsetViewer = useIsInsetViewer();
   var onResize = useCallback(function () {
     if (!wrapperRef.current || !camera) {
       return;
@@ -95,6 +97,9 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
     onError(error);
   };
   var onSvgClicked = function onSvgClicked(e) {
+    if (isInsetViewer) {
+      return;
+    }
     if (e.target === e.currentTarget) {
       onBlanketClicked === null || onBlanketClicked === void 0 || onBlanketClicked();
       onClose === null || onClose === void 0 || onClose();

package/dist/types/components/types.d.ts

@@ -12,6 +12,12 @@ export interface MediaViewerExtensionsActions {
 }
 export type MediaViewerNavigationDirection = 'next' | 'prev';
 export interface MediaViewerExtensions {
+    /**
+     * Renders the viewer as an inset card on the blanket, with the sidebar as a column, instead
+     * of the default full-bleed overlay. Defaults to false. Has no effect unless the
+     * `cc_comments_inset_media_viewer` feature gate is enabled.
+     */
+    useInsetViewer?: boolean;
     sidebar?: {
         icon: ReactNode;
         /** Accessible label for the sidebar toggle. Falls back to a generic localized string. */

package/dist/types/insetViewerContext.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+export declare const InsetViewerProvider: ({ isInsetViewer, children, }: {
+    isInsetViewer?: boolean;
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const useIsInsetViewer: () => boolean;
+export type WithInsetViewerProps = {
+    isInsetViewer?: boolean;
+};
+export declare const withInsetViewer: <Props, Component>(WrappedComponent: (React.ComponentType<WithInsetViewerProps & Props> | React.ForwardRefExoticComponent<WithInsetViewerProps & Props>) & Component) => React.ForwardRefExoticComponent<React.PropsWithoutRef<JSX.LibraryManagedAttributes<Component, Omit<Props, keyof WithInsetViewerProps>>> & React.RefAttributes<any>>;

package/dist/types/navigation.d.ts

@@ -2,19 +2,21 @@ import React from 'react';
 import { Component } from 'react';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { type Identifier } from '@atlaskit/media-client';
+import { type WithInsetViewerProps } from './insetViewerContext';
 export type NavigationDirection = 'prev' | 'next';
 export type NavigationProps = Readonly<{
     items: Identifier[];
     selectedItem: Identifier;
     onChange: (item: Identifier) => void;
     isArchiveSideBarVisible?: boolean;
-}> & WithAnalyticsEventsProps;
+}> & WithAnalyticsEventsProps & WithInsetViewerProps;
 export declare const nextNavButtonId = "media-viewer-navigation-next";
 export declare const prevNavButtonId = "media-viewer-navigation-prev";
 export type NavigationSource = 'keyboard' | 'mouse';
 export declare class NavigationBase extends Component<NavigationProps, {}> {
     private navigate;
     get selectedIndex(): number;
+    private renderArrowButton;
     render(): React.JSX.Element | null;
 }
 export declare const Navigation: React.ForwardRefExoticComponent<Omit<Readonly<{

package/dist/types/styleWrappers.d.ts

@@ -18,6 +18,11 @@ type DataTestID = {
 };
 type BlanketProps = DataTestID & Children & ClassName;
 export declare const Blanket: ({ 'data-testid': datatestId, className, children, }: BlanketProps) => JSX.Element;
+export declare const BlanketCloseButton: ({ onClick }: {
+    onClick: () => void;
+}) => JSX.Element;
+export declare const InsetViewerShell: ({ children }: Children) => JSX.Element;
+export declare const InsetViewerLayout: ({ children }: Children) => JSX.Element;
 type HeaderWrapperProps = {
     isArchiveSideBarVisible: boolean;
 };
@@ -25,10 +30,13 @@ export declare const HeaderWrapper: {
     ({ className, children, isArchiveSideBarVisible, }: ClassName & Children & HeaderWrapperProps): JSX.Element;
     displayName: string;
 };
+export declare const MediaColumn: ({ children }: Children) => JSX.Element;
+export declare const MediaStage: ({ children }: Children) => JSX.Element;
 export declare const ListWrapper: {
     ({ children }: Children): JSX.Element;
     displayName: string;
 };
+export declare const ItemStage: ({ children }: Children) => JSX.Element;
 export declare const ArrowsWrapper: ({ children }: Children) => JSX.Element;
 export declare const CloseButtonWrapper: ({ className, children }: ClassName & Children) => JSX.Element;
 type ContentWrapperProps = {