import { __extends as O, __assign as l } from "./node_modules/tslib/tslib.es6.mjs";
import g from "react";
import F from "../normalize-wheel/index.mjs";
function N(n, r, t, e, o, i) {
  i === void 0 && (i = 0);
  var s = y(n, r, i), a = s.width, c = s.height, h = Math.min(a, t), p = Math.min(c, e);
  return h > p * o ? {
    width: p * o,
    height: p
  } : {
    width: h,
    height: h / o
  };
}
function I(n) {
  return n.width > n.height ? n.width / n.naturalWidth : n.height / n.naturalHeight;
}
function R(n, r, t, e, o) {
  o === void 0 && (o = 0);
  var i = y(r.width, r.height, o), s = i.width, a = i.height;
  return {
    x: _(n.x, s, t.width, e),
    y: _(n.y, a, t.height, e)
  };
}
function _(n, r, t, e) {
  var o = r * e / 2 - t / 2;
  return x(n, -o, o);
}
function E(n, r) {
  return Math.sqrt(Math.pow(n.y - r.y, 2) + Math.pow(n.x - r.x, 2));
}
function M(n, r) {
  return Math.atan2(r.y - n.y, r.x - n.x) * 180 / Math.PI;
}
function j(n, r, t, e, o, i, s) {
  i === void 0 && (i = 0), s === void 0 && (s = !0);
  var a = s ? H : G, c = y(r.width, r.height, i), h = y(r.naturalWidth, r.naturalHeight, i), p = {
    x: a(100, ((c.width - t.width / o) / 2 - n.x / o) / c.width * 100),
    y: a(100, ((c.height - t.height / o) / 2 - n.y / o) / c.height * 100),
    width: a(100, t.width / c.width * 100 / o),
    height: a(100, t.height / c.height * 100 / o)
  }, u = Math.round(a(h.width, p.width * h.width / 100)), d = Math.round(a(h.height, p.height * h.height / 100)), w = h.width >= h.height * e, f = w ? {
    width: Math.round(d * e),
    height: d
  } : {
    width: u,
    height: Math.round(u / e)
  }, v = l(l({}, f), {
    x: Math.round(a(h.width - f.width, p.x * h.width / 100)),
    y: Math.round(a(h.height - f.height, p.y * h.height / 100))
  });
  return {
    croppedAreaPercentages: p,
    croppedAreaPixels: v
  };
}
function H(n, r) {
  return Math.min(n, Math.max(0, r));
}
function G(n, r) {
  return r;
}
function B(n, r, t, e, o, i) {
  var s = y(r.width, r.height, t), a = x(e.width / s.width * (100 / n.width), o, i), c = {
    x: a * s.width / 2 - e.width / 2 - s.width * a * (n.x / 100),
    y: a * s.height / 2 - e.height / 2 - s.height * a * (n.y / 100)
  };
  return {
    crop: c,
    zoom: a
  };
}
function V(n, r, t) {
  var e = I(r);
  return t.height > t.width ? t.height / (n.height * e) : t.width / (n.width * e);
}
function q(n, r, t, e, o, i) {
  t === void 0 && (t = 0);
  var s = y(r.naturalWidth, r.naturalHeight, t), a = x(V(n, r, e), o, i), c = e.height > e.width ? e.height / n.height : e.width / n.width, h = {
    x: ((s.width - n.width) / 2 - n.x) * c,
    y: ((s.height - n.height) / 2 - n.y) * c
  };
  return {
    crop: h,
    zoom: a
  };
}
function W(n, r) {
  return {
    x: (r.x + n.x) / 2,
    y: (r.y + n.y) / 2
  };
}
function U(n) {
  return n * Math.PI / 180;
}
function y(n, r, t) {
  var e = U(t);
  return {
    width: Math.abs(Math.cos(e) * n) + Math.abs(Math.sin(e) * r),
    height: Math.abs(Math.sin(e) * n) + Math.abs(Math.cos(e) * r)
  };
}
function x(n, r, t) {
  return Math.min(Math.max(n, r), t);
}
function S() {
  for (var n = [], r = 0; r < arguments.length; r++)
    n[r] = arguments[r];
  return n.filter(function(t) {
    return typeof t == "string" && t.length > 0;
  }).join(" ").trim();
}
var Y = `.reactEasyCrop_Container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: move;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reactEasyCrop_Image,
.reactEasyCrop_Video {
  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */
}

.reactEasyCrop_Contain {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.reactEasyCrop_Cover_Horizontal {
  width: 100%;
  height: auto;
}
.reactEasyCrop_Cover_Vertical {
  width: auto;
  height: 100%;
}

.reactEasyCrop_CropArea {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  box-shadow: 0 0 0 9999em;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.reactEasyCrop_CropAreaRound {
  border-radius: 50%;
}

.reactEasyCrop_CropAreaGrid::before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  top: 0;
  bottom: 0;
  left: 33.33%;
  right: 33.33%;
  border-top: 0;
  border-bottom: 0;
}

.reactEasyCrop_CropAreaGrid::after {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  top: 33.33%;
  bottom: 33.33%;
  left: 0;
  right: 0;
  border-left: 0;
  border-right: 0;
}
`, k = 1, J = 3, $ = (
  /** @class */
  function(n) {
    O(r, n);
    function r() {
      var t = n !== null && n.apply(this, arguments) || this;
      return t.imageRef = g.createRef(), t.videoRef = g.createRef(), t.containerPosition = {
        x: 0,
        y: 0
      }, t.containerRef = null, t.styleRef = null, t.containerRect = null, t.mediaSize = {
        width: 0,
        height: 0,
        naturalWidth: 0,
        naturalHeight: 0
      }, t.dragStartPosition = {
        x: 0,
        y: 0
      }, t.dragStartCrop = {
        x: 0,
        y: 0
      }, t.gestureZoomStart = 0, t.gestureRotationStart = 0, t.isTouching = !1, t.lastPinchDistance = 0, t.lastPinchRotation = 0, t.rafDragTimeout = null, t.rafPinchTimeout = null, t.wheelTimer = null, t.currentDoc = typeof document < "u" ? document : null, t.currentWindow = typeof window < "u" ? window : null, t.resizeObserver = null, t.state = {
        cropSize: null,
        hasWheelJustStarted: !1,
        mediaObjectFit: void 0
      }, t.initResizeObserver = function() {
        if (!(typeof window.ResizeObserver > "u" || !t.containerRef)) {
          var e = !0;
          t.resizeObserver = new window.ResizeObserver(function(o) {
            if (e) {
              e = !1;
              return;
            }
            t.computeSizes();
          }), t.resizeObserver.observe(t.containerRef);
        }
      }, t.preventZoomSafari = function(e) {
        return e.preventDefault();
      }, t.cleanEvents = function() {
        t.currentDoc && (t.currentDoc.removeEventListener("mousemove", t.onMouseMove), t.currentDoc.removeEventListener("mouseup", t.onDragStopped), t.currentDoc.removeEventListener("touchmove", t.onTouchMove), t.currentDoc.removeEventListener("touchend", t.onDragStopped), t.currentDoc.removeEventListener("gesturemove", t.onGestureMove), t.currentDoc.removeEventListener("gestureend", t.onGestureEnd), t.currentDoc.removeEventListener("scroll", t.onScroll));
      }, t.clearScrollEvent = function() {
        t.containerRef && t.containerRef.removeEventListener("wheel", t.onWheel), t.wheelTimer && clearTimeout(t.wheelTimer);
      }, t.onMediaLoad = function() {
        var e = t.computeSizes();
        e && (t.emitCropData(), t.setInitialCrop(e)), t.props.onMediaLoaded && t.props.onMediaLoaded(t.mediaSize);
      }, t.setInitialCrop = function(e) {
        if (t.props.initialCroppedAreaPercentages) {
          var o = B(t.props.initialCroppedAreaPercentages, t.mediaSize, t.props.rotation, e, t.props.minZoom, t.props.maxZoom), i = o.crop, s = o.zoom;
          t.props.onCropChange(i), t.props.onZoomChange && t.props.onZoomChange(s);
        } else if (t.props.initialCroppedAreaPixels) {
          var a = q(t.props.initialCroppedAreaPixels, t.mediaSize, t.props.rotation, e, t.props.minZoom, t.props.maxZoom), i = a.crop, s = a.zoom;
          t.props.onCropChange(i), t.props.onZoomChange && t.props.onZoomChange(s);
        }
      }, t.computeSizes = function() {
        var e, o, i, s, a, c, h = t.imageRef.current || t.videoRef.current;
        if (h && t.containerRef) {
          t.containerRect = t.containerRef.getBoundingClientRect(), t.saveContainerPosition();
          var p = t.containerRect.width / t.containerRect.height, u = ((e = t.imageRef.current) === null || e === void 0 ? void 0 : e.naturalWidth) || ((o = t.videoRef.current) === null || o === void 0 ? void 0 : o.videoWidth) || 0, d = ((i = t.imageRef.current) === null || i === void 0 ? void 0 : i.naturalHeight) || ((s = t.videoRef.current) === null || s === void 0 ? void 0 : s.videoHeight) || 0, w = h.offsetWidth < u || h.offsetHeight < d, f = u / d, v = void 0;
          if (w)
            switch (t.state.mediaObjectFit) {
              default:
              case "contain":
                v = p > f ? {
                  width: t.containerRect.height * f,
                  height: t.containerRect.height
                } : {
                  width: t.containerRect.width,
                  height: t.containerRect.width / f
                };
                break;
              case "horizontal-cover":
                v = {
                  width: t.containerRect.width,
                  height: t.containerRect.width / f
                };
                break;
              case "vertical-cover":
                v = {
                  width: t.containerRect.height * f,
                  height: t.containerRect.height
                };
                break;
            }
          else
            v = {
              width: h.offsetWidth,
              height: h.offsetHeight
            };
          t.mediaSize = l(l({}, v), {
            naturalWidth: u,
            naturalHeight: d
          }), t.props.setMediaSize && t.props.setMediaSize(t.mediaSize);
          var m = t.props.cropSize ? t.props.cropSize : N(t.mediaSize.width, t.mediaSize.height, t.containerRect.width, t.containerRect.height, t.props.aspect, t.props.rotation);
          return (((a = t.state.cropSize) === null || a === void 0 ? void 0 : a.height) !== m.height || ((c = t.state.cropSize) === null || c === void 0 ? void 0 : c.width) !== m.width) && t.props.onCropSizeChange && t.props.onCropSizeChange(m), t.setState({
            cropSize: m
          }, t.recomputeCropPosition), t.props.setCropSize && t.props.setCropSize(m), m;
        }
      }, t.saveContainerPosition = function() {
        if (t.containerRef) {
          var e = t.containerRef.getBoundingClientRect();
          t.containerPosition = {
            x: e.left,
            y: e.top
          };
        }
      }, t.onMouseDown = function(e) {
        t.currentDoc && (e.preventDefault(), t.currentDoc.addEventListener("mousemove", t.onMouseMove), t.currentDoc.addEventListener("mouseup", t.onDragStopped), t.saveContainerPosition(), t.onDragStart(r.getMousePoint(e)));
      }, t.onMouseMove = function(e) {
        return t.onDrag(r.getMousePoint(e));
      }, t.onScroll = function(e) {
        t.currentDoc && (e.preventDefault(), t.saveContainerPosition());
      }, t.onTouchStart = function(e) {
        t.currentDoc && (t.isTouching = !0, !(t.props.onTouchRequest && !t.props.onTouchRequest(e)) && (t.currentDoc.addEventListener("touchmove", t.onTouchMove, {
          passive: !1
        }), t.currentDoc.addEventListener("touchend", t.onDragStopped), t.saveContainerPosition(), e.touches.length === 2 ? t.onPinchStart(e) : e.touches.length === 1 && t.onDragStart(r.getTouchPoint(e.touches[0]))));
      }, t.onTouchMove = function(e) {
        e.preventDefault(), e.touches.length === 2 ? t.onPinchMove(e) : e.touches.length === 1 && t.onDrag(r.getTouchPoint(e.touches[0]));
      }, t.onGestureStart = function(e) {
        t.currentDoc && (e.preventDefault(), t.currentDoc.addEventListener("gesturechange", t.onGestureMove), t.currentDoc.addEventListener("gestureend", t.onGestureEnd), t.gestureZoomStart = t.props.zoom, t.gestureRotationStart = t.props.rotation);
      }, t.onGestureMove = function(e) {
        if (e.preventDefault(), !t.isTouching) {
          var o = r.getMousePoint(e), i = t.gestureZoomStart - 1 + e.scale;
          if (t.setNewZoom(i, o, {
            shouldUpdatePosition: !0
          }), t.props.onRotationChange) {
            var s = t.gestureRotationStart + e.rotation;
            t.props.onRotationChange(s);
          }
        }
      }, t.onGestureEnd = function(e) {
        t.cleanEvents();
      }, t.onDragStart = function(e) {
        var o, i, s = e.x, a = e.y;
        t.dragStartPosition = {
          x: s,
          y: a
        }, t.dragStartCrop = l({}, t.props.crop), (i = (o = t.props).onInteractionStart) === null || i === void 0 || i.call(o);
      }, t.onDrag = function(e) {
        var o = e.x, i = e.y;
        t.currentWindow && (t.rafDragTimeout && t.currentWindow.cancelAnimationFrame(t.rafDragTimeout), t.rafDragTimeout = t.currentWindow.requestAnimationFrame(function() {
          if (t.state.cropSize && !(o === void 0 || i === void 0)) {
            var s = o - t.dragStartPosition.x, a = i - t.dragStartPosition.y, c = {
              x: t.dragStartCrop.x + s,
              y: t.dragStartCrop.y + a
            }, h = t.props.restrictPosition ? R(c, t.mediaSize, t.state.cropSize, t.props.zoom, t.props.rotation) : c;
            t.props.onCropChange(h);
          }
        }));
      }, t.onDragStopped = function() {
        var e, o;
        t.isTouching = !1, t.cleanEvents(), t.emitCropData(), (o = (e = t.props).onInteractionEnd) === null || o === void 0 || o.call(e);
      }, t.onWheel = function(e) {
        if (t.currentWindow && !(t.props.onWheelRequest && !t.props.onWheelRequest(e))) {
          e.preventDefault();
          var o = r.getMousePoint(e), i = F(e).pixelY, s = t.props.zoom - i * t.props.zoomSpeed / 200;
          t.setNewZoom(s, o, {
            shouldUpdatePosition: !0
          }), t.state.hasWheelJustStarted || t.setState({
            hasWheelJustStarted: !0
          }, function() {
            var a, c;
            return (c = (a = t.props).onInteractionStart) === null || c === void 0 ? void 0 : c.call(a);
          }), t.wheelTimer && clearTimeout(t.wheelTimer), t.wheelTimer = t.currentWindow.setTimeout(function() {
            return t.setState({
              hasWheelJustStarted: !1
            }, function() {
              var a, c;
              return (c = (a = t.props).onInteractionEnd) === null || c === void 0 ? void 0 : c.call(a);
            });
          }, 250);
        }
      }, t.getPointOnContainer = function(e, o) {
        var i = e.x, s = e.y;
        if (!t.containerRect)
          throw new Error("The Cropper is not mounted");
        return {
          x: t.containerRect.width / 2 - (i - o.x),
          y: t.containerRect.height / 2 - (s - o.y)
        };
      }, t.getPointOnMedia = function(e) {
        var o = e.x, i = e.y, s = t.props, a = s.crop, c = s.zoom;
        return {
          x: (o + a.x) / c,
          y: (i + a.y) / c
        };
      }, t.setNewZoom = function(e, o, i) {
        var s = i === void 0 ? {} : i, a = s.shouldUpdatePosition, c = a === void 0 ? !0 : a;
        if (!(!t.state.cropSize || !t.props.onZoomChange)) {
          var h = x(e, t.props.minZoom, t.props.maxZoom);
          if (c) {
            var p = t.getPointOnContainer(o, t.containerPosition), u = t.getPointOnMedia(p), d = {
              x: u.x * h - p.x,
              y: u.y * h - p.y
            }, w = t.props.restrictPosition ? R(d, t.mediaSize, t.state.cropSize, h, t.props.rotation) : d;
            t.props.onCropChange(w);
          }
          t.props.onZoomChange(h);
        }
      }, t.getCropData = function() {
        if (!t.state.cropSize)
          return null;
        var e = t.props.restrictPosition ? R(t.props.crop, t.mediaSize, t.state.cropSize, t.props.zoom, t.props.rotation) : t.props.crop;
        return j(e, t.mediaSize, t.state.cropSize, t.getAspect(), t.props.zoom, t.props.rotation, t.props.restrictPosition);
      }, t.emitCropData = function() {
        var e = t.getCropData();
        if (e) {
          var o = e.croppedAreaPercentages, i = e.croppedAreaPixels;
          t.props.onCropComplete && t.props.onCropComplete(o, i), t.props.onCropAreaChange && t.props.onCropAreaChange(o, i);
        }
      }, t.emitCropAreaChange = function() {
        var e = t.getCropData();
        if (e) {
          var o = e.croppedAreaPercentages, i = e.croppedAreaPixels;
          t.props.onCropAreaChange && t.props.onCropAreaChange(o, i);
        }
      }, t.recomputeCropPosition = function() {
        if (t.state.cropSize) {
          var e = t.props.restrictPosition ? R(t.props.crop, t.mediaSize, t.state.cropSize, t.props.zoom, t.props.rotation) : t.props.crop;
          t.props.onCropChange(e), t.emitCropData();
        }
      }, t;
    }
    return r.prototype.componentDidMount = function() {
      !this.currentDoc || !this.currentWindow || (this.containerRef && (this.containerRef.ownerDocument && (this.currentDoc = this.containerRef.ownerDocument), this.currentDoc.defaultView && (this.currentWindow = this.currentDoc.defaultView), this.initResizeObserver(), typeof window.ResizeObserver > "u" && this.currentWindow.addEventListener("resize", this.computeSizes), this.props.zoomWithScroll && this.containerRef.addEventListener("wheel", this.onWheel, {
        passive: !1
      }), this.containerRef.addEventListener("gesturestart", this.onGestureStart)), this.currentDoc.addEventListener("scroll", this.onScroll), this.props.disableAutomaticStylesInjection || (this.styleRef = this.currentDoc.createElement("style"), this.styleRef.setAttribute("type", "text/css"), this.props.nonce && this.styleRef.setAttribute("nonce", this.props.nonce), this.styleRef.innerHTML = Y, this.currentDoc.head.appendChild(this.styleRef)), this.imageRef.current && this.imageRef.current.complete && this.onMediaLoad(), this.props.setImageRef && this.props.setImageRef(this.imageRef), this.props.setVideoRef && this.props.setVideoRef(this.videoRef));
    }, r.prototype.componentWillUnmount = function() {
      var t, e;
      !this.currentDoc || !this.currentWindow || (typeof window.ResizeObserver > "u" && this.currentWindow.removeEventListener("resize", this.computeSizes), (t = this.resizeObserver) === null || t === void 0 || t.disconnect(), this.containerRef && this.containerRef.removeEventListener("gesturestart", this.preventZoomSafari), this.styleRef && ((e = this.styleRef.parentNode) === null || e === void 0 || e.removeChild(this.styleRef)), this.cleanEvents(), this.props.zoomWithScroll && this.clearScrollEvent());
    }, r.prototype.componentDidUpdate = function(t) {
      var e, o, i, s, a, c, h, p, u;
      t.rotation !== this.props.rotation ? (this.computeSizes(), this.recomputeCropPosition()) : t.aspect !== this.props.aspect ? this.computeSizes() : t.objectFit !== this.props.objectFit ? this.computeSizes() : t.zoom !== this.props.zoom ? this.recomputeCropPosition() : ((e = t.cropSize) === null || e === void 0 ? void 0 : e.height) !== ((o = this.props.cropSize) === null || o === void 0 ? void 0 : o.height) || ((i = t.cropSize) === null || i === void 0 ? void 0 : i.width) !== ((s = this.props.cropSize) === null || s === void 0 ? void 0 : s.width) ? this.computeSizes() : (((a = t.crop) === null || a === void 0 ? void 0 : a.x) !== ((c = this.props.crop) === null || c === void 0 ? void 0 : c.x) || ((h = t.crop) === null || h === void 0 ? void 0 : h.y) !== ((p = this.props.crop) === null || p === void 0 ? void 0 : p.y)) && this.emitCropAreaChange(), t.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef && (this.props.zoomWithScroll ? this.containerRef.addEventListener("wheel", this.onWheel, {
        passive: !1
      }) : this.clearScrollEvent()), t.video !== this.props.video && ((u = this.videoRef.current) === null || u === void 0 || u.load());
      var d = this.getObjectFit();
      d !== this.state.mediaObjectFit && this.setState({
        mediaObjectFit: d
      }, this.computeSizes);
    }, r.prototype.getAspect = function() {
      var t = this.props, e = t.cropSize, o = t.aspect;
      return e ? e.width / e.height : o;
    }, r.prototype.getObjectFit = function() {
      var t, e, o, i;
      if (this.props.objectFit === "cover") {
        var s = this.imageRef.current || this.videoRef.current;
        if (s && this.containerRef) {
          this.containerRect = this.containerRef.getBoundingClientRect();
          var a = this.containerRect.width / this.containerRect.height, c = ((t = this.imageRef.current) === null || t === void 0 ? void 0 : t.naturalWidth) || ((e = this.videoRef.current) === null || e === void 0 ? void 0 : e.videoWidth) || 0, h = ((o = this.imageRef.current) === null || o === void 0 ? void 0 : o.naturalHeight) || ((i = this.videoRef.current) === null || i === void 0 ? void 0 : i.videoHeight) || 0, p = c / h;
          return p < a ? "horizontal-cover" : "vertical-cover";
        }
        return "horizontal-cover";
      }
      return this.props.objectFit;
    }, r.prototype.onPinchStart = function(t) {
      var e = r.getTouchPoint(t.touches[0]), o = r.getTouchPoint(t.touches[1]);
      this.lastPinchDistance = E(e, o), this.lastPinchRotation = M(e, o), this.onDragStart(W(e, o));
    }, r.prototype.onPinchMove = function(t) {
      var e = this;
      if (!(!this.currentDoc || !this.currentWindow)) {
        var o = r.getTouchPoint(t.touches[0]), i = r.getTouchPoint(t.touches[1]), s = W(o, i);
        this.onDrag(s), this.rafPinchTimeout && this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout), this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(function() {
          var a = E(o, i), c = e.props.zoom * (a / e.lastPinchDistance);
          e.setNewZoom(c, s, {
            shouldUpdatePosition: !1
          }), e.lastPinchDistance = a;
          var h = M(o, i), p = e.props.rotation + (h - e.lastPinchRotation);
          e.props.onRotationChange && e.props.onRotationChange(p), e.lastPinchRotation = h;
        });
      }
    }, r.prototype.render = function() {
      var t = this, e = this.props, o = e.image, i = e.video, s = e.mediaProps, a = e.transform, c = e.crop, h = c.x, p = c.y, u = e.rotation, d = e.zoom, w = e.cropShape, f = e.showGrid, v = e.style, m = v.containerStyle, A = v.cropAreaStyle, D = v.mediaStyle, b = e.classes, T = b.containerClassName, Z = b.cropAreaClassName, z = b.mediaClassName, C = this.state.mediaObjectFit;
      return g.createElement("div", {
        onMouseDown: this.onMouseDown,
        onTouchStart: this.onTouchStart,
        ref: function(L) {
          return t.containerRef = L;
        },
        "data-testid": "container",
        style: m,
        className: S("reactEasyCrop_Container", T)
      }, o ? g.createElement("img", l({
        alt: "",
        className: S("reactEasyCrop_Image", C === "contain" && "reactEasyCrop_Contain", C === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", C === "vertical-cover" && "reactEasyCrop_Cover_Vertical", z)
      }, s, {
        src: o,
        ref: this.imageRef,
        style: l(l({}, D), {
          transform: a || "translate(".concat(h, "px, ").concat(p, "px) rotate(").concat(u, "deg) scale(").concat(d, ")")
        }),
        onLoad: this.onMediaLoad
      })) : i && g.createElement("video", l({
        autoPlay: !0,
        loop: !0,
        muted: !0,
        className: S("reactEasyCrop_Video", C === "contain" && "reactEasyCrop_Contain", C === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", C === "vertical-cover" && "reactEasyCrop_Cover_Vertical", z)
      }, s, {
        ref: this.videoRef,
        onLoadedMetadata: this.onMediaLoad,
        style: l(l({}, D), {
          transform: a || "translate(".concat(h, "px, ").concat(p, "px) rotate(").concat(u, "deg) scale(").concat(d, ")")
        }),
        controls: !1
      }), (Array.isArray(i) ? i : [{
        src: i
      }]).map(function(P) {
        return g.createElement("source", l({
          key: P.src
        }, P));
      })), this.state.cropSize && g.createElement("div", {
        style: l(l({}, A), {
          width: this.state.cropSize.width,
          height: this.state.cropSize.height
        }),
        "data-testid": "cropper",
        className: S("reactEasyCrop_CropArea", w === "round" && "reactEasyCrop_CropAreaRound", f && "reactEasyCrop_CropAreaGrid", Z)
      }));
    }, r.defaultProps = {
      zoom: 1,
      rotation: 0,
      aspect: 4 / 3,
      maxZoom: J,
      minZoom: k,
      cropShape: "rect",
      objectFit: "contain",
      showGrid: !0,
      style: {},
      classes: {},
      mediaProps: {},
      zoomSpeed: 1,
      restrictPosition: !0,
      zoomWithScroll: !0
    }, r.getMousePoint = function(t) {
      return {
        x: Number(t.clientX),
        y: Number(t.clientY)
      };
    }, r.getTouchPoint = function(t) {
      return {
        x: Number(t.clientX),
        y: Number(t.clientY)
      };
    }, r;
  }(g.Component)
);
export {
  $ as default,
  B as getInitialCropFromCroppedAreaPercentages,
  q as getInitialCropFromCroppedAreaPixels
};
