@tachybase/components 0.23.8

package/lib/lightbox/react-image-lightbox.js

@@ -0,0 +1,1431 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var react_image_lightbox_exports = {};
+__export(react_image_lightbox_exports, {
+  default: () => react_image_lightbox_default
+});
+module.exports = __toCommonJS(react_image_lightbox_exports);
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_react_modal = __toESM(require("react-modal"));
+var import_constant = require("./constant");
+var import_util = require("./util");
+var import_style = require("./style.css");
+const _ReactImageLightbox = class _ReactImageLightbox extends import_react.Component {
+  moveRequested;
+  imageCache;
+  listeners;
+  timeouts;
+  didUnmount;
+  windowContext;
+  outerEl;
+  zoomInBtn;
+  zoomOutBtn;
+  caption;
+  currentAction;
+  eventsSource;
+  pointerList;
+  preventInnerClose;
+  preventInnerCloseTimeout;
+  keyPressed;
+  lastKeyDownTime;
+  resizeTimeout;
+  wheelActionTimeout;
+  resetScrollTimeout;
+  scrollX;
+  scrollY;
+  moveStartX;
+  moveStartY;
+  moveStartOffsetX;
+  moveStartOffsetY;
+  swipeStartX;
+  swipeStartY;
+  swipeEndX;
+  swipeEndY;
+  pinchTouchList;
+  pinchDistance;
+  keyCounter;
+  static isTargetMatchImage(target) {
+    return target && /ril-image-current/.test(target.className);
+  }
+  static parseMouseEvent(mouseEvent) {
+    return {
+      id: "mouse",
+      source: import_constant.SOURCE_MOUSE,
+      x: parseInt(mouseEvent.clientX, 10),
+      y: parseInt(mouseEvent.clientY, 10)
+    };
+  }
+  static parseTouchPointer(touchPointer) {
+    return {
+      id: touchPointer.identifier,
+      source: import_constant.SOURCE_TOUCH,
+      x: parseInt(touchPointer.clientX, 10),
+      y: parseInt(touchPointer.clientY, 10)
+    };
+  }
+  static parsePointerEvent(pointerEvent) {
+    return {
+      id: pointerEvent.pointerId,
+      source: import_constant.SOURCE_POINTER,
+      x: parseInt(pointerEvent.clientX, 10),
+      y: parseInt(pointerEvent.clientY, 10)
+    };
+  }
+  // Request to transition to the previous image
+  static getTransform({ x = 0, y = 0, zoom = 1, width, targetWidth }) {
+    let nextX = x;
+    const windowWidth = (0, import_util.getWindowWidth)();
+    if (width > windowWidth) {
+      nextX += (windowWidth - width) / 2;
+    }
+    const scaleFactor = zoom * (targetWidth / width);
+    return {
+      transform: `translate3d(${nextX}px,${y}px,0) scale3d(${scaleFactor},${scaleFactor},1)`
+    };
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      //-----------------------------
+      // Animation
+      //-----------------------------
+      // Lightbox is closing
+      // When Lightbox is mounted, if animation is enabled it will open with the reverse of the closing animation
+      isClosing: !props.animationDisabled,
+      // Component parts should animate (e.g., when images are moving, or image is being zoomed)
+      shouldAnimate: false,
+      //-----------------------------
+      // Zoom settings
+      //-----------------------------
+      // Zoom level of image
+      zoomLevel: import_constant.MIN_ZOOM_LEVEL,
+      //-----------------------------
+      // Image position settings
+      //-----------------------------
+      // Horizontal offset from center
+      offsetX: 0,
+      // Vertical offset from center
+      offsetY: 0,
+      // image load error for srcType
+      loadErrorStatus: {}
+    };
+    this.outerEl = import_react.default.createRef();
+    this.zoomInBtn = import_react.default.createRef();
+    this.zoomOutBtn = import_react.default.createRef();
+    this.caption = import_react.default.createRef();
+    this.closeIfClickInner = this.closeIfClickInner.bind(this);
+    this.handleImageDoubleClick = this.handleImageDoubleClick.bind(this);
+    this.handleImageMouseWheel = this.handleImageMouseWheel.bind(this);
+    this.handleKeyInput = this.handleKeyInput.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleOuterMousewheel = this.handleOuterMousewheel.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleTouchMove = this.handleTouchMove.bind(this);
+    this.handleTouchEnd = this.handleTouchEnd.bind(this);
+    this.handlePointerEvent = this.handlePointerEvent.bind(this);
+    this.handleCaptionMousewheel = this.handleCaptionMousewheel.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.handleZoomInButtonClick = this.handleZoomInButtonClick.bind(this);
+    this.handleZoomOutButtonClick = this.handleZoomOutButtonClick.bind(this);
+    this.requestClose = this.requestClose.bind(this);
+    this.requestMoveNext = this.requestMoveNext.bind(this);
+    this.requestMovePrev = this.requestMovePrev.bind(this);
+    this.timeouts = [];
+    this.currentAction = import_constant.ACTION_NONE;
+    this.eventsSource = import_constant.SOURCE_ANY;
+    this.pointerList = [];
+    this.preventInnerClose = false;
+    this.preventInnerCloseTimeout = null;
+    this.keyPressed = false;
+    this.imageCache = {};
+    this.lastKeyDownTime = 0;
+    this.resizeTimeout = null;
+    this.wheelActionTimeout = null;
+    this.resetScrollTimeout = null;
+    this.scrollX = 0;
+    this.scrollY = 0;
+    this.moveStartX = 0;
+    this.moveStartY = 0;
+    this.moveStartOffsetX = 0;
+    this.moveStartOffsetY = 0;
+    this.swipeStartX = 0;
+    this.swipeStartY = 0;
+    this.swipeEndX = 0;
+    this.swipeEndY = 0;
+    this.pinchTouchList = null;
+    this.pinchDistance = 0;
+    this.keyCounter = 0;
+    this.moveRequested = false;
+  }
+  componentDidMount() {
+    if (!this.props.animationDisabled) {
+      this.setState({ isClosing: false });
+    }
+    this.windowContext = (0, import_util.getHighestSafeWindowContext)();
+    this.listeners = {
+      resize: this.handleWindowResize,
+      mouseup: this.handleMouseUp,
+      touchend: this.handleTouchEnd,
+      touchcancel: this.handleTouchEnd,
+      pointerdown: this.handlePointerEvent,
+      pointermove: this.handlePointerEvent,
+      pointerup: this.handlePointerEvent,
+      pointercancel: this.handlePointerEvent
+    };
+    Object.keys(this.listeners).forEach((type) => {
+      this.windowContext.addEventListener(type, this.listeners[type]);
+    });
+    this.loadAllImages();
+  }
+  shouldComponentUpdate(nextProps) {
+    this.getSrcTypes().forEach((srcType) => {
+      if (this.props[srcType.name] !== nextProps[srcType.name]) {
+        this.moveRequested = false;
+      }
+    });
+    return !this.moveRequested;
+  }
+  componentDidUpdate(prevProps) {
+    let sourcesChanged = false;
+    const prevSrcDict = {};
+    const nextSrcDict = {};
+    this.getSrcTypes().forEach((srcType) => {
+      if (prevProps[srcType.name] !== this.props[srcType.name]) {
+        sourcesChanged = true;
+        prevSrcDict[prevProps[srcType.name]] = true;
+        nextSrcDict[this.props[srcType.name]] = true;
+      }
+    });
+    if (sourcesChanged || this.moveRequested) {
+      Object.keys(prevSrcDict).forEach((prevSrc) => {
+        if (!(prevSrc in nextSrcDict) && prevSrc in this.imageCache) {
+          this.imageCache[prevSrc].loaded = false;
+        }
+      });
+      this.moveRequested = false;
+      this.loadAllImages(this.props);
+    }
+  }
+  componentWillUnmount() {
+    this.didUnmount = true;
+    Object.keys(this.listeners).forEach((type) => {
+      this.windowContext.removeEventListener(type, this.listeners[type]);
+    });
+    this.timeouts.forEach((tid) => clearTimeout(tid));
+  }
+  setTimeout(func, time) {
+    const id = setTimeout(() => {
+      this.timeouts = this.timeouts.filter((tid) => tid !== id);
+      func();
+    }, time);
+    this.timeouts.push(id);
+    return id;
+  }
+  setPreventInnerClose() {
+    if (this.preventInnerCloseTimeout) {
+      this.clearTimeout(this.preventInnerCloseTimeout);
+    }
+    this.preventInnerClose = true;
+    this.preventInnerCloseTimeout = this.setTimeout(() => {
+      this.preventInnerClose = false;
+      this.preventInnerCloseTimeout = null;
+    }, 100);
+  }
+  // Get info for the best suited image to display with the given srcType
+  getBestImageForType(srcType, fileSrc) {
+    let imageSrc = fileSrc || this.props[srcType];
+    let fitSizes = {};
+    if (this.isImageLoaded(imageSrc)) {
+      fitSizes = this.getFitSizes(this.imageCache[imageSrc].width, this.imageCache[imageSrc].height);
+    } else if (this.isImageLoaded(this.props[`${srcType}Thumbnail`])) {
+      imageSrc = this.props[`${srcType}Thumbnail`];
+      fitSizes = this.getFitSizes(this.imageCache[imageSrc].width, this.imageCache[imageSrc].height, true);
+    } else {
+      return null;
+    }
+    return {
+      src: imageSrc,
+      height: this.imageCache[imageSrc].height,
+      width: this.imageCache[imageSrc].width,
+      targetHeight: fitSizes.height,
+      targetWidth: fitSizes.width
+    };
+  }
+  // Get sizing for when an image is larger than the window
+  getFitSizes(width, height, stretch = false) {
+    const boxSize = this.getLightboxRect();
+    let maxHeight = boxSize.height - this.props.imagePadding * 2;
+    let maxWidth = boxSize.width - this.props.imagePadding * 2;
+    if (!stretch) {
+      maxHeight = Math.min(maxHeight, height);
+      maxWidth = Math.min(maxWidth, width);
+    }
+    const maxRatio = maxWidth / maxHeight;
+    const srcRatio = width / height;
+    if (maxRatio > srcRatio) {
+      return {
+        width: width * maxHeight / height,
+        height: maxHeight
+      };
+    }
+    return {
+      width: maxWidth,
+      height: height * maxWidth / width
+    };
+  }
+  getMaxOffsets(zoomLevel = this.state.zoomLevel) {
+    const currentImageInfo = this.getBestImageForType("mainSrc");
+    if (currentImageInfo === null) {
+      return { maxX: 0, minX: 0, maxY: 0, minY: 0 };
+    }
+    const boxSize = this.getLightboxRect();
+    const zoomMultiplier = this.getZoomMultiplier(zoomLevel);
+    let maxX = 0;
+    if (zoomMultiplier * currentImageInfo.width - boxSize.width < 0) {
+      maxX = (boxSize.width - zoomMultiplier * currentImageInfo.width) / 2;
+    } else {
+      maxX = (zoomMultiplier * currentImageInfo.width - boxSize.width) / 2;
+    }
+    let maxY = 0;
+    if (zoomMultiplier * currentImageInfo.height - boxSize.height < 0) {
+      maxY = (boxSize.height - zoomMultiplier * currentImageInfo.height) / 2;
+    } else {
+      maxY = (zoomMultiplier * currentImageInfo.height - boxSize.height) / 2;
+    }
+    return {
+      maxX,
+      maxY,
+      minX: -1 * maxX,
+      minY: -1 * maxY
+    };
+  }
+  // Get image src types
+  getSrcTypes() {
+    return [
+      {
+        name: "mainSrc",
+        keyEnding: `i${this.keyCounter}`
+      },
+      {
+        name: "mainSrcThumbnail",
+        keyEnding: `t${this.keyCounter}`
+      },
+      {
+        name: "nextSrc",
+        keyEnding: `i${this.keyCounter + 1}`
+      },
+      {
+        name: "nextSrcThumbnail",
+        keyEnding: `t${this.keyCounter + 1}`
+      },
+      {
+        name: "prevSrc",
+        keyEnding: `i${this.keyCounter - 1}`
+      },
+      {
+        name: "prevSrcThumbnail",
+        keyEnding: `t${this.keyCounter - 1}`
+      },
+      {
+        name: "mainFile",
+        keyEnding: `i${this.keyCounter}`
+      },
+      {
+        name: "mainSrcThumbnail",
+        keyEnding: `t${this.keyCounter}`
+      },
+      {
+        name: "nextFile",
+        keyEnding: `i${this.keyCounter + 1}`
+      },
+      {
+        name: "nextFileThumbnail",
+        keyEnding: `t${this.keyCounter + 1}`
+      },
+      {
+        name: "prevFile",
+        keyEnding: `i${this.keyCounter - 1}`
+      },
+      {
+        name: "prevFileThumbnail",
+        keyEnding: `t${this.keyCounter - 1}`
+      }
+    ];
+  }
+  /**
+   * Get sizing when the image is scaled
+   */
+  getZoomMultiplier(zoomLevel = this.state.zoomLevel) {
+    return import_constant.ZOOM_RATIO ** zoomLevel;
+  }
+  /**
+   * Get the size of the lightbox in pixels
+   */
+  getLightboxRect() {
+    if (this.outerEl.current) {
+      return this.outerEl.current.getBoundingClientRect();
+    }
+    return {
+      width: (0, import_util.getWindowWidth)(),
+      height: (0, import_util.getWindowHeight)(),
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    };
+  }
+  clearTimeout(id) {
+    this.timeouts = this.timeouts.filter((tid) => tid !== id);
+    clearTimeout(id);
+  }
+  // Change zoom level
+  changeZoom(zoomLevel, clientX, clientY) {
+    if (!this.props.enableZoom) {
+      return;
+    }
+    const nextZoomLevel = Math.max(import_constant.MIN_ZOOM_LEVEL, Math.min(import_constant.MAX_ZOOM_LEVEL, zoomLevel));
+    if (nextZoomLevel === this.state.zoomLevel) {
+      return;
+    }
+    if (nextZoomLevel === import_constant.MIN_ZOOM_LEVEL) {
+      this.setState({
+        zoomLevel: nextZoomLevel,
+        offsetX: 0,
+        offsetY: 0
+      });
+      return;
+    }
+    const imageBaseSize = this.getBestImageForType("mainSrc");
+    if (imageBaseSize === null) {
+      return;
+    }
+    const currentZoomMultiplier = this.getZoomMultiplier();
+    const nextZoomMultiplier = this.getZoomMultiplier(nextZoomLevel);
+    const boxRect = this.getLightboxRect();
+    const pointerX = typeof clientX !== "undefined" ? clientX - boxRect.left : boxRect.width / 2;
+    const pointerY = typeof clientY !== "undefined" ? clientY - boxRect.top : boxRect.height / 2;
+    const currentImageOffsetX = (boxRect.width - imageBaseSize.width * currentZoomMultiplier) / 2;
+    const currentImageOffsetY = (boxRect.height - imageBaseSize.height * currentZoomMultiplier) / 2;
+    const currentImageRealOffsetX = currentImageOffsetX - this.state.offsetX;
+    const currentImageRealOffsetY = currentImageOffsetY - this.state.offsetY;
+    const currentPointerXRelativeToImage = (pointerX - currentImageRealOffsetX) / currentZoomMultiplier;
+    const currentPointerYRelativeToImage = (pointerY - currentImageRealOffsetY) / currentZoomMultiplier;
+    const nextImageRealOffsetX = pointerX - currentPointerXRelativeToImage * nextZoomMultiplier;
+    const nextImageRealOffsetY = pointerY - currentPointerYRelativeToImage * nextZoomMultiplier;
+    const nextImageOffsetX = (boxRect.width - imageBaseSize.width * nextZoomMultiplier) / 2;
+    const nextImageOffsetY = (boxRect.height - imageBaseSize.height * nextZoomMultiplier) / 2;
+    let nextOffsetX = nextImageOffsetX - nextImageRealOffsetX;
+    let nextOffsetY = nextImageOffsetY - nextImageRealOffsetY;
+    if (this.currentAction !== import_constant.ACTION_PINCH) {
+      const maxOffsets = this.getMaxOffsets();
+      if (this.state.zoomLevel > nextZoomLevel) {
+        nextOffsetX = Math.max(maxOffsets.minX, Math.min(maxOffsets.maxX, nextOffsetX));
+        nextOffsetY = Math.max(maxOffsets.minY, Math.min(maxOffsets.maxY, nextOffsetY));
+      }
+    }
+    this.setState({
+      zoomLevel: nextZoomLevel,
+      offsetX: nextOffsetX,
+      offsetY: nextOffsetY
+    });
+  }
+  closeIfClickInner(event) {
+    if (!this.preventInnerClose && event.target.className.search(/\bril-inner\b/) > -1) {
+      this.requestClose(event);
+    }
+  }
+  /**
+   * Handle user keyboard actions
+   */
+  handleKeyInput(event) {
+    event.stopPropagation();
+    if (this.isAnimating()) {
+      return;
+    }
+    if (event.type === "keyup") {
+      this.lastKeyDownTime -= this.props.keyRepeatKeyupBonus;
+      return;
+    }
+    const keyCode = event.which || event.keyCode;
+    const currentTime = /* @__PURE__ */ new Date();
+    if (currentTime.getTime() - this.lastKeyDownTime < this.props.keyRepeatLimit && keyCode !== import_constant.KEYS.ESC) {
+      return;
+    }
+    this.lastKeyDownTime = currentTime.getTime();
+    switch (keyCode) {
+      // ESC key closes the lightbox
+      case import_constant.KEYS.ESC:
+        event.preventDefault();
+        this.requestClose(event);
+        break;
+      // Left arrow key moves to previous image
+      case import_constant.KEYS.LEFT_ARROW:
+        if (!this.props.prevSrc) {
+          return;
+        }
+        event.preventDefault();
+        this.keyPressed = true;
+        this.requestMovePrev(event);
+        break;
+      // Right arrow key moves to next image
+      case import_constant.KEYS.RIGHT_ARROW:
+        if (!this.props.nextSrc) {
+          return;
+        }
+        event.preventDefault();
+        this.keyPressed = true;
+        this.requestMoveNext(event);
+        break;
+      default:
+    }
+  }
+  /**
+   * Handle a mouse wheel event over the lightbox container
+   */
+  handleOuterMousewheel(event) {
+    event.stopPropagation();
+    const xThreshold = import_constant.WHEEL_MOVE_X_THRESHOLD;
+    let actionDelay = 0;
+    const imageMoveDelay = 500;
+    this.clearTimeout(this.resetScrollTimeout);
+    this.resetScrollTimeout = this.setTimeout(() => {
+      this.scrollX = 0;
+      this.scrollY = 0;
+    }, 300);
+    if (this.wheelActionTimeout !== null || this.isAnimating()) {
+      return;
+    }
+    if (Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
+      this.scrollY = 0;
+      this.scrollX += event.deltaX;
+      const bigLeapX = xThreshold / 2;
+      if (this.scrollX >= xThreshold || event.deltaX >= bigLeapX) {
+        this.requestMoveNext(event);
+        actionDelay = imageMoveDelay;
+        this.scrollX = 0;
+      } else if (this.scrollX <= -1 * xThreshold || event.deltaX <= -1 * bigLeapX) {
+        this.requestMovePrev(event);
+        actionDelay = imageMoveDelay;
+        this.scrollX = 0;
+      }
+    }
+    if (actionDelay !== 0) {
+      this.wheelActionTimeout = this.setTimeout(() => {
+        this.wheelActionTimeout = null;
+      }, actionDelay);
+    }
+  }
+  handleImageMouseWheel(event) {
+    const yThreshold = import_constant.WHEEL_MOVE_Y_THRESHOLD;
+    if (Math.abs(event.deltaY) >= Math.abs(event.deltaX)) {
+      event.stopPropagation();
+      if (Math.abs(event.deltaY) < yThreshold) {
+        return;
+      }
+      this.scrollX = 0;
+      this.scrollY += event.deltaY;
+      this.changeZoom(this.state.zoomLevel - event.deltaY, event.clientX, event.clientY);
+    }
+  }
+  /**
+   * Handle a double click on the current image
+   */
+  handleImageDoubleClick(event) {
+    if (this.state.zoomLevel > import_constant.MIN_ZOOM_LEVEL) {
+      this.changeZoom(import_constant.MIN_ZOOM_LEVEL, event.clientX, event.clientY);
+    } else {
+      this.changeZoom(this.state.zoomLevel + import_constant.ZOOM_BUTTON_INCREMENT_SIZE, event.clientX, event.clientY);
+    }
+  }
+  shouldHandleEvent(source) {
+    if (this.eventsSource === source) {
+      return true;
+    }
+    if (this.eventsSource === import_constant.SOURCE_ANY) {
+      this.eventsSource = source;
+      return true;
+    }
+    switch (source) {
+      case import_constant.SOURCE_MOUSE:
+        return false;
+      case import_constant.SOURCE_TOUCH:
+        this.eventsSource = import_constant.SOURCE_TOUCH;
+        this.filterPointersBySource();
+        return true;
+      case import_constant.SOURCE_POINTER:
+        if (this.eventsSource === import_constant.SOURCE_MOUSE) {
+          this.eventsSource = import_constant.SOURCE_POINTER;
+          this.filterPointersBySource();
+          return true;
+        }
+        return false;
+      default:
+        return false;
+    }
+  }
+  addPointer(pointer) {
+    this.pointerList.push(pointer);
+  }
+  removePointer(pointer) {
+    this.pointerList = this.pointerList.filter(({ id }) => id !== pointer.id);
+  }
+  filterPointersBySource() {
+    this.pointerList = this.pointerList.filter(({ source }) => source === this.eventsSource);
+  }
+  handleMouseDown(event) {
+    if (this.shouldHandleEvent(import_constant.SOURCE_MOUSE) && _ReactImageLightbox.isTargetMatchImage(event.target)) {
+      this.addPointer(_ReactImageLightbox.parseMouseEvent(event));
+      this.multiPointerStart(event);
+    }
+  }
+  handleMouseMove(event) {
+    if (this.shouldHandleEvent(import_constant.SOURCE_MOUSE)) {
+      this.multiPointerMove(event, [_ReactImageLightbox.parseMouseEvent(event)]);
+    }
+  }
+  handleMouseUp(event) {
+    if (this.shouldHandleEvent(import_constant.SOURCE_MOUSE)) {
+      this.removePointer(_ReactImageLightbox.parseMouseEvent(event));
+      this.multiPointerEnd(event);
+    }
+  }
+  handlePointerEvent(event) {
+    if (this.shouldHandleEvent(import_constant.SOURCE_POINTER)) {
+      switch (event.type) {
+        case "pointerdown":
+          if (_ReactImageLightbox.isTargetMatchImage(event.target)) {
+            this.addPointer(_ReactImageLightbox.parsePointerEvent(event));
+            this.multiPointerStart(event);
+          }
+          break;
+        case "pointermove":
+          this.multiPointerMove(event, [_ReactImageLightbox.parsePointerEvent(event)]);
+          break;
+        case "pointerup":
+        case "pointercancel":
+          this.removePointer(_ReactImageLightbox.parsePointerEvent(event));
+          this.multiPointerEnd(event);
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  handleTouchStart(event) {
+    if (this.shouldHandleEvent(import_constant.SOURCE_TOUCH) && _ReactImageLightbox.isTargetMatchImage(event.target)) {
+      [].forEach.call(
+        event.changedTouches,
+        (eventTouch) => this.addPointer(_ReactImageLightbox.parseTouchPointer(eventTouch))
+      );
+      this.multiPointerStart(event);
+    }
+  }
+  handleTouchMove(event) {
+    if (this.shouldHandleEvent(import_constant.SOURCE_TOUCH)) {
+      this.multiPointerMove(
+        event,
+        [].map.call(event.changedTouches, (eventTouch) => _ReactImageLightbox.parseTouchPointer(eventTouch))
+      );
+    }
+  }
+  handleTouchEnd(event) {
+    if (this.shouldHandleEvent(import_constant.SOURCE_TOUCH)) {
+      [].map.call(event.changedTouches, (touch) => this.removePointer(_ReactImageLightbox.parseTouchPointer(touch)));
+      this.multiPointerEnd(event);
+    }
+  }
+  decideMoveOrSwipe(pointer) {
+    if (this.state.zoomLevel <= import_constant.MIN_ZOOM_LEVEL) {
+      this.handleSwipeStart(pointer);
+    } else {
+      this.handleMoveStart(pointer);
+    }
+  }
+  multiPointerStart(event) {
+    this.handleEnd(null);
+    switch (this.pointerList.length) {
+      case 1: {
+        event.preventDefault();
+        this.decideMoveOrSwipe(this.pointerList[0]);
+        break;
+      }
+      case 2: {
+        event.preventDefault();
+        this.handlePinchStart(this.pointerList);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  multiPointerMove(event, pointerList) {
+    switch (this.currentAction) {
+      case import_constant.ACTION_MOVE: {
+        event.preventDefault();
+        this.handleMove(pointerList[0]);
+        break;
+      }
+      case import_constant.ACTION_SWIPE: {
+        event.preventDefault();
+        this.handleSwipe(pointerList[0]);
+        break;
+      }
+      case import_constant.ACTION_PINCH: {
+        event.preventDefault();
+        this.handlePinch(pointerList);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  multiPointerEnd(event) {
+    if (this.currentAction !== import_constant.ACTION_NONE) {
+      this.setPreventInnerClose();
+      this.handleEnd(event);
+    }
+    switch (this.pointerList.length) {
+      case 0: {
+        this.eventsSource = import_constant.SOURCE_ANY;
+        break;
+      }
+      case 1: {
+        event.preventDefault();
+        this.decideMoveOrSwipe(this.pointerList[0]);
+        break;
+      }
+      case 2: {
+        event.preventDefault();
+        this.handlePinchStart(this.pointerList);
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  handleEnd(event) {
+    switch (this.currentAction) {
+      case import_constant.ACTION_MOVE:
+        this.handleMoveEnd(event);
+        break;
+      case import_constant.ACTION_SWIPE:
+        this.handleSwipeEnd(event);
+        break;
+      case import_constant.ACTION_PINCH:
+        this.handlePinchEnd(event);
+        break;
+      default:
+        break;
+    }
+  }
+  // Handle move start over the lightbox container
+  // This happens:
+  // - On a mouseDown event
+  // - On a touchstart event
+  handleMoveStart({ x: clientX, y: clientY }) {
+    if (!this.props.enableZoom) {
+      return;
+    }
+    this.currentAction = import_constant.ACTION_MOVE;
+    this.moveStartX = clientX;
+    this.moveStartY = clientY;
+    this.moveStartOffsetX = this.state.offsetX;
+    this.moveStartOffsetY = this.state.offsetY;
+  }
+  // Handle dragging over the lightbox container
+  // This happens:
+  // - After a mouseDown and before a mouseUp event
+  // - After a touchstart and before a touchend event
+  handleMove({ x: clientX, y: clientY }) {
+    const newOffsetX = this.moveStartX - clientX + this.moveStartOffsetX;
+    const newOffsetY = this.moveStartY - clientY + this.moveStartOffsetY;
+    if (this.state.offsetX !== newOffsetX || this.state.offsetY !== newOffsetY) {
+      this.setState({
+        offsetX: newOffsetX,
+        offsetY: newOffsetY
+      });
+    }
+  }
+  handleMoveEnd(event) {
+    this.currentAction = import_constant.ACTION_NONE;
+    this.moveStartX = 0;
+    this.moveStartY = 0;
+    this.moveStartOffsetX = 0;
+    this.moveStartOffsetY = 0;
+    const maxOffsets = this.getMaxOffsets();
+    const nextOffsetX = Math.max(maxOffsets.minX, Math.min(maxOffsets.maxX, this.state.offsetX));
+    const nextOffsetY = Math.max(maxOffsets.minY, Math.min(maxOffsets.maxY, this.state.offsetY));
+    if (nextOffsetX !== this.state.offsetX || nextOffsetY !== this.state.offsetY) {
+      this.setState({
+        offsetX: nextOffsetX,
+        offsetY: nextOffsetY,
+        shouldAnimate: true
+      });
+      this.setTimeout(() => {
+        this.setState({ shouldAnimate: false });
+      }, this.props.animationDuration);
+    }
+  }
+  handleSwipeStart({ x: clientX, y: clientY }) {
+    this.currentAction = import_constant.ACTION_SWIPE;
+    this.swipeStartX = clientX;
+    this.swipeStartY = clientY;
+    this.swipeEndX = clientX;
+    this.swipeEndY = clientY;
+  }
+  handleSwipe({ x: clientX, y: clientY }) {
+    this.swipeEndX = clientX;
+    this.swipeEndY = clientY;
+  }
+  handleSwipeEnd(event) {
+    const xDiff = this.swipeEndX - this.swipeStartX;
+    const xDiffAbs = Math.abs(xDiff);
+    const yDiffAbs = Math.abs(this.swipeEndY - this.swipeStartY);
+    this.currentAction = import_constant.ACTION_NONE;
+    this.swipeStartX = 0;
+    this.swipeStartY = 0;
+    this.swipeEndX = 0;
+    this.swipeEndY = 0;
+    if (!event || this.isAnimating() || xDiffAbs < yDiffAbs * 1.5) {
+      return;
+    }
+    if (xDiffAbs < import_constant.MIN_SWIPE_DISTANCE) {
+      const boxRect = this.getLightboxRect();
+      if (xDiffAbs < boxRect.width / 4) {
+        return;
+      }
+    }
+    if (xDiff > 0 && this.props.prevSrc) {
+      event.preventDefault();
+      this.requestMovePrev();
+    } else if (xDiff < 0 && this.props.nextSrc) {
+      event.preventDefault();
+      this.requestMoveNext();
+    }
+  }
+  calculatePinchDistance([a, b] = this.pinchTouchList) {
+    return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
+  }
+  calculatePinchCenter([a, b] = this.pinchTouchList) {
+    return {
+      x: a.x - (a.x - b.x) / 2,
+      y: a.y - (a.y - b.y) / 2
+    };
+  }
+  handlePinchStart(pointerList) {
+    if (!this.props.enableZoom) {
+      return;
+    }
+    this.currentAction = import_constant.ACTION_PINCH;
+    this.pinchTouchList = pointerList.map(({ id, x, y }) => ({ id, x, y }));
+    this.pinchDistance = this.calculatePinchDistance();
+  }
+  handlePinch(pointerList) {
+    this.pinchTouchList = this.pinchTouchList.map((oldPointer) => {
+      for (let i = 0; i < pointerList.length; i += 1) {
+        if (pointerList[i].id === oldPointer.id) {
+          return pointerList[i];
+        }
+      }
+      return oldPointer;
+    });
+    const newDistance = this.calculatePinchDistance();
+    const zoomLevel = this.state.zoomLevel + newDistance - this.pinchDistance;
+    this.pinchDistance = newDistance;
+    const { x: clientX, y: clientY } = this.calculatePinchCenter(this.pinchTouchList);
+    this.changeZoom(zoomLevel, clientX, clientY);
+  }
+  handlePinchEnd(event) {
+    this.currentAction = import_constant.ACTION_NONE;
+    this.pinchTouchList = null;
+    this.pinchDistance = 0;
+  }
+  // Handle the window resize event
+  handleWindowResize() {
+    this.clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = this.setTimeout(this.forceUpdate.bind(this), 100);
+  }
+  handleZoomInButtonClick() {
+    const nextZoomLevel = this.state.zoomLevel + import_constant.ZOOM_BUTTON_INCREMENT_SIZE;
+    this.changeZoom(nextZoomLevel);
+    if (nextZoomLevel === import_constant.MAX_ZOOM_LEVEL) {
+      this.zoomOutBtn.current.focus();
+    }
+  }
+  handleZoomOutButtonClick() {
+    const nextZoomLevel = this.state.zoomLevel - import_constant.ZOOM_BUTTON_INCREMENT_SIZE;
+    this.changeZoom(nextZoomLevel);
+    if (nextZoomLevel === import_constant.MIN_ZOOM_LEVEL) {
+      this.zoomInBtn.current.focus();
+    }
+  }
+  handleCaptionMousewheel(event) {
+    event.stopPropagation();
+    if (!this.caption.current) {
+      return;
+    }
+    const { height } = this.caption.current.getBoundingClientRect();
+    const { scrollHeight, scrollTop } = this.caption.current;
+    if (event.deltaY > 0 && height + scrollTop >= scrollHeight || event.deltaY < 0 && scrollTop <= 0) {
+      event.preventDefault();
+    }
+  }
+  // Detach key and mouse input events
+  isAnimating() {
+    return this.state.shouldAnimate || this.state.isClosing;
+  }
+  // Check if image is loaded
+  isImageLoaded(imageSrc) {
+    return imageSrc && imageSrc in this.imageCache && this.imageCache[imageSrc].loaded;
+  }
+  // Load image from src and call callback with image width and height on load
+  loadImage(srcType, imageSrc, done) {
+    if (this.isImageLoaded(imageSrc)) {
+      this.setTimeout(() => {
+        done();
+      }, 1);
+      return;
+    }
+    const inMemoryImage = new global.Image();
+    if (this.props.imageCrossOrigin) {
+      inMemoryImage.crossOrigin = this.props.imageCrossOrigin;
+    }
+    inMemoryImage.onerror = (errorEvent) => {
+      this.props.onImageLoadError(imageSrc, srcType, errorEvent);
+      this.setState((prevState) => ({
+        loadErrorStatus: { ...prevState.loadErrorStatus, [srcType]: true }
+      }));
+      done(errorEvent);
+    };
+    inMemoryImage.onload = () => {
+      this.props.onImageLoad(imageSrc, srcType, inMemoryImage);
+      this.imageCache[imageSrc] = {
+        loaded: true,
+        width: inMemoryImage.width,
+        height: inMemoryImage.height
+      };
+      done();
+    };
+    inMemoryImage.src = imageSrc;
+  }
+  // Load all images and their thumbnails
+  loadAllImages(props = this.props) {
+    const generateLoadDoneCallback = /* @__PURE__ */ __name((srcType, imageSrc) => (err) => {
+      if (err) {
+        return;
+      }
+      if (this.props[srcType] !== imageSrc || this.didUnmount) {
+        return;
+      }
+      this.forceUpdate();
+    }, "generateLoadDoneCallback");
+    this.getSrcTypes().forEach((srcType) => {
+      const type = srcType.name;
+      if (props[type] && this.state.loadErrorStatus[type]) {
+        this.setState((prevState) => ({
+          loadErrorStatus: { ...prevState.loadErrorStatus, [type]: false }
+        }));
+      }
+      if (props[type] && !this.isImageLoaded(props[type])) {
+        this.loadImage(type, props[type], generateLoadDoneCallback(type, props[type]));
+      }
+    });
+  }
+  // Request that the lightbox be closed
+  requestClose(event) {
+    const closeLightbox = /* @__PURE__ */ __name(() => this.props.onCloseRequest(event), "closeLightbox");
+    if (this.props.animationDisabled || event.type === "keydown" && !this.props.animationOnKeyInput) {
+      closeLightbox();
+      return;
+    }
+    this.setState({ isClosing: true });
+    this.setTimeout(closeLightbox, this.props.animationDuration);
+  }
+  requestMove(direction, event) {
+    const nextState = {
+      zoomLevel: import_constant.MIN_ZOOM_LEVEL,
+      offsetX: 0,
+      offsetY: 0
+    };
+    if (!this.props.animationDisabled && (!this.keyPressed || this.props.animationOnKeyInput)) {
+      nextState.shouldAnimate = true;
+      this.setTimeout(() => this.setState({ shouldAnimate: false }), this.props.animationDuration);
+    }
+    this.keyPressed = false;
+    this.moveRequested = true;
+    if (direction === "prev") {
+      this.keyCounter -= 1;
+      this.setState(nextState);
+      this.props.onMovePrevRequest(event);
+    } else {
+      this.keyCounter += 1;
+      this.setState(nextState);
+      this.props.onMoveNextRequest(event);
+    }
+  }
+  // Request to transition to the next image
+  requestMoveNext(event) {
+    this.requestMove("next", event);
+  }
+  // Request to transition to the previous image
+  requestMovePrev(event) {
+    this.requestMove("prev", event);
+  }
+  render() {
+    const {
+      animationDisabled,
+      animationDuration,
+      clickOutsideToClose,
+      discourageDownloads,
+      enableZoom,
+      imageTitle,
+      nextSrc,
+      prevSrc,
+      mainFile,
+      nextFile,
+      prevFile,
+      previewList,
+      toolbarButtons,
+      reactModalStyle,
+      onAfterOpen,
+      imageCrossOrigin,
+      reactModalProps,
+      loader
+    } = this.props;
+    const { zoomLevel, offsetX, offsetY, isClosing, loadErrorStatus } = this.state;
+    const boxSize = this.getLightboxRect();
+    let transitionStyle = {};
+    if (!animationDisabled && this.isAnimating()) {
+      transitionStyle = {
+        ...transitionStyle,
+        transition: `transform ${animationDuration}ms`
+      };
+    }
+    const keyEndings = {};
+    this.getSrcTypes().forEach(({ name, keyEnding }) => {
+      keyEndings[name] = keyEnding;
+    });
+    const images = [];
+    const addImage = /* @__PURE__ */ __name((srcType, imageClass, transforms) => {
+      var _a, _b, _c;
+      const fieldType = (_a = this.props[srcType]) == null ? void 0 : _a.mimetype;
+      const { checkedComponent } = previewList[fieldType] || previewList["default"];
+      const bestImageInfo = ((_b = this.props[srcType]) == null ? void 0 : _b.mimetype).includes("image") ? this.getBestImageForType(srcType, (_c = this.props[srcType]) == null ? void 0 : _c.imageUrl) : {};
+      const imageStyle = {
+        ...transitionStyle,
+        ..._ReactImageLightbox.getTransform({
+          ...transforms,
+          height: boxSize.height - 20,
+          width: boxSize.width - 20,
+          targetWidth: boxSize.width - 50,
+          targeHeight: boxSize.height - 50,
+          ...bestImageInfo
+        })
+      };
+      if (zoomLevel > import_constant.MIN_ZOOM_LEVEL) {
+        imageStyle.cursor = "move";
+      }
+      images.push(
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${imageClass} ril__image`,
+            style: {
+              ...imageStyle,
+              width: (bestImageInfo == null ? void 0 : bestImageInfo.width) || "90%",
+              height: "90%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            }
+          },
+          checkedComponent({
+            key: `${fieldType + keyEndings[srcType]}`,
+            onDoubleClick: this.handleImageDoubleClick,
+            onWheel: this.handleImageMouseWheel,
+            onDragStart: /* @__PURE__ */ __name((e) => e.preventDefault(), "onDragStart"),
+            file: this.props[srcType],
+            bestImageInfo,
+            mimetype: fieldType
+          })
+        )
+      );
+    }, "addImage");
+    const zoomMultiplier = this.getZoomMultiplier();
+    addImage("nextFile", "ril-image-next ril__imageNext", {
+      x: boxSize.width
+    });
+    addImage("mainFile", "ril-image-current", {
+      x: -1 * offsetX,
+      y: -1 * offsetY,
+      zoom: zoomMultiplier
+    });
+    addImage("prevFile", "ril-image-prev ril__imagePrev", {
+      x: -1 * boxSize.width
+    });
+    const modalStyle = {
+      overlay: {
+        zIndex: 1e3,
+        backgroundColor: "transparent",
+        ...reactModalStyle.overlay
+        // Allow style overrides via props
+      },
+      content: {
+        backgroundColor: "transparent",
+        overflow: "hidden",
+        // Needed, otherwise keyboard shortcuts scroll the page
+        border: "none",
+        borderRadius: 0,
+        padding: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        ...reactModalStyle.content
+        // Allow style overrides via props
+      }
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_react_modal.default,
+      {
+        isOpen: true,
+        onRequestClose: clickOutsideToClose ? this.requestClose : void 0,
+        onAfterOpen: () => {
+          if (this.outerEl.current) {
+            this.outerEl.current.focus();
+          }
+          onAfterOpen();
+        },
+        style: modalStyle,
+        contentLabel: (0, import_util.translate)("Lightbox"),
+        appElement: typeof global.window !== "undefined" ? global.window.document.body : void 0,
+        ...reactModalProps
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `ril-outer ril__outer ril__outerAnimating ${this.props.wrapperClassName} ${isClosing ? "ril-closing ril__outerClosing" : ""}`,
+          style: {
+            transition: `opacity ${animationDuration}ms`,
+            animationDuration: `${animationDuration}ms`,
+            animationDirection: isClosing ? "normal" : "reverse"
+          },
+          ref: this.outerEl,
+          onWheel: this.handleOuterMousewheel,
+          onMouseMove: this.handleMouseMove,
+          onMouseDown: this.handleMouseDown,
+          onTouchStart: this.handleTouchStart,
+          onTouchMove: this.handleTouchMove,
+          tabIndex: "-1",
+          onKeyDown: this.handleKeyInput,
+          onKeyUp: this.handleKeyInput
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "ril-inner ril__inner",
+            onClick: clickOutsideToClose ? this.closeIfClickInner : void 0
+          },
+          images
+        ),
+        prevSrc && /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            className: "ril-prev-button ril__navButtons ril__navButtonPrev",
+            key: "prev",
+            "aria-label": this.props.prevLabel,
+            title: this.props.prevLabel,
+            onClick: !this.isAnimating() ? this.requestMovePrev : void 0
+          }
+        ),
+        nextSrc && /* @__PURE__ */ import_react.default.createElement(
+          "button",
+          {
+            type: "button",
+            className: "ril-next-button ril__navButtons ril__navButtonNext",
+            key: "next",
+            "aria-label": this.props.nextLabel,
+            title: this.props.nextLabel,
+            onClick: !this.isAnimating() ? this.requestMoveNext : void 0
+          }
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: "ril-toolbar ril__toolbar"
+          },
+          /* @__PURE__ */ import_react.default.createElement("ul", { className: "ril-toolbar-left ril__toolbarSide ril__toolbarLeftSide" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "ril-toolbar__item ril__toolbarItem" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "ril-toolbar__item__child ril__toolbarItemChild" }, imageTitle))),
+          /* @__PURE__ */ import_react.default.createElement("ul", { className: "ril-toolbar-right ril__toolbarSide ril__toolbarRightSide" }, toolbarButtons && toolbarButtons.map((button, i) => /* @__PURE__ */ import_react.default.createElement("li", { key: `button_${i + 1}`, className: "ril-toolbar__item ril__toolbarItem" }, button)), enableZoom && /* @__PURE__ */ import_react.default.createElement("li", { className: "ril-toolbar__item ril__toolbarItem" }, /* @__PURE__ */ import_react.default.createElement(
+            "button",
+            {
+              type: "button",
+              key: "zoom-in",
+              "aria-label": this.props.zoomInLabel,
+              title: this.props.zoomInLabel,
+              className: [
+                "ril-zoom-in",
+                "ril__toolbarItemChild",
+                "ril__builtinButton",
+                "ril__zoomInButton",
+                ...zoomLevel === import_constant.MAX_ZOOM_LEVEL ? ["ril__builtinButtonDisabled"] : []
+              ].join(" "),
+              ref: this.zoomInBtn,
+              disabled: this.isAnimating() || zoomLevel === import_constant.MAX_ZOOM_LEVEL,
+              onClick: !this.isAnimating() && zoomLevel !== import_constant.MAX_ZOOM_LEVEL ? this.handleZoomInButtonClick : void 0
+            }
+          )), enableZoom && /* @__PURE__ */ import_react.default.createElement("li", { className: "ril-toolbar__item ril__toolbarItem" }, /* @__PURE__ */ import_react.default.createElement(
+            "button",
+            {
+              type: "button",
+              key: "zoom-out",
+              "aria-label": this.props.zoomOutLabel,
+              title: this.props.zoomOutLabel,
+              className: [
+                "ril-zoom-out",
+                "ril__toolbarItemChild",
+                "ril__builtinButton",
+                "ril__zoomOutButton",
+                ...zoomLevel === import_constant.MIN_ZOOM_LEVEL ? ["ril__builtinButtonDisabled"] : []
+              ].join(" "),
+              ref: this.zoomOutBtn,
+              disabled: this.isAnimating() || zoomLevel === import_constant.MIN_ZOOM_LEVEL,
+              onClick: !this.isAnimating() && zoomLevel !== import_constant.MIN_ZOOM_LEVEL ? this.handleZoomOutButtonClick : void 0
+            }
+          )), /* @__PURE__ */ import_react.default.createElement("li", { className: "ril-toolbar__item ril__toolbarItem" }, /* @__PURE__ */ import_react.default.createElement(
+            "button",
+            {
+              type: "button",
+              key: "close",
+              "aria-label": this.props.closeLabel,
+              title: this.props.closeLabel,
+              className: "ril-close ril-toolbar__item__child ril__toolbarItemChild ril__builtinButton ril__closeButton",
+              onClick: !this.isAnimating() ? this.requestClose : void 0
+            }
+          )))
+        ),
+        this.props.imageCaption && /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            onWheel: this.handleCaptionMousewheel,
+            onMouseDown: (event) => event.stopPropagation(),
+            className: "ril-caption ril__caption",
+            ref: this.caption
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "ril-caption-content ril__captionContent" }, this.props.imageCaption)
+        )
+      )
+    );
+  }
+};
+__name(_ReactImageLightbox, "ReactImageLightbox");
+__publicField(_ReactImageLightbox, "defaultProps", {
+  animationDisabled: false,
+  clickOutsideToClose: true,
+  enableZoom: true,
+  imageCountSeparator: "of",
+  nextSrc: null,
+  prevSrc: null,
+  mainSrc: null,
+  onCloseRequest: /* @__PURE__ */ __name(() => {
+  }, "onCloseRequest"),
+  onMovePrevRequest: /* @__PURE__ */ __name(() => {
+  }, "onMovePrevRequest"),
+  onMoveNextRequest: /* @__PURE__ */ __name(() => {
+  }, "onMoveNextRequest"),
+  onImageLoad: /* @__PURE__ */ __name(() => {
+  }, "onImageLoad"),
+  onImageLoadError: /* @__PURE__ */ __name(() => {
+  }, "onImageLoadError"),
+  onZoomChange: /* @__PURE__ */ __name(() => {
+  }, "onZoomChange"),
+  reactModalStyle: {},
+  showZoomButtons: true,
+  zoomStep: import_constant.ZOOM_RATIO,
+  zoomButtonsContainerStyle: {},
+  zoomButtonsStyle: {},
+  zoomContainerStyle: {},
+  zoomLevel: import_constant.MIN_ZOOM_LEVEL,
+  zoomTransitionDuration: 300
+});
+let ReactImageLightbox = _ReactImageLightbox;
+ReactImageLightbox.propTypes = {
+  previewList: import_prop_types.default.object,
+  //-----------------------------
+  // Image sources
+  //-----------------------------
+  // Main display image url
+  mainSrc: import_prop_types.default.string.isRequired,
+  mainFile: import_prop_types.default.object,
+  // Previous display image url (displayed to the left)
+  // If left undefined, movePrev actions will not be performed, and the button not displayed
+  prevSrc: import_prop_types.default.string,
+  prevFile: import_prop_types.default.object,
+  // Next display image url (displayed to the right)
+  // If left undefined, moveNext actions will not be performed, and the button not displayed
+  nextSrc: import_prop_types.default.string,
+  nextFile: import_prop_types.default.object,
+  //-----------------------------
+  // Image thumbnail sources
+  //-----------------------------
+  // Thumbnail image url corresponding to props.mainSrc
+  mainSrcThumbnail: import_prop_types.default.string,
+  // Thumbnail image url corresponding to props.prevSrc
+  prevSrcThumbnail: import_prop_types.default.string,
+  // Thumbnail image url corresponding to props.nextSrc
+  nextSrcThumbnail: import_prop_types.default.string,
+  //-----------------------------
+  // Event Handlers
+  //-----------------------------
+  // Close window event
+  // Should change the parent state such that the lightbox is not rendered
+  onCloseRequest: import_prop_types.default.func.isRequired,
+  // Move to previous image event
+  // Should change the parent state such that props.prevSrc becomes props.mainSrc,
+  //  props.mainSrc becomes props.nextSrc, etc.
+  onMovePrevRequest: import_prop_types.default.func,
+  // Move to next image event
+  // Should change the parent state such that props.nextSrc becomes props.mainSrc,
+  //  props.mainSrc becomes props.prevSrc, etc.
+  onMoveNextRequest: import_prop_types.default.func,
+  // Called when an image fails to load
+  // (imageSrc: string, srcType: string, errorEvent: object): void
+  onImageLoadError: import_prop_types.default.func,
+  // Called when image successfully loads
+  onImageLoad: import_prop_types.default.func,
+  // Open window event
+  onAfterOpen: import_prop_types.default.func,
+  //-----------------------------
+  // Download discouragement settings
+  //-----------------------------
+  // Enable download discouragement (prevents [right-click -> Save Image As...])
+  discourageDownloads: import_prop_types.default.bool,
+  //-----------------------------
+  // Animation settings
+  //-----------------------------
+  // Disable all animation
+  animationDisabled: import_prop_types.default.bool,
+  // Disable animation on actions performed with keyboard shortcuts
+  animationOnKeyInput: import_prop_types.default.bool,
+  // Animation duration (ms)
+  animationDuration: import_prop_types.default.number,
+  //-----------------------------
+  // Keyboard shortcut settings
+  //-----------------------------
+  // Required interval of time (ms) between key actions
+  // (prevents excessively fast navigation of images)
+  keyRepeatLimit: import_prop_types.default.number,
+  // Amount of time (ms) restored after each keyup
+  // (makes rapid key presses slightly faster than holding down the key to navigate images)
+  keyRepeatKeyupBonus: import_prop_types.default.number,
+  //-----------------------------
+  // Image info
+  //-----------------------------
+  // Image title
+  imageTitle: import_prop_types.default.node,
+  // Image caption
+  imageCaption: import_prop_types.default.node,
+  // Optional crossOrigin attribute
+  imageCrossOrigin: import_prop_types.default.string,
+  //-----------------------------
+  // Lightbox style
+  //-----------------------------
+  // Set z-index style, etc., for the parent react-modal (format: https://github.com/reactjs/react-modal#styles )
+  reactModalStyle: import_prop_types.default.shape({}),
+  // Padding (px) between the edge of the window and the lightbox
+  imagePadding: import_prop_types.default.number,
+  wrapperClassName: import_prop_types.default.string,
+  //-----------------------------
+  // Other
+  //-----------------------------
+  // Array of custom toolbar buttons
+  toolbarButtons: import_prop_types.default.arrayOf(import_prop_types.default.node),
+  // When true, clicks outside of the image close the lightbox
+  clickOutsideToClose: import_prop_types.default.bool,
+  // Set to false to disable zoom functionality and hide zoom buttons
+  enableZoom: import_prop_types.default.bool,
+  // Override props set on react-modal (https://github.com/reactjs/react-modal)
+  reactModalProps: import_prop_types.default.shape({}),
+  // Aria-labels
+  nextLabel: import_prop_types.default.string,
+  prevLabel: import_prop_types.default.string,
+  zoomInLabel: import_prop_types.default.string,
+  zoomOutLabel: import_prop_types.default.string,
+  closeLabel: import_prop_types.default.string,
+  imageLoadErrorMessage: import_prop_types.default.node,
+  // custom loader
+  loader: import_prop_types.default.node
+};
+ReactImageLightbox.defaultProps = {
+  // @ts-ignore
+  imageTitle: null,
+  imageCaption: null,
+  toolbarButtons: null,
+  reactModalProps: {},
+  animationDisabled: false,
+  animationDuration: 300,
+  animationOnKeyInput: false,
+  clickOutsideToClose: true,
+  closeLabel: "Close lightbox",
+  discourageDownloads: false,
+  enableZoom: true,
+  imagePadding: 10,
+  imageCrossOrigin: null,
+  keyRepeatKeyupBonus: 40,
+  keyRepeatLimit: 180,
+  mainSrcThumbnail: null,
+  nextLabel: "Next image",
+  nextSrc: null,
+  nextSrcThumbnail: null,
+  onAfterOpen: /* @__PURE__ */ __name(() => {
+  }, "onAfterOpen"),
+  onImageLoadError: /* @__PURE__ */ __name(() => {
+  }, "onImageLoadError"),
+  onImageLoad: /* @__PURE__ */ __name(() => {
+  }, "onImageLoad"),
+  onMoveNextRequest: /* @__PURE__ */ __name(() => {
+  }, "onMoveNextRequest"),
+  onMovePrevRequest: /* @__PURE__ */ __name(() => {
+  }, "onMovePrevRequest"),
+  prevLabel: "Previous image",
+  prevSrc: null,
+  prevSrcThumbnail: null,
+  reactModalStyle: {},
+  wrapperClassName: "",
+  zoomInLabel: "Zoom in",
+  zoomOutLabel: "Zoom out",
+  imageLoadErrorMessage: "This image failed to load",
+  loader: void 0
+};
+var react_image_lightbox_default = ReactImageLightbox;