@atlaskit/media-viewer 54.8.21 → 54.8.23

package/dist/cjs/viewers/archiveSidebar/archive-viewer-base.js

@@ -0,0 +1,398 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArchiveViewerBase = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _audio = _interopRequireDefault(require("@atlaskit/icon/core/audio"));
+var _customMediaPlayer = require("@atlaskit/media-ui/customMediaPlayer");
+var _getLanguageType = require("@atlaskit/media-ui/getLanguageType");
+var _isCodeViewerItem = require("@atlaskit/media-ui/isCodeViewerItem");
+var _messages = require("@atlaskit/media-ui/messages");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _ArchiveViewerError = require("../../ArchiveViewerError");
+var _previewUnsupported = require("../../analytics/events/operational/previewUnsupported");
+var _zipEntryLoadFailed = require("../../analytics/events/operational/zipEntryLoadFailed");
+var _zipEntryLoadSucceeded = require("../../analytics/events/operational/zipEntryLoadSucceeded");
+var _fireAnalytics = require("../../analytics/fireAnalytics");
+var _buildVideoErrorDiagnostics = require("../../buildVideoErrorDiagnostics");
+var _outcome = require("../../domain/outcome");
+var _errorMessageWithAnalytics = _interopRequireDefault(require("../../errorMessageWithAnalytics"));
+var _isMediaViewerError = require("../../isMediaViewerError");
+var _itemViewer = require("../../item-viewer");
+var _loading = require("../../loading");
+var _styleWrappers = require("../../styleWrappers");
+var _getMediaTypeFromFilename = require("../../utils/getMediaTypeFromFilename");
+var _getMimeTypeFromFilename = require("../../utils/getMimeTypeFromFilename");
+var _rejectAfter = require("../../utils/rejectAfter");
+var _baseViewer = require("../base-viewer");
+var _CodeViewRenderer = require("../codeViewer/CodeViewRenderer-2");
+var _util = require("../codeViewer/util");
+var _interactiveImg = require("../image/interactive-img");
+var _archiveItemViewerWrapper = require("./archive-item-viewer-wrapper");
+var _archiveLayout = require("./archive-layout");
+var _archiveSidebarRenderer = _interopRequireDefault(require("./archive-sidebar-renderer"));
+var _archiveViewerWrapper = require("./archive-viewer-wrapper");
+var _consts = require("./consts");
+var _nativePdfViewer = require("./nativePdfViewer");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
+  function ArchiveViewerBase() {
+    var _this;
+    (0, _classCallCheck2.default)(this, ArchiveViewerBase);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ArchiveViewerBase, [].concat(args));
+    (0, _defineProperty2.default)(_this, "onError", function (error, entry) {
+      // Non-ZIP archives (e.g. RAR, TAR, 7z) are a known limitation of the
+      // browser-based `unzipit` viewer, not a per-entry failure. Render a
+      // full-width "format not supported" message via BaseViewer's failed
+      // outcome (no sidebar, no 300px offset) and do NOT escalate to the
+      // parent item-viewer error boundary, which would double-render the
+      // message inside the offset archive layout.
+      if (error.primaryReason === 'archiveviewer-not-zip') {
+        // Fire a dedicated, non-SLI `previewUnsupported` event (not a
+        // `loadFailed`) so unsupported archives don't pollute error
+        // dashboards. The event's fileAttributes distinguish the two cases:
+        // `fileMediatype: 'unknown'` (browser-unrecognised, e.g. RAR) vs
+        // `fileMediatype: 'archive'` with a non-ZIP `fileMimetype` (unzipit
+        // limitation, e.g. 7z/tar/gzip).
+        (0, _fireAnalytics.fireAnalytics)((0, _previewUnsupported.createPreviewUnsupportedEvent)(_this.props.item), _this.props.createAnalyticsEvent);
+        _this.setState({
+          content: _outcome.Outcome.failed(error)
+        });
+        return;
+      }
+      _this.props.onError(error);
+      _this.setState({
+        content: _outcome.Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+          selectedArchiveEntry: entry,
+          error: error
+        }))
+      });
+    });
+    (0, _defineProperty2.default)(_this, "onSelectedArchiveEntryChange", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(selectedArchiveEntry) {
+        var src, codeViewerSrc, mimeType, isCodeMimeType, blob, blobWithMimeType, _t;
+        return _regenerator.default.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this.setState({
+                content: _outcome.Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+                  selectedArchiveEntry: undefined,
+                  hasLoadedEntries: false // displays a nice loading spinner for the content viewer
+                }))
+              });
+              src = '';
+              codeViewerSrc = '';
+              mimeType = (0, _getMimeTypeFromFilename.getMimeTypeFromFilename)(selectedArchiveEntry.name);
+              isCodeMimeType = (0, _isCodeViewerItem.isCodeViewerItem)(selectedArchiveEntry.name, mimeType);
+              if (selectedArchiveEntry.isDirectory) {
+                _context.next = 6;
+                break;
+              }
+              _context.prev = 1;
+              _context.next = 2;
+              return (0, _rejectAfter.rejectAfter)(function () {
+                return selectedArchiveEntry.blob();
+              }, 10000);
+            case 2:
+              blob = _context.sent;
+              blobWithMimeType = new Blob([blob], {
+                type: mimeType
+              });
+              src = URL.createObjectURL(blobWithMimeType);
+              if (!isCodeMimeType) {
+                _context.next = 4;
+                break;
+              }
+              _context.next = 3;
+              return (0, _rejectAfter.rejectAfter)(function () {
+                return blob.text();
+              });
+            case 3:
+              codeViewerSrc = _context.sent;
+            case 4:
+              _context.next = 6;
+              break;
+            case 5:
+              _context.prev = 5;
+              _t = _context["catch"](1);
+              return _context.abrupt("return", _this.onError(new _ArchiveViewerError.ArchiveViewerError(_t.message === _consts.ENCRYPTED_ENTRY_ERROR_MESSAGE ? 'archiveviewer-encrypted-entry' : 'archiveviewer-create-url', _t), selectedArchiveEntry));
+            case 6:
+              _this.setState({
+                content: _outcome.Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+                  selectedArchiveEntry: selectedArchiveEntry,
+                  src: src,
+                  name: selectedArchiveEntry.name,
+                  isDirectory: selectedArchiveEntry.isDirectory,
+                  error: undefined,
+                  codeViewerSrc: codeViewerSrc,
+                  isCodeMimeType: isCodeMimeType,
+                  hasLoadedEntries: true
+                }))
+              });
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 5]]);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2.default)(_this, "onHeaderClicked", function () {
+      // This will set the preview to show the Folder icon
+      _this.setState({
+        content: _outcome.Outcome.successful(_objectSpread({}, _this.state.content.data))
+      });
+    });
+    (0, _defineProperty2.default)(_this, "onViewerLoad", function (selectedArchiveEntry) {
+      return function () {
+        (0, _fireAnalytics.fireAnalytics)((0, _zipEntryLoadSucceeded.createZipEntryLoadSucceededEvent)(_this.props.item, selectedArchiveEntry), _this.props.createAnalyticsEvent);
+      };
+    });
+    (0, _defineProperty2.default)(_this, "onViewerError", function (primaryErrorReason, selectedArchiveEntry) {
+      return function (error) {
+        if (error instanceof Error && (0, _isMediaViewerError.isMediaViewerError)(error)) {
+          return _this.onError(new _ArchiveViewerError.ArchiveViewerError(primaryErrorReason, error.secondaryError, selectedArchiveEntry));
+        }
+        // The video/audio CustomMediaPlayer surfaces a native `MediaError` (not a
+        // JS `Error`). Convert it into a descriptive diagnostics `Error` so the
+        // downstream analytics report a meaningful cause instead of `unknown`.
+        var secondaryError = error && !(error instanceof Error) ? (0, _buildVideoErrorDiagnostics.buildVideoErrorDiagnostics)(undefined, error) : error !== null && error !== void 0 ? error : undefined;
+        return _this.onError(new _ArchiveViewerError.ArchiveViewerError(primaryErrorReason, secondaryError, selectedArchiveEntry));
+      };
+    });
+    (0, _defineProperty2.default)(_this, "onSidebarLoaded", function () {
+      _this.setState({
+        content: _outcome.Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+          hasLoadedEntries: true
+        }))
+      });
+      _this.props.onSuccess();
+      if ((0, _fg.fg)('download_event_for_jira_attachments')) {
+        _this.onMediaDisplayed();
+      }
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(ArchiveViewerBase, _BaseViewer);
+  return (0, _createClass2.default)(ArchiveViewerBase, [{
+    key: "init",
+    value: function () {
+      var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        return _regenerator.default.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this.setState(this.initialState);
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function init() {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "initialState",
+    get: function get() {
+      return {
+        content: _outcome.Outcome.successful({
+          src: '',
+          name: '',
+          isDirectory: true
+        })
+      };
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      var content = this.state.content;
+      if (!content.data || !content.data.src) {
+        return;
+      }
+      URL.revokeObjectURL(content.data.src);
+    }
+  }, {
+    key: "renderSuccessful",
+    value: function renderSuccessful(content) {
+      var _this$props = this.props,
+        item = _this$props.item,
+        mediaClient = _this$props.mediaClient,
+        collectionName = _this$props.collectionName;
+      var selectedArchiveEntry = content.selectedArchiveEntry,
+        hasLoadedEntries = content.hasLoadedEntries;
+      var hasSelectedArchiveEntry = selectedArchiveEntry !== undefined;
+      return /*#__PURE__*/_react.default.createElement(_archiveLayout.ArchiveLayout, null, /*#__PURE__*/_react.default.createElement(_archiveSidebarRenderer.default, {
+        selectedFileState: item,
+        mediaClient: mediaClient,
+        onSelectedArchiveEntryChange: this.onSelectedArchiveEntryChange,
+        onHeaderClicked: this.onHeaderClicked,
+        isArchiveEntryLoading: !hasSelectedArchiveEntry,
+        collectionName: collectionName,
+        onError: this.onError,
+        onSuccess: this.onSidebarLoaded
+      }), /*#__PURE__*/_react.default.createElement(_archiveViewerWrapper.ArchiveViewerWrapper, null, !hasSelectedArchiveEntry && !hasLoadedEntries ? /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_loading.Spinner, null)) : this.renderArchiveItemViewer(content)));
+    }
+  }, {
+    key: "renderArchiveItemViewer",
+    value: function renderArchiveItemViewer(content) {
+      var _this$props2 = this.props,
+        item = _this$props2.item,
+        viewerOptions = _this$props2.viewerOptions;
+      var src = content.src,
+        name = content.name,
+        isDirectory = content.isDirectory,
+        error = content.error,
+        selectedArchiveEntry = content.selectedArchiveEntry,
+        codeViewerSrc = content.codeViewerSrc,
+        isCodeMimeType = content.isCodeMimeType;
+      if (error) {
+        return this.renderPreviewError(error, selectedArchiveEntry);
+      }
+      if (!isDirectory && selectedArchiveEntry) {
+        var _viewerOptions$custom;
+        if (!name || !src) {
+          return this.renderPreviewError(new _ArchiveViewerError.ArchiveViewerError('archiveviewer-missing-name-src'), selectedArchiveEntry);
+        }
+        var customRenderer = viewerOptions === null || viewerOptions === void 0 || (_viewerOptions$custom = viewerOptions.customRenderers) === null || _viewerOptions$custom === void 0 ? void 0 : _viewerOptions$custom.find(function (renderer) {
+          return renderer.shouldUseCustomRenderer({
+            fileItem: item,
+            archiveFileItem: {
+              name: name
+            }
+          });
+        });
+        if (customRenderer) {
+          return /*#__PURE__*/_react.default.createElement(_archiveItemViewerWrapper.ArchiveItemViewerWrapper, null, customRenderer.renderContent({
+            fileItem: item,
+            archiveFileItem: {
+              name: name
+            },
+            getBinaryContent: function () {
+              var _getBinaryContent = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+                return _regenerator.default.wrap(function (_context3) {
+                  while (1) switch (_context3.prev = _context3.next) {
+                    case 0:
+                      _context3.next = 1;
+                      return fetch(src);
+                    case 1:
+                      return _context3.abrupt("return", _context3.sent.blob());
+                    case 2:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }, _callee3);
+              }));
+              function getBinaryContent() {
+                return _getBinaryContent.apply(this, arguments);
+              }
+              return getBinaryContent;
+            }(),
+            onLoad: this.onViewerLoad(selectedArchiveEntry),
+            onError: this.onViewerError('archiveviewer-customrenderer-onerror', selectedArchiveEntry)
+          }));
+        }
+        var mediaType = (0, _getMediaTypeFromFilename.getMediaTypeFromFilename)(name);
+        if (isCodeMimeType) {
+          // Same code viewer logic as in Item-Viewer.tsx
+          // Render error message if code file has size over 10MB.
+          // Required by https://product-fabric.atlassian.net/browse/MEX-1788
+          if ((selectedArchiveEntry === null || selectedArchiveEntry === void 0 ? void 0 : selectedArchiveEntry.size) > _itemViewer.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+            return this.renderPreviewError(new _ArchiveViewerError.ArchiveViewerError('archiveviewer-codeviewer-file-size-exceeds'), selectedArchiveEntry);
+          }
+          return /*#__PURE__*/_react.default.createElement(_CodeViewRenderer.CodeViewRenderer, {
+            onSuccess: this.onViewerLoad(selectedArchiveEntry),
+            onError: this.onViewerError('archiveviewer-codeviewer-onerror', selectedArchiveEntry),
+            item: item,
+            src: codeViewerSrc || '',
+            language: (0, _getLanguageType.getLanguageType)(name) || _util.DEFAULT_LANGUAGE
+          });
+        }
+        switch (mediaType) {
+          case 'image':
+            return /*#__PURE__*/_react.default.createElement(_archiveItemViewerWrapper.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_interactiveImg.InteractiveImg, {
+              src: src,
+              alt: name,
+              onLoad: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-imageviewer-onerror', selectedArchiveEntry)
+            }));
+          case 'video':
+            return /*#__PURE__*/_react.default.createElement(_archiveItemViewerWrapper.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomVideoPlayerWrapper, {
+              "data-testid": "media-viewer-video-content"
+            }, /*#__PURE__*/_react.default.createElement(_customMediaPlayer.CustomMediaPlayer, {
+              type: "video",
+              isAutoPlay: false,
+              src: src,
+              onCanPlay: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-videoviewer-onerror', selectedArchiveEntry)
+            })));
+          case 'audio':
+            return /*#__PURE__*/_react.default.createElement(_archiveItemViewerWrapper.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.AudioPlayer, {
+              "data-testid": "media-viewer-audio-content"
+            }, /*#__PURE__*/_react.default.createElement(_styleWrappers.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
+              label: "cover",
+              color: "currentColor"
+            })), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_customMediaPlayer.CustomMediaPlayer, {
+              type: "audio",
+              isAutoPlay: false,
+              src: src,
+              onCanPlay: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-audioviewer-onerror', selectedArchiveEntry)
+            }))));
+          case 'doc':
+            return /*#__PURE__*/_react.default.createElement(_archiveItemViewerWrapper.ArchiveItemViewerWrapper, {
+              fullHeight: true
+            }, /*#__PURE__*/_react.default.createElement(_nativePdfViewer.NativePdfViewer, {
+              src: src,
+              onSuccess: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-docviewer-onerror', selectedArchiveEntry)
+            }, this.renderPreviewError(new _ArchiveViewerError.ArchiveViewerError('archiveviewer-docviewer-onerror'), selectedArchiveEntry, false)));
+          case 'archive':
+            //BMPT-388 - Add illustration here, currently empty viewer
+            return /*#__PURE__*/_react.default.createElement(_archiveItemViewerWrapper.ArchiveItemViewerWrapper, null);
+          default:
+            return this.renderPreviewError(new _ArchiveViewerError.ArchiveViewerError('archiveviewer-unsupported'), selectedArchiveEntry);
+        }
+      }
+    }
+  }, {
+    key: "renderPreviewError",
+    value: function renderPreviewError(error, entry) {
+      var shouldFireAnalytics = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      var _this$props3 = this.props,
+        item = _this$props3.item,
+        createAnalyticsEvent = _this$props3.createAnalyticsEvent;
+      if (shouldFireAnalytics) {
+        (0, _fireAnalytics.fireAnalytics)((0, _zipEntryLoadFailed.createZipEntryLoadFailedEvent)(item, error, entry), createAnalyticsEvent);
+      }
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_errorMessageWithAnalytics.default, {
+        fileId: item.id,
+        fileState: item,
+        error: error,
+        supressAnalytics: true
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.try_downloading_file))));
+    }
+  }]);
+}(_baseViewer.BaseViewer);

package/dist/cjs/viewers/archiveSidebar/archive-viewer-wrapper.compiled.css

@@ -0,0 +1,7 @@
+._154iidpf{top:0}
+._1e0c1txw{display:flex}
+._1ltv15ov{left:var(--_53yrec)}
+._1xi2idpf{right:0}
+._4cvr1h6o{align-items:center}
+._94n5idpf{bottom:0}
+._kqswstnw{position:absolute}

package/dist/cjs/viewers/archiveSidebar/archive-viewer-wrapper.js

@@ -0,0 +1,24 @@
+/* archive-viewer-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArchiveViewerWrapper = void 0;
+require("./archive-viewer-wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _styleWrappers = require("./styleWrappers");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var archiveViewerWrapperStyles = null;
+var ArchiveViewerWrapper = exports.ArchiveViewerWrapper = function ArchiveViewerWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltv15ov _1xi2idpf _94n5idpf _4cvr1h6o _1e0c1txw"]),
+    style: {
+      "--_53yrec": (0, _runtime.ix)("".concat(_styleWrappers.ARCHIVE_SIDE_BAR_WIDTH, "px"))
+    }
+  }, children);
+};