pageflow 17.1.0 → 17.2.0

data/entry_types/scrolled/package/frontend/Viewer-1482ca34.js

@@ -0,0 +1,480 @@
+import 'pageflow/frontend';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
+import 'pageflow-scrolled/entryState';
+import 'i18n-js';
+import './i18n-e06cac14.js';
+import { u as useBrowserFeature } from './PhonePlatformContext-9da43797.js';
+import { T as ThemeIcon } from './ThemeIcon-f6cb3a8f.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-61c25224.js';
+import { u as usePhonePlatform } from './usePhonePlatform-4ecb96d4.js';
+import { PanoViewer } from '@egjs/view360';
+import screenfull from 'screenfull';
+
+var styles = {"wrapper":"Fullscreen-module_wrapper__300hJ"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Panorama/Fullscreen.js";
+function Fullscreen({
+  isFullscreen,
+  children
+}) {
+  const root = useMemo(() => document.getElementById('fullscreenRoot'), []);
+  useEffect(() => {
+    if (isFullscreen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'initial';
+    }
+  }, [isFullscreen]);
+  if (isFullscreen) {
+    return ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+      className: styles.wrapper,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 20,
+        columnNumber: 7
+      }
+    }, children), root);
+  } else {
+    return children;
+  }
+}
+
+var styles$1 = {"indicator":"PanoramaIndicator-module_indicator__3A90v","visible":"PanoramaIndicator-module_visible__3LOgm","arrow":"PanoramaIndicator-module_arrow__QV1Pd","arrowLeft":"PanoramaIndicator-module_arrowLeft__Jh7GC PanoramaIndicator-module_arrow__QV1Pd","arrowRight":"PanoramaIndicator-module_arrowRight__ZZBtO PanoramaIndicator-module_arrow__QV1Pd","nudgeLeft":"PanoramaIndicator-module_nudgeLeft__IU_Iy","nudgeRight":"PanoramaIndicator-module_nudgeRight__3XzNu","text":"PanoramaIndicator-module_text__2FzUy"};
+
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Panorama/PanoramaIndicator.js";
+function PanoramaIndicator({
+  visible
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$1.indicator, {
+      [styles$1.visible]: visible
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 10,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$1.arrowLeft,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 11,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 12,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 13,
+      columnNumber: 11
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$1.arrowRight,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 16,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 17,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowRight",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 18,
+      columnNumber: 11
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$1.text,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 21,
+      columnNumber: 7
+    }
+  }, "360\xB0"));
+}
+
+var styles$2 = {"indicator":"FullscreenIndicator-module_indicator__2Jl_-","visible":"FullscreenIndicator-module_visible__2ywsZ","icon":"FullscreenIndicator-module_icon__2Ddof","icons":"FullscreenIndicator-module_icons__3-Xm6","text":"FullscreenIndicator-module_text__3wCW3","pulse":"FullscreenIndicator-module_pulse__1qujU","iconTopLeft":"FullscreenIndicator-module_iconTopLeft__2u7-j FullscreenIndicator-module_icon__2Ddof","iconTopRight":"FullscreenIndicator-module_iconTopRight__14nUk FullscreenIndicator-module_icon__2Ddof","iconBottomRight":"FullscreenIndicator-module_iconBottomRight__lEtN6 FullscreenIndicator-module_icon__2Ddof","iconBottomLeft":"FullscreenIndicator-module_iconBottomLeft__voLm_ FullscreenIndicator-module_icon__2Ddof"};
+
+var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Panorama/FullscreenIndicator.js";
+function FullscreenIndicator({
+  visible,
+  onClick
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$2.indicator, {
+      [styles$2.visible]: visible
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 10,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.icons,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 11,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.iconTopLeft,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 12,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 13,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.iconTopRight,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 15,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 16,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.iconBottomRight,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 18,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 19,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.iconBottomLeft,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 21,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: "arrowLeft",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 22,
+      columnNumber: 11
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.text,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 25,
+      columnNumber: 7
+    }
+  }, "360\xB0"));
+}
+
+var styles$3 = {"full":"Viewer-module_full__1q18y","container":"Viewer-module_container__3eJ34 Viewer-module_full__1q18y","spinner":"Viewer-module_spinner__2oRve","spin":"Viewer-module_spin__3jBR2","isLoading":"Viewer-module_isLoading__sQuGw"};
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var SpinnerIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React.createElement("circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  stroke: "currentColor",
+  strokeWidth: "4",
+  opacity: ".23"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+  opacity: ".75"
+})));
+
+var _jsxFileName$3 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/Panorama/Viewer.js";
+function Viewer({
+  imageFile,
+  viewerRef,
+  initialYaw,
+  initialPitch,
+  hidePanoramaIndicator,
+  onReady,
+  onFullscreen
+}) {
+  const elRef = useRef();
+  const initialYawRef = useRef(initialYaw);
+  const initialPitchRef = useRef(initialPitch);
+  const touchSupport = useBrowserFeature('touch support');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const isPhonePlatform = usePhonePlatform();
+
+  // When toggling to fullscreen mode, this component renders to a
+  // portal div in the body of the document. We do not want to recreate
+  // the PanoViewer instead to keep its current state (pitch, yaw etc.).
+  // We therefore initialize the PanoViewer on a detached DOM element
+  // and render a component called DOMNodeContainer which appends the
+  // element on each render. React.memo causes the DOMNodeContainer to
+  // render only when either
+  // - the parent Viewer component is mounted
+  // - Fullscreen component switches between using the portal or not
+  function appendViewerTo(parentNode) {
+    if (!elRef.current) {
+      elRef.current = document.createElement('div');
+      elRef.current.className = styles$3.full;
+      viewerRef.current = new PanoViewer(elRef.current, {
+        image: imageFile.urls.ultra,
+        projectionType: imageFile.configuration.projection === 'equirectangular_stereo' ? PanoViewer.PROJECTION_TYPE.STEREOSCOPIC_EQUI : PanoViewer.PROJECTION_TYPE.EQUIRECTANGULAR,
+        touchDirection: touchSupport ? PanoViewer.TOUCH_DIRECTION.YAW : PanoViewer.TOUCH_DIRECTION.ALL,
+        useZoom: false,
+        yaw: initialYawRef.current,
+        pitch: initialPitchRef.current
+      });
+      viewerRef.current.on(PanoViewer.EVENTS.READY, () => {
+        viewerRef.current.updateViewportDimensions();
+        setIsLoading(false);
+        if (onReady) {
+          onReady();
+        }
+      });
+    }
+    parentNode.appendChild(elRef.current);
+    viewerRef.current.updateViewportDimensions();
+  }
+  useEffect(() => {
+    return () => {
+      if (elRef.current) {
+        viewerRef.current.destroy();
+        viewerRef.current = null;
+        elRef.current = null;
+      }
+    };
+  }, [viewerRef]);
+  useEffect(() => {
+    if (initialYawRef.current !== initialYaw) {
+      initialYawRef.current = initialYaw;
+      viewerRef.current.lookAt({
+        yaw: initialYaw
+      }, 200);
+    }
+  }, [initialYaw, viewerRef]);
+  useEffect(() => {
+    if (initialPitchRef.current !== initialPitch) {
+      initialPitchRef.current = initialPitch;
+      viewerRef.current.lookAt({
+        pitch: initialPitch
+      }, 200);
+    }
+  }, [initialPitch, viewerRef]);
+  useEffect(() => {
+    function onChange() {
+      if (!screenfull.isFullscreen) {
+        setIsFullscreen(false);
+      }
+    }
+    if (screenfull.isEnabled) {
+      screenfull.on('change', onChange);
+      return () => screenfull.off('change', onChange);
+    }
+  }, []);
+  useEffect(() => {
+    function onChange() {
+      viewerRef.current.updateViewportDimensions();
+    }
+    window.addEventListener('resize', onChange);
+    return () => window.removeEventListener('resize', onChange);
+  }, [viewerRef]);
+  useEffect(() => {
+    if (isFullscreen) {
+      viewerRef.current.setTouchDirection(PanoViewer.TOUCH_DIRECTION.ALL);
+      viewerRef.current.setGyroMode(PanoViewer.GYRO_MODE.YAWPITCH);
+      viewerRef.current.setUseZoom(true);
+    } else {
+      if (touchSupport) {
+        viewerRef.current.setTouchDirection(PanoViewer.TOUCH_DIRECTION.YAW);
+        viewerRef.current.lookAt({
+          pitch: 0,
+          fov: 65
+        });
+      } else {
+        viewerRef.current.lookAt({
+          fov: 65
+        });
+      }
+      viewerRef.current.setGyroMode(PanoViewer.GYRO_MODE.NONE);
+      viewerRef.current.setUseZoom(false);
+    }
+  }, [isFullscreen, viewerRef, touchSupport]);
+  function preventDefaultForArrowUpDown(event) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault();
+    }
+  }
+  function enterFullscreen() {
+    if (onFullscreen) {
+      onFullscreen();
+    }
+    if (screenfull.isEnabled) {
+      screenfull.request();
+    }
+    setIsFullscreen(true);
+    viewerRef.current.enableSensor();
+  }
+  function exitFullscreen() {
+    if (screenfull.isEnabled) {
+      screenfull.exit();
+    }
+    setIsFullscreen(false);
+  }
+  return /*#__PURE__*/React.createElement(Fullscreen, {
+    isFullscreen: isFullscreen,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 169,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.container,
+    onKeyDown: preventDefaultForArrowUpDown,
+    onClick: () => {
+      isPhonePlatform && enterFullscreen();
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 170,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(DOMNodeContainer, {
+    className: styles$3.full,
+    onUpdate: el => appendViewerTo(el),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 173,
+      columnNumber: 9
+    }
+  })), /*#__PURE__*/React.createElement(SpinnerIcon, {
+    className: classNames(styles$3.spinner, {
+      [styles$3.isLoading]: isLoading
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 176,
+      columnNumber: 7
+    }
+  }), (!isPhonePlatform || isFullscreen) && /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
+    isFullscreen: isFullscreen,
+    onEnter: enterFullscreen,
+    onExit: exitFullscreen,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 179,
+      columnNumber: 8
+    }
+  }), /*#__PURE__*/React.createElement(PanoramaIndicator, {
+    visible: !isLoading && !isPhonePlatform && !isFullscreen && !hidePanoramaIndicator,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 182,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React.createElement(FullscreenIndicator, {
+    visible: !isLoading && isPhonePlatform && !isFullscreen,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 186,
+      columnNumber: 7
+    }
+  }));
+}
+const DOMNodeContainer = React.memo(function ({
+  className,
+  onUpdate
+}) {
+  const ref = useRef();
+  useEffect(() => {
+    const current = ref.current;
+    onUpdate(current);
+    return () => {
+      current.removeChild(current.firstChild);
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: className,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 206,
+      columnNumber: 5
+    }
+  });
+}, () => true);
+
+export default Viewer;

