@jenesei-software/jenesei-kit-react 1.3.40 → 2.0.0

package/build/use-DdGWsOBo.js

@@ -1,1577 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
-import * as React from "react";
-import { useMemo, useState, useCallback, useEffect } from "react";
-import { bo as KEY_SIZE_DATA, P as Preview, B as Button } from "./context.constants-BWLe7YHv.js";
-import { P as Pagination } from "./component.constants-DI22AYyi.js";
-import { b as Stack } from "./component-gcvwlILJ.js";
-import { LIST_IMAGE_SUPPORTED_FORMAT } from "./consts.es.js";
-import "./context.constants-B14bB8O1.js";
-import { a as useDialog } from "./context.hooks-BnHnPV_i.js";
-import { g as getDefaultExportFromCjs, u as useDeepCompareMemoize } from "./use-C7vngeRk.js";
-import { useTheme } from "styled-components";
-var extendStatics = function(d, b) {
-  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
-    d2.__proto__ = b2;
-  } || function(d2, b2) {
-    for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
-  };
-  return extendStatics(d, b);
-};
-function __extends(d, b) {
-  if (typeof b !== "function" && b !== null)
-    throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-  extendStatics(d, b);
-  function __() {
-    this.constructor = d;
-  }
-  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-var __assign = function() {
-  __assign = Object.assign || function __assign2(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-var _populated = false;
-var _ie, _firefox, _opera, _webkit, _chrome;
-var _ie_real_version;
-var _osx, _windows, _linux, _android;
-var _win64;
-var _iphone, _ipad, _native;
-var _mobile;
-function _populate() {
-  if (_populated) {
-    return;
-  }
-  _populated = true;
-  var uas = navigator.userAgent;
-  var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas);
-  var os = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
-  _iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
-  _ipad = /\b(iP[ao]d)/.exec(uas);
-  _android = /Android/i.exec(uas);
-  _native = /FBAN\/\w+;/i.exec(uas);
-  _mobile = /Mobile/i.exec(uas);
-  _win64 = !!/Win64/.exec(uas);
-  if (agent) {
-    _ie = agent[1] ? parseFloat(agent[1]) : agent[5] ? parseFloat(agent[5]) : NaN;
-    if (_ie && document && document.documentMode) {
-      _ie = document.documentMode;
-    }
-    var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
-    _ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
-    _firefox = agent[2] ? parseFloat(agent[2]) : NaN;
-    _opera = agent[3] ? parseFloat(agent[3]) : NaN;
-    _webkit = agent[4] ? parseFloat(agent[4]) : NaN;
-    if (_webkit) {
-      agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
-      _chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
-    } else {
-      _chrome = NaN;
-    }
-  } else {
-    _ie = _firefox = _opera = _chrome = _webkit = NaN;
-  }
-  if (os) {
-    if (os[1]) {
-      var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
-      _osx = ver ? parseFloat(ver[1].replace("_", ".")) : true;
-    } else {
-      _osx = false;
-    }
-    _windows = !!os[2];
-    _linux = !!os[3];
-  } else {
-    _osx = _windows = _linux = false;
-  }
-}
-var UserAgent_DEPRECATED$1 = {
-  /**
-   *  Check if the UA is Internet Explorer.
-   *
-   *
-   *  @return float|NaN Version number (if match) or NaN.
-   */
-  ie: function() {
-    return _populate() || _ie;
-  },
-  /**
-   * Check if we're in Internet Explorer compatibility mode.
-   *
-   * @return bool true if in compatibility mode, false if
-   * not compatibility mode or not ie
-   */
-  ieCompatibilityMode: function() {
-    return _populate() || _ie_real_version > _ie;
-  },
-  /**
-   * Whether the browser is 64-bit IE.  Really, this is kind of weak sauce;  we
-   * only need this because Skype can't handle 64-bit IE yet.  We need to remove
-   * this when we don't need it -- tracked by #601957.
-   */
-  ie64: function() {
-    return UserAgent_DEPRECATED$1.ie() && _win64;
-  },
-  /**
-   *  Check if the UA is Firefox.
-   *
-   *
-   *  @return float|NaN Version number (if match) or NaN.
-   */
-  firefox: function() {
-    return _populate() || _firefox;
-  },
-  /**
-   *  Check if the UA is Opera.
-   *
-   *
-   *  @return float|NaN Version number (if match) or NaN.
-   */
-  opera: function() {
-    return _populate() || _opera;
-  },
-  /**
-   *  Check if the UA is WebKit.
-   *
-   *
-   *  @return float|NaN Version number (if match) or NaN.
-   */
-  webkit: function() {
-    return _populate() || _webkit;
-  },
-  /**
-   *  For Push
-   *  WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
-   */
-  safari: function() {
-    return UserAgent_DEPRECATED$1.webkit();
-  },
-  /**
-   *  Check if the UA is a Chrome browser.
-   *
-   *
-   *  @return float|NaN Version number (if match) or NaN.
-   */
-  chrome: function() {
-    return _populate() || _chrome;
-  },
-  /**
-   *  Check if the user is running Windows.
-   *
-   *  @return bool `true' if the user's OS is Windows.
-   */
-  windows: function() {
-    return _populate() || _windows;
-  },
-  /**
-   *  Check if the user is running Mac OS X.
-   *
-   *  @return float|bool   Returns a float if a version number is detected,
-   *                       otherwise true/false.
-   */
-  osx: function() {
-    return _populate() || _osx;
-  },
-  /**
-   * Check if the user is running Linux.
-   *
-   * @return bool `true' if the user's OS is some flavor of Linux.
-   */
-  linux: function() {
-    return _populate() || _linux;
-  },
-  /**
-   * Check if the user is running on an iPhone or iPod platform.
-   *
-   * @return bool `true' if the user is running some flavor of the
-   *    iPhone OS.
-   */
-  iphone: function() {
-    return _populate() || _iphone;
-  },
-  mobile: function() {
-    return _populate() || (_iphone || _ipad || _android || _mobile);
-  },
-  nativeApp: function() {
-    return _populate() || _native;
-  },
-  android: function() {
-    return _populate() || _android;
-  },
-  ipad: function() {
-    return _populate() || _ipad;
-  }
-};
-var UserAgent_DEPRECATED_1 = UserAgent_DEPRECATED$1;
-var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
-var ExecutionEnvironment$1 = {
-  canUseDOM
-};
-var ExecutionEnvironment_1 = ExecutionEnvironment$1;
-var ExecutionEnvironment = ExecutionEnvironment_1;
-var useHasFeature;
-if (ExecutionEnvironment.canUseDOM) {
-  useHasFeature = document.implementation && document.implementation.hasFeature && // always returns true in newer browsers as per the standard.
-  // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
-  document.implementation.hasFeature("", "") !== true;
-}
-/**
- * Checks if an event is supported in the current execution environment.
- *
- * NOTE: This will not work correctly for non-generic events such as `change`,
- * `reset`, `load`, `error`, and `select`.
- *
- * Borrows from Modernizr.
- *
- * @param {string} eventNameSuffix Event name, e.g. "click".
- * @param {?boolean} capture Check if the capture phase is supported.
- * @return {boolean} True if the event is supported.
- * @internal
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-function isEventSupported$1(eventNameSuffix, capture) {
-  if (!ExecutionEnvironment.canUseDOM || capture && !("addEventListener" in document)) {
-    return false;
-  }
-  var eventName = "on" + eventNameSuffix;
-  var isSupported = eventName in document;
-  if (!isSupported) {
-    var element = document.createElement("div");
-    element.setAttribute(eventName, "return;");
-    isSupported = typeof element[eventName] === "function";
-  }
-  if (!isSupported && useHasFeature && eventNameSuffix === "wheel") {
-    isSupported = document.implementation.hasFeature("Events.wheel", "3.0");
-  }
-  return isSupported;
-}
-var isEventSupported_1 = isEventSupported$1;
-var UserAgent_DEPRECATED = UserAgent_DEPRECATED_1;
-var isEventSupported = isEventSupported_1;
-var PIXEL_STEP = 10;
-var LINE_HEIGHT = 40;
-var PAGE_HEIGHT = 800;
-function normalizeWheel$2(event) {
-  var sX = 0, sY = 0, pX = 0, pY = 0;
-  if ("detail" in event) {
-    sY = event.detail;
-  }
-  if ("wheelDelta" in event) {
-    sY = -event.wheelDelta / 120;
-  }
-  if ("wheelDeltaY" in event) {
-    sY = -event.wheelDeltaY / 120;
-  }
-  if ("wheelDeltaX" in event) {
-    sX = -event.wheelDeltaX / 120;
-  }
-  if ("axis" in event && event.axis === event.HORIZONTAL_AXIS) {
-    sX = sY;
-    sY = 0;
-  }
-  pX = sX * PIXEL_STEP;
-  pY = sY * PIXEL_STEP;
-  if ("deltaY" in event) {
-    pY = event.deltaY;
-  }
-  if ("deltaX" in event) {
-    pX = event.deltaX;
-  }
-  if ((pX || pY) && event.deltaMode) {
-    if (event.deltaMode == 1) {
-      pX *= LINE_HEIGHT;
-      pY *= LINE_HEIGHT;
-    } else {
-      pX *= PAGE_HEIGHT;
-      pY *= PAGE_HEIGHT;
-    }
-  }
-  if (pX && !sX) {
-    sX = pX < 1 ? -1 : 1;
-  }
-  if (pY && !sY) {
-    sY = pY < 1 ? -1 : 1;
-  }
-  return {
-    spinX: sX,
-    spinY: sY,
-    pixelX: pX,
-    pixelY: pY
-  };
-}
-normalizeWheel$2.getEventType = function() {
-  return UserAgent_DEPRECATED.firefox() ? "DOMMouseScroll" : isEventSupported("wheel") ? "wheel" : "mousewheel";
-};
-var normalizeWheel_1 = normalizeWheel$2;
-var normalizeWheel = normalizeWheel_1;
-const normalizeWheel$1 = /* @__PURE__ */ getDefaultExportFromCjs(normalizeWheel);
-function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation) {
-  if (rotation === void 0) {
-    rotation = 0;
-  }
-  var _a = rotateSize(mediaWidth, mediaHeight, rotation), width = _a.width, height = _a.height;
-  var fittingWidth = Math.min(width, containerWidth);
-  var fittingHeight = Math.min(height, containerHeight);
-  if (fittingWidth > fittingHeight * aspect) {
-    return {
-      width: fittingHeight * aspect,
-      height: fittingHeight
-    };
-  }
-  return {
-    width: fittingWidth,
-    height: fittingWidth / aspect
-  };
-}
-function getMediaZoom(mediaSize) {
-  return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
-}
-function restrictPosition(position, mediaSize, cropSize, zoom, rotation) {
-  if (rotation === void 0) {
-    rotation = 0;
-  }
-  var _a = rotateSize(mediaSize.width, mediaSize.height, rotation), width = _a.width, height = _a.height;
-  return {
-    x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
-    y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
-  };
-}
-function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
-  var maxPosition = mediaSize * zoom / 2 - cropSize / 2;
-  return clamp(position, -maxPosition, maxPosition);
-}
-function getDistanceBetweenPoints(pointA, pointB) {
-  return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
-}
-function getRotationBetweenPoints(pointA, pointB) {
-  return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
-}
-function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation, restrictPosition2) {
-  if (rotation === void 0) {
-    rotation = 0;
-  }
-  if (restrictPosition2 === void 0) {
-    restrictPosition2 = true;
-  }
-  var limitAreaFn = restrictPosition2 ? limitArea : noOp;
-  var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
-  var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
-  var croppedAreaPercentages = {
-    x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
-    y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
-    width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
-    height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
-  };
-  var widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
-  var heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
-  var isImgWiderThanHigh = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect;
-  var sizePixels = isImgWiderThanHigh ? {
-    width: Math.round(heightInPixels * aspect),
-    height: heightInPixels
-  } : {
-    width: widthInPixels,
-    height: Math.round(widthInPixels / aspect)
-  };
-  var croppedAreaPixels = __assign(__assign({}, sizePixels), {
-    x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
-    y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
-  });
-  return {
-    croppedAreaPercentages,
-    croppedAreaPixels
-  };
-}
-function limitArea(max, value) {
-  return Math.min(max, Math.max(0, value));
-}
-function noOp(_max, value) {
-  return value;
-}
-function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
-  var mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
-  var zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
-  var crop = {
-    x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
-    y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
-  };
-  return {
-    crop,
-    zoom
-  };
-}
-function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
-  var mediaZoom = getMediaZoom(mediaSize);
-  return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
-}
-function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation, cropSize, minZoom, maxZoom) {
-  if (rotation === void 0) {
-    rotation = 0;
-  }
-  var mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
-  var zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
-  var cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
-  var crop = {
-    x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
-    y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
-  };
-  return {
-    crop,
-    zoom
-  };
-}
-function getCenter(a, b) {
-  return {
-    x: (b.x + a.x) / 2,
-    y: (b.y + a.y) / 2
-  };
-}
-function getRadianAngle(degreeValue) {
-  return degreeValue * Math.PI / 180;
-}
-function rotateSize(width, height, rotation) {
-  var rotRad = getRadianAngle(rotation);
-  return {
-    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
-    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
-  };
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-function classNames() {
-  var args = [];
-  for (var _i = 0; _i < arguments.length; _i++) {
-    args[_i] = arguments[_i];
-  }
-  return args.filter(function(value) {
-    if (typeof value === "string" && value.length > 0) {
-      return true;
-    }
-    return false;
-  }).join(" ").trim();
-}
-var css_248z = ".reactEasyCrop_Container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  user-select: none;\n  touch-action: none;\n  cursor: move;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n  width: 100%;\n  height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n  width: auto;\n  height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  box-sizing: border-box;\n  box-shadow: 0 0 0 9999em;\n  color: rgba(0, 0, 0, 0.5);\n  overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n  border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 0;\n  bottom: 0;\n  left: 33.33%;\n  right: 33.33%;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 33.33%;\n  bottom: 33.33%;\n  left: 0;\n  right: 0;\n  border-left: 0;\n  border-right: 0;\n}\n";
-var MIN_ZOOM = 1;
-var MAX_ZOOM = 3;
-var KEYBOARD_STEP = 1;
-var Cropper = (
-  /** @class */
-  function(_super) {
-    __extends(Cropper2, _super);
-    function Cropper2() {
-      var _this = _super !== null && _super.apply(this, arguments) || this;
-      _this.cropperRef = React.createRef();
-      _this.imageRef = React.createRef();
-      _this.videoRef = React.createRef();
-      _this.containerPosition = {
-        x: 0,
-        y: 0
-      };
-      _this.containerRef = null;
-      _this.styleRef = null;
-      _this.containerRect = null;
-      _this.mediaSize = {
-        width: 0,
-        height: 0,
-        naturalWidth: 0,
-        naturalHeight: 0
-      };
-      _this.dragStartPosition = {
-        x: 0,
-        y: 0
-      };
-      _this.dragStartCrop = {
-        x: 0,
-        y: 0
-      };
-      _this.gestureZoomStart = 0;
-      _this.gestureRotationStart = 0;
-      _this.isTouching = false;
-      _this.lastPinchDistance = 0;
-      _this.lastPinchRotation = 0;
-      _this.rafDragTimeout = null;
-      _this.rafPinchTimeout = null;
-      _this.wheelTimer = null;
-      _this.currentDoc = typeof document !== "undefined" ? document : null;
-      _this.currentWindow = typeof window !== "undefined" ? window : null;
-      _this.resizeObserver = null;
-      _this.previousCropSize = null;
-      _this.isInitialized = false;
-      _this.state = {
-        cropSize: null,
-        hasWheelJustStarted: false,
-        mediaObjectFit: void 0
-      };
-      _this.initResizeObserver = function() {
-        if (typeof window.ResizeObserver === "undefined" || !_this.containerRef) {
-          return;
-        }
-        var isFirstResize = true;
-        _this.resizeObserver = new window.ResizeObserver(function(entries) {
-          if (isFirstResize) {
-            isFirstResize = false;
-            return;
-          }
-          _this.computeSizes();
-        });
-        _this.resizeObserver.observe(_this.containerRef);
-      };
-      _this.preventZoomSafari = function(e) {
-        return e.preventDefault();
-      };
-      _this.cleanEvents = function() {
-        if (!_this.currentDoc) return;
-        _this.currentDoc.removeEventListener("mousemove", _this.onMouseMove);
-        _this.currentDoc.removeEventListener("mouseup", _this.onDragStopped);
-        _this.currentDoc.removeEventListener("touchmove", _this.onTouchMove);
-        _this.currentDoc.removeEventListener("touchend", _this.onDragStopped);
-        _this.currentDoc.removeEventListener("gesturechange", _this.onGestureChange);
-        _this.currentDoc.removeEventListener("gestureend", _this.onGestureEnd);
-        _this.currentDoc.removeEventListener("scroll", _this.onScroll);
-      };
-      _this.clearScrollEvent = function() {
-        if (_this.containerRef) _this.containerRef.removeEventListener("wheel", _this.onWheel);
-        if (_this.wheelTimer) {
-          clearTimeout(_this.wheelTimer);
-        }
-      };
-      _this.onMediaLoad = function() {
-        var cropSize = _this.computeSizes();
-        if (cropSize) {
-          _this.previousCropSize = cropSize;
-          _this.emitCropData();
-          _this.setInitialCrop(cropSize);
-          _this.isInitialized = true;
-        }
-        if (_this.props.onMediaLoaded) {
-          _this.props.onMediaLoaded(_this.mediaSize);
-        }
-      };
-      _this.setInitialCrop = function(cropSize) {
-        if (_this.props.initialCroppedAreaPercentages) {
-          var _a = getInitialCropFromCroppedAreaPercentages(_this.props.initialCroppedAreaPercentages, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom), crop = _a.crop, zoom = _a.zoom;
-          _this.props.onCropChange(crop);
-          _this.props.onZoomChange && _this.props.onZoomChange(zoom);
-        } else if (_this.props.initialCroppedAreaPixels) {
-          var _b = getInitialCropFromCroppedAreaPixels(_this.props.initialCroppedAreaPixels, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom), crop = _b.crop, zoom = _b.zoom;
-          _this.props.onCropChange(crop);
-          _this.props.onZoomChange && _this.props.onZoomChange(zoom);
-        }
-      };
-      _this.computeSizes = function() {
-        var _a, _b, _c, _d, _e, _f;
-        var mediaRef = _this.imageRef.current || _this.videoRef.current;
-        if (mediaRef && _this.containerRef) {
-          _this.containerRect = _this.containerRef.getBoundingClientRect();
-          _this.saveContainerPosition();
-          var containerAspect = _this.containerRect.width / _this.containerRect.height;
-          var naturalWidth = ((_a = _this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = _this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
-          var naturalHeight = ((_c = _this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = _this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
-          var isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
-          var mediaAspect = naturalWidth / naturalHeight;
-          var renderedMediaSize = void 0;
-          if (isMediaScaledDown) {
-            switch (_this.state.mediaObjectFit) {
-              default:
-              case "contain":
-                renderedMediaSize = containerAspect > mediaAspect ? {
-                  width: _this.containerRect.height * mediaAspect,
-                  height: _this.containerRect.height
-                } : {
-                  width: _this.containerRect.width,
-                  height: _this.containerRect.width / mediaAspect
-                };
-                break;
-              case "horizontal-cover":
-                renderedMediaSize = {
-                  width: _this.containerRect.width,
-                  height: _this.containerRect.width / mediaAspect
-                };
-                break;
-              case "vertical-cover":
-                renderedMediaSize = {
-                  width: _this.containerRect.height * mediaAspect,
-                  height: _this.containerRect.height
-                };
-                break;
-            }
-          } else {
-            renderedMediaSize = {
-              width: mediaRef.offsetWidth,
-              height: mediaRef.offsetHeight
-            };
-          }
-          _this.mediaSize = __assign(__assign({}, renderedMediaSize), {
-            naturalWidth,
-            naturalHeight
-          });
-          if (_this.props.setMediaSize) {
-            _this.props.setMediaSize(_this.mediaSize);
-          }
-          var cropSize = _this.props.cropSize ? _this.props.cropSize : getCropSize(_this.mediaSize.width, _this.mediaSize.height, _this.containerRect.width, _this.containerRect.height, _this.props.aspect, _this.props.rotation);
-          if (((_e = _this.state.cropSize) === null || _e === void 0 ? void 0 : _e.height) !== cropSize.height || ((_f = _this.state.cropSize) === null || _f === void 0 ? void 0 : _f.width) !== cropSize.width) {
-            _this.props.onCropSizeChange && _this.props.onCropSizeChange(cropSize);
-          }
-          _this.setState({
-            cropSize
-          }, _this.recomputeCropPosition);
-          if (_this.props.setCropSize) {
-            _this.props.setCropSize(cropSize);
-          }
-          return cropSize;
-        }
-      };
-      _this.saveContainerPosition = function() {
-        if (_this.containerRef) {
-          var bounds = _this.containerRef.getBoundingClientRect();
-          _this.containerPosition = {
-            x: bounds.left,
-            y: bounds.top
-          };
-        }
-      };
-      _this.onMouseDown = function(e) {
-        if (!_this.currentDoc) return;
-        e.preventDefault();
-        _this.currentDoc.addEventListener("mousemove", _this.onMouseMove);
-        _this.currentDoc.addEventListener("mouseup", _this.onDragStopped);
-        _this.saveContainerPosition();
-        _this.onDragStart(Cropper2.getMousePoint(e));
-      };
-      _this.onMouseMove = function(e) {
-        return _this.onDrag(Cropper2.getMousePoint(e));
-      };
-      _this.onScroll = function(e) {
-        if (!_this.currentDoc) return;
-        e.preventDefault();
-        _this.saveContainerPosition();
-      };
-      _this.onTouchStart = function(e) {
-        if (!_this.currentDoc) return;
-        _this.isTouching = true;
-        if (_this.props.onTouchRequest && !_this.props.onTouchRequest(e)) {
-          return;
-        }
-        _this.currentDoc.addEventListener("touchmove", _this.onTouchMove, {
-          passive: false
-        });
-        _this.currentDoc.addEventListener("touchend", _this.onDragStopped);
-        _this.saveContainerPosition();
-        if (e.touches.length === 2) {
-          _this.onPinchStart(e);
-        } else if (e.touches.length === 1) {
-          _this.onDragStart(Cropper2.getTouchPoint(e.touches[0]));
-        }
-      };
-      _this.onTouchMove = function(e) {
-        e.preventDefault();
-        if (e.touches.length === 2) {
-          _this.onPinchMove(e);
-        } else if (e.touches.length === 1) {
-          _this.onDrag(Cropper2.getTouchPoint(e.touches[0]));
-        }
-      };
-      _this.onGestureStart = function(e) {
-        if (!_this.currentDoc) return;
-        e.preventDefault();
-        _this.currentDoc.addEventListener("gesturechange", _this.onGestureChange);
-        _this.currentDoc.addEventListener("gestureend", _this.onGestureEnd);
-        _this.gestureZoomStart = _this.props.zoom;
-        _this.gestureRotationStart = _this.props.rotation;
-      };
-      _this.onGestureChange = function(e) {
-        e.preventDefault();
-        if (_this.isTouching) {
-          return;
-        }
-        var point = Cropper2.getMousePoint(e);
-        var newZoom = _this.gestureZoomStart - 1 + e.scale;
-        _this.setNewZoom(newZoom, point, {
-          shouldUpdatePosition: true
-        });
-        if (_this.props.onRotationChange) {
-          var newRotation = _this.gestureRotationStart + e.rotation;
-          _this.props.onRotationChange(newRotation);
-        }
-      };
-      _this.onGestureEnd = function(e) {
-        _this.cleanEvents();
-      };
-      _this.onDragStart = function(_a) {
-        var _b, _c;
-        var x = _a.x, y = _a.y;
-        _this.dragStartPosition = {
-          x,
-          y
-        };
-        _this.dragStartCrop = __assign({}, _this.props.crop);
-        (_c = (_b = _this.props).onInteractionStart) === null || _c === void 0 ? void 0 : _c.call(_b);
-      };
-      _this.onDrag = function(_a) {
-        var x = _a.x, y = _a.y;
-        if (!_this.currentWindow) return;
-        if (_this.rafDragTimeout) _this.currentWindow.cancelAnimationFrame(_this.rafDragTimeout);
-        _this.rafDragTimeout = _this.currentWindow.requestAnimationFrame(function() {
-          if (!_this.state.cropSize) return;
-          if (x === void 0 || y === void 0) return;
-          var offsetX = x - _this.dragStartPosition.x;
-          var offsetY = y - _this.dragStartPosition.y;
-          var requestedPosition = {
-            x: _this.dragStartCrop.x + offsetX,
-            y: _this.dragStartCrop.y + offsetY
-          };
-          var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : requestedPosition;
-          _this.props.onCropChange(newPosition);
-        });
-      };
-      _this.onDragStopped = function() {
-        var _a, _b;
-        _this.isTouching = false;
-        _this.cleanEvents();
-        _this.emitCropData();
-        (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-      };
-      _this.onWheel = function(e) {
-        if (!_this.currentWindow) return;
-        if (_this.props.onWheelRequest && !_this.props.onWheelRequest(e)) {
-          return;
-        }
-        e.preventDefault();
-        var point = Cropper2.getMousePoint(e);
-        var pixelY = normalizeWheel$1(e).pixelY;
-        var newZoom = _this.props.zoom - pixelY * _this.props.zoomSpeed / 200;
-        _this.setNewZoom(newZoom, point, {
-          shouldUpdatePosition: true
-        });
-        if (!_this.state.hasWheelJustStarted) {
-          _this.setState({
-            hasWheelJustStarted: true
-          }, function() {
-            var _a, _b;
-            return (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
-          });
-        }
-        if (_this.wheelTimer) {
-          clearTimeout(_this.wheelTimer);
-        }
-        _this.wheelTimer = _this.currentWindow.setTimeout(function() {
-          return _this.setState({
-            hasWheelJustStarted: false
-          }, function() {
-            var _a, _b;
-            return (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-          });
-        }, 250);
-      };
-      _this.getPointOnContainer = function(_a, containerTopLeft) {
-        var x = _a.x, y = _a.y;
-        if (!_this.containerRect) {
-          throw new Error("The Cropper is not mounted");
-        }
-        return {
-          x: _this.containerRect.width / 2 - (x - containerTopLeft.x),
-          y: _this.containerRect.height / 2 - (y - containerTopLeft.y)
-        };
-      };
-      _this.getPointOnMedia = function(_a) {
-        var x = _a.x, y = _a.y;
-        var _b = _this.props, crop = _b.crop, zoom = _b.zoom;
-        return {
-          x: (x + crop.x) / zoom,
-          y: (y + crop.y) / zoom
-        };
-      };
-      _this.setNewZoom = function(zoom, point, _a) {
-        var _b = _a === void 0 ? {} : _a, _c = _b.shouldUpdatePosition, shouldUpdatePosition = _c === void 0 ? true : _c;
-        if (!_this.state.cropSize || !_this.props.onZoomChange) return;
-        var newZoom = clamp(zoom, _this.props.minZoom, _this.props.maxZoom);
-        if (shouldUpdatePosition) {
-          var zoomPoint = _this.getPointOnContainer(point, _this.containerPosition);
-          var zoomTarget = _this.getPointOnMedia(zoomPoint);
-          var requestedPosition = {
-            x: zoomTarget.x * newZoom - zoomPoint.x,
-            y: zoomTarget.y * newZoom - zoomPoint.y
-          };
-          var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, newZoom, _this.props.rotation) : requestedPosition;
-          _this.props.onCropChange(newPosition);
-        }
-        _this.props.onZoomChange(newZoom);
-      };
-      _this.getCropData = function() {
-        if (!_this.state.cropSize) {
-          return null;
-        }
-        var restrictedPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;
-        return computeCroppedArea(restrictedPosition, _this.mediaSize, _this.state.cropSize, _this.getAspect(), _this.props.zoom, _this.props.rotation, _this.props.restrictPosition);
-      };
-      _this.emitCropData = function() {
-        var cropData = _this.getCropData();
-        if (!cropData) return;
-        var croppedAreaPercentages = cropData.croppedAreaPercentages, croppedAreaPixels = cropData.croppedAreaPixels;
-        if (_this.props.onCropComplete) {
-          _this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
-        }
-        if (_this.props.onCropAreaChange) {
-          _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
-        }
-      };
-      _this.emitCropAreaChange = function() {
-        var cropData = _this.getCropData();
-        if (!cropData) return;
-        var croppedAreaPercentages = cropData.croppedAreaPercentages, croppedAreaPixels = cropData.croppedAreaPixels;
-        if (_this.props.onCropAreaChange) {
-          _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
-        }
-      };
-      _this.recomputeCropPosition = function() {
-        if (!_this.state.cropSize) return;
-        var adjustedCrop = _this.props.crop;
-        if (_this.isInitialized && _this.previousCropSize) {
-          var sizeChanged = Math.abs(_this.previousCropSize.width - _this.state.cropSize.width) > 1e-6 || Math.abs(_this.previousCropSize.height - _this.state.cropSize.height) > 1e-6;
-          if (sizeChanged) {
-            var scaleX = _this.state.cropSize.width / _this.previousCropSize.width;
-            var scaleY = _this.state.cropSize.height / _this.previousCropSize.height;
-            adjustedCrop = {
-              x: _this.props.crop.x * scaleX,
-              y: _this.props.crop.y * scaleY
-            };
-          }
-        }
-        var newPosition = _this.props.restrictPosition ? restrictPosition(adjustedCrop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : adjustedCrop;
-        _this.previousCropSize = _this.state.cropSize;
-        _this.props.onCropChange(newPosition);
-        _this.emitCropData();
-      };
-      _this.onKeyDown = function(event) {
-        var _a, _b;
-        var _c = _this.props, crop = _c.crop, onCropChange = _c.onCropChange, keyboardStep = _c.keyboardStep, zoom = _c.zoom, rotation = _c.rotation;
-        var step = keyboardStep;
-        if (!_this.state.cropSize) return;
-        if (event.shiftKey) {
-          step *= 0.2;
-        }
-        var newCrop = __assign({}, crop);
-        switch (event.key) {
-          case "ArrowUp":
-            newCrop.y -= step;
-            event.preventDefault();
-            break;
-          case "ArrowDown":
-            newCrop.y += step;
-            event.preventDefault();
-            break;
-          case "ArrowLeft":
-            newCrop.x -= step;
-            event.preventDefault();
-            break;
-          case "ArrowRight":
-            newCrop.x += step;
-            event.preventDefault();
-            break;
-          default:
-            return;
-        }
-        if (_this.props.restrictPosition) {
-          newCrop = restrictPosition(newCrop, _this.mediaSize, _this.state.cropSize, zoom, rotation);
-        }
-        if (!event.repeat) {
-          (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }
-        onCropChange(newCrop);
-      };
-      _this.onKeyUp = function(event) {
-        var _a, _b;
-        switch (event.key) {
-          case "ArrowUp":
-          case "ArrowDown":
-          case "ArrowLeft":
-          case "ArrowRight":
-            event.preventDefault();
-            break;
-          default:
-            return;
-        }
-        _this.emitCropData();
-        (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-      };
-      return _this;
-    }
-    Cropper2.prototype.componentDidMount = function() {
-      if (!this.currentDoc || !this.currentWindow) return;
-      if (this.containerRef) {
-        if (this.containerRef.ownerDocument) {
-          this.currentDoc = this.containerRef.ownerDocument;
-        }
-        if (this.currentDoc.defaultView) {
-          this.currentWindow = this.currentDoc.defaultView;
-        }
-        this.initResizeObserver();
-        if (typeof window.ResizeObserver === "undefined") {
-          this.currentWindow.addEventListener("resize", this.computeSizes);
-        }
-        this.props.zoomWithScroll && this.containerRef.addEventListener("wheel", this.onWheel, {
-          passive: false
-        });
-        this.containerRef.addEventListener("gesturestart", this.onGestureStart);
-      }
-      this.currentDoc.addEventListener("scroll", this.onScroll);
-      if (!this.props.disableAutomaticStylesInjection) {
-        this.styleRef = this.currentDoc.createElement("style");
-        this.styleRef.setAttribute("type", "text/css");
-        if (this.props.nonce) {
-          this.styleRef.setAttribute("nonce", this.props.nonce);
-        }
-        this.styleRef.innerHTML = css_248z;
-        this.currentDoc.head.appendChild(this.styleRef);
-      }
-      if (this.imageRef.current && this.imageRef.current.complete) {
-        this.onMediaLoad();
-      }
-      if (this.props.setImageRef) {
-        this.props.setImageRef(this.imageRef);
-      }
-      if (this.props.setVideoRef) {
-        this.props.setVideoRef(this.videoRef);
-      }
-      if (this.props.setCropperRef) {
-        this.props.setCropperRef(this.cropperRef);
-      }
-    };
-    Cropper2.prototype.componentWillUnmount = function() {
-      var _a, _b;
-      if (!this.currentDoc || !this.currentWindow) return;
-      if (typeof window.ResizeObserver === "undefined") {
-        this.currentWindow.removeEventListener("resize", this.computeSizes);
-      }
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-      if (this.containerRef) {
-        this.containerRef.removeEventListener("gesturestart", this.preventZoomSafari);
-      }
-      if (this.styleRef) {
-        (_b = this.styleRef.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.styleRef);
-      }
-      this.cleanEvents();
-      this.props.zoomWithScroll && this.clearScrollEvent();
-    };
-    Cropper2.prototype.componentDidUpdate = function(prevProps) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      if (prevProps.rotation !== this.props.rotation) {
-        this.computeSizes();
-        this.recomputeCropPosition();
-      } else if (prevProps.aspect !== this.props.aspect) {
-        this.computeSizes();
-      } else if (prevProps.objectFit !== this.props.objectFit) {
-        this.computeSizes();
-      } else if (prevProps.zoom !== this.props.zoom) {
-        this.recomputeCropPosition();
-      } else if (((_a = prevProps.cropSize) === null || _a === void 0 ? void 0 : _a.height) !== ((_b = this.props.cropSize) === null || _b === void 0 ? void 0 : _b.height) || ((_c = prevProps.cropSize) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = this.props.cropSize) === null || _d === void 0 ? void 0 : _d.width)) {
-        this.computeSizes();
-      } else if (((_e = prevProps.crop) === null || _e === void 0 ? void 0 : _e.x) !== ((_f = this.props.crop) === null || _f === void 0 ? void 0 : _f.x) || ((_g = prevProps.crop) === null || _g === void 0 ? void 0 : _g.y) !== ((_h = this.props.crop) === null || _h === void 0 ? void 0 : _h.y)) {
-        this.emitCropAreaChange();
-      }
-      if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {
-        this.props.zoomWithScroll ? this.containerRef.addEventListener("wheel", this.onWheel, {
-          passive: false
-        }) : this.clearScrollEvent();
-      }
-      if (prevProps.video !== this.props.video) {
-        (_j = this.videoRef.current) === null || _j === void 0 ? void 0 : _j.load();
-      }
-      var objectFit = this.getObjectFit();
-      if (objectFit !== this.state.mediaObjectFit) {
-        this.setState({
-          mediaObjectFit: objectFit
-        }, this.computeSizes);
-      }
-    };
-    Cropper2.prototype.getAspect = function() {
-      var _a = this.props, cropSize = _a.cropSize, aspect = _a.aspect;
-      if (cropSize) {
-        return cropSize.width / cropSize.height;
-      }
-      return aspect;
-    };
-    Cropper2.prototype.getObjectFit = function() {
-      var _a, _b, _c, _d;
-      if (this.props.objectFit === "cover") {
-        var mediaRef = this.imageRef.current || this.videoRef.current;
-        if (mediaRef && this.containerRef) {
-          this.containerRect = this.containerRef.getBoundingClientRect();
-          var containerAspect = this.containerRect.width / this.containerRect.height;
-          var naturalWidth = ((_a = this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
-          var naturalHeight = ((_c = this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
-          var mediaAspect = naturalWidth / naturalHeight;
-          return mediaAspect < containerAspect ? "horizontal-cover" : "vertical-cover";
-        }
-        return "horizontal-cover";
-      }
-      return this.props.objectFit;
-    };
-    Cropper2.prototype.onPinchStart = function(e) {
-      var pointA = Cropper2.getTouchPoint(e.touches[0]);
-      var pointB = Cropper2.getTouchPoint(e.touches[1]);
-      this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
-      this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
-      this.onDragStart(getCenter(pointA, pointB));
-    };
-    Cropper2.prototype.onPinchMove = function(e) {
-      var _this = this;
-      if (!this.currentDoc || !this.currentWindow) return;
-      var pointA = Cropper2.getTouchPoint(e.touches[0]);
-      var pointB = Cropper2.getTouchPoint(e.touches[1]);
-      var center = getCenter(pointA, pointB);
-      this.onDrag(center);
-      if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
-      this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(function() {
-        var distance = getDistanceBetweenPoints(pointA, pointB);
-        var newZoom = _this.props.zoom * (distance / _this.lastPinchDistance);
-        _this.setNewZoom(newZoom, center, {
-          shouldUpdatePosition: false
-        });
-        _this.lastPinchDistance = distance;
-        var rotation = getRotationBetweenPoints(pointA, pointB);
-        var newRotation = _this.props.rotation + (rotation - _this.lastPinchRotation);
-        _this.props.onRotationChange && _this.props.onRotationChange(newRotation);
-        _this.lastPinchRotation = rotation;
-      });
-    };
-    Cropper2.prototype.render = function() {
-      var _this = this;
-      var _a;
-      var _b = this.props, image = _b.image, video = _b.video, mediaProps = _b.mediaProps, cropperProps = _b.cropperProps, transform = _b.transform, _c = _b.crop, x = _c.x, y = _c.y, rotation = _b.rotation, zoom = _b.zoom, cropShape = _b.cropShape, showGrid = _b.showGrid, roundCropAreaPixels = _b.roundCropAreaPixels, _d = _b.style, containerStyle = _d.containerStyle, cropAreaStyle = _d.cropAreaStyle, mediaStyle = _d.mediaStyle, _e = _b.classes, containerClassName = _e.containerClassName, cropAreaClassName = _e.cropAreaClassName, mediaClassName = _e.mediaClassName;
-      var objectFit = (_a = this.state.mediaObjectFit) !== null && _a !== void 0 ? _a : this.getObjectFit();
-      return React.createElement("div", {
-        onMouseDown: this.onMouseDown,
-        onTouchStart: this.onTouchStart,
-        ref: function ref(el) {
-          return _this.containerRef = el;
-        },
-        "data-testid": "container",
-        style: containerStyle,
-        className: classNames("reactEasyCrop_Container", containerClassName)
-      }, image ? React.createElement("img", __assign({
-        alt: "",
-        className: classNames("reactEasyCrop_Image", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
-      }, mediaProps, {
-        src: image,
-        ref: this.imageRef,
-        style: __assign(__assign({}, mediaStyle), {
-          transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
-        }),
-        onLoad: this.onMediaLoad
-      })) : video && React.createElement("video", __assign({
-        autoPlay: true,
-        playsInline: true,
-        loop: true,
-        muted: true,
-        className: classNames("reactEasyCrop_Video", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
-      }, mediaProps, {
-        ref: this.videoRef,
-        onLoadedMetadata: this.onMediaLoad,
-        style: __assign(__assign({}, mediaStyle), {
-          transform: transform || "translate(".concat(x, "px, ").concat(y, "px) rotate(").concat(rotation, "deg) scale(").concat(zoom, ")")
-        }),
-        controls: false
-      }), (Array.isArray(video) ? video : [{
-        src: video
-      }]).map(function(item) {
-        return React.createElement("source", __assign({
-          key: item.src
-        }, item));
-      })), this.state.cropSize && React.createElement("div", __assign({
-        ref: this.cropperRef,
-        style: __assign(__assign({}, cropAreaStyle), {
-          width: roundCropAreaPixels ? Math.round(this.state.cropSize.width) : this.state.cropSize.width,
-          height: roundCropAreaPixels ? Math.round(this.state.cropSize.height) : this.state.cropSize.height
-        }),
-        tabIndex: 0,
-        onKeyDown: this.onKeyDown,
-        onKeyUp: this.onKeyUp,
-        "data-testid": "cropper",
-        className: classNames("reactEasyCrop_CropArea", cropShape === "round" && "reactEasyCrop_CropAreaRound", showGrid && "reactEasyCrop_CropAreaGrid", cropAreaClassName)
-      }, cropperProps)));
-    };
-    Cropper2.defaultProps = {
-      zoom: 1,
-      rotation: 0,
-      aspect: 4 / 3,
-      maxZoom: MAX_ZOOM,
-      minZoom: MIN_ZOOM,
-      cropShape: "rect",
-      objectFit: "contain",
-      showGrid: true,
-      style: {},
-      classes: {},
-      mediaProps: {},
-      cropperProps: {},
-      zoomSpeed: 1,
-      restrictPosition: true,
-      zoomWithScroll: true,
-      keyboardStep: KEYBOARD_STEP
-    };
-    Cropper2.getMousePoint = function(e) {
-      return {
-        x: Number(e.clientX),
-        y: Number(e.clientY)
-      };
-    };
-    Cropper2.getTouchPoint = function(touch) {
-      return {
-        x: Number(touch.clientX),
-        y: Number(touch.clientY)
-      };
-    };
-    return Cropper2;
-  }(React.Component)
-);
-const useImageCrop = (props) => {
-  const size = useMemo(() => KEY_SIZE_DATA[props.dialog.button.size], [props.dialog.button.size]);
-  const br = useMemo(() => `${size.radius}px`, [size.radius]);
-  const [images, setImages] = useState([]);
-  const propsMemo = useDeepCompareMemoize(props);
-  const propsDialog = useMemo(
-    () => ({
-      propsCustom: {
-        images,
-        br,
-        imageSettings: propsMemo.imageSettings,
-        onSave: propsMemo.onSave,
-        dialog: propsMemo.dialog,
-        locale: propsMemo.locale
-      },
-      propsDialog: {
-        borderRadius: br,
-        padding: "0",
-        background: "transparent"
-      },
-      onRemove() {
-        setImages([]);
-      },
-      content: (remove, isAnimating, params) => /* @__PURE__ */ jsxRuntimeExports.jsx(CropperWrapper, { params, remove, isAnimating })
-    }),
-    [br, images, propsMemo.dialog, propsMemo.imageSettings, propsMemo.locale, propsMemo.onSave]
-  );
-  const { add } = useDialog(propsDialog);
-  const handleAdd = useCallback(
-    (images2) => {
-      setImages(images2);
-      add();
-    },
-    [add]
-  );
-  const handleAddFiles = useCallback(
-    (files) => {
-      const validFiles = Array.from(files).filter((file) => {
-        if (file.size > props.imageSettings.maxSize) {
-          console.warn(`File ${file.name} exceeds the allowed size of ${props.imageSettings.maxSize} bytes`);
-          return false;
-        }
-        return true;
-      });
-      const newImages = validFiles.map((file, idx) => ({
-        id: Date.now() + idx,
-        file,
-        url: URL.createObjectURL(file),
-        index: idx,
-        isNew: true,
-        name: file.name,
-        format: file.type
-      }));
-      if (props.refInput && "current" in props.refInput && props.refInput.current) {
-        props.refInput.current.value = "";
-      }
-      if (newImages.length) handleAdd(newImages);
-    },
-    [handleAdd, props.imageSettings.maxSize, props.refInput]
-  );
-  return { handleAdd, handleAddFiles };
-};
-function getCroppedImg(imageSrc, crop, format = "image/png") {
-  const mimeType = LIST_IMAGE_SUPPORTED_FORMAT.includes(format) ? format : "image/png";
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.src = imageSrc;
-    image.crossOrigin = "anonymous";
-    image.onload = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      canvas.width = crop.width;
-      canvas.height = crop.height;
-      ctx.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
-      canvas.toBlob((blob) => {
-        if (blob) resolve(blob);
-        else reject(new Error("Canvas is empty"));
-      }, mimeType);
-    };
-    image.onerror = () => reject(new Error("Failed to load image"));
-  });
-}
-const CropperWrapper = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
-  const [index, setIndex] = useState(0);
-  const [newImages, setNewImages] = useState([]);
-  const [newImagesCroppedArea, setNewImagesCroppedArea] = useState([]);
-  const theme = useTheme();
-  const isMulti = useMemo(() => {
-    var _a2, _b2;
-    return ((_b2 = ((_a2 = props == null ? void 0 : props.params) == null ? void 0 : _a2.images) ?? []) == null ? void 0 : _b2.length) > 1;
-  }, [(_a = props.params) == null ? void 0 : _a.images]);
-  const newImageIndex = useMemo(() => newImages == null ? void 0 : newImages[index], [newImages, index]);
-  const onSave = useCallback(
-    async (images) => {
-      var _a2, _b2, _c2;
-      const saveImages = await Promise.all(
-        images.map(async (image) => {
-          const imageCroppedArea = newImagesCroppedArea[image.index] ?? null;
-          if (image.isDeleted || !image.isCropped || !image.url || !image.name || !imageCroppedArea) return null;
-          const blob = await getCroppedImg(image.url, imageCroppedArea, image.format);
-          const croppedFile = new File([blob], image.name, { type: image.format });
-          const newImage = {
-            ...image,
-            file: croppedFile,
-            url: URL.createObjectURL(croppedFile)
-          };
-          return newImage;
-        })
-      );
-      (_b2 = (_a2 = props.params) == null ? void 0 : _a2.onSave) == null ? void 0 : _b2.call(_a2, saveImages.filter(Boolean));
-      (_c2 = props.remove) == null ? void 0 : _c2.call(props);
-    },
-    [newImagesCroppedArea, props]
-  );
-  const onChange = useCallback(
-    async (params) => {
-      var _a2, _b2, _c2;
-      const image = (_b2 = (_a2 = props == null ? void 0 : props.params) == null ? void 0 : _a2.images) == null ? void 0 : _b2[params.index];
-      if (image) {
-        const newImage = {
-          ...image,
-          id: Date.now() + params.index,
-          index: params.index,
-          croppedArea: params.croppedArea ?? image.croppedArea,
-          zoom: params.zoom ?? image.zoom,
-          crop: params.crop ?? image.crop,
-          isNew: true,
-          isCropped: params.isCropped ?? image.isCropped,
-          isDeleted: params.isDeleted ?? image.isDeleted
-        };
-        setNewImages((prev) => {
-          const arr = [...prev];
-          arr[params.index] = newImage;
-          return arr;
-        });
-        if (params.isNext) {
-          const newIndex = params.index + 1 >= (((_c2 = props == null ? void 0 : props.params) == null ? void 0 : _c2.images) ?? []).length ? 0 : params.index + 1;
-          setIndex(newIndex);
-        }
-        if (params.isSave) {
-          onSave([newImage]);
-        }
-      }
-    },
-    [onSave, (_b = props == null ? void 0 : props.params) == null ? void 0 : _b.images]
-  );
-  useEffect(() => {
-    var _a2, _b2;
-    setNewImages(((_a2 = props == null ? void 0 : props.params) == null ? void 0 : _a2.images) ?? []);
-    setNewImagesCroppedArea((((_b2 = props == null ? void 0 : props.params) == null ? void 0 : _b2.images) ?? []).map((image) => image.croppedArea ?? null));
-  }, [(_c = props == null ? void 0 : props.params) == null ? void 0 : _c.images]);
-  useEffect(() => {
-    return () => {
-      setIndex(0);
-      setNewImages([]);
-      setNewImagesCroppedArea([]);
-    };
-  }, []);
-  const lengthData = useMemo(() => {
-    return newImages.reduce((acc, image) => {
-      if (acc && (image == null ? void 0 : image.index) !== void 0)
-        acc[image.index] = {
-          genre: image.isDeleted ? "redTransparent" : image.isCropped ? "greenTransparent" : "white",
-          icons: image.isDeleted ? [{ type: "id", name: "CloseMini" }] : image.isCropped ? [{ type: "id", name: "TickMini" }] : []
-        };
-      return acc;
-    }, {});
-  }, [newImages]);
-  const isDisabledSave = useMemo(() => {
-    return newImages.every((image) => (image == null ? void 0 : image.isDeleted) || !(image == null ? void 0 : image.isCropped));
-  }, [newImages]);
-  const genre = useMemo(() => {
-    var _a2;
-    return ((_a2 = props.params) == null ? void 0 : _a2.dialog.button.genre) || "product";
-  }, [(_d = props.params) == null ? void 0 : _d.dialog.button.genre]);
-  const size = useMemo(() => {
-    var _a2;
-    return ((_a2 = props.params) == null ? void 0 : _a2.dialog.button.size) || "medium";
-  }, [(_e = props.params) == null ? void 0 : _e.dialog.button.size]);
-  const genreDelete = useMemo(
-    () => {
-      var _a2;
-      return ((_a2 = props.params) == null ? void 0 : _a2.dialog.buttonDelete.genre) || "product";
-    },
-    [(_f = props.params) == null ? void 0 : _f.dialog.buttonDelete.genre]
-  );
-  const sizeDelete = useMemo(() => {
-    var _a2;
-    return ((_a2 = props.params) == null ? void 0 : _a2.dialog.button.size) || "medium";
-  }, [(_g = props.params) == null ? void 0 : _g.dialog.button.size]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Stack,
-    {
-      sx: (theme2) => {
-        var _a2, _b2, _c2;
-        return {
-          default: {
-            position: "relative",
-            overflow: "hidden",
-            aspectRatio: ((_a2 = props.params) == null ? void 0 : _a2.imageSettings.aspect) ? `${((_b2 = props.params) == null ? void 0 : _b2.imageSettings.aspect) * 2} / 2` : void 0,
-            width: "auto",
-            maxWidth: "70dvw",
-            height: "85dvh",
-            borderRadius: (_c2 = props.params) == null ? void 0 : _c2.br,
-            backgroundColor: theme2.palette.whiteStandard
-          },
-          tablet: {
-            maxWidth: "95dvw"
-          }
-        };
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Preview, { visible: !props.isAnimating, minTime: 500, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Stack,
-            {
-              sx: {
-                default: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0
-                }
-              },
-              children: newImageIndex && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Cropper,
-                {
-                  style: {
-                    containerStyle: {
-                      backgroundColor: theme.palette.black80
-                    }
-                  },
-                  image: newImageIndex.url,
-                  crop: (newImageIndex == null ? void 0 : newImageIndex.crop) ?? { x: 0, y: 0 },
-                  zoom: (newImageIndex == null ? void 0 : newImageIndex.zoom) ?? 1,
-                  aspect: (_h = props.params) == null ? void 0 : _h.imageSettings.aspect,
-                  onCropChange: (crop) => {
-                    onChange({
-                      ...newImageIndex,
-                      crop
-                    });
-                  },
-                  onZoomChange: (zoom) => {
-                    onChange({
-                      ...newImageIndex,
-                      zoom
-                    });
-                  },
-                  onCropComplete: (_, croppedArea) => {
-                    setNewImagesCroppedArea((prev) => {
-                      const arr = [...prev];
-                      arr[index] = croppedArea;
-                      return arr;
-                    });
-                  }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            Stack,
-            {
-              sx: {
-                default: {
-                  position: "absolute",
-                  top: 15,
-                  right: 15,
-                  gap: "10px"
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { genre: genreDelete, size: sizeDelete, isHiddenBorder: true, isRadius: true, onClick: () => {
-                  var _a2;
-                  return (_a2 = props.remove) == null ? void 0 : _a2.call(props);
-                }, children: (_i = props.params) == null ? void 0 : _i.locale.dialogCancel }),
-                isMulti && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button,
-                  {
-                    genre,
-                    size,
-                    isHiddenBorder: true,
-                    isRadius: true,
-                    onClick: () => onSave(newImages),
-                    isHidden: isDisabledSave,
-                    isDisabled: isDisabledSave,
-                    children: (_j = props.params) == null ? void 0 : _j.locale.dialogSave
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        isMulti && index !== ((_k = props == null ? void 0 : props.params) == null ? void 0 : _k.images.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            sx: {
-              default: {
-                position: "absolute",
-                top: 15,
-                left: 15
-              }
-            },
-            genre,
-            size,
-            isHiddenBorder: true,
-            isWidthAsHeight: true,
-            isRadius: true,
-            isDisabled: true,
-            children: index + 1
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Stack,
-          {
-            sx: (theme2) => ({
-              default: {
-                position: "absolute",
-                bottom: isMulti ? 5 : 15,
-                left: isMulti ? 5 : void 0,
-                right: isMulti ? void 0 : 15,
-                width: isMulti ? "calc(100% - 10px)" : "fit-content",
-                backgroundColor: isMulti ? theme2.palette.whiteStandard : theme2.palette.transparent,
-                padding: "10px",
-                borderRadius: "50px",
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                gap: "10px"
-              },
-              mobile: {
-                borderRadius: "24px",
-                flexDirection: "column",
-                alignItems: "stretch",
-                gap: "10px"
-              }
-            }),
-            children: [
-              isMulti && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Pagination,
-                {
-                  sx: {
-                    default: {},
-                    mobile: {
-                      justifyContent: "space-between"
-                    }
-                  },
-                  lengthData,
-                  length: (((_l = props == null ? void 0 : props.params) == null ? void 0 : _l.images) ?? []).length,
-                  index,
-                  changeIndex: (newIndex) => {
-                    setIndex(newIndex);
-                  },
-                  isInfinity: true,
-                  viewQuantity: 4,
-                  buttonControl: {
-                    genre,
-                    size,
-                    isRadius: true,
-                    isWidthAsHeight: true
-                  },
-                  buttonCount: {
-                    active: {
-                      genre,
-                      size,
-                      isRadius: true,
-                      isPlaystationEffect: true
-                    },
-                    inactive: {
-                      genre: "white",
-                      size,
-                      isRadius: true
-                    }
-                  },
-                  locale: {
-                    next: "Next",
-                    prev: "Prev"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Stack,
-                {
-                  sx: {
-                    default: {
-                      gap: "10px"
-                    },
-                    mobile: {
-                      justifyContent: "center"
-                    }
-                  },
-                  children: [
-                    isMulti && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Button,
-                      {
-                        genre: genreDelete,
-                        size: sizeDelete,
-                        isHiddenBorder: true,
-                        isRadius: true,
-                        onClick: () => {
-                          onChange({
-                            ...newImageIndex,
-                            isDeleted: true,
-                            isNext: isMulti
-                          });
-                        },
-                        children: (_m = props.params) == null ? void 0 : _m.locale.dialogDeleteImage
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Button,
-                      {
-                        genre,
-                        size,
-                        isHiddenBorder: true,
-                        isRadius: true,
-                        onClick: () => {
-                          onChange({
-                            ...newImageIndex,
-                            isDeleted: false,
-                            isCropped: true,
-                            isNext: isMulti,
-                            isSave: !isMulti
-                          });
-                        },
-                        children: isMulti ? (_n = props.params) == null ? void 0 : _n.locale.dialogAddImage : (_o = props.params) == null ? void 0 : _o.locale.dialogSave
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  useImageCrop as u
-};
-//# sourceMappingURL=use-DdGWsOBo.js.map