dune-react 0.0.43 → 0.0.45

package/dist/node_modules/.pnpm/react-advanced-cropper@0.20.1_react@19.2.4/node_modules/react-advanced-cropper/dist/index.esm-bundler.js

@@ -0,0 +1,1715 @@
+import { __rest, __assign, __spreadArray, __read, __extends, __awaiter, __generator } from "../../../../tslib@2.8.1/node_modules/tslib/tslib.es6.js";
+import React__default, { forwardRef, useImperativeHandle, useRef, useState, useMemo, useLayoutEffect, createRef, useEffect, Component } from "react";
+import cn from "../../../../classnames@2.5.1/node_modules/classnames/index.js";
+import { aspectRatio, defaultSize, fixedStencilConstraints, fixedStencil, sizeRestrictions } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/extensions/stencil-size/index.js";
+import { withDefaultSizeRestrictions, createDefaultSettings } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/defaults/index.js";
+import { getBackgroundStyle, getPreviewStyle, loadImage } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/image/index.js";
+import { createImage, getImageStyle, getStyleTransforms } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/image/index.js";
+import { drawCroppedArea } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/canvas/index.js";
+import { prepareSource, updateCanvas } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/canvas/index.js";
+import { isUndefined, isFunction, getDirectionNames, isCardinalDirection, isObject, deepCompare, isNumber, distance, debounce, isGreater, promiseTimeout, getOptions } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/utils/index.js";
+import { deepClone, emptyCoordinates, isArray, isBlob, isBoolean, isCrossOriginURL, isDataUrl, isLocal, isLower, isNaN, isNumeric, isRoughlyEqual, isString, parseNumber, sign } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/utils/index.js";
+import { getStencilCoordinates, isInitializedState, getAreaSizeRestrictions, getAreaPositionRestrictions, getPositionRestrictions } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/service/helpers.js";
+import { getAspectRatio, getCoefficient, getDefaultCoordinates, getDefaultTransforms, getDefaultVisibleArea, getMinimumSize, getRoundedCoordinates, getSizeRestrictions, getTransformedImageSize, isConsistentState } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/service/helpers.js";
+import { createAspectRatio, ratio, applyScale, fitToSizeRestrictions, applyMove, diff, getCenter, moveToPositionRestrictions, mergePositionRestrictions, coordinatesToPositionRestrictions } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/service/utils.js";
+import { applyDirections, aspectRatioIntersection, fitToPositionRestrictions, getBrokenRatio, getCloserSize, getIntersections, getOppositeSide, inverseMove, isConsistentPosition, isConsistentSize, maxScale, minScale, positionToSizeRestrictions, resizeToSizeRestrictions, rotatePoint, rotateSize, sizeDistance } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/service/utils.js";
+import { copyState } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/state/copyState.js";
+import { Animation } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/animation/index.js";
+import { getEmptyInteractions } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/service/interactions.js";
+import { hasInteractions } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/service/interactions.js";
+import { AbstractCropperInstance } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/instance/AbstractCropperInstance.js";
+import { touchesToImageTransform, wheelEventToImageTransform } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/service/imageTransforms.js";
+import { stretchPreviewBoundary, stretchCropperBoundary } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/boundary/index.js";
+import { fillBoundary } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/defaults/defaultBoundary.js";
+import { defaultStencilConstraints } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/defaults/defaultStencilConstraints.js";
+import { ImageRestriction } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/types/index.js";
+import { Priority } from "../../../../advanced-cropper@0.17.1/node_modules/advanced-cropper/types/index.js";
+function hybridStencilAutoZoomAlgorithm(state, settings) {
+  if (isInitializedState(state)) {
+    var result = copyState(state);
+    var stencil = {
+      width: 0,
+      height: 0
+    };
+    if (ratio(result.boundary) > ratio(result.coordinates)) {
+      stencil.height = result.boundary.height * 0.8;
+      stencil.width = stencil.height * ratio(result.coordinates);
+    } else {
+      stencil.width = result.boundary.width * 0.8;
+      stencil.height = stencil.width * ratio(result.coordinates);
+    }
+    result.visibleArea = applyScale(result.visibleArea, result.coordinates.width * result.boundary.width / (result.visibleArea.width * stencil.width));
+    var scale = fitToSizeRestrictions(result.visibleArea, getAreaSizeRestrictions(result, settings));
+    result.visibleArea = applyScale(result.visibleArea, scale);
+    if (scale !== 1) {
+      stencil.height /= scale;
+      stencil.width /= scale;
+    }
+    result.visibleArea = applyMove(result.visibleArea, diff(getCenter(result.coordinates), getCenter(result.visibleArea)));
+    result.visibleArea = moveToPositionRestrictions(result.visibleArea, getAreaPositionRestrictions(result, settings));
+    result.coordinates = moveToPositionRestrictions(result.coordinates, mergePositionRestrictions(coordinatesToPositionRestrictions(result.visibleArea), getPositionRestrictions(result, settings)));
+    return result;
+  }
+  return state;
+}
+function hybridStencilAutoZoom(state, settings, action) {
+  if (action.immediately) {
+    return hybridStencilAutoZoomAlgorithm(state, settings);
+  }
+  return state;
+}
+function deprecationWarning(text) {
+  if (process.env.NODE_ENV === "development") {
+    console.warn("Deprecation warning: ".concat(text));
+  }
+}
+function useDeprecationWarning() {
+  var fired = useRef([]);
+  return function(message) {
+    if (fired.current.indexOf(message) === -1) {
+      deprecationWarning(message);
+      fired.current.push(message);
+    }
+  };
+}
+function createCropper(render) {
+  return forwardRef(render);
+}
+function useFirstMountState() {
+  var isFirst = useRef(true);
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+  return isFirst.current;
+}
+var useUpdateEffect = function(effect, deps) {
+  var isFirstMount = useFirstMountState();
+  useEffect(function() {
+    if (!isFirstMount) {
+      return effect();
+    }
+  }, deps);
+};
+function useStateWithCallback(initialState) {
+  var _a = __read(useState(initialState), 2), state = _a[0], setState = _a[1];
+  var _b = __read(useState(null), 2), callback = _b[0], setCallback = _b[1];
+  var previousState = useRef(initialState);
+  useUpdateEffect(function() {
+    if (callback) {
+      callback(state, previousState.current);
+    }
+  }, [callback]);
+  return [
+    state,
+    function(value, callback2) {
+      previousState.current = state;
+      setState(value);
+      setCallback(function() {
+        return callback2;
+      });
+    }
+  ];
+}
+var CropperInstance = (
+  /** @class */
+  function(_super) {
+    __extends(CropperInstance2, _super);
+    function CropperInstance2(props, onChange) {
+      var _this = _super.call(this) || this;
+      _this.props = props;
+      _this.notify = onChange;
+      _this.data = {
+        state: null,
+        transitions: false,
+        interactions: getEmptyInteractions()
+      };
+      return _this;
+    }
+    CropperInstance2.prototype.getProps = function() {
+      return this.props();
+    };
+    CropperInstance2.prototype.setData = function(data) {
+      this.data = data;
+      this.notify();
+    };
+    CropperInstance2.prototype.getData = function() {
+      return this.data;
+    };
+    return CropperInstance2;
+  }(AbstractCropperInstance)
+);
+function useForceRerender() {
+  var _a = __read(useState({}), 2);
+  _a[0];
+  var setTick = _a[1];
+  return function() {
+    setTick({});
+  };
+}
+function usePersistentFunction(props) {
+  var propsRef = useRef(props);
+  propsRef.current = props;
+  return function() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+      args[_i] = arguments[_i];
+    }
+    return propsRef.current.apply(propsRef, __spreadArray([], __read(args), false));
+  };
+}
+function useCropperInstance(props) {
+  var rerender = useForceRerender();
+  var getProps = usePersistentFunction(function() {
+    var _a = props(), settings = _a.settings, parameters = __rest(_a, ["settings"]);
+    var extendedSettings = __assign({ imageRestriction: ImageRestriction.fitArea, transformImage: {
+      adjustStencil: true
+    } }, settings);
+    var extendedParameters = __assign({ transitions: true }, parameters);
+    return __assign({ settings: __assign(__assign({}, extendedSettings), createDefaultSettings(extendedSettings)) }, extendedParameters);
+  });
+  var cropper = useRef(new CropperInstance(getProps, rerender));
+  return cropper.current;
+}
+function useCropperImage(options) {
+  var src = options.src, onLoadingStart = options.onLoadingStart, onLoadingEnd = options.onLoadingEnd, onError = options.onError, onLoad = options.onLoad, crossOrigin = options.crossOrigin, checkOrientation = options.checkOrientation, canvas = options.canvas, unloadTime = options.unloadTime;
+  var _a = __read(useState(null), 2), image = _a[0], setImage = _a[1];
+  var _b = __read(useState(false), 2), loading = _b[0], setLoading = _b[1];
+  var _c = __read(useStateWithCallback(false), 2), loaded = _c[0], setLoaded = _c[1];
+  var currentSrc = useRef(null);
+  useEffect(function() {
+    if (currentSrc.current !== src) {
+      currentSrc.current = src || null;
+      setLoaded(false);
+      if (src) {
+        setLoading(true);
+        onLoadingStart === null || onLoadingStart === void 0 ? void 0 : onLoadingStart();
+        var promises = [
+          loadImage(src, {
+            crossOrigin: isUndefined(crossOrigin) ? canvas : crossOrigin,
+            checkOrientation
+          })
+        ];
+        if (loaded && unloadTime) {
+          promises.push(promiseTimeout(unloadTime));
+        }
+        Promise.all(promises).then(function(responses) {
+          var _a2 = __read(responses, 1), image2 = _a2[0];
+          if (currentSrc.current === src) {
+            setImage(image2);
+          }
+        }).catch(function() {
+          if (currentSrc.current === src) {
+            onError === null || onError === void 0 ? void 0 : onError();
+          }
+        }).finally(function() {
+          if (currentSrc.current === src) {
+            onLoadingEnd === null || onLoadingEnd === void 0 ? void 0 : onLoadingEnd();
+            setLoading(false);
+          }
+        });
+      } else {
+        if (unloadTime) {
+          promiseTimeout(unloadTime).then(function() {
+            if (currentSrc.current === src) {
+              setImage(null);
+            }
+          });
+        } else {
+          setImage(null);
+        }
+      }
+    }
+  }, [src, image]);
+  useEffect(function() {
+    if (image) {
+      setLoaded(true, function() {
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(image);
+      });
+    }
+  }, [image]);
+  return {
+    isLoading: function() {
+      return loading;
+    },
+    isLoaded: function() {
+      return loaded;
+    },
+    getImage: function() {
+      return image;
+    },
+    setImage
+  };
+}
+var useWindowResize = function(callback) {
+  var callbackRef = useRef(callback);
+  var internalCallback = function() {
+    if (callbackRef.current) {
+      callbackRef.current();
+    }
+  };
+  useEffect(function() {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(function() {
+    window.addEventListener("resize", internalCallback);
+    window.addEventListener("orientationchange", internalCallback);
+    return function() {
+      window.removeEventListener("resize", internalCallback);
+      window.removeEventListener("orientationchange", internalCallback);
+    };
+  }, []);
+};
+function useCropperAutoReconcile(cropper, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+  var _a = __read(useState(enabled), 2), active = _a[0], setActive = _a[1];
+  useLayoutEffect(function() {
+    if (active && !cropper.hasInteractions()) {
+      cropper.reconcileState();
+    }
+  });
+  return {
+    pause: function() {
+      setActive(false);
+    },
+    resume: function() {
+      setActive(true);
+    }
+  };
+}
+function useAbstractCropper(props) {
+  var _this = this;
+  var _a = props(), src = _a.src, onReady = _a.onReady, onError = _a.onError, onUpdate = _a.onUpdate, _b = _a.canvas, canvas = _b === void 0 ? true : _b, _c = _a.unloadTime, unloadTime = _c === void 0 ? 500 : _c, _d = _a.crossOrigin, crossOrigin = _d === void 0 ? true : _d, _e = _a.checkOrientation, checkOrientation = _e === void 0 ? true : _e, _f = _a.autoReconcileState, autoReconcileState = _f === void 0 ? true : _f;
+  var imageRef = useRef(null);
+  var boundaryRef = useRef(null);
+  var canvasRef = useRef(null);
+  var cropperRef = useRef(null);
+  var _g = __read(useStateWithCallback(null), 2), currentImage = _g[0], setCurrentImage = _g[1];
+  var cropper = useCropperInstance(function() {
+    return __assign(__assign({}, props()), { getInstance: function() {
+      return cropperRef.current;
+    } });
+  });
+  var cropperImage = useCropperImage({
+    src,
+    crossOrigin,
+    checkOrientation,
+    unloadTime,
+    canvas,
+    onError: function() {
+      if (cropperRef.current) {
+        onError === null || onError === void 0 ? void 0 : onError(cropperRef.current);
+      }
+    }
+  });
+  var autoReconcile = useCropperAutoReconcile(cropper, autoReconcileState);
+  var resetCropper = function() {
+    return __awaiter(_this, void 0, void 0, function() {
+      var image_1, boundary_1;
+      var _a2;
+      return __generator(this, function(_b2) {
+        switch (_b2.label) {
+          case 0:
+            if (!boundaryRef.current) return [3, 2];
+            autoReconcile.pause();
+            image_1 = cropperImage.getImage();
+            return [4, (_a2 = boundaryRef.current) === null || _a2 === void 0 ? void 0 : _a2.stretchTo(image_1)];
+          case 1:
+            boundary_1 = _b2.sent();
+            setCurrentImage(image_1, function() {
+              if (boundary_1 && image_1) {
+                cropper.reset(boundary_1, image_1);
+              } else {
+                cropper.clear();
+              }
+            });
+            autoReconcile.resume();
+            _b2.label = 2;
+          case 2:
+            return [
+              2
+              /*return*/
+            ];
+        }
+      });
+    });
+  };
+  var refreshCropper = function() {
+    return __awaiter(_this, void 0, void 0, function() {
+      var image, boundary, state;
+      var _a2;
+      return __generator(this, function(_b2) {
+        switch (_b2.label) {
+          case 0:
+            if (!boundaryRef.current) return [3, 2];
+            autoReconcile.pause();
+            image = cropperImage.getImage();
+            return [4, (_a2 = boundaryRef.current) === null || _a2 === void 0 ? void 0 : _a2.stretchTo(image)];
+          case 1:
+            boundary = _b2.sent();
+            if (boundary && image) {
+              state = cropper.getState();
+              if (state) {
+                if (boundary.width !== state.boundary.width || boundary.height !== state.boundary.height) {
+                  cropper.setBoundary(boundary);
+                  cropper.reconcileState();
+                }
+              } else {
+                cropper.reset(boundary, image);
+              }
+            } else {
+              cropper.clear();
+            }
+            autoReconcile.resume();
+            _b2.label = 2;
+          case 2:
+            return [
+              2
+              /*return*/
+            ];
+        }
+      });
+    });
+  };
+  var cropperInterface = {
+    reset: function() {
+      return resetCropper();
+    },
+    refresh: function() {
+      return refreshCropper();
+    },
+    setImage: function(image) {
+      return setCurrentImage(image);
+    },
+    reconcileState: cropper.reconcileState,
+    moveCoordinates: cropper.moveCoordinates,
+    moveCoordinatesEnd: cropper.moveCoordinatesEnd,
+    resizeCoordinates: cropper.resizeCoordinates,
+    clear: cropper.clear,
+    resizeCoordinatesEnd: cropper.resizeCoordinatesEnd,
+    moveImage: cropper.moveImage,
+    flipImage: cropper.flipImage,
+    zoomImage: cropper.zoomImage,
+    rotateImage: cropper.rotateImage,
+    transformImage: cropper.transformImage,
+    transformImageEnd: cropper.transformImageEnd,
+    setCoordinates: cropper.setCoordinates,
+    setVisibleArea: cropper.setVisibleArea,
+    startTransitions: cropper.startTransitions,
+    setState: cropper.setState,
+    hasInteractions: cropper.hasInteractions,
+    getStencilCoordinates: cropper.getStencilCoordinates,
+    getCoordinates: cropper.getCoordinates,
+    getVisibleArea: cropper.getVisibleArea,
+    getTransforms: cropper.getTransforms,
+    getTransitions: cropper.getTransitions,
+    getInteractions: cropper.getInteractions,
+    getSettings: cropper.getSettings,
+    getState: cropper.getState,
+    getDefaultState: function() {
+      var state = cropper.getState();
+      var image = cropperImage.getImage();
+      if (state && image) {
+        return cropper.createDefaultState(state.boundary, image);
+      } else {
+        return null;
+      }
+    },
+    getCanvas: function(options) {
+      var state = cropper.getState();
+      if (imageRef.current && canvasRef.current && state) {
+        return canvasRef.current.draw(state, imageRef.current, options);
+      } else {
+        return null;
+      }
+    },
+    getImage: function() {
+      return currentImage ? __assign({}, currentImage) : null;
+    },
+    isLoading: cropperImage.isLoading,
+    isLoaded: cropperImage.isLoaded
+  };
+  useWindowResize(function() {
+    refreshCropper();
+  });
+  useUpdateEffect(function() {
+    resetCropper();
+  }, [cropperImage.getImage()]);
+  useUpdateEffect(function() {
+    if (cropperRef.current && currentImage) {
+      onReady === null || onReady === void 0 ? void 0 : onReady(cropperRef.current);
+    }
+  }, [currentImage]);
+  useUpdateEffect(function() {
+    if (cropperRef.current) {
+      onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(cropperRef.current);
+    }
+  }, [cropperImage.isLoaded(), cropperImage.isLoading()]);
+  useImperativeHandle(cropperRef, function() {
+    return cropperInterface;
+  });
+  return {
+    cropper: cropperInterface,
+    refs: {
+      image: imageRef,
+      boundary: boundaryRef,
+      canvas: canvasRef
+    },
+    image: currentImage
+  };
+}
+var StretchableBoundary = forwardRef(function(_a, ref) {
+  var className = _a.className, style = _a.style, stretcherClassName = _a.stretcherClassName, contentClassName = _a.contentClassName, _b = _a.stretchAlgorithm, stretchAlgorithm = _b === void 0 ? stretchCropperBoundary : _b, _c = _a.sizeAlgorithm, sizeAlgorithm = _c === void 0 ? fillBoundary : _c, children = _a.children;
+  var stretcherRef = useRef(null);
+  var boundaryRef = useRef(null);
+  useImperativeHandle(ref, function() {
+    return {
+      reset: function() {
+        var stretcher = stretcherRef.current;
+        if (stretcher) {
+          stretcher.style.height = "";
+          stretcher.style.width = "";
+        }
+      },
+      stretchTo: function(size) {
+        var stretcher = stretcherRef.current;
+        var boundary = boundaryRef.current;
+        if ((size === null || size === void 0 ? void 0 : size.width) && (size === null || size === void 0 ? void 0 : size.height) && stretcher && boundary) {
+          stretchAlgorithm(boundary, stretcher, size);
+          var result = sizeAlgorithm(boundary, size);
+          return Promise.resolve(result.width && result.height ? result : null);
+        } else {
+          if (stretcher) {
+            stretcher.style.height = "";
+            stretcher.style.width = "";
+          }
+          return Promise.resolve(null);
+        }
+      }
+    };
+  });
+  return React__default.createElement(
+    "div",
+    { ref: boundaryRef, style, className: cn("advanced-cropper-boundary", className) },
+    React__default.createElement("div", { ref: stretcherRef, className: cn(["advanced-cropper-boundary__stretcher", stretcherClassName]) }),
+    React__default.createElement("div", { className: cn(["advanced-cropper-boundary__content", contentClassName]) }, children)
+  );
+});
+StretchableBoundary.displayName = "StretchableBoundary";
+var CropperFade = function(_a) {
+  var visible = _a.visible, className = _a.className, style = _a.style, children = _a.children;
+  return React__default.createElement("div", { style, className: cn(className, "advanced-cropper-fade", Boolean(visible) && "advanced-cropper-fade--visible") }, children);
+};
+var CropperWrapper = function(_a) {
+  var cropper = _a.cropper, children = _a.children, className = _a.className, style = _a.style;
+  var state = cropper ? cropper.getState() : null;
+  var loaded = cropper ? cropper.isLoaded() : false;
+  return React__default.createElement(
+    "div",
+    { className: cn(className, "advanced-cropper-wrapper"), style },
+    React__default.createElement(CropperFade, { visible: state && loaded, className: "advanced-cropper-wrapper__fade" }, children)
+  );
+};
+function preventDefault(e) {
+  e.preventDefault();
+}
+var CropperBackgroundImage = forwardRef(function(_a, ref) {
+  var className = _a.className, style = _a.style, cropper = _a.cropper, _b = _a.crossOrigin, crossOrigin = _b === void 0 ? true : _b;
+  var state = cropper.getState();
+  var transitions = cropper.getTransitions();
+  var image = cropper.getImage();
+  var transformStyles = image && state ? getBackgroundStyle(image, state, transitions) : {};
+  var src = image ? image.src : void 0;
+  return src ? React__default.createElement("img", { key: src, ref, className: cn("advanced-cropper-background-image", className), src, crossOrigin: crossOrigin === true ? "anonymous" : crossOrigin || void 0, style: __assign(__assign({}, transformStyles), style), onMouseDown: preventDefault }) : null;
+});
+CropperBackgroundImage.displayName = "CropperBackgroundImage";
+var CropperCanvas = forwardRef(function(_, ref) {
+  var canvasRef = useRef(null);
+  var spareCanvasRef = useRef(null);
+  useImperativeHandle(ref, function() {
+    return {
+      draw: function(state, image, options) {
+        if (options === void 0) {
+          options = {};
+        }
+        if (image && canvasRef.current && spareCanvasRef.current) {
+          return drawCroppedArea(state, image, canvasRef.current, spareCanvasRef.current, options);
+        } else {
+          return null;
+        }
+      }
+    };
+  });
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    React__default.createElement("canvas", { className: "advanced-cropper-canvas", ref: canvasRef }),
+    React__default.createElement("canvas", { className: "advanced-cropper-canvas", ref: spareCanvasRef })
+  );
+});
+CropperCanvas.displayName = "CropperCanvas";
+var DraggableElement = (
+  /** @class */
+  function(_super) {
+    __extends(DraggableElement2, _super);
+    function DraggableElement2(props) {
+      var _this = _super.call(this, props) || this;
+      _this.processMove = function(e, newTouches) {
+        var _a;
+        var container = _this.container.current;
+        if (container && _this.touches.length) {
+          var _b = container.getBoundingClientRect(), left = _b.left, top_1 = _b.top;
+          if (_this.touches.length === 1 && newTouches.length === 1) {
+            if (_this.props.onMove) {
+              var movingToAnchor = {
+                left: Math.abs(newTouches[0].clientX - _this.anchor.left - left) < Math.abs(_this.touches[0].clientX - _this.anchor.left - left),
+                top: Math.abs(newTouches[0].clientY - _this.anchor.top - top_1) < Math.abs(_this.touches[0].clientY - _this.anchor.top - top_1)
+              };
+              var direction = {
+                left: 0,
+                top: 0
+              };
+              if (!_this.props.useAnchor || !movingToAnchor.left) {
+                direction.left = newTouches[0].clientX - _this.touches[0].clientX;
+              }
+              if (!_this.props.useAnchor || !movingToAnchor.top) {
+                direction.top = newTouches[0].clientY - _this.touches[0].clientY;
+              }
+              (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onMove(direction, e);
+              _this.touches = __spreadArray([], __read(newTouches), false);
+            }
+          }
+        }
+      };
+      _this.processEnd = function() {
+        var _a = _this.props, onMoveEnd = _a.onMoveEnd, onLeave = _a.onLeave;
+        if (!_this.props.disabled && _this.touches.length) {
+          onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd();
+        }
+        if (_this.hovered) {
+          onLeave === null || onLeave === void 0 ? void 0 : onLeave();
+          _this.hovered = false;
+        }
+        _this.touches = [];
+      };
+      _this.initAnchor = function(touch) {
+        var container = _this.container.current;
+        if (container) {
+          var _a = container.getBoundingClientRect(), left = _a.left, top_2 = _a.top;
+          _this.anchor = {
+            left: touch.clientX - left,
+            top: touch.clientY - top_2
+          };
+        }
+      };
+      _this.onMouseOver = function() {
+        var _a = _this.props, onEnter = _a.onEnter, disabled = _a.disabled;
+        if (!_this.hovered && !disabled) {
+          _this.hovered = true;
+          onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+        }
+      };
+      _this.onMouseLeave = function() {
+        var onLeave = _this.props.onLeave;
+        if (_this.hovered && !_this.touches.length) {
+          _this.hovered = false;
+          onLeave === null || onLeave === void 0 ? void 0 : onLeave();
+        }
+      };
+      _this.onTouchStart = function(e) {
+        var _a = _this.props, onEnter = _a.onEnter, onMoveStart = _a.onMoveStart, disabled = _a.disabled;
+        if (e.cancelable) {
+          _this.touches = Array.from(e.touches);
+          var shouldStartMove = !disabled && e.touches.length === 1;
+          if (shouldStartMove) {
+            _this.touches = Array.from(e.touches);
+            onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart();
+          }
+          if (!_this.hovered && !disabled) {
+            _this.hovered = true;
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+          }
+          if (_this.started || shouldStartMove) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }
+      };
+      _this.onTouchEnd = function() {
+        _this.started = false;
+        _this.processEnd();
+      };
+      _this.onTouchMove = function(e) {
+        if (_this.touches.length >= 1) {
+          if (_this.started) {
+            _this.processMove(e, Array.from(e.touches));
+            e.preventDefault();
+            e.stopPropagation();
+          } else if (distance({ left: _this.touches[0].clientX, top: _this.touches[0].clientY }, { left: e.touches[0].clientX, top: e.touches[0].clientY }) > (_this.props.activationDistance || 0)) {
+            _this.initAnchor({
+              clientX: e.touches[0].clientX,
+              clientY: e.touches[0].clientY
+            });
+            _this.started = true;
+          }
+        }
+      };
+      _this.onMouseDown = function(e) {
+        var _a = _this.props, onMoveStart = _a.onMoveStart, disabled = _a.disabled;
+        if (!disabled && e.button === 0) {
+          var touch = {
+            clientX: e.clientX,
+            clientY: e.clientY
+          };
+          _this.touches = [touch];
+          _this.initAnchor(touch);
+          e.stopPropagation();
+          onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart();
+        }
+      };
+      _this.onMouseMove = function(e) {
+        if (!_this.props.disabled && _this.touches.length) {
+          _this.processMove(e, [
+            {
+              clientX: e.clientX,
+              clientY: e.clientY
+            }
+          ]);
+          if (e.preventDefault && e.cancelable) {
+            e.preventDefault();
+          }
+          e.stopPropagation();
+        }
+      };
+      _this.onMouseUp = function() {
+        _this.processEnd();
+      };
+      _this.touches = [];
+      _this.hovered = false;
+      _this.started = false;
+      _this.anchor = {
+        left: 0,
+        top: 0
+      };
+      _this.container = createRef();
+      return _this;
+    }
+    DraggableElement2.prototype.componentWillUnmount = function() {
+      window.removeEventListener("mouseup", this.onMouseUp);
+      window.removeEventListener("mousemove", this.onMouseMove);
+      window.removeEventListener("touchmove", this.onTouchMove);
+      window.removeEventListener("touchend", this.onTouchEnd);
+      var container = this.container.current;
+      if (container) {
+        container.removeEventListener("touchstart", this.onTouchStart);
+        container.removeEventListener("mousedown", this.onMouseDown);
+      }
+    };
+    DraggableElement2.prototype.componentDidMount = function() {
+      window.addEventListener("mouseup", this.onMouseUp, { passive: false });
+      window.addEventListener("mousemove", this.onMouseMove, { passive: false });
+      window.addEventListener("touchmove", this.onTouchMove, { passive: false });
+      window.addEventListener("touchend", this.onTouchEnd, { passive: false });
+      var container = this.container.current;
+      if (container) {
+        container.addEventListener("touchstart", this.onTouchStart, {
+          passive: false
+        });
+        container.addEventListener("mousedown", this.onMouseDown, {
+          passive: false
+        });
+      }
+    };
+    DraggableElement2.prototype.componentDidUpdate = function(prevProps) {
+      if (this.props.disabled && !prevProps.disabled) {
+        this.touches = [];
+      }
+    };
+    DraggableElement2.prototype.render = function() {
+      var _a = this.props, children = _a.children, className = _a.className;
+      return React__default.createElement("div", { className: cn("advanced-cropper-draggable-element", className), ref: this.container, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave }, children);
+    };
+    DraggableElement2.defaultProps = {
+      disabled: false,
+      activationDistance: 30,
+      useAnchor: true,
+      rerender: true
+    };
+    return DraggableElement2;
+  }(Component)
+);
+var LineWrapper = function(_a) {
+  var position = _a.position, className = _a.className, disabled = _a.disabled, onDrag = _a.onDrag, onDragEnd = _a.onDragEnd, onLeave = _a.onLeave, onEnter = _a.onEnter, children = _a.children;
+  return React__default.createElement(
+    DraggableElement,
+    { className: cn([
+      "advanced-cropper-line-wrapper",
+      position && "advanced-cropper-line-wrapper--".concat(position),
+      disabled && "advanced-cropper-line-wrapper--disabled",
+      className
+    ]), disabled, onMove: onDrag, onMoveEnd: onDragEnd, onLeave, onEnter, activationDistance: 0 },
+    React__default.createElement("div", { className: cn([
+      "advanced-cropper-line-wrapper__content",
+      position && "advanced-cropper-line-wrapper__content--".concat(position)
+    ]) }, children)
+  );
+};
+var SimpleLine = function(_a) {
+  var _b, _c;
+  var position = _a.position, hoverClassName = _a.hoverClassName, wrapperClassName = _a.wrapperClassName, defaultClassName = _a.defaultClassName, disabled = _a.disabled, onMove = _a.onMove, onMoveEnd = _a.onMoveEnd;
+  var _d = __read(useState(false), 2), hover = _d[0], setHover = _d[1];
+  var onEnter = function() {
+    setHover(true);
+  };
+  var onLeave = function() {
+    setHover(false);
+  };
+  return React__default.createElement(
+    LineWrapper,
+    { className: cn("advanced-cropper-simple-line-wrapper", wrapperClassName, (_b = {}, _b["advanced-cropper-simple-line-wrapper--".concat(position)] = !!position, _b)), position, disabled, onDrag: onMove, onDragEnd: onMoveEnd, onLeave, onEnter },
+    React__default.createElement("div", { className: cn("advanced-cropper-simple-line", hover && "advanced-cropper-simple-line--hover", defaultClassName, hover && hoverClassName, (_c = {}, _c["advanced-cropper-simple-line--".concat(position)] = !!position, _c)) })
+  );
+};
+var HandlerWrapper = function(_a) {
+  var horizontalPosition = _a.horizontalPosition, verticalPosition = _a.verticalPosition, className = _a.className, disabled = _a.disabled, onDrag = _a.onDrag, onDragEnd = _a.onDragEnd, onLeave = _a.onLeave, onEnter = _a.onEnter, children = _a.children, style = _a.style;
+  var position = horizontalPosition || verticalPosition ? getDirectionNames(horizontalPosition, verticalPosition).snakeCase : null;
+  return React__default.createElement(
+    "div",
+    { style, className: cn(className, "advanced-cropper-handler-wrapper", position && "advanced-cropper-handler-wrapper--".concat(position), disabled && "advanced-cropper-handler-wrapper--disabled") },
+    React__default.createElement(DraggableElement, { className: "advanced-cropper-handler-wrapper__draggable", disabled, onMove: onDrag, onMoveEnd: onDragEnd, onLeave, onEnter, activationDistance: 0 }, children)
+  );
+};
+var SimpleHandler = function(_a) {
+  var _b;
+  var verticalPosition = _a.verticalPosition, horizontalPosition = _a.horizontalPosition, hoverClassName = _a.hoverClassName, wrapperClassName = _a.wrapperClassName, defaultClassName = _a.defaultClassName, wrapperStyle = _a.wrapperStyle, disabled = _a.disabled, onMove = _a.onMove, onMoveEnd = _a.onMoveEnd;
+  var _c = __read(useState(false), 2), hover = _c[0], setHover = _c[1];
+  var onEnter = function() {
+    setHover(true);
+  };
+  var onLeave = function() {
+    setHover(false);
+  };
+  return React__default.createElement(
+    HandlerWrapper,
+    { style: wrapperStyle, className: cn("advanced-cropper-simple-handler-wrapper", wrapperClassName, verticalPosition && "advanced-cropper-simple-handler-wrapper--".concat(verticalPosition), horizontalPosition && "advanced-cropper-simple-handler-wrapper--".concat(horizontalPosition), horizontalPosition && verticalPosition && "advanced-cropper-simple-handler-wrapper--".concat(horizontalPosition, "-").concat(verticalPosition), hover && "advanced-cropper-simple-handler-wrapper--hover"), verticalPosition, horizontalPosition, disabled, onDrag: onMove, onDragEnd: onMoveEnd, onLeave, onEnter },
+    React__default.createElement("div", { className: cn("advanced-cropper-simple-handler", hover && "advanced-cropper-simple-handler--hover", defaultClassName, hover && hoverClassName, (_b = {}, _b["advanced-cropper-simple-handler--".concat(verticalPosition)] = !!verticalPosition, _b["advanced-cropper-simple-handler--".concat(horizontalPosition)] = !!horizontalPosition, _b["advanced-cropper-simple-handler--".concat(horizontalPosition, "-").concat(verticalPosition)] = horizontalPosition && verticalPosition, _b)) })
+  );
+};
+var HORIZONTAL_DIRECTIONS = ["east", "west", null];
+var VERTICAL_DIRECTIONS = ["south", "north", null];
+var BoundingBox = function(_a) {
+  var style = _a.style, className = _a.className, children = _a.children, onResize = _a.onResize, onResizeEnd = _a.onResizeEnd, _b = _a.handlerComponent, handlerComponent = _b === void 0 ? SimpleHandler : _b, _c = _a.handlers, handlers = _c === void 0 ? {
+    eastNorth: true,
+    north: true,
+    westNorth: true,
+    west: true,
+    westSouth: true,
+    south: true,
+    eastSouth: true,
+    east: true
+  } : _c, _d = _a.handlerClassNames, handlerClassNames = _d === void 0 ? {} : _d, _e = _a.handlerWrapperClassNames, handlerWrapperClassNames = _e === void 0 ? {} : _e, _f = _a.lines, lines = _f === void 0 ? {
+    west: true,
+    north: true,
+    east: true,
+    south: true
+  } : _f, _g = _a.lineComponent, lineComponent = _g === void 0 ? SimpleLine : _g, _h = _a.lineClassNames, lineClassNames = _h === void 0 ? {} : _h, _j = _a.lineWrapperClassNames, lineWrapperClassNames = _j === void 0 ? {} : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, _l = _a.reference, reference = _l === void 0 ? null : _l;
+  var _m = __read(useState(null), 2), lastReference = _m[0], setLastReference = _m[1];
+  var points = useMemo(function() {
+    var result = [];
+    HORIZONTAL_DIRECTIONS.forEach(function(hDirection) {
+      VERTICAL_DIRECTIONS.forEach(function(vDirection) {
+        if (hDirection !== vDirection) {
+          var _a2 = getDirectionNames(hDirection, vDirection), snakeCase = _a2.snakeCase, camelCase = _a2.camelCase;
+          if (snakeCase && camelCase) {
+            result.push({
+              name: camelCase,
+              className: snakeCase,
+              verticalPosition: vDirection,
+              horizontalPosition: hDirection
+            });
+          }
+        }
+      });
+    });
+    return result;
+  }, []);
+  var lineNodes = useMemo(function() {
+    var result = [];
+    points.forEach(function(point) {
+      if (isCardinalDirection(point.name) && (isObject(lines) ? lines[point.name] : lines)) {
+        result.push({
+          name: point.name,
+          component: lineComponent,
+          className: cn(lineClassNames.default, lineClassNames[point.name], disabled && lineClassNames.disabled),
+          wrapperClassName: cn("advanced-cropper-bounding-box__line", "advanced-cropper-bounding-box__line--".concat(point.name), lineWrapperClassNames.default, lineWrapperClassNames[point.name], disabled && lineWrapperClassNames.disabled),
+          hoverClassName: lineClassNames.hover,
+          verticalPosition: point.verticalPosition,
+          horizontalPosition: point.horizontalPosition,
+          disabled
+        });
+      }
+    });
+    return result;
+  }, [points, lines, lineComponent, lineClassNames, lineWrapperClassNames, disabled]);
+  var handlerNodes = useMemo(function() {
+    var result = [];
+    points.forEach(function(point) {
+      if (isObject(handlers) ? handlers[point.name] : handlers) {
+        result.push({
+          name: point.name,
+          component: handlerComponent,
+          className: cn(handlerClassNames.default, handlerClassNames[point.name]),
+          containerClassName: cn("advanced-cropper-bounding-box__handler-wrapper", "advanced-cropper-bounding-box__handler-wrapper--".concat(point.className)),
+          wrapperClassName: cn("advanced-cropper-bounding-box__handler", "advanced-cropper-bounding-box__handler--".concat(point.className), handlerWrapperClassNames.default, handlerWrapperClassNames[point.name]),
+          hoverClassName: handlerClassNames.hover,
+          verticalPosition: point.verticalPosition,
+          horizontalPosition: point.horizontalPosition,
+          disabled
+        });
+      }
+    });
+    return result;
+  }, [points, handlers, handlerComponent, handlerClassNames, handlerWrapperClassNames, disabled]);
+  var onHandlerMove = function(horizontalPosition, verticalPosition) {
+    return function(_a2, nativeEvent) {
+      var left = _a2.left, top = _a2.top;
+      var directions = {
+        left,
+        top
+      };
+      var respectDirection;
+      if (!verticalPosition && horizontalPosition) {
+        respectDirection = "width";
+      } else if (verticalPosition && !horizontalPosition) {
+        respectDirection = "height";
+      }
+      if (!disabled) {
+        if (onResize) {
+          var anchor = getDirectionNames(horizontalPosition, verticalPosition).camelCase;
+          if (anchor) {
+            onResize(anchor, directions, {
+              reference: lastReference || reference,
+              preserveAspectRatio: nativeEvent && nativeEvent.shiftKey,
+              respectDirection,
+              compensate: true
+            });
+          }
+        }
+        if (!lastReference) {
+          setLastReference(reference);
+        }
+      }
+    };
+  };
+  var onHandlerMoveEnd = function() {
+    onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd();
+    setLastReference(null);
+  };
+  return React__default.createElement(
+    "div",
+    { className: cn("advanced-cropper-bounding-box", className), style },
+    children,
+    React__default.createElement("div", null, lineNodes.map(function(line) {
+      return React__default.createElement(line.component, { key: line.name, defaultClassName: line.className, hoverClassName: line.hoverClassName, wrapperClassName: line.wrapperClassName, position: line.name, disabled: line.disabled, onMove: onHandlerMove(line.horizontalPosition, line.verticalPosition), onMoveEnd: onHandlerMoveEnd });
+    })),
+    React__default.createElement("div", null, handlerNodes.map(function(handler) {
+      var handlerElement = React__default.createElement(handler.component, { defaultClassName: handler.className, hoverClassName: handler.hoverClassName, wrapperClassName: handler.wrapperClassName, horizontalPosition: handler.horizontalPosition, verticalPosition: handler.verticalPosition, disabled: handler.disabled, onMove: onHandlerMove(handler.horizontalPosition, handler.verticalPosition), onMoveEnd: onHandlerMoveEnd });
+      return React__default.createElement("div", { key: handler.name, className: handler.containerClassName }, handlerElement);
+    }))
+  );
+};
+var StencilOverlay = function(_a) {
+  var className = _a.className, children = _a.children;
+  return React__default.createElement("div", { className: cn("advanced-cropper-stencil-overlay", className) }, children);
+};
+function useTransition(transitions) {
+  if (transitions === void 0) {
+    transitions = null;
+  }
+  var animation = useRef(new Animation());
+  var _a = __read(useState(false), 2), active = _a[0], setActive = _a[1];
+  return [
+    function(callback) {
+      if (transitions && transitions.active) {
+        animation.current.start(__assign(__assign({}, transitions), { onStart: function() {
+          setActive(true);
+        }, onProgress: function(progress) {
+          callback(progress);
+        }, onStop: function() {
+          setActive(false);
+        } }));
+      } else if (!animation.current.active) {
+        callback(1);
+      }
+    },
+    active
+  ];
+}
+var ArtificialTransition = function(_a) {
+  var className = _a.className, transitions = _a.transitions, children = _a.children, values = __rest(_a, ["className", "transitions", "children"]);
+  var root = useRef(null);
+  var transitionValues = useRef(values);
+  var _b = __read(useState(values), 2), rememberedValues = _b[0], setRememberedValues = _b[1];
+  var _c = __read(useTransition(transitions), 2), runTransitions = _c[0], transitionsActive = _c[1];
+  useLayoutEffect(function() {
+    if (!deepCompare(rememberedValues, values)) {
+      setRememberedValues(values);
+      var startValues_1 = transitionsActive ? __assign({}, transitionValues.current) : rememberedValues;
+      runTransitions(function(progress) {
+        var properties = ["left", "top", "height", "width"];
+        properties.forEach(function(property) {
+          var desiredValue = values[property];
+          var startValue = startValues_1[property];
+          transitionValues.current[property] = isNumber(startValue) && isNumber(desiredValue) ? startValue + (desiredValue - startValue) * progress : desiredValue;
+        });
+        if (root.current) {
+          root.current.style.width = "".concat(transitionValues.current.width, "px");
+          root.current.style.height = "".concat(transitionValues.current.height, "px");
+          root.current.style.transform = "translate3d(".concat(transitionValues.current.left, "px, ").concat(transitionValues.current.top, "px, 0px)");
+        }
+      });
+    }
+  }, [rememberedValues, transitionsActive, values.width, values.height, values.top, values.left]);
+  var currentValues = transitionsActive ? transitionValues.current : values;
+  var rootStyle = {
+    left: 0,
+    top: 0,
+    width: "".concat(currentValues.width, "px"),
+    height: "".concat(currentValues.height, "px"),
+    transform: "translate3d(".concat(currentValues.left, "px, ").concat(currentValues.top, "px, 0px)")
+  };
+  return React__default.createElement("div", { ref: root, className: cn("advanced-cropper-artificial-transition", className), style: rootStyle }, children);
+};
+var StencilWrapper = function(_a) {
+  var className = _a.className, transitions = _a.transitions, width = _a.width, height = _a.height, left = _a.left, top = _a.top, children = _a.children;
+  return React__default.createElement(ArtificialTransition, { className: cn("advanced-cropper-stencil-wrapper", className), transitions, width, height, top, left }, children);
+};
+var StencilGrid = function(_a) {
+  var _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.rows, rows = _c === void 0 ? 3 : _c, _d = _a.visible, visible = _d === void 0 ? false : _d, className = _a.className;
+  var nodes = [];
+  var _e = __read(useState(columns), 2), currentColumns = _e[0], setCurrentColumns = _e[1];
+  var _f = __read(useState(rows), 2), currentRows = _f[0], setCurrentRows = _f[1];
+  useUpdateEffect(function() {
+    if (visible) {
+      setCurrentRows(rows);
+      setCurrentColumns(columns);
+    }
+  }, [visible, columns, rows]);
+  for (var i = 0; i < currentRows; i++) {
+    var cells = [];
+    for (var j = 0; j < currentColumns; j++) {
+      cells.push(React__default.createElement("div", { key: j, className: cn("advanced-cropper-stencil-grid__cell", i === 0 && "advanced-cropper-stencil-grid__cell--top", i === currentRows - 1 && "advanced-cropper-stencil-grid__cell--bottom", j === 0 && "advanced-cropper-stencil-grid__cell--left", j === currentColumns - 1 && "advanced-cropper-stencil-grid__cell--right") }));
+    }
+    nodes.push(React__default.createElement("div", { key: i, className: "advanced-cropper-stencil-grid__row" }, cells));
+  }
+  return React__default.createElement("div", { className: cn("advanced-cropper-stencil-grid", visible && "advanced-cropper-stencil-grid--visible", className) }, nodes);
+};
+var RectangleStencil = forwardRef(function(_a, ref) {
+  var cropper = _a.cropper, coordinates = _a.coordinates, aspectRatio2 = _a.aspectRatio, minAspectRatio = _a.minAspectRatio, maxAspectRatio = _a.maxAspectRatio, _b = _a.handlerComponent, handlerComponent = _b === void 0 ? SimpleHandler : _b, _c = _a.handlers, handlers = _c === void 0 ? {
+    eastNorth: true,
+    north: true,
+    westNorth: true,
+    west: true,
+    westSouth: true,
+    south: true,
+    eastSouth: true,
+    east: true
+  } : _c, _d = _a.handlerClassNames, handlerClassNames = _d === void 0 ? {} : _d, _e = _a.handlerWrapperClassNames, handlerWrapperClassNames = _e === void 0 ? {} : _e, _f = _a.lines, lines = _f === void 0 ? {
+    west: true,
+    north: true,
+    east: true,
+    south: true
+  } : _f, _g = _a.lineComponent, lineComponent = _g === void 0 ? SimpleLine : _g, _h = _a.lineClassNames, lineClassNames = _h === void 0 ? {} : _h, _j = _a.lineWrapperClassNames, lineWrapperClassNames = _j === void 0 ? {} : _j, _k = _a.resizable, resizable = _k === void 0 ? true : _k, _l = _a.movable, movable = _l === void 0 ? true : _l, grid = _a.grid, gridClassName = _a.gridClassName, className = _a.className, movingClassName = _a.movingClassName, resizingClassName = _a.resizingClassName, previewClassName = _a.previewClassName, boundingBoxClassName = _a.boundingBoxClassName, overlayClassName = _a.overlayClassName, draggableAreaClassName = _a.draggableAreaClassName, disabled = _a.disabled;
+  var state = cropper.getState();
+  var transitions = cropper.getTransitions();
+  var interactions = cropper.getInteractions();
+  var resizeAllowed = resizable && !disabled;
+  var moveAllowed = movable && !disabled;
+  useImperativeHandle(ref, function() {
+    return {
+      aspectRatio: createAspectRatio(aspectRatio2 || {
+        minimum: minAspectRatio,
+        maximum: maxAspectRatio
+      })
+    };
+  });
+  var onMove = function(directions) {
+    if (cropper && moveAllowed) {
+      cropper.moveCoordinates(directions);
+    }
+  };
+  var onMoveEnd = function() {
+    if (cropper) {
+      cropper.moveCoordinatesEnd();
+    }
+  };
+  var onResize = function(anchor, directions, options) {
+    if (cropper && resizeAllowed) {
+      cropper.resizeCoordinates(anchor, directions, options);
+    }
+  };
+  var onResizeEnd = function() {
+    if (cropper) {
+      cropper.resizeCoordinatesEnd();
+    }
+  };
+  var _m = coordinates ? isFunction(coordinates) ? coordinates(state) : coordinates : getStencilCoordinates(state), width = _m.width, height = _m.height, left = _m.left, top = _m.top;
+  return state && React__default.createElement(
+    StencilWrapper,
+    { className: cn("advanced-cropper-rectangle-stencil", className, interactions.moveCoordinates && movingClassName, interactions.resizeCoordinates && resizingClassName, {
+      "advanced-cropper-rectangle-stencil--movable": moveAllowed,
+      "advanced-cropper-rectangle-stencil--moving": interactions.moveCoordinates,
+      "advanced-cropper-rectangle-stencil--resizable": resizeAllowed,
+      "advanced-cropper-rectangle-stencil--resizing": interactions.resizeCoordinates,
+      "advanced-cropper-rectangle-stencil--disabled": disabled
+    }), width, height, left, top, transitions },
+    React__default.createElement(
+      BoundingBox,
+      { reference: state.coordinates, className: cn(boundingBoxClassName, "advanced-cropper-rectangle-stencil__bounding-box"), handlers, handlerComponent, handlerClassNames, handlerWrapperClassNames, lines, lineComponent, lineClassNames, lineWrapperClassNames, onResize, onResizeEnd, disabled: !resizeAllowed },
+      React__default.createElement(
+        DraggableElement,
+        { disabled: !moveAllowed, onMove, onMoveEnd, className: cn("advanced-cropper-rectangle-stencil__draggable-area", draggableAreaClassName) },
+        React__default.createElement(
+          StencilOverlay,
+          { className: cn("advanced-cropper-rectangle-stencil__overlay", overlayClassName) },
+          grid && React__default.createElement(StencilGrid, { visible: cropper.hasInteractions(), columns: interactions.transformImage.rotate ? 9 : 3, rows: interactions.transformImage.rotate ? 9 : 3, className: cn("advanced-cropper-rectangle-stencil__grid", gridClassName) }),
+          React__default.createElement("div", { className: cn("advanced-cropper-rectangle-stencil__preview", previewClassName) })
+        )
+      )
+    )
+  );
+});
+RectangleStencil.displayName = "RectangleStencil";
+function useRotateImageOptions(rotateImage) {
+  return useMemo(function() {
+    return getOptions(rotateImage, {
+      touch: true
+    }, {
+      touch: false
+    });
+  }, [rotateImage]);
+}
+function useScaleImageOptions(scaleImage) {
+  return useMemo(function() {
+    return getOptions(scaleImage, {
+      touch: true,
+      wheel: {
+        ratio: 0.1
+      }
+    }, {
+      touch: false,
+      wheel: false
+    });
+  }, [scaleImage]);
+}
+function useMoveImageOptions(moveImage) {
+  return useMemo(function() {
+    return getOptions(moveImage, {
+      touch: true,
+      mouse: true
+    }, {
+      touch: false,
+      mouse: false
+    });
+  }, [moveImage]);
+}
+var TransformableImageEvent = (
+  /** @class */
+  function() {
+    function TransformableImageEvent2(_a) {
+      var active = _a.active;
+      this.active = active;
+      this.defaultPrevented = false;
+    }
+    TransformableImageEvent2.prototype.preventDefault = function() {
+      this.defaultPrevented = true;
+    };
+    return TransformableImageEvent2;
+  }()
+);
+var TransformableImage = (
+  /** @class */
+  function(_super) {
+    __extends(TransformableImage2, _super);
+    function TransformableImage2(props) {
+      var _this = _super.call(this, props) || this;
+      _this.processMove = function(newTouches) {
+        var _a = _this.props, onTransform = _a.onTransform, touchScale = _a.touchScale, touchMove = _a.touchMove, touchRotate = _a.touchRotate;
+        var container = _this.container.current;
+        if (container && onTransform) {
+          onTransform(touchesToImageTransform(newTouches, _this.touches, container, {
+            scale: touchScale,
+            rotate: touchRotate,
+            move: touchMove
+          }));
+          _this.touches = newTouches;
+        }
+      };
+      _this.processEnd = function() {
+        var onTransformEnd = _this.props.onTransformEnd;
+        if (_this.transforming) {
+          _this.transforming = false;
+          if (onTransformEnd) {
+            onTransformEnd();
+          }
+        }
+      };
+      _this.processStart = function() {
+        _this.transforming = true;
+        _this.debouncedProcessEnd.clear();
+      };
+      _this.processEvent = function(nativeEvent) {
+        var _a = _this.props, onEvent = _a.onEvent, disabled = _a.disabled, _b = _a.preventDefault, preventDefault2 = _b === void 0 ? true : _b;
+        var transformEvent = new TransformableImageEvent({ active: _this.transforming });
+        if (onEvent) {
+          onEvent(transformEvent, nativeEvent);
+        } else if (preventDefault2) {
+          nativeEvent.preventDefault();
+          nativeEvent.stopPropagation();
+        }
+        return !disabled && !transformEvent.defaultPrevented;
+      };
+      _this.onWheel = function(event) {
+        var _a = _this.props, onTransform = _a.onTransform, wheelScale = _a.wheelScale;
+        var container = _this.container.current;
+        if (wheelScale) {
+          if (_this.processEvent(event)) {
+            _this.processStart();
+            if (onTransform && container) {
+              onTransform(wheelEventToImageTransform(event, container, wheelScale === true ? 0.1 : wheelScale.ratio));
+            }
+            if (!_this.touches.length) {
+              _this.debouncedProcessEnd();
+            }
+          }
+        }
+      };
+      _this.onTouchStart = function(event) {
+        var _a = _this.props, touchMove = _a.touchMove, touchScale = _a.touchScale, touchRotate = _a.touchRotate;
+        if (event.cancelable && (touchMove || (touchScale || touchRotate) && event.touches.length > 1)) {
+          if (_this.processEvent(event)) {
+            var container = _this.container.current;
+            if (container) {
+              var _b = container.getBoundingClientRect(), left_1 = _b.left, top_1 = _b.top, bottom_1 = _b.bottom, right_1 = _b.right;
+              _this.touches = Array.from(event.touches).filter(function(touch) {
+                return touch.clientX > left_1 && touch.clientX < right_1 && touch.clientY > top_1 && touch.clientY < bottom_1;
+              });
+            }
+          }
+        }
+      };
+      _this.onTouchEnd = function(event) {
+        if (event.touches.length === 0) {
+          _this.touches = [];
+          _this.processEnd();
+        }
+      };
+      _this.onTouchMove = function(event) {
+        if (_this.touches.length) {
+          var touches = __spreadArray([], __read(event.touches), false).filter(function(touch) {
+            return !touch.identifier || _this.touches.find(function(anotherTouch) {
+              return anotherTouch.identifier === touch.identifier;
+            });
+          });
+          if (_this.processEvent(event)) {
+            _this.processMove(touches);
+            _this.processStart();
+          }
+        }
+      };
+      _this.onMouseDown = function(event) {
+        var mouseMove = _this.props.mouseMove;
+        if (mouseMove && "buttons" in event && event.buttons === 1) {
+          if (_this.processEvent(event)) {
+            var touch = {
+              clientX: event.clientX,
+              clientY: event.clientY
+            };
+            _this.touches = [touch];
+            _this.processStart();
+          }
+        }
+      };
+      _this.onMouseMove = function(event) {
+        if (_this.touches.length) {
+          if (_this.processEvent(event)) {
+            _this.processMove([
+              {
+                clientX: event.clientX,
+                clientY: event.clientY
+              }
+            ]);
+          }
+        }
+      };
+      _this.onMouseUp = function() {
+        _this.touches = [];
+        _this.processEnd();
+      };
+      _this.transforming = false;
+      _this.touches = [];
+      _this.anchor = {
+        left: 0,
+        top: 0
+      };
+      _this.container = createRef();
+      _this.debouncedProcessEnd = debounce(_this.processEnd, props.timeout);
+      return _this;
+    }
+    TransformableImage2.prototype.shouldComponentUpdate = function() {
+      return true;
+    };
+    TransformableImage2.prototype.componentWillUnmount = function() {
+      window.removeEventListener("mouseup", this.onMouseUp);
+      window.removeEventListener("mousemove", this.onMouseMove);
+      window.removeEventListener("touchmove", this.onTouchMove);
+      window.removeEventListener("touchend", this.onTouchEnd);
+      var container = this.container.current;
+      if (container) {
+        container.removeEventListener("touchstart", this.onTouchStart);
+        container.removeEventListener("mousedown", this.onMouseDown);
+        container.removeEventListener("wheel", this.onWheel);
+      }
+    };
+    TransformableImage2.prototype.componentDidMount = function() {
+      window.addEventListener("mouseup", this.onMouseUp, { passive: false });
+      window.addEventListener("mousemove", this.onMouseMove, { passive: false });
+      window.addEventListener("touchmove", this.onTouchMove, { passive: false });
+      window.addEventListener("touchend", this.onTouchEnd, { passive: false });
+      var container = this.container.current;
+      if (container) {
+        container.addEventListener("touchstart", this.onTouchStart, {
+          passive: false
+        });
+        container.addEventListener("mousedown", this.onMouseDown, {
+          passive: false
+        });
+        container.addEventListener("wheel", this.onWheel, {
+          passive: false
+        });
+      }
+    };
+    TransformableImage2.prototype.render = function() {
+      var _a = this.props, className = _a.className, children = _a.children, style = _a.style;
+      return React__default.createElement("div", { className, style, ref: this.container }, children);
+    };
+    TransformableImage2.defaultProps = {
+      touchMove: true,
+      mouseMove: true,
+      touchScale: true,
+      touchRotate: false,
+      wheelScale: true,
+      timeout: 500
+    };
+    return TransformableImage2;
+  }(Component)
+);
+var CropperBackgroundWrapper = function(_a) {
+  var _b = _a.scaleImage, scaleImage = _b === void 0 ? true : _b, _c = _a.moveImage, moveImage = _c === void 0 ? true : _c, _d = _a.rotateImage, rotateImage = _d === void 0 ? false : _d, children = _a.children, className = _a.className, style = _a.style, cropper = _a.cropper, timeout = _a.timeout, disabled = _a.disabled;
+  var transitions = cropper.getTransitions();
+  var rotateImageOptions = useRotateImageOptions(rotateImage);
+  var scaleImageOptions = useScaleImageOptions(scaleImage);
+  var moveImageOptions = useMoveImageOptions(moveImage);
+  return React__default.createElement(TransformableImage, { className, style, onTransform: cropper.transformImage, onTransformEnd: cropper.transformImageEnd, touchMove: moveImageOptions.touch, mouseMove: moveImageOptions.mouse, touchScale: scaleImageOptions.touch, wheelScale: scaleImageOptions.wheel, touchRotate: rotateImageOptions.touch, disabled: transitions.active || disabled, preventDefault: !disabled, timeout }, children);
+};
+var AbstractCropperComponent = function(props, ref) {
+  var style = props.style, className = props.className, _a = props.stencilComponent, stencilComponent = _a === void 0 ? RectangleStencil : _a, _b = props.stencilConstraints, stencilConstraints = _b === void 0 ? defaultStencilConstraints : _b, _c = props.stencilProps, stencilProps = _c === void 0 ? {} : _c, _d = props.wrapperComponent, wrapperComponent = _d === void 0 ? CropperWrapper : _d, _e = props.wrapperProps, wrapperProps = _e === void 0 ? {} : _e, _f = props.backgroundComponent, backgroundComponent = _f === void 0 ? CropperBackgroundImage : _f, _g = props.backgroundProps, backgroundProps = _g === void 0 ? {} : _g, backgroundClassName = props.backgroundClassName, _h = props.backgroundWrapperComponent, backgroundWrapperComponent = _h === void 0 ? CropperBackgroundWrapper : _h, _j = props.backgroundWrapperProps, backgroundWrapperProps = _j === void 0 ? {} : _j, _k = props.boundaryComponent, boundaryComponent = _k === void 0 ? StretchableBoundary : _k, boundaryProps = props.boundaryProps, boundaryClassName = props.boundaryClassName, _l = props.canvas, canvas = _l === void 0 ? true : _l, _m = props.crossOrigin, crossOrigin = _m === void 0 ? true : _m, disabled = props.disabled, settings = props.settings, parameters = __rest(props, ["style", "className", "stencilComponent", "stencilConstraints", "stencilProps", "wrapperComponent", "wrapperProps", "backgroundComponent", "backgroundProps", "backgroundClassName", "backgroundWrapperComponent", "backgroundWrapperProps", "boundaryComponent", "boundaryProps", "boundaryClassName", "canvas", "crossOrigin", "disabled", "settings"]);
+  var stencilRef = useRef(null);
+  var _o = useAbstractCropper(function() {
+    return __assign(__assign({}, parameters), { crossOrigin, stencilProps, canvas, settings: __assign(__assign({}, settings), stencilConstraints(settings, __assign(__assign({}, stencilProps), stencilRef.current))) });
+  }), cropper = _o.cropper, image = _o.image, refs = _o.refs;
+  var StencilComponent = stencilComponent;
+  var WrapperComponent = wrapperComponent;
+  var BackgroundWrapperComponent = backgroundWrapperComponent;
+  var BackgroundComponent = backgroundComponent;
+  var BoundaryComponent = boundaryComponent;
+  useImperativeHandle(ref, function() {
+    return cropper;
+  });
+  var deprecatedWrapperProps = {
+    loading: cropper.isLoading(),
+    loaded: cropper.isLoaded()
+  };
+  return React__default.createElement(
+    WrapperComponent,
+    __assign({}, wrapperProps, { disabled, className: cn("advanced-cropper", className), cropper, style }, deprecatedWrapperProps),
+    React__default.createElement(
+      BoundaryComponent,
+      __assign({}, boundaryProps, { ref: refs.boundary, className: cn("advanced-cropper__boundary", boundaryClassName) }),
+      React__default.createElement(
+        BackgroundWrapperComponent,
+        __assign({}, backgroundWrapperProps, { disabled, cropper, className: "advanced-cropper__background-wrapper" }),
+        cropper.getState() && React__default.createElement(BackgroundComponent, __assign({}, backgroundProps, { ref: refs.image, crossOrigin, cropper, className: cn("advanced-cropper__background", backgroundClassName) })),
+        React__default.createElement(StencilComponent, __assign({}, stencilProps, { disabled, ref: stencilRef, cropper, image }))
+      ),
+      canvas && React__default.createElement(CropperCanvas, { ref: refs.canvas })
+    )
+  );
+};
+var AbstractCropper = createCropper(AbstractCropperComponent);
+var defaultSettings = [
+  "transformImage",
+  "moveCoordinates",
+  "resizeCoordinates",
+  "defaultCoordinates",
+  "defaultVisibleArea",
+  "areaPositionRestrictions",
+  "areaSizeRestrictions",
+  "sizeRestrictions",
+  "positionRestrictions",
+  "aspectRatio",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "defaultSize",
+  "defaultPosition",
+  "defaultTransforms",
+  "imageRestriction",
+  "priority"
+];
+function useAbstractCropperProps(props, settings) {
+  if (settings === void 0) {
+    settings = defaultSettings;
+  }
+  var result = { settings: {}, props: {} };
+  Object.keys(props).forEach(function(key) {
+    if (settings.some(function(setting) {
+      return setting === key;
+    })) {
+      result.settings[key] = props[key];
+    } else {
+      result.props[key] = props[key];
+    }
+  });
+  return result;
+}
+var FixedCropper = forwardRef(function(props, ref) {
+  var cropperProps = useAbstractCropperProps(props, __spreadArray(__spreadArray([], __read(defaultSettings), false), ["stencilSize"], false));
+  return React__default.createElement(AbstractCropper, __assign({ postProcess: fixedStencil, stencilConstraints: fixedStencilConstraints }, cropperProps.props, { settings: __assign(__assign({ defaultSize, aspectRatio, sizeRestrictions: withDefaultSizeRestrictions(sizeRestrictions) }, cropperProps.settings), { transformImage: __assign(__assign({}, cropperProps.settings.transformImage), { adjustStencil: false }) }), ref }));
+});
+FixedCropper.displayName = "FixedCropper";
+var Cropper = forwardRef(function(props, ref) {
+  var cropperProps = useAbstractCropperProps(props);
+  var intrinsicProps = cropperProps.props;
+  var _a = cropperProps.settings, stencilSize = _a.stencilSize, autoZoom = _a.autoZoom, actualSettings = __rest(_a, ["stencilSize", "autoZoom"]);
+  var deprecationWarning2 = useDeprecationWarning();
+  if (!isUndefined(autoZoom)) {
+    if (intrinsicProps.postProcess || stencilSize) {
+      deprecationWarning2("prop 'autoZoom' is deprecated now and will be removed, use 'postProcess' prop to pass your auto zoom function.");
+    } else {
+      deprecationWarning2("prop 'autoZoom' is deprecated now and will be removed, use 'postProcess' prop to pass your auto zoom function. The 'postProcess' automatically set to 'hybridAutoZoom'");
+      intrinsicProps.postProcess = hybridStencilAutoZoom;
+    }
+  }
+  if (!isUndefined(stencilSize)) {
+    deprecationWarning2("prop 'stencilSize' is deprecated for <Cropper/> component now and will be removed, use <FixedCropper/> component instead.");
+    return React__default.createElement(FixedCropper, __assign({ ref, stencilSize }, actualSettings, intrinsicProps));
+  }
+  return React__default.createElement(AbstractCropper, __assign({}, intrinsicProps, { ref, settings: actualSettings }));
+});
+Cropper.displayName = "CropperComponent";
+var CircleStencil = forwardRef(function(_a, ref) {
+  var cropper = _a.cropper, coordinates = _a.coordinates, _b = _a.handlerComponent, handlerComponent = _b === void 0 ? SimpleHandler : _b, _c = _a.handlers, handlers = _c === void 0 ? {
+    eastNorth: true,
+    westNorth: true,
+    westSouth: true,
+    eastSouth: true
+  } : _c, _d = _a.handlerClassNames, handlerClassNames = _d === void 0 ? {} : _d, _e = _a.handlerWrapperClassNames, handlerWrapperClassNames = _e === void 0 ? {} : _e, _f = _a.lines, lines = _f === void 0 ? {
+    west: true,
+    north: true,
+    east: true,
+    south: true
+  } : _f, _g = _a.lineComponent, lineComponent = _g === void 0 ? SimpleLine : _g, _h = _a.lineClassNames, lineClassNames = _h === void 0 ? {} : _h, _j = _a.lineWrapperClassNames, lineWrapperClassNames = _j === void 0 ? {} : _j, _k = _a.resizable, resizable = _k === void 0 ? true : _k, _l = _a.movable, movable = _l === void 0 ? true : _l, grid = _a.grid, gridClassName = _a.gridClassName, className = _a.className, movingClassName = _a.movingClassName, resizingClassName = _a.resizingClassName, previewClassName = _a.previewClassName, boundingBoxClassName = _a.boundingBoxClassName, overlayClassName = _a.overlayClassName, draggableAreaClassName = _a.draggableAreaClassName, disabled = _a.disabled;
+  var state = cropper.getState();
+  var transitions = cropper.getTransitions();
+  var interactions = cropper.getInteractions();
+  var resizeAllowed = resizable && !disabled;
+  var moveAllowed = movable && !disabled;
+  useImperativeHandle(ref, function() {
+    return {
+      aspectRatio: 1,
+      boundingBox: "circle"
+    };
+  });
+  var onMove = function(directions) {
+    if (cropper && moveAllowed) {
+      cropper.moveCoordinates(directions);
+    }
+  };
+  var onMoveEnd = function() {
+    if (cropper) {
+      cropper.moveCoordinatesEnd();
+    }
+  };
+  var onResize = function(anchor, directions, options) {
+    if (cropper && resizeAllowed) {
+      cropper.resizeCoordinates(anchor, directions, options);
+    }
+  };
+  var onResizeEnd = function() {
+    if (cropper) {
+      cropper.resizeCoordinatesEnd();
+    }
+  };
+  var _m = coordinates ? isFunction(coordinates) ? coordinates(state) : coordinates : getStencilCoordinates(state), width = _m.width, height = _m.height, left = _m.left, top = _m.top;
+  return state && React__default.createElement(
+    StencilWrapper,
+    { className: cn("advanced-cropper-circle-stencil", className, interactions.moveCoordinates && movingClassName, interactions.resizeCoordinates && resizingClassName, {
+      "advanced-cropper-circle-stencil--movable": moveAllowed,
+      "advanced-cropper-circle-stencil--moving": interactions.moveCoordinates,
+      "advanced-cropper-circle-stencil--resizable": resizeAllowed,
+      "advanced-cropper-circle-stencil--resizing": interactions.resizeCoordinates,
+      "advanced-cropper-circle-stencil--disabled": disabled
+    }), width, height, left, top, transitions },
+    React__default.createElement(
+      BoundingBox,
+      { reference: state.coordinates, className: cn(boundingBoxClassName, "advanced-cropper-circle-stencil__bounding-box"), handlers, handlerComponent, handlerClassNames, handlerWrapperClassNames, lines, lineComponent, lineClassNames, lineWrapperClassNames, onResize, onResizeEnd, disabled: !resizeAllowed },
+      React__default.createElement(
+        DraggableElement,
+        { disabled: !moveAllowed, onMove, onMoveEnd, className: cn("advanced-cropper-circle-stencil__draggable-area", draggableAreaClassName) },
+        React__default.createElement(
+          StencilOverlay,
+          { className: cn("advanced-cropper-circle-stencil__overlay", overlayClassName) },
+          grid && React__default.createElement(StencilGrid, { visible: cropper.hasInteractions(), columns: interactions.transformImage.rotate ? 9 : 3, rows: interactions.transformImage.rotate ? 9 : 3, className: cn("advanced-cropper-circle-stencil__grid", gridClassName) }),
+          React__default.createElement("div", { className: cn("advanced-cropper-circle-stencil__preview", previewClassName) })
+        )
+      )
+    )
+  );
+});
+CircleStencil.displayName = "CircleStencil";
+var CropperSource = forwardRef(function(_a, ref) {
+  var src = _a.src, _b = _a.crossOrigin, crossOrigin = _b === void 0 ? true : _b, props = __rest(_a, ["src", "crossOrigin"]);
+  return src ? React__default.createElement("img", __assign({ key: src, ref, src, className: cn("advanced-cropper-source"), crossOrigin: crossOrigin === true ? "anonymous" : crossOrigin || void 0 }, props)) : null;
+});
+CropperSource.displayName = "CropperSource";
+var CropperPreviewWrapper = function(_a) {
+  var children = _a.children, cropper = _a.cropper, className = _a.className, style = _a.style;
+  return React__default.createElement(
+    "div",
+    { className: cn(className, "cropper-preview-wrapper"), style },
+    React__default.createElement(CropperFade, { visible: cropper === null || cropper === void 0 ? void 0 : cropper.isLoaded(), className: "cropper-preview-wrapper__fade" }, children)
+  );
+};
+var CropperPreviewBackground = function(_a) {
+  var className = _a.className, cropper = _a.cropper, _b = _a.crossOrigin, crossOrigin = _b === void 0 ? true : _b, size = _a.size, style = _a.style;
+  var state = cropper.getState();
+  var transitions = cropper.getTransitions();
+  var image = cropper.getImage();
+  var transformStyles = size && image && (state === null || state === void 0 ? void 0 : state.coordinates) ? getPreviewStyle(image, state, size, transitions) : {};
+  var src = image ? image.src : void 0;
+  return src ? React__default.createElement("img", { key: src, className: cn("advanced-cropper-background-image", className), src, crossOrigin: crossOrigin === true ? "anonymous" : crossOrigin || void 0, style: __assign(__assign({}, transformStyles), style), onMouseDown: preventDefault }) : null;
+};
+forwardRef(function(_a, ref) {
+  var _b, _c, _d, _e;
+  var className = _a.className, contentClassName = _a.contentClassName, _f = _a.state, state = _f === void 0 ? null : _f, _g = _a.image, image = _g === void 0 ? null : _g, _h = _a.transitions, transitions = _h === void 0 ? null : _h, _j = _a.backgroundComponent, backgroundComponent = _j === void 0 ? CropperPreviewBackground : _j, backgroundProps = _a.backgroundProps, backgroundClassName = _a.backgroundClassName, _k = _a.boundaryComponent, boundaryComponent = _k === void 0 ? StretchableBoundary : _k, boundaryProps = _a.boundaryProps, boundaryClassName = _a.boundaryClassName, _l = _a.wrapperComponent, wrapperComponent = _l === void 0 ? CropperPreviewWrapper : _l, wrapperProps = _a.wrapperProps, _m = _a.loaded, loaded = _m === void 0 ? true : _m, _o = _a.loading, loading = _o === void 0 ? false : _o, style = _a.style, cropper = _a.cropper;
+  var rerender = useForceRerender();
+  var boundaryRef = useRef(null);
+  var internalInstance = useRef(null);
+  var instance = cropper || (internalInstance.current ? internalInstance : {
+    current: {
+      getState: function() {
+        return state;
+      },
+      getTransitions: function() {
+        return transitions;
+      },
+      getImage: function() {
+        return image;
+      },
+      isLoaded: function() {
+        return loaded;
+      },
+      isLoading: function() {
+        return loading;
+      }
+    }
+  });
+  var _p = __read(useState(null), 2), size = _p[0], setSize = _p[1];
+  var coordinates = (_c = (_b = instance.current) === null || _b === void 0 ? void 0 : _b.getState()) === null || _c === void 0 ? void 0 : _c.coordinates;
+  var src = (_e = (_d = instance.current) === null || _d === void 0 ? void 0 : _d.getImage()) === null || _e === void 0 ? void 0 : _e.src;
+  var contentStyle = size ? {
+    width: "".concat(size.width, "px"),
+    height: "".concat(size.height, "px")
+  } : {};
+  var refresh = function() {
+    var _a2, _b2;
+    var coordinates2 = (_b2 = (_a2 = instance.current) === null || _a2 === void 0 ? void 0 : _a2.getState()) === null || _b2 === void 0 ? void 0 : _b2.coordinates;
+    if (boundaryRef.current && coordinates2) {
+      boundaryRef.current.stretchTo(coordinates2).then(function(size2) {
+        if (size2 && coordinates2) {
+          if (isGreater(ratio(coordinates2), ratio(size2))) {
+            setSize({
+              width: size2.width,
+              height: size2.width / ratio(coordinates2)
+            });
+          } else {
+            setSize({
+              width: size2.height * ratio(coordinates2),
+              height: size2.height
+            });
+          }
+        } else {
+          setSize(null);
+        }
+      });
+    }
+    rerender();
+  };
+  useWindowResize(refresh);
+  useLayoutEffect(refresh, [coordinates === null || coordinates === void 0 ? void 0 : coordinates.height, coordinates === null || coordinates === void 0 ? void 0 : coordinates.width]);
+  useImperativeHandle(ref, function() {
+    return {
+      refresh,
+      update: function(cropper2) {
+        if (cropper2) {
+          internalInstance.current = cropper2;
+        } else {
+          internalInstance.current = null;
+        }
+        refresh();
+      }
+    };
+  });
+  var WrapperComponent = wrapperComponent;
+  var BackgroundComponent = backgroundComponent;
+  var BoundaryComponent = boundaryComponent;
+  return React__default.createElement(
+    WrapperComponent,
+    __assign({}, wrapperProps, { className: cn(className, "advanced-cropper-preview"), cropper: instance.current, style }),
+    React__default.createElement(
+      BoundaryComponent,
+      __assign({ ref: boundaryRef, stretchAlgorithm: stretchPreviewBoundary }, boundaryProps, { className: cn("advanced-cropper-preview__boundary", boundaryClassName) }),
+      React__default.createElement("div", { className: cn(contentClassName, "advanced-cropper-preview__content"), style: contentStyle }, instance.current && React__default.createElement(BackgroundComponent, __assign({}, backgroundProps, { cropper: instance.current, size, className: cn(backgroundClassName, "advanced-cropper-preview__image", src && "advanced-cropper-preview__image--visible") })))
+    )
+  );
+});
+export {
+  AbstractCropperInstance,
+  Animation,
+  BoundingBox,
+  CircleStencil,
+  Cropper,
+  CropperBackgroundImage,
+  CropperBackgroundWrapper,
+  CropperCanvas,
+  CropperFade,
+  CropperPreviewBackground,
+  CropperPreviewWrapper,
+  CropperSource,
+  CropperWrapper,
+  DraggableElement as DraggableArea,
+  DraggableElement,
+  FixedCropper,
+  ImageRestriction,
+  Priority,
+  RectangleStencil,
+  SimpleHandler,
+  SimpleLine,
+  StencilGrid,
+  StencilOverlay,
+  StencilWrapper,
+  StretchableBoundary,
+  TransformableImage,
+  TransformableImageEvent,
+  applyDirections,
+  applyMove,
+  applyScale,
+  aspectRatioIntersection,
+  coordinatesToPositionRestrictions,
+  copyState,
+  createAspectRatio,
+  createDefaultSettings,
+  createImage,
+  debounce,
+  deepClone,
+  deepCompare,
+  defaultStencilConstraints,
+  diff,
+  distance,
+  drawCroppedArea,
+  emptyCoordinates,
+  fillBoundary,
+  fitToPositionRestrictions,
+  fitToSizeRestrictions,
+  getAreaPositionRestrictions,
+  getAreaSizeRestrictions,
+  getAspectRatio,
+  getBackgroundStyle,
+  getBrokenRatio,
+  getCenter,
+  getCloserSize,
+  getCoefficient,
+  getDefaultCoordinates,
+  getDefaultTransforms,
+  getDefaultVisibleArea,
+  getDirectionNames,
+  getEmptyInteractions,
+  getImageStyle,
+  getIntersections,
+  getMinimumSize,
+  getOppositeSide,
+  getOptions,
+  getPositionRestrictions,
+  getPreviewStyle,
+  getRoundedCoordinates,
+  getSizeRestrictions,
+  getStencilCoordinates,
+  getStyleTransforms,
+  getTransformedImageSize,
+  hasInteractions,
+  inverseMove,
+  isArray,
+  isBlob,
+  isBoolean,
+  isCardinalDirection,
+  isConsistentPosition,
+  isConsistentSize,
+  isConsistentState,
+  isCrossOriginURL,
+  isDataUrl,
+  isFunction,
+  isGreater,
+  isInitializedState,
+  isLocal,
+  isLower,
+  isNaN,
+  isNumber,
+  isNumeric,
+  isObject,
+  isRoughlyEqual,
+  isString,
+  isUndefined,
+  loadImage,
+  maxScale,
+  mergePositionRestrictions,
+  minScale,
+  moveToPositionRestrictions,
+  parseNumber,
+  positionToSizeRestrictions,
+  prepareSource,
+  promiseTimeout,
+  ratio,
+  resizeToSizeRestrictions,
+  rotatePoint,
+  rotateSize,
+  sign,
+  sizeDistance,
+  stretchCropperBoundary,
+  stretchPreviewBoundary,
+  touchesToImageTransform,
+  updateCanvas,
+  useAbstractCropper,
+  useCropperImage,
+  useCropperInstance,
+  useMoveImageOptions,
+  useRotateImageOptions,
+  useScaleImageOptions,
+  useUpdateEffect,
+  useWindowResize,
+  wheelEventToImageTransform,
+  withDefaultSizeRestrictions
+};