data/entry_types/scrolled/package/frontend/Viewer-70504231.js

@@ -0,0 +1,210 @@
+import React, { useRef, useCallback, useState } from 'react';
+import 'react-dom';
+import classNames from 'classnames';
+import './useDelayedBoolean-a387d85b.js';
+import 'pageflow-scrolled/entryState';
+import 'i18n-js';
+import './i18n-e06cac14.js';
+import { u as useContentElementEditorState } from './useContentElementEditorState-a084912e.js';
+import './ThemeIcon-f6cb3a8f.js';
+import { T as ToggleFullscreenCornerButton } from './ToggleFullscreenCornerButton-61c25224.js';
+import { F as FullscreenViewer } from './index-de2b418d.js';
+import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
+
+var styles = {"outer":"SwipeToClose-module_outer__1fl2h","inner":"SwipeToClose-module_inner__NOg1v"};
+
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/SwipeToClose.js";
+function SwipeToClose({
+  onClose,
+  children
+}) {
+  const start = useRef();
+  const inner = useRef();
+  const ratio = useRef(0);
+  const handleTouchStart = useCallback(event => {
+    start.current = event.touches[0].pageY;
+  }, []);
+  const handleTouchMove = useCallback(event => {
+    const offset = Math.max(-200, Math.min(200, event.touches[0].pageY - start.current));
+    ratio.current = Math.abs(offset / 200);
+    requestAnimationFrame(() => {
+      if (inner.current) {
+        inner.current.style.setProperty('transition', `none`);
+        inner.current.style.setProperty('transform', `translate3d(0, ${offset}px, 0)`);
+        inner.current.style.setProperty('opacity', 1 - ratio.current);
+      }
+    });
+  }, []);
+  const handleTouchEnd = useCallback(event => {
+    event.preventDefault();
+    if (ratio.current > 0.5) {
+      onClose();
+    }
+    requestAnimationFrame(() => {
+      if (inner.current) {
+        inner.current.style.setProperty('transition', `opacity 0.2s linear, transform 0.2s ease`);
+        inner.current.style.setProperty('transform', `translate3d(0, 0, 0)`);
+        inner.current.style.setProperty('opacity', 1);
+      }
+    });
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.outer,
+    onClick: onClose,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 44,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner,
+    ref: inner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 49,
+      columnNumber: 7
+    }
+  }, children));
+}
+
+var styles$1 = {"full":"ZoomableImage-module_full__1YJoO","container":"ZoomableImage-module_container__RTuPI","img":"ZoomableImage-module_img__3Vnst","visible":"ZoomableImage-module_visible__2ez0D"};
+
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ExpandableImage/ZoomableImage.js";
+function ZoomableImage({
+  onClose,
+  imageFile
+}) {
+  const imgRef = useRef();
+  const [isVisible, setIsVisible] = useState(true);
+  const onUpdate = useCallback(({
+    x,
+    y,
+    scale
+  }) => {
+    if (imgRef.current) {
+      imgRef.current.style.setProperty('transform', make3dTransformValue({
+        x,
+        y,
+        scale
+      }));
+    }
+  }, []);
+  const handleClose = useCallback(() => {
+    onClose();
+    setIsVisible(false);
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$1.full,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 30,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React.createElement(SwipeToClose, {
+    onClose: handleClose,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 31,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React.createElement(QuickPinchZoom, {
+    containerProps: {
+      className: styles$1.container
+    },
+    onUpdate: onUpdate,
+    isTouch: () => true,
+    minZoom: 0.8,
+    maxZoom: 5,
+    tapZoomFactor: 1.5,
+    draggableUnZoomed: false,
+    doubleTapToggleZoom: true,
+    enforceBoundsDuringZoom: true,
+    centerContained: true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 32,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: imageFile.urls.large,
+    width: imageFile.width,
+    height: imageFile.height,
+    alt: "img",
+    ref: imgRef,
+    className: classNames(styles$1.img, {
+      [styles$1.visible]: isVisible
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 42,
+      columnNumber: 11
+    }
+  }))));
+}
+
+var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/frontend/ExpandableImage/Viewer.js";
+function Viewer({
+  imageFile,
+  contentElementId,
+  children
+}) {
+  const {
+    isEditable,
+    isSelected
+  } = useContentElementEditorState();
+  return /*#__PURE__*/React.createElement(FullscreenViewer, {
+    contentElementId: contentElementId,
+    renderChildren: ({
+      enterFullscreen
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      onClick: enterFullscreen,
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 20,
+        columnNumber: 11
+      }
+    }, children), /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
+      isFullscreen: false,
+      onEnter: enterFullscreen,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 24,
+        columnNumber: 11
+      }
+    })),
+    renderFullscreenChildren: ({
+      exitFullscreen
+    }) => /*#__PURE__*/React.createElement(ZoomableImage, {
+      onClose: exitFullscreen,
+      imageFile: imageFile,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 29,
+        columnNumber: 9
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 16,
+      columnNumber: 5
+    }
+  });
+}
+
+export default Viewer;