@bigbinary/neeto-image-uploader-frontend 2.3.10 → 2.3.14

package/dist/{index-vkjNhoF3.js → index-2Z-tiNdY.js}

@@ -1,28 +1,28 @@
-import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import require$$0, { useState, useEffect, useRef, useCallback, createElement } from 'react';
-import { findBy, isPresent, noop } from '@bigbinary/neeto-cist';
+import g, { PureComponent, createRef, useState, useRef, useCallback, createElement, useEffect } from 'react';
+import { isPresent, noop } from '@bigbinary/neeto-cist';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import NeetoUIModal from '@bigbinary/neetoui/Modal';
-import Button from '@bigbinary/neetoui/Button';
 import Tab from '@bigbinary/neetoui/Tab';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import Toastr from '@bigbinary/neetoui/Toastr';
 import Typography from '@bigbinary/neetoui/Typography';
-import { mergeLeft, mergeRight, identity, prop, equals } from 'ramda';
+import { mergeRight, identity, prop, equals } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
-import { c as OPTIONS, a as isNilOrEmpty, d as DEFAULT_CROP_CONFIG, e as isItemsCenter, o as onImageLoaded, g as getCloudFlareCroppedURL, f as getImageKitCroppedURL, h as getCropValues, j as IMAGES_PER_PAGE, k as INFINITE_SCROLLER_SIZES, l as INFINITE_SCROLLER_STYLE, T as TABS, A as ASSETS_DESTROY_URL, m as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, n as UNSPLASH_DEFAULT_REQUEST_CONFIG, D as DEFAULT_UPLOAD_CONFIG, u as useUploadDropzone, p as UNSPLASH_URL } from './utils-B5WMTXlT.js';
-import { a as useCreateBlob, u as useImageUploader, g as generateASCIIFileName } from './useImageUploader-RX88_Cp-.js';
+import { b as isNilOrEmpty, c as DEFAULT_CROP_CONFIG, g as getAspectRatio, d as getPixels, e as getHeightFromAspectRatio, f as getWidthFromAspectRatio, h as getInitialCropSize, j as getPercentage, k as isItemsCenter, l as getCloudFlareCroppedURL, m as getImageKitCroppedURL, n as getCropValues, o as IMAGES_PER_PAGE, p as INFINITE_SCROLLER_SIZES, q as INFINITE_SCROLLER_STYLE, T as TABS, A as ASSETS_DESTROY_URL, r as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, s as UNSPLASH_DEFAULT_REQUEST_CONFIG, D as DEFAULT_UPLOAD_CONFIG, u as useUploadDropzone, t as UNSPLASH_URL, a as ImageDirectUpload } from './utils-CFUW0P-E.js';
+import { u as useImageUploader, a as useCreateBlob, g as generateASCIIFileName } from './useImageUploader-RX88_Cp-.js';
 import { I as IS_DEVELOPMENT_OR_HEROKU_ENV, C as CLOUD_FLARE } from './index-CZjb2iXB.js';
 import classnames from 'classnames';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
+import Button from '@bigbinary/neetoui/Button';
 import { useMutation, useInfiniteQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query';
 import axios from 'axios';
-import { useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withT, useFuncDebounce, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { withEventTargetValue, hasPermission } from '@bigbinary/neeto-commons-frontend/utils';
 import Input from '@bigbinary/neetoui/Input';
 import Switch from '@bigbinary/neetoui/Switch';
+import Label from '@bigbinary/neetoui/Label';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Q as QUERY_KEYS, A as ASSETS_STALE_TIME, U as UNSPLASH_STALE_TIME } from './query-B0eDmse7.js';
 import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
@@ -42,54 +42,415 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css$2 = ".niu-modal {\n  width: 95vw !important;\n  height: 75vh !important;\n  max-width: 1152px !important;\n  max-height: 576px !important;\n  position: relative !important;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21vZGFsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxzQkFBQTtFQUNBLHVCQUFBO0VBQ0EsNEJBQUE7RUFDQSw0QkFBQTtFQUNBLDZCQUFBO0FBRkYiLCJzb3VyY2VzQ29udGVudCI6WyIvL0Fic3RyYWN0c1xuQGltcG9ydCBcIi4uL2Fic3RyYWN0cy92YXJpYWJsZXNcIjtcblxuLm5pdS1tb2RhbCB7XG4gIHdpZHRoOiAkbml1LW1vZGFsLXdpZHRoICFpbXBvcnRhbnQ7XG4gIGhlaWdodDogJG5pdS1tb2RhbC1oZWlnaHQgIWltcG9ydGFudDtcbiAgbWF4LXdpZHRoOiAkbml1LW1vZGFsLW1heC13aWR0aCAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LW1vZGFsLW1heC1oZWlnaHQgIWltcG9ydGFudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlICFpbXBvcnRhbnQ7XG59XG4iXX0= */";
 n(css$2,{});
 
-var createOptions = function createOptions() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return OPTIONS.map(function (option) {
-    return mergeLeft(findBy({
-      key: option.key
-    }, options), option);
-  });
-};
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+const M = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  unit: "px"
+}, f = (s, t, e) => Math.min(Math.max(s, t), e), S = (...s) => s.filter((t) => t && typeof t == "string").join(" "), P = (s, t) => s === t || s.width === t.width && s.height === t.height && s.x === t.x && s.y === t.y && s.unit === t.unit;
+function H(s, t, e, o) {
+  const i = y(s, e, o);
+  return s.width && (i.height = i.width / t), s.height && (i.width = i.height * t), i.y + i.height > o && (i.height = o - i.y, i.width = i.height * t), i.x + i.width > e && (i.width = e - i.x, i.height = i.width / t), s.unit === "%" ? D(i, e, o) : i;
 }
-
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			if (this instanceof a) {
-        return Reflect.construct(f, arguments, this.constructor);
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
+function N(s, t, e) {
+  const o = y(s, t, e);
+  return o.x = (t - o.width) / 2, o.y = (e - o.height) / 2, s.unit === "%" ? D(o, t, e) : o;
 }
-
-var ReactCrop_min = {exports: {}};
-
-(function (module, exports) {
-	!function(e,t){module.exports=t(require$$0);}(commonjsGlobal,(e=>(()=>{var t={899:t=>{t.exports=e;}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]});},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});};var r={};return (()=>{o.r(r),o.d(r,{Component:()=>u,areCropsEqual:()=>h,centerCrop:()=>d,clamp:()=>a,containCrop:()=>p,convertToPercentCrop:()=>c,convertToPixelCrop:()=>l,default:()=>u,defaultCrop:()=>i,makeAspectCrop:()=>s,nudgeCrop:()=>g});var e=o(899),t=o.n(e);function n(e){var t,o,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(o=n(e[t]))&&(r&&(r+=" "),r+=o);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}const i={x:0,y:0,width:0,height:0,unit:"px"};function a(e,t,n){return Math.min(Math.max(e,t),n)}function h(e,t){return e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y&&e.unit===t.unit}function s(e,t,n,o){const r=l(e,n,o);return e.width&&(r.height=r.width/t),e.height&&(r.width=r.height*t),r.y+r.height>o&&(r.height=o-r.y,r.width=r.height*t),r.x+r.width>n&&(r.width=n-r.x,r.height=r.width/t),"%"===e.unit?c(r,n,o):r}function d(e,t,n){const o=l(e,t,n);return o.x=(t-o.width)/2,o.y=(n-o.height)/2,"%"===e.unit?c(o,t,n):o}function c(e,t,n){return "%"===e.unit?{...i,...e,unit:"%"}:{unit:"%",x:e.x?e.x/t*100:0,y:e.y?e.y/n*100:0,width:e.width?e.width/t*100:0,height:e.height?e.height/n*100:0}}function l(e,t,n){return e.unit?"px"===e.unit?{...i,...e,unit:"px"}:{unit:"px",x:e.x?e.x*t/100:0,y:e.y?e.y*n/100:0,width:e.width?e.width*t/100:0,height:e.height?e.height*n/100:0}:{...i,...e,unit:"px"}}function p(e,t,n,o,r,i=0,a=0,h=o,s=r){const d={...e};let c=Math.min(i,o),l=Math.min(a,r),p=Math.min(h,o),g=Math.min(s,r);t&&(t>1?(c=a?a*t:c,l=c/t,p=h*t):(l=i?i/t:l,c=l*t,g=s/t)),d.y<0&&(d.height=Math.max(d.height+d.y,l),d.y=0),d.x<0&&(d.width=Math.max(d.width+d.x,c),d.x=0);const w=o-(d.x+d.width);w<0&&(d.x=Math.min(d.x,o-c),d.width+=w);const u=r-(d.y+d.height);if(u<0&&(d.y=Math.min(d.y,r-l),d.height+=u),d.width<c&&("sw"!==n&&"nw"!=n||(d.x-=c-d.width),d.width=c),d.height<l&&("nw"!==n&&"ne"!=n||(d.y-=l-d.height),d.height=l),d.width>p&&("sw"!==n&&"nw"!=n||(d.x-=p-d.width),d.width=p),d.height>g&&("nw"!==n&&"ne"!=n||(d.y-=g-d.height),d.height=g),t){const e=d.width/d.height;if(e<t){const e=Math.max(d.width/t,l);"nw"!==n&&"ne"!=n||(d.y-=e-d.height),d.height=e;}else if(e>t){const e=Math.max(d.height*t,c);"sw"!==n&&"nw"!=n||(d.x-=e-d.width),d.width=e;}}return d}function g(e,t,n,o){const r={...e};return "ArrowLeft"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"w"===o?(r.x-=n,r.width+=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"e"===o?r.width-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowRight"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"w"===o?(r.x+=n,r.width-=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"e"===o?r.width+=n:"se"===o&&(r.width+=n,r.height+=n)),"ArrowUp"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"n"===o?(r.y-=n,r.height+=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"s"===o?r.height-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowDown"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"n"===o?(r.y+=n,r.height-=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"s"===o?r.height+=n:"se"===o&&(r.width+=n,r.height+=n)),r}const w={capture:!0,passive:!1};class u extends e.PureComponent{constructor(){super(...arguments),this.docMoveBound=!1,this.mouseDownOnCrop=!1,this.dragStarted=!1,this.evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0},this.componentRef=(0, e.createRef)(),this.mediaRef=(0, e.createRef)(),this.initChangeCalled=!1,this.state={cropIsActive:!1,newCropIsBeingDrawn:!1},this.onCropPointerDown=e=>{const{crop:t,disabled:n}=this.props,o=this.getBox();if(!t)return;const r=l(t,o.width,o.height);if(n)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const i=e.target.dataset.ord,a=Boolean(i);let h=e.clientX,s=e.clientY,d=r.x,c=r.y;if(i){const t=e.clientX-o.x,n=e.clientY-o.y;let a=0,l=0;"ne"===i||"e"==i?(a=t-(r.x+r.width),l=n-r.y,d=r.x,c=r.y+r.height):"se"===i||"s"===i?(a=t-(r.x+r.width),l=n-(r.y+r.height),d=r.x,c=r.y):"sw"===i||"w"==i?(a=t-r.x,l=n-(r.y+r.height),d=r.x+r.width,c=r.y):"nw"!==i&&"n"!=i||(a=t-r.x,l=n-r.y,d=r.x+r.width,c=r.y+r.height),h=d+o.x+a,s=c+o.y+l;}this.evData={startClientX:h,startClientY:s,startCropX:d,startCropY:c,clientX:e.clientX,clientY:e.clientY,isResize:a,ord:i},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0});},this.onComponentPointerDown=e=>{const{crop:t,disabled:n,locked:o,keepSelection:r,onChange:i}=this.props,a=this.getBox();if(n||o||r&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const h=e.clientX-a.x,s=e.clientY-a.y,d={unit:"px",x:h,y:s,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:h,startCropY:s,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,i(l(d,a.width,a.height),c(d,a.width,a.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0});},this.onDocPointerMove=e=>{const{crop:t,disabled:n,onChange:o,onDragStart:r}=this.props,i=this.getBox();if(n||!t||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,r&&r(e));const{evData:a}=this;let s;a.clientX=e.clientX,a.clientY=e.clientY,s=a.isResize?this.resizeCrop():this.dragCrop(),h(t,s)||o(l(s,i.width,i.height),c(s,i.width,i.height));},this.onComponentKeyDown=e=>{const{crop:t,disabled:n,onChange:o,onComplete:r}=this.props,i=this.getBox();if(n)return;const h=e.key;let s=!1;if(!t)return;const d=this.makePixelCrop(),p=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep;if("ArrowLeft"===h?(d.x-=p,s=!0):"ArrowRight"===h?(d.x+=p,s=!0):"ArrowUp"===h?(d.y-=p,s=!0):"ArrowDown"===h&&(d.y+=p,s=!0),s){e.cancelable&&e.preventDefault(),d.x=a(d.x,0,i.width-d.width),d.y=a(d.y,0,i.height-d.height);const t=l(d,i.width,i.height),n=c(d,i.width,i.height);o(t,n),r&&r(t,n);}},this.onHandlerKeyDown=(e,t)=>{const{aspect:n=0,crop:o,disabled:r,minWidth:i=0,minHeight:a=0,maxWidth:s,maxHeight:d,onChange:w,onComplete:m}=this.props,y=this.getBox();if(r||!o)return;if("ArrowUp"!==e.key&&"ArrowDown"!==e.key&&"ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.stopPropagation(),e.preventDefault();const x=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep,C=p(g(l(o,y.width,y.height),e.key,x,t),n,t,y.width,y.height,i,a,s,d);if(!h(o,C)){const e=c(C,y.width,y.height);w(C,e),m&&m(C,e);}},this.onDocPointerDone=e=>{const{crop:t,disabled:n,onComplete:o,onDragEnd:r}=this.props,i=this.getBox();this.unbindDocMove(),!n&&t&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,r&&r(e),o&&o(l(t,i.width,i.height),c(t,i.width,i.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}));},this.onDragFocus=e=>{var t;null===(t=this.componentRef.current)||void 0===t||t.scrollTo(0,0);};}get document(){return document}getBox(){const e=this.mediaRef.current;if(!e)return {x:0,y:0,width:0,height:0};const{x:t,y:n,width:o,height:r}=e.getBoundingClientRect();return {x:t,y:n,width:o,height:r}}componentDidUpdate(e){const{crop:t,onComplete:n}=this.props;if(n&&!e.crop&&t){const{width:e,height:o}=this.getBox();e&&o&&n(l(t,e,o),c(t,e,o));}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect();}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,w),this.document.addEventListener("pointerup",this.onDocPointerDone,w),this.document.addEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!0);}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,w),this.document.removeEventListener("pointerup",this.onDocPointerDone,w),this.document.removeEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!1);}getCropStyle(){const{crop:e}=this.props;if(e)return {top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){const{evData:e}=this,t=this.getBox(),n=this.makePixelCrop(),o=e.clientX-e.startClientX,r=e.clientY-e.startClientY;return n.x=a(e.startCropX+o,0,t.width-n.width),n.y=a(e.startCropY+r,0,t.height-n.height),n}getPointRegion(e){const{evData:t}=this,n=t.clientX-e.x,o=t.clientY-e.y<t.startCropY;return n<t.startCropX?o?"nw":"sw":o?"ne":"se"}resizeCrop(){const{evData:e}=this,t=this.getBox(),{aspect:n=0,minWidth:o=0,minHeight:r=0,maxWidth:i,maxHeight:a}=this.props,h=this.getPointRegion(t),s=this.makePixelCrop(),d=e.ord?e.ord:h,c=e.clientX-e.startClientX,l=e.clientY-e.startClientY,g={unit:"px",x:0,y:0,width:0,height:0};"ne"===h?(g.x=e.startCropX,g.width=c,n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY-g.height)):"se"===h?(g.x=e.startCropX,g.y=e.startCropY,g.width=c,g.height=n?g.width/n:l):"sw"===h?(g.x=e.startCropX+c,g.y=e.startCropY,g.width=Math.abs(c),g.height=n?g.width/n:l):"nw"===h&&(g.x=e.startCropX+c,g.width=Math.abs(c),n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY+l));const w=p(g,n,h,t.width,t.height,o,r,i,a);return n||u.xyOrds.indexOf(d)>-1?(s.x=w.x,s.y=w.y,s.width=w.width,s.height=w.height):u.xOrds.indexOf(d)>-1?(s.x=w.x,s.width=w.width):u.yOrds.indexOf(d)>-1&&(s.y=w.y,s.height=w.height),s}createCropSelection(){const{ariaLabels:e=u.defaultProps.ariaLabels,disabled:n,locked:o,renderSelectionAddon:r,ruleOfThirds:i,crop:a}=this.props,h=this.getCropStyle();if(a)return t().createElement("div",{style:h,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":e.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!n&&!o&&t().createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},t().createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":e.nwDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"nw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":e.nDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"n"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":e.neDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"ne"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":e.eDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"e"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":e.seDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"se"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":e.sDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"s"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":e.swDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"sw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":e.wDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"w"),role:"button"})),r&&t().createElement("div",{className:"ReactCrop__selection-addon",onMouseDown:e=>e.stopPropagation()},r(this.state)),i&&t().createElement(t().Fragment,null,t().createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),t().createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(){const e={...i,...this.props.crop||{}},t=this.getBox();return l(e,t.width,t.height)}render(){const{aspect:e,children:o,circularCrop:r,className:i,crop:a,disabled:h,locked:s,style:d,ruleOfThirds:c}=this.props,{cropIsActive:l,newCropIsBeingDrawn:p}=this.state,g=a?this.createCropSelection():null,w=function(){for(var e,t,o=0,r="";o<arguments.length;)(e=arguments[o++])&&(t=n(e))&&(r&&(r+=" "),r+=t);return r}("ReactCrop",i,{"ReactCrop--active":l,"ReactCrop--disabled":h,"ReactCrop--locked":s,"ReactCrop--new-crop":p,"ReactCrop--fixed-aspect":a&&e,"ReactCrop--circular-crop":a&&r,"ReactCrop--rule-of-thirds":a&&c,"ReactCrop--invisible-crop":!this.dragStarted&&a&&!a.width&&!a.height});return t().createElement("div",{ref:this.componentRef,className:w,style:d},t().createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},o),g)}}u.xOrds=["e","w"],u.yOrds=["n","s"],u.xyOrds=["nw","ne","se","sw"],u.nudgeStep=1,u.nudgeStepMedium=10,u.nudgeStepLarge=100,u.defaultProps={ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}};})(),r})())); 
-} (ReactCrop_min));
-
-var ReactCrop_minExports = ReactCrop_min.exports;
-var ReactCrop = /*@__PURE__*/getDefaultExportFromCjs(ReactCrop_minExports);
+function D(s, t, e) {
+  return s.unit === "%" ? { ...M, ...s, unit: "%" } : {
+    unit: "%",
+    x: s.x ? s.x / t * 100 : 0,
+    y: s.y ? s.y / e * 100 : 0,
+    width: s.width ? s.width / t * 100 : 0,
+    height: s.height ? s.height / e * 100 : 0
+  };
+}
+function y(s, t, e) {
+  return s.unit ? s.unit === "px" ? { ...M, ...s, unit: "px" } : {
+    unit: "px",
+    x: s.x ? s.x * t / 100 : 0,
+    y: s.y ? s.y * e / 100 : 0,
+    width: s.width ? s.width * t / 100 : 0,
+    height: s.height ? s.height * e / 100 : 0
+  } : { ...M, ...s, unit: "px" };
+}
+function X(s, t, e, o, i, n = 0, a = 0, w = o, h = i) {
+  const r = { ...s };
+  let c = Math.min(n, o), d = Math.min(a, i), p = Math.min(w, o), l = Math.min(h, i);
+  t && (t > 1 ? (c = a ? a * t : c, d = c / t, p = w * t) : (d = n ? n / t : d, c = d * t, l = h / t)), r.y < 0 && (r.height = Math.max(r.height + r.y, d), r.y = 0), r.x < 0 && (r.width = Math.max(r.width + r.x, c), r.x = 0);
+  const u = o - (r.x + r.width);
+  u < 0 && (r.x = Math.min(r.x, o - c), r.width += u);
+  const C = i - (r.y + r.height);
+  if (C < 0 && (r.y = Math.min(r.y, i - d), r.height += C), r.width < c && ((e === "sw" || e == "nw") && (r.x -= c - r.width), r.width = c), r.height < d && ((e === "nw" || e == "ne") && (r.y -= d - r.height), r.height = d), r.width > p && ((e === "sw" || e == "nw") && (r.x -= p - r.width), r.width = p), r.height > l && ((e === "nw" || e == "ne") && (r.y -= l - r.height), r.height = l), t) {
+    const R = r.width / r.height;
+    if (R < t) {
+      const x = Math.max(r.width / t, d);
+      (e === "nw" || e == "ne") && (r.y -= x - r.height), r.height = x;
+    } else if (R > t) {
+      const x = Math.max(r.height * t, c);
+      (e === "sw" || e == "nw") && (r.x -= x - r.width), r.width = x;
+    }
+  }
+  return r;
+}
+function K(s, t, e, o) {
+  const i = { ...s };
+  return t === "ArrowLeft" ? o === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : o === "w" ? (i.x -= e, i.width += e) : o === "sw" ? (i.x -= e, i.width += e, i.height += e) : o === "ne" ? (i.y += e, i.width -= e, i.height -= e) : o === "e" ? i.width -= e : o === "se" && (i.width -= e, i.height -= e) : t === "ArrowRight" && (o === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : o === "w" ? (i.x += e, i.width -= e) : o === "sw" ? (i.x += e, i.width -= e, i.height -= e) : o === "ne" ? (i.y -= e, i.width += e, i.height += e) : o === "e" ? i.width += e : o === "se" && (i.width += e, i.height += e)), t === "ArrowUp" ? o === "nw" ? (i.x -= e, i.y -= e, i.width += e, i.height += e) : o === "n" ? (i.y -= e, i.height += e) : o === "ne" ? (i.y -= e, i.width += e, i.height += e) : o === "sw" ? (i.x += e, i.width -= e, i.height -= e) : o === "s" ? i.height -= e : o === "se" && (i.width -= e, i.height -= e) : t === "ArrowDown" && (o === "nw" ? (i.x += e, i.y += e, i.width -= e, i.height -= e) : o === "n" ? (i.y += e, i.height -= e) : o === "ne" ? (i.y += e, i.width -= e, i.height -= e) : o === "sw" ? (i.x -= e, i.width += e, i.height += e) : o === "s" ? i.height += e : o === "se" && (i.width += e, i.height += e)), i;
+}
+const b = { capture: !0, passive: !1 }, v = class m extends PureComponent {
+  constructor() {
+    super(...arguments), this.docMoveBound = !1, this.mouseDownOnCrop = !1, this.dragStarted = !1, this.evData = {
+      startClientX: 0,
+      startClientY: 0,
+      startCropX: 0,
+      startCropY: 0,
+      clientX: 0,
+      clientY: 0,
+      isResize: !0
+    }, this.componentRef = createRef(), this.mediaRef = createRef(), this.initChangeCalled = !1, this.state = {
+      cropIsActive: !1,
+      newCropIsBeingDrawn: !1
+    }, this.onCropPointerDown = (t) => {
+      const { crop: e, disabled: o } = this.props, i = this.getBox();
+      if (!e)
+        return;
+      const n = y(e, i.width, i.height);
+      if (o)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const a = t.target.dataset.ord, w = !!a;
+      let h = t.clientX, r = t.clientY, c = n.x, d = n.y;
+      if (a) {
+        const p = t.clientX - i.x, l = t.clientY - i.y;
+        let u = 0, C = 0;
+        a === "ne" || a == "e" ? (u = p - (n.x + n.width), C = l - n.y, c = n.x, d = n.y + n.height) : a === "se" || a === "s" ? (u = p - (n.x + n.width), C = l - (n.y + n.height), c = n.x, d = n.y) : a === "sw" || a == "w" ? (u = p - n.x, C = l - (n.y + n.height), c = n.x + n.width, d = n.y) : (a === "nw" || a == "n") && (u = p - n.x, C = l - n.y, c = n.x + n.width, d = n.y + n.height), h = c + i.x + u, r = d + i.y + C;
+      }
+      this.evData = {
+        startClientX: h,
+        startClientY: r,
+        startCropX: c,
+        startCropY: d,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: w,
+        ord: a
+      }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
+    }, this.onComponentPointerDown = (t) => {
+      const { crop: e, disabled: o, locked: i, keepSelection: n, onChange: a } = this.props, w = this.getBox();
+      if (o || i || n && e)
+        return;
+      t.cancelable && t.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+      const h = t.clientX - w.x, r = t.clientY - w.y, c = {
+        unit: "px",
+        x: h,
+        y: r,
+        width: 0,
+        height: 0
+      };
+      this.evData = {
+        startClientX: t.clientX,
+        startClientY: t.clientY,
+        startCropX: h,
+        startCropY: r,
+        clientX: t.clientX,
+        clientY: t.clientY,
+        isResize: !0
+      }, this.mouseDownOnCrop = !0, a(y(c, w.width, w.height), D(c, w.width, w.height)), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+    }, this.onDocPointerMove = (t) => {
+      const { crop: e, disabled: o, onChange: i, onDragStart: n } = this.props, a = this.getBox();
+      if (o || !e || !this.mouseDownOnCrop)
+        return;
+      t.cancelable && t.preventDefault(), this.dragStarted || (this.dragStarted = !0, n && n(t));
+      const { evData: w } = this;
+      w.clientX = t.clientX, w.clientY = t.clientY;
+      let h;
+      w.isResize ? h = this.resizeCrop() : h = this.dragCrop(), P(e, h) || i(
+        y(h, a.width, a.height),
+        D(h, a.width, a.height)
+      );
+    }, this.onComponentKeyDown = (t) => {
+      const { crop: e, disabled: o, onChange: i, onComplete: n } = this.props;
+      if (o)
+        return;
+      const a = t.key;
+      let w = !1;
+      if (!e)
+        return;
+      const h = this.getBox(), r = this.makePixelCrop(h), d = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? m.nudgeStepLarge : t.shiftKey ? m.nudgeStepMedium : m.nudgeStep;
+      if (a === "ArrowLeft" ? (r.x -= d, w = !0) : a === "ArrowRight" ? (r.x += d, w = !0) : a === "ArrowUp" ? (r.y -= d, w = !0) : a === "ArrowDown" && (r.y += d, w = !0), w) {
+        t.cancelable && t.preventDefault(), r.x = f(r.x, 0, h.width - r.width), r.y = f(r.y, 0, h.height - r.height);
+        const p = y(r, h.width, h.height), l = D(r, h.width, h.height);
+        i(p, l), n && n(p, l);
+      }
+    }, this.onHandlerKeyDown = (t, e) => {
+      const {
+        aspect: o = 0,
+        crop: i,
+        disabled: n,
+        minWidth: a = 0,
+        minHeight: w = 0,
+        maxWidth: h,
+        maxHeight: r,
+        onChange: c,
+        onComplete: d
+      } = this.props, p = this.getBox();
+      if (n || !i)
+        return;
+      if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight")
+        t.stopPropagation(), t.preventDefault();
+      else
+        return;
+      const u = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? m.nudgeStepLarge : t.shiftKey ? m.nudgeStepMedium : m.nudgeStep, C = y(i, p.width, p.height), R = K(C, t.key, u, e), x = X(
+        R,
+        o,
+        e,
+        p.width,
+        p.height,
+        a,
+        w,
+        h,
+        r
+      );
+      if (!P(i, x)) {
+        const Y = D(x, p.width, p.height);
+        c(x, Y), d && d(x, Y);
+      }
+    }, this.onDocPointerDone = (t) => {
+      const { crop: e, disabled: o, onComplete: i, onDragEnd: n } = this.props, a = this.getBox();
+      this.unbindDocMove(), !(o || !e) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, n && n(t), i && i(y(e, a.width, a.height), D(e, a.width, a.height)), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
+    }, this.onDragFocus = (t) => {
+      var e;
+      (e = this.componentRef.current) == null || e.scrollTo(0, 0);
+    };
+  }
+  get document() {
+    return document;
+  }
+  // We unfortunately get the bounding box every time as x+y changes
+  // due to scrolling.
+  getBox() {
+    const t = this.mediaRef.current;
+    if (!t)
+      return { x: 0, y: 0, width: 0, height: 0 };
+    const { x: e, y: o, width: i, height: n } = t.getBoundingClientRect();
+    return { x: e, y: o, width: i, height: n };
+  }
+  componentDidUpdate(t) {
+    const { crop: e, onComplete: o } = this.props;
+    if (o && !t.crop && e) {
+      const { width: i, height: n } = this.getBox();
+      i && n && o(y(e, i, n), D(e, i, n));
+    }
+  }
+  componentWillUnmount() {
+    this.resizeObserver && this.resizeObserver.disconnect();
+  }
+  bindDocMove() {
+    this.docMoveBound || (this.document.addEventListener("pointermove", this.onDocPointerMove, b), this.document.addEventListener("pointerup", this.onDocPointerDone, b), this.document.addEventListener("pointercancel", this.onDocPointerDone, b), this.docMoveBound = !0);
+  }
+  unbindDocMove() {
+    this.docMoveBound && (this.document.removeEventListener("pointermove", this.onDocPointerMove, b), this.document.removeEventListener("pointerup", this.onDocPointerDone, b), this.document.removeEventListener("pointercancel", this.onDocPointerDone, b), this.docMoveBound = !1);
+  }
+  getCropStyle() {
+    const { crop: t } = this.props;
+    if (t)
+      return {
+        top: `${t.y}${t.unit}`,
+        left: `${t.x}${t.unit}`,
+        width: `${t.width}${t.unit}`,
+        height: `${t.height}${t.unit}`
+      };
+  }
+  dragCrop() {
+    const { evData: t } = this, e = this.getBox(), o = this.makePixelCrop(e), i = t.clientX - t.startClientX, n = t.clientY - t.startClientY;
+    return o.x = f(t.startCropX + i, 0, e.width - o.width), o.y = f(t.startCropY + n, 0, e.height - o.height), o;
+  }
+  getPointRegion(t, e, o, i) {
+    const { evData: n } = this, a = n.clientX - t.x, w = n.clientY - t.y;
+    let h;
+    i && e ? h = e === "nw" || e === "n" || e === "ne" : h = w < n.startCropY;
+    let r;
+    return o && e ? r = e === "nw" || e === "w" || e === "sw" : r = a < n.startCropX, r ? h ? "nw" : "sw" : h ? "ne" : "se";
+  }
+  resolveMinDimensions(t, e, o = 0, i = 0) {
+    let n = Math.min(o, t.width), a = Math.min(i, t.height);
+    return !e || !n && !a ? [n, a] : e > 1 ? n ? [n, n / e] : [a * e, a] : a ? [a * e, a] : [n, n / e];
+  }
+  resizeCrop() {
+    const { evData: t } = this, { aspect: e = 0, maxWidth: o, maxHeight: i } = this.props, n = this.getBox(), [a, w] = this.resolveMinDimensions(n, e, this.props.minWidth, this.props.minHeight);
+    let h = this.makePixelCrop(n), r = this.getPointRegion(n, t.ord, a, w);
+    const c = t.ord || r;
+    let d = t.clientX - t.startClientX, p = t.clientY - t.startClientY;
+    (a && c === "nw" || c === "w" || c === "sw") && (d = Math.min(d, -a)), (w && c === "nw" || c === "n" || c === "ne") && (p = Math.min(p, -w));
+    const l = {
+      unit: "px",
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    r === "ne" ? (l.x = t.startCropX, l.width = d, e ? (l.height = l.width / e, l.y = t.startCropY - l.height) : (l.height = Math.abs(p), l.y = t.startCropY - l.height)) : r === "se" ? (l.x = t.startCropX, l.y = t.startCropY, l.width = d, e ? l.height = l.width / e : l.height = p) : r === "sw" ? (l.x = t.startCropX + d, l.y = t.startCropY, l.width = Math.abs(d), e ? l.height = l.width / e : l.height = p) : r === "nw" && (l.x = t.startCropX + d, l.width = Math.abs(d), e ? (l.height = l.width / e, l.y = t.startCropY - l.height) : (l.height = Math.abs(p), l.y = t.startCropY + p));
+    const u = X(
+      l,
+      e,
+      r,
+      n.width,
+      n.height,
+      a,
+      w,
+      o,
+      i
+    );
+    return e || m.xyOrds.indexOf(c) > -1 ? h = u : m.xOrds.indexOf(c) > -1 ? (h.x = u.x, h.width = u.width) : m.yOrds.indexOf(c) > -1 && (h.y = u.y, h.height = u.height), h.x = f(h.x, 0, n.width - h.width), h.y = f(h.y, 0, n.height - h.height), h;
+  }
+  createCropSelection() {
+    const {
+      ariaLabels: t = m.defaultProps.ariaLabels,
+      disabled: e,
+      locked: o,
+      renderSelectionAddon: i,
+      ruleOfThirds: n,
+      crop: a
+    } = this.props, w = this.getCropStyle();
+    if (a)
+      return /* @__PURE__ */ g.createElement(
+        "div",
+        {
+          style: w,
+          className: "ReactCrop__crop-selection",
+          onPointerDown: this.onCropPointerDown,
+          "aria-label": t.cropArea,
+          tabIndex: 0,
+          onKeyDown: this.onComponentKeyDown,
+          role: "group"
+        },
+        !e && !o && /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus }, /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-nw",
+            "data-ord": "nw",
+            tabIndex: 0,
+            "aria-label": t.nwDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "nw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-n",
+            "data-ord": "n",
+            tabIndex: 0,
+            "aria-label": t.nDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "n"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-ne",
+            "data-ord": "ne",
+            tabIndex: 0,
+            "aria-label": t.neDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "ne"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-e",
+            "data-ord": "e",
+            tabIndex: 0,
+            "aria-label": t.eDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "e"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-se",
+            "data-ord": "se",
+            tabIndex: 0,
+            "aria-label": t.seDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "se"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-s",
+            "data-ord": "s",
+            tabIndex: 0,
+            "aria-label": t.sDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "s"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-sw",
+            "data-ord": "sw",
+            tabIndex: 0,
+            "aria-label": t.swDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "sw"),
+            role: "button"
+          }
+        ), /* @__PURE__ */ g.createElement(
+          "div",
+          {
+            className: "ReactCrop__drag-handle ord-w",
+            "data-ord": "w",
+            tabIndex: 0,
+            "aria-label": t.wDragHandle,
+            onKeyDown: (h) => this.onHandlerKeyDown(h, "w"),
+            role: "button"
+          }
+        )),
+        i && /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__selection-addon", onMouseDown: (h) => h.stopPropagation() }, i(this.state)),
+        n && /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ g.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" }))
+      );
+  }
+  makePixelCrop(t) {
+    const e = { ...M, ...this.props.crop || {} };
+    return y(e, t.width, t.height);
+  }
+  render() {
+    const { aspect: t, children: e, circularCrop: o, className: i, crop: n, disabled: a, locked: w, style: h, ruleOfThirds: r } = this.props, { cropIsActive: c, newCropIsBeingDrawn: d } = this.state, p = n ? this.createCropSelection() : null, l = S(
+      "ReactCrop",
+      i,
+      c && "ReactCrop--active",
+      a && "ReactCrop--disabled",
+      w && "ReactCrop--locked",
+      d && "ReactCrop--new-crop",
+      n && t && "ReactCrop--fixed-aspect",
+      n && o && "ReactCrop--circular-crop",
+      n && r && "ReactCrop--rule-of-thirds",
+      !this.dragStarted && n && !n.width && !n.height && "ReactCrop--invisible-crop",
+      o && "ReactCrop--no-animate"
+    );
+    return /* @__PURE__ */ g.createElement("div", { ref: this.componentRef, className: l, style: h }, /* @__PURE__ */ g.createElement("div", { ref: this.mediaRef, className: "ReactCrop__child-wrapper", onPointerDown: this.onComponentPointerDown }, e), p);
+  }
+};
+v.xOrds = ["e", "w"];
+v.yOrds = ["n", "s"];
+v.xyOrds = ["nw", "ne", "se", "sw"];
+v.nudgeStep = 1;
+v.nudgeStepMedium = 10;
+v.nudgeStepLarge = 100;
+v.defaultProps = {
+  ariaLabels: {
+    cropArea: "Use the arrow keys to move the crop selection area",
+    nwDragHandle: "Use the arrow keys to move the north west drag handle to change the crop selection area",
+    nDragHandle: "Use the up and down arrow keys to move the north drag handle to change the crop selection area",
+    neDragHandle: "Use the arrow keys to move the north east drag handle to change the crop selection area",
+    eDragHandle: "Use the up and down arrow keys to move the east drag handle to change the crop selection area",
+    seDragHandle: "Use the arrow keys to move the south east drag handle to change the crop selection area",
+    sDragHandle: "Use the up and down arrow keys to move the south drag handle to change the crop selection area",
+    swDragHandle: "Use the arrow keys to move the south west drag handle to change the crop selection area",
+    wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
+  }
+};
+let I = v;
 
 var cropImage = function cropImage(payload) {
   return axios.post("neeto_image_uploader_engine/development/crop_image", payload);
@@ -98,194 +459,42 @@ var developmentApi = {
   cropImage: cropImage
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCropImage = function useCropImage(options) {
-  return useMutation(_objectSpread$4({
+  return useMutation(_objectSpread$3({
     mutationFn: developmentApi.cropImage
   }, options));
 };
 
-var css$1 = ".ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}.ReactCrop *,.ReactCrop *::before,.ReactCrop *::after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translate3d(0, 0, 0);cursor:move;box-shadow:0 0 0 9999em rgba(0,0,0,.5);border:1px dashed #fff}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%;box-shadow:0px 0px 1px 1px #fff,0 0 0 9999em rgba(0,0,0,.5)}.ReactCrop__crop-selection:focus{outline:none;border-color:blue;border-style:solid}.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after,.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{content:\"\";display:block;position:absolute;background-color:rgba(255,255,255,.4)}.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt::before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt::after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz::before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz::after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute}.ReactCrop__drag-handle::after{position:absolute;content:\"\";display:block;width:10px;height:10px;background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.7);outline:1px solid rgba(0,0,0,0)}.ReactCrop__drag-handle:focus::after{border-color:blue;background:#2dbfff}.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}.ReactCrop .ord-nw::after{top:0;left:0}.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}.ReactCrop .ord-n::after{top:0}.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}.ReactCrop .ord-ne::after{top:0;right:0}.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}.ReactCrop .ord-e::after{right:0}.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}.ReactCrop .ord-se::after{bottom:0;right:0}.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}.ReactCrop .ord-s::after{bottom:0}.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}.ReactCrop .ord-sw::after{bottom:0;left:0}.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}.ReactCrop .ord-w::after{left:0}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar{display:none}.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media(pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}.ReactCrop .ReactCrop__child-wrapper {\n  width: 100%;\n  height: 100%;\n}.ReactCrop .ReactCrop__child-wrapper img {\n  height: auto;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9yZWFjdC1pbWFnZS1jcm9wL2Rpc3QvUmVhY3RDcm9wLmNzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlYWN0LWNyb3Auc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxXQUFXLGlCQUFpQixDQUFDLG9CQUFvQixDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsc0RBQXNELHFCQUFxQixDQUFDLHdDQUF3QyxjQUFjLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLDhEQUE4RCxhQUFhLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLHdJQUF3SSxpQkFBaUIsQ0FBQyxnRUFBZ0UsaUJBQWlCLENBQUMsMkJBQTJCLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsOEJBQThCLENBQUMsV0FBVyxDQUFDLHNDQUFzQyxDQUFDLHNCQUFzQixDQUFDLGdEQUFnRCxjQUFjLENBQUMscURBQXFELGlCQUFpQixDQUFDLDJEQUEyRCxDQUFDLGlDQUFpQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsa0JBQWtCLENBQUMsc0RBQXNELFlBQVksQ0FBQyxzSkFBc0osVUFBVSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxxQ0FBcUMsQ0FBQywyRUFBMkUsU0FBUyxDQUFDLFdBQVcsQ0FBQyxzQ0FBb0QsbUJBQW1CLENBQUMscUNBQW1ELG1CQUFtQixDQUFDLDJFQUEyRSxVQUFVLENBQUMsVUFBVSxDQUFDLHNDQUFtRCxrQkFBa0IsQ0FBQyxxQ0FBa0Qsa0JBQWtCLENBQUMsd0JBQXdCLGlCQUFpQixDQUFDLCtCQUErQixpQkFBaUIsQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsK0JBQStCLENBQUMscUNBQXFDLENBQUMsK0JBQStCLENBQUMscUNBQXFDLGlCQUFpQixDQUFDLGtCQUFrQixDQUFDLG1CQUFtQixLQUFLLENBQUMsTUFBTSxDQUFDLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsS0FBSyxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixLQUFLLENBQUMsbUJBQW1CLEtBQUssQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLGdCQUFnQixDQUFDLDBCQUEwQixLQUFLLENBQUMsT0FBTyxDQUFDLGtCQUFrQixPQUFPLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLENBQUMseUJBQXlCLE9BQU8sQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQyxpQkFBaUIsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsUUFBUSxDQUFDLFFBQVEsQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQUMseUJBQXlCLFFBQVEsQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsT0FBTyxDQUFDLE1BQU0sQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixNQUFNLENBQUMsNkNBQTZDLGNBQWMsQ0FBQyxxQkFBcUIsaUJBQWlCLENBQUMsMkJBQTJCLEtBQUssQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxlQUFlLENBQUMsMkJBQTJCLE9BQU8sQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxpQkFBaUIsQ0FBQywyQkFBMkIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLGtCQUFrQixDQUFDLDJCQUEyQixLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsZ0JBQWdCLENBQUMscUlBQXFJLFlBQVksQ0FBQyw0TkFBNE4sWUFBWSxDQUFDLHdCQUF3Qix3RUFBd0UsWUFBWSxDQUFDLHdCQUF3QixVQUFVLENBQUMsV0FBVyxDQUFDLENDRzcrSDtFQUNFLFdBQUE7RUFDQSxZQUFBO0FBREosQ0FHSTtFQUNFLFlBQUE7RUFDQSxXQUFBO0VBQ0EsZUFBQTtFQUNBLGdCQUFBO0VBQ0EsY0FBQTtBQUROIiwic291cmNlc0NvbnRlbnQiOlsiLlJlYWN0Q3JvcHtwb3NpdGlvbjpyZWxhdGl2ZTtkaXNwbGF5OmlubGluZS1ibG9jaztjdXJzb3I6Y3Jvc3NoYWlyO292ZXJmbG93OmhpZGRlbjttYXgtd2lkdGg6MTAwJX0uUmVhY3RDcm9wICosLlJlYWN0Q3JvcCAqOjpiZWZvcmUsLlJlYWN0Q3JvcCAqOjphZnRlcntib3gtc2l6aW5nOmJvcmRlci1ib3h9LlJlYWN0Q3JvcC0tZGlzYWJsZWQsLlJlYWN0Q3JvcC0tbG9ja2Vke2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXJ7bWF4LWhlaWdodDppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+dmlkZW97ZGlzcGxheTpibG9jazttYXgtd2lkdGg6MTAwJTttYXgtaGVpZ2h0OmluaGVyaXR9LlJlYWN0Q3JvcDpub3QoLlJlYWN0Q3JvcC0tZGlzYWJsZWQpIC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyPnZpZGVve3RvdWNoLWFjdGlvbjpub25lfS5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbnt0b3VjaC1hY3Rpb246bm9uZX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtsZWZ0OjA7dHJhbnNmb3JtOnRyYW5zbGF0ZTNkKDAsIDAsIDApO2N1cnNvcjptb3ZlO2JveC1zaGFkb3c6MCAwIDAgOTk5OWVtIHJnYmEoMCwwLDAsLjUpO2JvcmRlcjoxcHggZGFzaGVkICNmZmZ9LlJlYWN0Q3JvcC0tZGlzYWJsZWQgLlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb257Y3Vyc29yOmluaGVyaXR9LlJlYWN0Q3JvcC0tY2lyY3VsYXItY3JvcCAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntib3JkZXItcmFkaXVzOjUwJTtib3gtc2hhZG93OjBweCAwcHggMXB4IDFweCAjZmZmLDAgMCAwIDk5OTllbSByZ2JhKDAsMCwwLC41KX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbjpmb2N1c3tvdXRsaW5lOm5vbmU7Ym9yZGVyLWNvbG9yOmJsdWU7Ym9yZGVyLXN0eWxlOnNvbGlkfS5SZWFjdENyb3AtLWludmlzaWJsZS1jcm9wIC5SZWFjdENyb3BfX2Nyb3Atc2VsZWN0aW9ue2Rpc3BsYXk6bm9uZX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjphZnRlciwuUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjphZnRlcntjb250ZW50OlwiXCI7ZGlzcGxheTpibG9jaztwb3NpdGlvbjphYnNvbHV0ZTtiYWNrZ3JvdW5kLWNvbG9yOnJnYmEoMjU1LDI1NSwyNTUsLjQpfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtdnQ6OmFmdGVye3dpZHRoOjFweDtoZWlnaHQ6MTAwJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3Jle2xlZnQ6MzMuMzMzMyU7bGVmdDozMy4zMzMzMzMzMzMzJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YWZ0ZXJ7bGVmdDo2Ni42NjY2JTtsZWZ0OjY2LjY2NjY2NjY2NjclfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3dpZHRoOjEwMCU7aGVpZ2h0OjFweH0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3Jle3RvcDozMy4zMzMzJTt0b3A6MzMuMzMzMzMzMzMzMyV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3RvcDo2Ni42NjY2JTt0b3A6NjYuNjY2NjY2NjY2NyV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGV7cG9zaXRpb246YWJzb2x1dGV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6OmFmdGVye3Bvc2l0aW9uOmFic29sdXRlO2NvbnRlbnQ6XCJcIjtkaXNwbGF5OmJsb2NrO3dpZHRoOjEwcHg7aGVpZ2h0OjEwcHg7YmFja2dyb3VuZC1jb2xvcjpyZ2JhKDAsMCwwLC4yKTtib3JkZXI6MXB4IHNvbGlkIHJnYmEoMjU1LDI1NSwyNTUsLjcpO291dGxpbmU6MXB4IHNvbGlkIHJnYmEoMCwwLDAsMCl9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6Zm9jdXM6OmFmdGVye2JvcmRlci1jb2xvcjpibHVlO2JhY2tncm91bmQ6IzJkYmZmZn0uUmVhY3RDcm9wIC5vcmQtbnd7dG9wOjA7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpudy1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLW53OjphZnRlcnt0b3A6MDtsZWZ0OjB9LlJlYWN0Q3JvcCAub3JkLW57dG9wOjA7bGVmdDo1MCU7bWFyZ2luLXRvcDotNXB4O21hcmdpbi1sZWZ0Oi01cHg7Y3Vyc29yOm4tcmVzaXplfS5SZWFjdENyb3AgLm9yZC1uOjphZnRlcnt0b3A6MH0uUmVhY3RDcm9wIC5vcmQtbmV7dG9wOjA7cmlnaHQ6MDttYXJnaW4tdG9wOi01cHg7bWFyZ2luLXJpZ2h0Oi01cHg7Y3Vyc29yOm5lLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtbmU6OmFmdGVye3RvcDowO3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLWV7dG9wOjUwJTtyaWdodDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tcmlnaHQ6LTVweDtjdXJzb3I6ZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLWU6OmFmdGVye3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLXNle2JvdHRvbTowO3JpZ2h0OjA7bWFyZ2luLWJvdHRvbTotNXB4O21hcmdpbi1yaWdodDotNXB4O2N1cnNvcjpzZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLXNlOjphZnRlcntib3R0b206MDtyaWdodDowfS5SZWFjdENyb3AgLm9yZC1ze2JvdHRvbTowO2xlZnQ6NTAlO21hcmdpbi1ib3R0b206LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpzLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtczo6YWZ0ZXJ7Ym90dG9tOjB9LlJlYWN0Q3JvcCAub3JkLXN3e2JvdHRvbTowO2xlZnQ6MDttYXJnaW4tYm90dG9tOi01cHg7bWFyZ2luLWxlZnQ6LTVweDtjdXJzb3I6c3ctcmVzaXplfS5SZWFjdENyb3AgLm9yZC1zdzo6YWZ0ZXJ7Ym90dG9tOjA7bGVmdDowfS5SZWFjdENyb3AgLm9yZC13e3RvcDo1MCU7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjp3LXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtdzo6YWZ0ZXJ7bGVmdDowfS5SZWFjdENyb3BfX2Rpc2FibGVkIC5SZWFjdENyb3BfX2RyYWctaGFuZGxle2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2RyYWctYmFye3Bvc2l0aW9uOmFic29sdXRlfS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ue3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLXRvcDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1le3JpZ2h0OjA7dG9wOjA7d2lkdGg6NnB4O2hlaWdodDoxMDAlO21hcmdpbi1yaWdodDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ze2JvdHRvbTowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLWJvdHRvbTotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC13e3RvcDowO2xlZnQ6MDt3aWR0aDo2cHg7aGVpZ2h0OjEwMCU7bWFyZ2luLWxlZnQ6LTNweH0uUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWJhciwuUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZSwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1iYXJ7ZGlzcGxheTpub25lfS5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtbiwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGUub3JkLWUsLlJlYWN0Q3JvcC0tZml4ZWQtYXNwZWN0IC5SZWFjdENyb3BfX2RyYWctaGFuZGxlLm9yZC1zLC5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtd3tkaXNwbGF5Om5vbmV9QG1lZGlhKHBvaW50ZXI6IGNvYXJzZSl7LlJlYWN0Q3JvcCAub3JkLW4sLlJlYWN0Q3JvcCAub3JkLWUsLlJlYWN0Q3JvcCAub3JkLXMsLlJlYWN0Q3JvcCAub3JkLXd7ZGlzcGxheTpub25lfS5SZWFjdENyb3BfX2RyYWctaGFuZGxle3dpZHRoOjI0cHg7aGVpZ2h0OjI0cHh9fVxuIiwiQGltcG9ydCBcInJlYWN0LWltYWdlLWNyb3AvZGlzdC9SZWFjdENyb3AuY3NzXCI7XG5cbi5SZWFjdENyb3Age1xuICAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG5cbiAgICBpbWcge1xuICAgICAgaGVpZ2h0OiBhdXRvO1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAxMDAlO1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuICB9XG59XG4iXX0= */";
+var css$1 = ".ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move;box-shadow:0 0 0 9999em #00000080}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}.ReactCrop__crop-selection:focus{outline:none;border-color:#00f;border-style:solid}.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:\"\";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute}.ReactCrop__drag-handle:after{position:absolute;content:\"\";display:block;width:10px;height:10px;background-color:#0003;border:1px solid rgba(255,255,255,.7);outline:1px solid transparent}.ReactCrop__drag-handle:focus:after{border-color:#00f;background:#2dbfff}.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}.ReactCrop .ord-nw:after{top:0;left:0}.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}.ReactCrop .ord-n:after{top:0}.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}.ReactCrop .ord-ne:after{top:0;right:0}.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}.ReactCrop .ord-e:after{right:0}.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}.ReactCrop .ord-se:after{bottom:0;right:0}.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}.ReactCrop .ord-s:after{bottom:0}.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}.ReactCrop .ord-sw:after{bottom:0;left:0}.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}.ReactCrop .ord-w:after{left:0}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}.ReactCrop .ReactCrop__child-wrapper {\n  width: 100%;\n  height: 100%;\n}.ReactCrop .ReactCrop__child-wrapper img {\n  height: auto;\n  width: auto;\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9yZWFjdC1pbWFnZS1jcm9wL2Rpc3QvUmVhY3RDcm9wLmNzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlYWN0LWNyb3Auc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxXQUFXLGlCQUFpQixDQUFDLG9CQUFvQixDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsb0RBQW9ELHFCQUFxQixDQUFDLHdDQUF3QyxjQUFjLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLDhEQUE4RCxhQUFhLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLHdJQUF3SSxpQkFBaUIsQ0FBQyxnRUFBZ0UsaUJBQWlCLENBQUMsMkJBQTJCLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsdUJBQXVCLENBQUMsV0FBVyxDQUFDLGlDQUFpQyxDQUFDLGdEQUFnRCxjQUFjLENBQUMscURBQXFELGlCQUFpQixDQUFDLGtEQUFrRCx3QkFBd0IsQ0FBQyxrRkFBa0YsMEJBQTBCLENBQUMsa01BQWtNLENBQUMsbURBQW1ELENBQUMseUNBQXlDLENBQUMscURBQXFELENBQUMsVUFBVSxDQUFDLDRCQUE0QixDQUFDLGdDQUFnQyxDQUFDLGtDQUFrQyxDQUFDLHlCQUF5QixHQUFHLHlDQUF5QyxDQUFDLEdBQUcsdURBQXVELENBQUMsQ0FBQyxpQ0FBaUMsWUFBWSxDQUFDLGlCQUFpQixDQUFDLGtCQUFrQixDQUFDLHNEQUFzRCxZQUFZLENBQUMsa0pBQWtKLFVBQVUsQ0FBQyxhQUFhLENBQUMsaUJBQWlCLENBQUMsc0JBQXNCLENBQUMseUVBQXlFLFNBQVMsQ0FBQyxXQUFXLENBQUMscUNBQXFDLG1CQUFtQixDQUFDLG9DQUFvQyxtQkFBbUIsQ0FBQyx5RUFBeUUsVUFBVSxDQUFDLFVBQVUsQ0FBQyxxQ0FBcUMsa0JBQWtCLENBQUMsb0NBQW9DLGtCQUFrQixDQUFDLHdCQUF3QixpQkFBaUIsQ0FBQyw4QkFBOEIsaUJBQWlCLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLHNCQUFzQixDQUFDLHFDQUFxQyxDQUFDLDZCQUE2QixDQUFDLG9DQUFvQyxpQkFBaUIsQ0FBQyxrQkFBa0IsQ0FBQyxtQkFBbUIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUMseUJBQXlCLEtBQUssQ0FBQyxNQUFNLENBQUMsa0JBQWtCLEtBQUssQ0FBQyxRQUFRLENBQUMsZUFBZSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyx3QkFBd0IsS0FBSyxDQUFDLG1CQUFtQixLQUFLLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsQ0FBQyxnQkFBZ0IsQ0FBQyx5QkFBeUIsS0FBSyxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsT0FBTyxDQUFDLE9BQU8sQ0FBQyxlQUFlLENBQUMsaUJBQWlCLENBQUMsZUFBZSxDQUFDLHdCQUF3QixPQUFPLENBQUMsbUJBQW1CLFFBQVEsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLENBQUMsaUJBQWlCLENBQUMsZ0JBQWdCLENBQUMseUJBQXlCLFFBQVEsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLFFBQVEsQ0FBQyxRQUFRLENBQUMsa0JBQWtCLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHdCQUF3QixRQUFRLENBQUMsbUJBQW1CLFFBQVEsQ0FBQyxNQUFNLENBQUMsa0JBQWtCLENBQUMsZ0JBQWdCLENBQUMsZ0JBQWdCLENBQUMseUJBQXlCLFFBQVEsQ0FBQyxNQUFNLENBQUMsa0JBQWtCLE9BQU8sQ0FBQyxNQUFNLENBQUMsZUFBZSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyx3QkFBd0IsTUFBTSxDQUFDLDZDQUE2QyxjQUFjLENBQUMscUJBQXFCLGlCQUFpQixDQUFDLDJCQUEyQixLQUFLLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxVQUFVLENBQUMsZUFBZSxDQUFDLDJCQUEyQixPQUFPLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsaUJBQWlCLENBQUMsMkJBQTJCLFFBQVEsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxrQkFBa0IsQ0FBQywyQkFBMkIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLGdCQUFnQixDQUFDLGlXQUFpVyxZQUFZLENBQUMseUJBQXlCLHdFQUF3RSxZQUFZLENBQUMsd0JBQXdCLFVBQVUsQ0FBQyxXQUFXLENBQUMsQ0NHdmhKO0VBQ0UsV0FBQTtFQUNBLFlBQUE7QUFESixDQUdJO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxjQUFBO0FBRE4iLCJzb3VyY2VzQ29udGVudCI6WyIuUmVhY3RDcm9we3Bvc2l0aW9uOnJlbGF0aXZlO2Rpc3BsYXk6aW5saW5lLWJsb2NrO2N1cnNvcjpjcm9zc2hhaXI7b3ZlcmZsb3c6aGlkZGVuO21heC13aWR0aDoxMDAlfS5SZWFjdENyb3AgKiwuUmVhY3RDcm9wICo6YmVmb3JlLC5SZWFjdENyb3AgKjphZnRlcntib3gtc2l6aW5nOmJvcmRlci1ib3h9LlJlYWN0Q3JvcC0tZGlzYWJsZWQsLlJlYWN0Q3JvcC0tbG9ja2Vke2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXJ7bWF4LWhlaWdodDppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+dmlkZW97ZGlzcGxheTpibG9jazttYXgtd2lkdGg6MTAwJTttYXgtaGVpZ2h0OmluaGVyaXR9LlJlYWN0Q3JvcDpub3QoLlJlYWN0Q3JvcC0tZGlzYWJsZWQpIC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyPnZpZGVve3RvdWNoLWFjdGlvbjpub25lfS5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbnt0b3VjaC1hY3Rpb246bm9uZX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtsZWZ0OjA7dHJhbnNmb3JtOnRyYW5zbGF0ZVooMCk7Y3Vyc29yOm1vdmU7Ym94LXNoYWRvdzowIDAgMCA5OTk5ZW0gIzAwMDAwMDgwfS5SZWFjdENyb3AtLWRpc2FibGVkIC5SZWFjdENyb3BfX2Nyb3Atc2VsZWN0aW9ue2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3AtLWNpcmN1bGFyLWNyb3AgLlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb257Ym9yZGVyLXJhZGl1czo1MCV9LlJlYWN0Q3JvcC0tbm8tYW5pbWF0ZSAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntvdXRsaW5lOjFweCBkYXNoZWQgd2hpdGV9LlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb246bm90KC5SZWFjdENyb3AtLW5vLWFuaW1hdGUgLlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb24pe2FuaW1hdGlvbjptYXJjaGluZy1hbnRzIDFzO2JhY2tncm91bmQtaW1hZ2U6bGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCNmZmYgNTAlLCM0NDQgNTAlKSxsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsI2ZmZiA1MCUsIzQ0NCA1MCUpLGxpbmVhci1ncmFkaWVudCh0byBib3R0b20sI2ZmZiA1MCUsIzQ0NCA1MCUpLGxpbmVhci1ncmFkaWVudCh0byBib3R0b20sI2ZmZiA1MCUsIzQ0NCA1MCUpO2JhY2tncm91bmQtc2l6ZToxMHB4IDFweCwxMHB4IDFweCwxcHggMTBweCwxcHggMTBweDtiYWNrZ3JvdW5kLXBvc2l0aW9uOjAgMCwwIDEwMCUsMCAwLDEwMCUgMDtiYWNrZ3JvdW5kLXJlcGVhdDpyZXBlYXQteCxyZXBlYXQteCxyZXBlYXQteSxyZXBlYXQteTtjb2xvcjojZmZmO2FuaW1hdGlvbi1wbGF5LXN0YXRlOnJ1bm5pbmc7YW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjpsaW5lYXI7YW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDppbmZpbml0ZX1Aa2V5ZnJhbWVzIG1hcmNoaW5nLWFudHN7MCV7YmFja2dyb3VuZC1wb3NpdGlvbjowIDAsMCAxMDAlLDAgMCwxMDAlIDB9dG97YmFja2dyb3VuZC1wb3NpdGlvbjoyMHB4IDAsLTIwcHggMTAwJSwwIC0yMHB4LDEwMCUgMjBweH19LlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb246Zm9jdXN7b3V0bGluZTpub25lO2JvcmRlci1jb2xvcjojMDBmO2JvcmRlci1zdHlsZTpzb2xpZH0uUmVhY3RDcm9wLS1pbnZpc2libGUtY3JvcCAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntkaXNwbGF5Om5vbmV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtdnQ6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OmFmdGVyLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OmJlZm9yZSwuUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejphZnRlcntjb250ZW50OlwiXCI7ZGlzcGxheTpibG9jaztwb3NpdGlvbjphYnNvbHV0ZTtiYWNrZ3JvdW5kLWNvbG9yOiNmZmY2fS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OmJlZm9yZSwuUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDphZnRlcnt3aWR0aDoxcHg7aGVpZ2h0OjEwMCV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtdnQ6YmVmb3Jle2xlZnQ6MzMuMzMzMzMzMzMzMyV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtdnQ6YWZ0ZXJ7bGVmdDo2Ni42NjY2NjY2NjY3JX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6YWZ0ZXJ7d2lkdGg6MTAwJTtoZWlnaHQ6MXB4fS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OmJlZm9yZXt0b3A6MzMuMzMzMzMzMzMzMyV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6YWZ0ZXJ7dG9wOjY2LjY2NjY2NjY2NjclfS5SZWFjdENyb3BfX2RyYWctaGFuZGxle3Bvc2l0aW9uOmFic29sdXRlfS5SZWFjdENyb3BfX2RyYWctaGFuZGxlOmFmdGVye3Bvc2l0aW9uOmFic29sdXRlO2NvbnRlbnQ6XCJcIjtkaXNwbGF5OmJsb2NrO3dpZHRoOjEwcHg7aGVpZ2h0OjEwcHg7YmFja2dyb3VuZC1jb2xvcjojMDAwMztib3JkZXI6MXB4IHNvbGlkIHJnYmEoMjU1LDI1NSwyNTUsLjcpO291dGxpbmU6MXB4IHNvbGlkIHRyYW5zcGFyZW50fS5SZWFjdENyb3BfX2RyYWctaGFuZGxlOmZvY3VzOmFmdGVye2JvcmRlci1jb2xvcjojMDBmO2JhY2tncm91bmQ6IzJkYmZmZn0uUmVhY3RDcm9wIC5vcmQtbnd7dG9wOjA7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpudy1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLW53OmFmdGVye3RvcDowO2xlZnQ6MH0uUmVhY3RDcm9wIC5vcmQtbnt0b3A6MDtsZWZ0OjUwJTttYXJnaW4tdG9wOi01cHg7bWFyZ2luLWxlZnQ6LTVweDtjdXJzb3I6bi1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLW46YWZ0ZXJ7dG9wOjB9LlJlYWN0Q3JvcCAub3JkLW5le3RvcDowO3JpZ2h0OjA7bWFyZ2luLXRvcDotNXB4O21hcmdpbi1yaWdodDotNXB4O2N1cnNvcjpuZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLW5lOmFmdGVye3RvcDowO3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLWV7dG9wOjUwJTtyaWdodDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tcmlnaHQ6LTVweDtjdXJzb3I6ZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLWU6YWZ0ZXJ7cmlnaHQ6MH0uUmVhY3RDcm9wIC5vcmQtc2V7Ym90dG9tOjA7cmlnaHQ6MDttYXJnaW4tYm90dG9tOi01cHg7bWFyZ2luLXJpZ2h0Oi01cHg7Y3Vyc29yOnNlLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtc2U6YWZ0ZXJ7Ym90dG9tOjA7cmlnaHQ6MH0uUmVhY3RDcm9wIC5vcmQtc3tib3R0b206MDtsZWZ0OjUwJTttYXJnaW4tYm90dG9tOi01cHg7bWFyZ2luLWxlZnQ6LTVweDtjdXJzb3I6cy1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLXM6YWZ0ZXJ7Ym90dG9tOjB9LlJlYWN0Q3JvcCAub3JkLXN3e2JvdHRvbTowO2xlZnQ6MDttYXJnaW4tYm90dG9tOi01cHg7bWFyZ2luLWxlZnQ6LTVweDtjdXJzb3I6c3ctcmVzaXplfS5SZWFjdENyb3AgLm9yZC1zdzphZnRlcntib3R0b206MDtsZWZ0OjB9LlJlYWN0Q3JvcCAub3JkLXd7dG9wOjUwJTtsZWZ0OjA7bWFyZ2luLXRvcDotNXB4O21hcmdpbi1sZWZ0Oi01cHg7Y3Vyc29yOnctcmVzaXplfS5SZWFjdENyb3AgLm9yZC13OmFmdGVye2xlZnQ6MH0uUmVhY3RDcm9wX19kaXNhYmxlZCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZXtjdXJzb3I6aW5oZXJpdH0uUmVhY3RDcm9wX19kcmFnLWJhcntwb3NpdGlvbjphYnNvbHV0ZX0uUmVhY3RDcm9wX19kcmFnLWJhci5vcmQtbnt0b3A6MDtsZWZ0OjA7d2lkdGg6MTAwJTtoZWlnaHQ6NnB4O21hcmdpbi10b3A6LTNweH0uUmVhY3RDcm9wX19kcmFnLWJhci5vcmQtZXtyaWdodDowO3RvcDowO3dpZHRoOjZweDtoZWlnaHQ6MTAwJTttYXJnaW4tcmlnaHQ6LTNweH0uUmVhY3RDcm9wX19kcmFnLWJhci5vcmQtc3tib3R0b206MDtsZWZ0OjA7d2lkdGg6MTAwJTtoZWlnaHQ6NnB4O21hcmdpbi1ib3R0b206LTNweH0uUmVhY3RDcm9wX19kcmFnLWJhci5vcmQtd3t0b3A6MDtsZWZ0OjA7d2lkdGg6NnB4O2hlaWdodDoxMDAlO21hcmdpbi1sZWZ0Oi0zcHh9LlJlYWN0Q3JvcC0tbmV3LWNyb3AgLlJlYWN0Q3JvcF9fZHJhZy1iYXIsLlJlYWN0Q3JvcC0tbmV3LWNyb3AgLlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGUsLlJlYWN0Q3JvcC0tZml4ZWQtYXNwZWN0IC5SZWFjdENyb3BfX2RyYWctYmFyLC5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtbiwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGUub3JkLWUsLlJlYWN0Q3JvcC0tZml4ZWQtYXNwZWN0IC5SZWFjdENyb3BfX2RyYWctaGFuZGxlLm9yZC1zLC5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtd3tkaXNwbGF5Om5vbmV9QG1lZGlhIChwb2ludGVyOiBjb2Fyc2Upey5SZWFjdENyb3AgLm9yZC1uLC5SZWFjdENyb3AgLm9yZC1lLC5SZWFjdENyb3AgLm9yZC1zLC5SZWFjdENyb3AgLm9yZC13e2Rpc3BsYXk6bm9uZX0uUmVhY3RDcm9wX19kcmFnLWhhbmRsZXt3aWR0aDoyNHB4O2hlaWdodDoyNHB4fX1cbiIsIkBpbXBvcnQgXCJyZWFjdC1pbWFnZS1jcm9wL2Rpc3QvUmVhY3RDcm9wLmNzc1wiO1xuXG4uUmVhY3RDcm9wIHtcbiAgLlJlYWN0Q3JvcF9fY2hpbGQtd3JhcHBlciB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuXG4gICAgaW1nIHtcbiAgICAgIGhlaWdodDogYXV0bztcbiAgICAgIHdpZHRoOiBhdXRvO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgbWF4LWhlaWdodDogMTAwJTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgfVxufVxuIl19 */";
 n(css$1,{});
 
-var useImageControls = function useImageControls(_ref) {
-  var isAspectRatioLocked = _ref.isAspectRatioLocked,
-    setAspectRatioLocked = _ref.setAspectRatioLocked,
-    setCrop = _ref.setCrop,
-    _ref$crop = _ref.crop,
-    crop = _ref$crop === void 0 ? {} : _ref$crop,
+var Controls = withT(function (_ref) {
+  var _imageRef$current, _imageRef$current2;
+  var t = _ref.t,
     aspectRatio = _ref.aspectRatio,
-    imageRef = _ref.imageRef,
-    setAspectRatio = _ref.setAspectRatio,
-    setHeight = _ref.setHeight,
-    setWidth = _ref.setWidth;
-  var onToggleAspectRatioLock = function onToggleAspectRatioLock() {
-    setAspectRatioLocked(function (isAspectRatioLocked) {
-      return !isAspectRatioLocked;
-    });
-    if (!isAspectRatioLocked) {
-      var newHeight = crop.width / (aspectRatio.width / aspectRatio.height);
-      var newWidth = crop.height * (aspectRatio.width / aspectRatio.height);
-      newWidth + Math.trunc(crop.x) <= imageRef.current.width ? setCrop(mergeRight(crop, {
-        width: newWidth
-      })) : setCrop(mergeRight(crop, {
-        height: newHeight
-      }));
-    }
-  };
-  var handleWidthChange = function handleWidthChange(width) {
-    var cropWidth = Number(width);
-    var displayWidth = cropWidth * imageRef.current.width / imageRef.current.naturalWidth;
-    if (displayWidth > 0 && Math.trunc(crop.x) + displayWidth <= imageRef.current.width) {
-      if (isAspectRatioLocked) {
-        var displayHeight = displayWidth / (aspectRatio.width / aspectRatio.height);
-        displayHeight + Math.trunc(crop.y) <= imageRef.current.height && setCrop(mergeRight(crop, {
-          width: displayWidth,
-          height: displayHeight
-        }));
-      } else {
-        setCrop(mergeRight(crop, {
-          width: displayWidth
-        }));
-      }
-    } else {
-      setWidth(crop.width.toFixed(2));
-    }
-  };
-  var handleHeightChange = function handleHeightChange(height) {
-    var cropHeight = Number(height);
-    var displayHeight = cropHeight * imageRef.current.height / imageRef.current.naturalHeight;
-    if (displayHeight > 0 && Math.trunc(crop.y) + displayHeight <= imageRef.current.height) {
-      if (isAspectRatioLocked) {
-        var displayWidth = displayHeight * aspectRatio.width / aspectRatio.height;
-        displayWidth + Math.trunc(crop.x) <= imageRef.current.width && setCrop(mergeRight(crop, {
-          height: displayHeight,
-          width: displayWidth
-        }));
-      } else {
-        setCrop(mergeRight(crop, {
-          height: displayHeight
-        }));
-      }
-    } else {
-      setHeight(crop.height.toFixed(2));
-    }
-  };
-  var handleAspectWidthChange = function handleAspectWidthChange(aspectWidth) {
-    if (aspectWidth <= 0) {
-      return;
-    }
-    if (!isAspectRatioLocked) {
-      setAspectRatio(mergeRight(aspectRatio, {
-        width: aspectWidth
-      }));
-      return;
-    }
-    var newWidth = crop.height * (aspectWidth / aspectRatio.height);
-    if (newWidth + Math.trunc(crop.x) <= imageRef.current.width) {
-      setCrop(mergeRight(crop, {
-        width: newWidth
-      }));
-      setAspectRatio(mergeRight(aspectRatio, {
-        width: aspectWidth
-      }));
-    }
-  };
-  var handleAspectHeightChange = function handleAspectHeightChange(aspectHeight) {
-    if (aspectHeight <= 0) {
-      return;
-    }
-    if (!isAspectRatioLocked) {
-      setAspectRatio(mergeRight(aspectRatio, {
-        height: aspectHeight
-      }));
-      return;
-    }
-    var newHeight = crop.width / (aspectRatio.width / aspectHeight);
-    if (newHeight + Math.trunc(crop.y) <= imageRef.current.height) {
-      setCrop(mergeRight(crop, {
-        height: newHeight
-      }));
-      setAspectRatio(mergeRight(aspectRatio, {
-        height: aspectHeight
-      }));
-    }
-  };
-  return {
-    onToggleAspectRatioLock: onToggleAspectRatioLock,
-    handleWidthChange: handleWidthChange,
-    handleHeightChange: handleHeightChange,
-    handleAspectWidthChange: handleAspectWidthChange,
-    handleAspectHeightChange: handleAspectHeightChange
-  };
-};
-
-var Controls = function Controls(_ref) {
-  var aspectRatio = _ref.aspectRatio,
     isAspectRatioLocked = _ref.isAspectRatioLocked,
     crop = _ref.crop,
     handleSubmit = _ref.handleSubmit,
-    setAspectRatio = _ref.setAspectRatio,
-    setAspectRatioLocked = _ref.setAspectRatioLocked,
-    setCrop = _ref.setCrop,
     imageRef = _ref.imageRef,
     isFullImage = _ref.isFullImage,
     setIsFullImage = _ref.setIsFullImage,
     _ref$hideControls = _ref.hideControls,
-    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var getActualCropHeight = function getActualCropHeight(cropHeight) {
-    var _imageRef$current, _imageRef$current2;
-    return cropHeight * (((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.naturalHeight) / ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.height));
-  };
-  var getActualCropWidth = function getActualCropWidth(cropHeight) {
-    var _imageRef$current3, _imageRef$current4;
-    return cropHeight * (((_imageRef$current3 = imageRef.current) === null || _imageRef$current3 === void 0 ? void 0 : _imageRef$current3.naturalWidth) / ((_imageRef$current4 = imageRef.current) === null || _imageRef$current4 === void 0 ? void 0 : _imageRef$current4.width));
-  };
-  var _useState = useState(getActualCropHeight(crop.height)),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  var _useState3 = useState(getActualCropWidth(crop.width)),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
-  var _useImageControls = useImageControls({
-      isAspectRatioLocked: isAspectRatioLocked,
-      setAspectRatioLocked: setAspectRatioLocked,
-      setCrop: setCrop,
-      crop: crop,
-      aspectRatio: aspectRatio,
-      imageRef: imageRef,
-      setAspectRatio: setAspectRatio,
-      setHeight: setHeight,
-      setWidth: setWidth
-    }),
-    onToggleAspectRatioLock = _useImageControls.onToggleAspectRatioLock,
-    handleWidthChange = _useImageControls.handleWidthChange,
-    handleHeightChange = _useImageControls.handleHeightChange,
-    handleAspectWidthChange = _useImageControls.handleAspectWidthChange,
-    handleAspectHeightChange = _useImageControls.handleAspectHeightChange;
-  var debouncedHeight = useDebounce(height, 800);
-  var debouncedWidth = useDebounce(width, 800);
-  useEffect(function () {
-    handleHeightChange(debouncedHeight);
-  }, [debouncedHeight]);
-  useEffect(function () {
-    handleWidthChange(debouncedWidth);
-  }, [debouncedWidth]);
-  useEffect(function () {
-    setHeight(getActualCropHeight(crop.height));
-    setWidth(getActualCropWidth(crop.width));
-  }, [crop]);
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
+    onToggleAspectRatioLock = _ref.onToggleAspectRatioLock,
+    handleWidthChange = _ref.handleWidthChange,
+    handleHeightChange = _ref.handleHeightChange,
+    handleAspectWidthChange = _ref.handleAspectWidthChange,
+    handleAspectHeightChange = _ref.handleAspectHeightChange,
+    width = _ref.width,
+    height = _ref.height;
   return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col p-4 md:w-2/6 ",
+    className: "flex flex-col space-y-6 p-4 md:w-2/6",
     children: [!hideControls && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Switch, {
         checked: isFullImage,
-        className: "flex-grow-0",
+        className: "w-full",
         label: t("neetoImageUploader.labels.selectOriginalImage"),
         onChange: function onChange() {
           return setIsFullImage(function (isFullImage) {
@@ -294,48 +503,62 @@ var Controls = function Controls(_ref) {
         }
       }), /*#__PURE__*/jsx(Switch, {
         checked: isAspectRatioLocked,
-        className: "mt-4 flex-grow-0",
+        className: "w-full",
         disabled: isFullImage,
         label: t("neetoImageUploader.labels.lockAspectRatio"),
         onChange: onToggleAspectRatioLock
-      }), /*#__PURE__*/jsx(Typography, {
-        className: "mb-2 mt-6",
-        style: "body2",
-        children: t("neetoImageUploader.imageEditor.aspectRatio")
       }), /*#__PURE__*/jsxs("div", {
-        className: "flex gap-4 self-start",
-        children: [/*#__PURE__*/jsx(Input, {
-          "data-cy": "aspect-ratio-width-input",
-          disabled: isFullImage,
-          size: "small",
-          type: "number",
-          value: aspectRatio.width,
-          onChange: withEventTargetValue(handleAspectWidthChange)
-        }), /*#__PURE__*/jsx(Typography, {
-          children: " : "
-        }), /*#__PURE__*/jsx(Input, {
-          "data-cy": "aspect-ratio-height-input",
-          disabled: isFullImage,
-          size: "small",
-          type: "number",
-          value: aspectRatio.height,
-          onChange: withEventTargetValue(handleAspectHeightChange)
+        className: "flex w-full items-start gap-2",
+        children: [/*#__PURE__*/jsx(Label, {
+          className: "w-24 pt-2",
+          children: t("neetoImageUploader.imageEditor.aspectRatio")
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex w-32 justify-between gap-1 self-start",
+          children: [/*#__PURE__*/jsx(Input, {
+            className: "w-12",
+            "data-cy": "aspect-ratio-width-input",
+            disabled: isFullImage,
+            type: "number",
+            value: aspectRatio.width,
+            onChange: withEventTargetValue(handleAspectWidthChange)
+          }), /*#__PURE__*/jsx(Typography, {
+            children: ":"
+          }), /*#__PURE__*/jsx(Input, {
+            className: "w-12",
+            "data-cy": "aspect-ratio-height-input",
+            disabled: isFullImage,
+            type: "number",
+            value: aspectRatio.height,
+            onChange: withEventTargetValue(handleAspectHeightChange)
+          })]
         })]
       })]
-    }), /*#__PURE__*/jsx(Input, {
-      className: "mt-4 flex-grow-0",
-      disabled: isFullImage,
-      label: t("neetoImageUploader.labels.width"),
-      type: "number",
-      value: Math.round(width),
-      onChange: withEventTargetValue(setWidth)
-    }), /*#__PURE__*/jsx(Input, {
-      className: "mt-4 flex-grow-0",
-      disabled: isFullImage,
-      label: t("neetoImageUploader.labels.height"),
-      type: "number",
-      value: Math.round(height),
-      onChange: withEventTargetValue(setHeight)
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.width")
+      }), /*#__PURE__*/jsx(Input, {
+        className: "w-32 flex-grow-0",
+        disabled: isFullImage,
+        max: (_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.naturalWidth,
+        type: "number",
+        value: width,
+        onChange: withEventTargetValue(handleWidthChange)
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.height")
+      }), /*#__PURE__*/jsx(Input, {
+        className: "w-32 flex-grow-0",
+        disabled: isFullImage,
+        max: (_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.naturalHeight,
+        type: "number",
+        value: height,
+        onChange: withEventTargetValue(handleHeightChange)
+      })]
     }), /*#__PURE__*/jsx(Button, {
       className: "mt-6 self-start",
       "data-cy": "neeto-image-uploader-crop-submit-button",
@@ -344,9 +567,212 @@ var Controls = function Controls(_ref) {
       onClick: handleSubmit
     })]
   });
+});
+
+var useImageControls = function useImageControls(_ref) {
+  var _imageRef$current;
+  var imageRef = _ref.imageRef,
+    fixedAspectRatio = _ref.fixedAspectRatio,
+    defaultImageSize = _ref.defaultImageSize;
+  var _ref2 = (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {},
+    imageWidth = _ref2.naturalWidth,
+    imageHeight = _ref2.naturalHeight;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAspectRatioLocked = _useState2[0],
+    setIsAspectRatioLocked = _useState2[1];
+  var _useState3 = useState(DEFAULT_CROP_CONFIG),
+    _useState4 = _slicedToArray(_useState3, 2),
+    crop = _useState4[0],
+    setCrop = _useState4[1];
+  var _useState5 = useState(getAspectRatio({
+      fixedAspectRatio: fixedAspectRatio,
+      imageSize: defaultImageSize
+    })),
+    _useState6 = _slicedToArray(_useState5, 2),
+    aspectRatio = _useState6[0],
+    setAspectRatio = _useState6[1];
+  var _useState7 = useState(getPixels(crop.height, imageHeight)),
+    _useState8 = _slicedToArray(_useState7, 2),
+    height = _useState8[0],
+    setHeight = _useState8[1];
+  var _useState9 = useState(getPixels(crop.width, imageWidth)),
+    _useState10 = _slicedToArray(_useState9, 2),
+    width = _useState10[0],
+    setWidth = _useState10[1];
+  var aspectRatioFactor = aspectRatio.width / aspectRatio.height;
+  var buildCropValues = function buildCropValues(_ref3) {
+    var cropWidth = _ref3.cropWidth,
+      cropHeight = _ref3.cropHeight,
+      _ref3$width = _ref3.width,
+      width = _ref3$width === void 0 ? imageWidth : _ref3$width,
+      _ref3$height = _ref3.height,
+      height = _ref3$height === void 0 ? imageHeight : _ref3$height,
+      _ref3$aspectRatio = _ref3.aspectRatio,
+      aspectRatio = _ref3$aspectRatio === void 0 ? aspectRatioFactor : _ref3$aspectRatio;
+    var aspectCrop = H({
+      unit: "%",
+      width: getPercentage(cropWidth, width),
+      height: getPercentage(cropHeight, height)
+    }, aspectRatio, width, height);
+    return N(aspectCrop, width, height);
+  };
+  var onToggleAspectRatioLock = function onToggleAspectRatioLock() {
+    setIsAspectRatioLocked(function (isAspectRatioLocked) {
+      return !isAspectRatioLocked;
+    });
+  };
+  var handleWidthChange = function handleWidthChange(width) {
+    var adjustedWidth = Math.min(width, imageWidth);
+    setWidth(adjustedWidth);
+    handleWidthResize(adjustedWidth);
+  };
+  var handleHeightChange = function handleHeightChange(height) {
+    var adjustedHeight = Math.min(height, imageHeight);
+    setHeight(adjustedHeight);
+    handleHeighthResize(height);
+  };
+  var handleResize = function handleResize(cropWidth, cropHeight) {
+    var aspectRatio = aspectRatioFactor;
+    if (!isAspectRatioLocked) {
+      var imageSize = {
+        width: cropWidth,
+        height: cropHeight
+      };
+      var newAspectRatio = getAspectRatio({
+        imageSize: imageSize
+      });
+      aspectRatio = newAspectRatio.width / newAspectRatio.height;
+      setAspectRatio(newAspectRatio);
+    }
+    var newCrop = buildCropValues({
+      cropWidth: cropWidth,
+      cropHeight: cropHeight,
+      aspectRatio: aspectRatio
+    });
+    setCrop(newCrop);
+    setWidth(cropWidth);
+    setHeight(cropHeight);
+  };
+  var handleWidthResize = useFuncDebounce(function (width) {
+    var cropWidth = Number(width);
+    var cropHeight = Number(height);
+    if (isAspectRatioLocked) {
+      cropHeight = getHeightFromAspectRatio(cropWidth, aspectRatio);
+      if (cropHeight > imageHeight) {
+        cropHeight = imageHeight;
+        cropWidth = getWidthFromAspectRatio(cropHeight, aspectRatio);
+      }
+    }
+    handleResize(cropWidth, cropHeight);
+  }, 300);
+  var handleHeighthResize = useFuncDebounce(function (height) {
+    var cropWidth = Number(width);
+    var cropHeight = Number(height);
+    if (isAspectRatioLocked) {
+      cropWidth = getWidthFromAspectRatio(cropHeight, aspectRatio);
+      if (cropWidth > imageWidth) {
+        cropWidth = imageWidth;
+        cropHeight = getHeightFromAspectRatio(cropWidth, aspectRatio);
+      }
+    }
+    handleResize(cropWidth, cropHeight);
+  }, 300);
+  var handleAspectWidthChange = function handleAspectWidthChange(aspectWidth) {
+    if (aspectWidth <= 0) return;
+    var newWidth = crop.width * (aspectWidth / aspectRatio.width);
+    var updatedAspectWidth = aspectWidth;
+    if (newWidth > 100) {
+      newWidth = 100;
+      updatedAspectWidth = Math.round(newWidth / crop.width * aspectRatio.width);
+    }
+    var newWidthInPixels = getPixels(newWidth, imageWidth);
+    var newCrop = buildCropValues({
+      cropWidth: newWidthInPixels,
+      cropHeight: height,
+      aspectRatio: updatedAspectWidth / aspectRatio.height
+    });
+    setCrop(newCrop);
+    setAspectRatio(mergeRight(aspectRatio, {
+      width: updatedAspectWidth
+    }));
+    setWidth(newWidthInPixels);
+  };
+  var handleAspectHeightChange = function handleAspectHeightChange(aspectHeight) {
+    if (aspectHeight <= 0) return;
+    var newHeight = crop.height * (aspectHeight / aspectRatio.height);
+    var updatedAspectHeight = aspectHeight;
+    if (newHeight > 100) {
+      newHeight = 100;
+      updatedAspectHeight = Math.round(newHeight / crop.height * aspectRatio.height);
+    }
+    var newHeightInPixels = getPixels(newHeight, imageHeight);
+    var newCrop = buildCropValues({
+      cropWidth: width,
+      cropHeight: newHeightInPixels,
+      aspectRatio: aspectRatio.width / updatedAspectHeight
+    });
+    setCrop(newCrop);
+    setAspectRatio(mergeRight(aspectRatio, {
+      height: updatedAspectHeight
+    }));
+    setHeight(newHeightInPixels);
+  };
+  var handleCropChange = function handleCropChange(pixelCrop, percentageCrop) {
+    if (!isAspectRatioLocked) {
+      var _aspectRatio = getAspectRatio({
+        imageSize: {
+          width: Math.round(pixelCrop.width),
+          height: Math.round(pixelCrop.height)
+        }
+      });
+      setAspectRatio(_aspectRatio);
+    }
+    setHeight(getPixels(percentageCrop.height, imageHeight));
+    setWidth(getPixels(percentageCrop.width, imageWidth));
+    setCrop(percentageCrop);
+  };
+  var handleImageLoad = function handleImageLoad(_ref4) {
+    var _defaultImageSize$wid;
+    var image = _ref4.target;
+    var imageWidth = image.naturalWidth,
+      imageHeight = image.naturalHeight;
+    var maxCropWidth = (_defaultImageSize$wid = defaultImageSize.width) !== null && _defaultImageSize$wid !== void 0 ? _defaultImageSize$wid : imageWidth;
+    var _getInitialCropSize = getInitialCropSize({
+        image: image,
+        aspectRatioFactor: aspectRatioFactor,
+        maxCropWidth: maxCropWidth
+      }),
+      cropWidth = _getInitialCropSize.cropWidth,
+      cropHeight = _getInitialCropSize.cropHeight;
+    var crop = buildCropValues({
+      cropWidth: cropWidth,
+      cropHeight: cropHeight,
+      width: imageWidth,
+      height: imageHeight
+    });
+    setCrop(crop);
+    setHeight(getPixels(crop.height, imageHeight));
+    setWidth(getPixels(crop.width, imageWidth));
+  };
+  return {
+    onToggleAspectRatioLock: onToggleAspectRatioLock,
+    handleWidthChange: handleWidthChange,
+    handleHeightChange: handleHeightChange,
+    handleAspectWidthChange: handleAspectWidthChange,
+    handleAspectHeightChange: handleAspectHeightChange,
+    aspectRatio: aspectRatio,
+    width: width,
+    crop: crop,
+    height: height,
+    handleImageLoad: handleImageLoad,
+    handleCropChange: handleCropChange,
+    isAspectRatioLocked: isAspectRatioLocked
+  };
 };
 
 var ImageEditor = function ImageEditor(_ref) {
+  var _imageRef$current;
   var image = _ref.image,
     handleReset = _ref.handleReset,
     _ref$handleImageEditC = _ref.handleImageEditComplete,
@@ -354,33 +780,39 @@ var ImageEditor = function ImageEditor(_ref) {
     _ref$signedId = _ref.signedId,
     signedId = _ref$signedId === void 0 ? "" : _ref$signedId,
     _ref$fixedAspectRatio = _ref.fixedAspectRatio,
-    fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
-  var _useState = useState(true),
+    fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio,
+    _ref$defaultImageSize = _ref.defaultImageSize,
+    defaultImageSize = _ref$defaultImageSize === void 0 ? {} : _ref$defaultImageSize;
+  var imageRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var _ref2 = (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {},
+    imageWidth = _ref2.naturalWidth,
+    imageHeight = _ref2.naturalHeight;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isAspectRatioLocked = _useState2[0],
-    setIsAspectRatioLocked = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFullImage = _useState4[0],
-    setIsFullImage = _useState4[1];
-  var _useState5 = useState({
-      width: (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) || 16,
-      height: (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.height) || 9
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    aspectRatio = _useState6[0],
-    setAspectRatio = _useState6[1];
-  var _useState7 = useState(DEFAULT_CROP_CONFIG),
-    _useState8 = _slicedToArray(_useState7, 2),
-    crop = _useState8[0],
-    setCrop = _useState8[1];
+    isFullImage = _useState2[0],
+    setIsFullImage = _useState2[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useCropImage = useCropImage(),
     cropImage = _useCropImage.mutate;
-  var imageRef = useRef(null);
-  var wrapperRef = useRef(null);
-  var cropAspectRatio = isPresent(fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) && isPresent(fixedAspectRatio.height) ? (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) / (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.height) : 16 / 9;
+  var _useImageControls = useImageControls({
+      fixedAspectRatio: fixedAspectRatio,
+      defaultImageSize: defaultImageSize,
+      imageRef: imageRef
+    }),
+    onToggleAspectRatioLock = _useImageControls.onToggleAspectRatioLock,
+    handleWidthChange = _useImageControls.handleWidthChange,
+    handleHeightChange = _useImageControls.handleHeightChange,
+    handleAspectWidthChange = _useImageControls.handleAspectWidthChange,
+    handleAspectHeightChange = _useImageControls.handleAspectHeightChange,
+    aspectRatio = _useImageControls.aspectRatio,
+    width = _useImageControls.width,
+    height = _useImageControls.height,
+    handleImageLoad = _useImageControls.handleImageLoad,
+    handleCropChange = _useImageControls.handleCropChange,
+    crop = _useImageControls.crop,
+    isAspectRatioLocked = _useImageControls.isAspectRatioLocked;
   var processCrop = function processCrop() {
     if (isFullImage) {
       handleImageEditComplete(image);
@@ -406,7 +838,6 @@ var ImageEditor = function ImageEditor(_ref) {
       return;
     }
     var newURL = globalProps.assetsUploaderService === CLOUD_FLARE ? getCloudFlareCroppedURL({
-      imageRef: imageRef,
       image: image,
       crop: crop
     }) : getImageKitCroppedURL({
@@ -432,44 +863,46 @@ var ImageEditor = function ImageEditor(_ref) {
       children: [/*#__PURE__*/jsx("div", {
         id: "imageEditor",
         ref: wrapperRef,
-        className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
+        className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", "relative", {
           "items-center": isItemsCenter({
             wrapperRef: wrapperRef,
             imageRef: imageRef
           })
         }),
-        children: /*#__PURE__*/jsx(ReactCrop, {
+        children: /*#__PURE__*/jsxs(I, {
           crop: isFullImage ? null : crop,
           src: image === null || image === void 0 ? void 0 : image.url,
           aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
-          onChange: setCrop,
-          onComplete: setCrop,
-          children: /*#__PURE__*/jsx("img", {
+          onChange: handleCropChange,
+          onComplete: handleCropChange,
+          children: [/*#__PURE__*/jsx("img", {
             alt: t("neetoImageUploader.common.image"),
             "data-cy": "image-editor-uploaded-image",
             ref: imageRef,
             src: image === null || image === void 0 ? void 0 : image.url,
-            onLoad: function onLoad(e) {
-              return onImageLoaded({
-                image: e.target,
-                setCrop: setCrop,
-                cropAspectRatio: cropAspectRatio
-              });
-            }
-          })
+            onLoad: handleImageLoad
+          }), /*#__PURE__*/jsxs(Typography, {
+            className: "neeto-ui-typography neeto-ui-text-nano neeto-ui-bg-gray-500 absolute bottom-0 right-0 z-10",
+            style: "nano",
+            children: [imageWidth, "x", imageHeight]
+          })]
         })
       }), /*#__PURE__*/jsx(Controls, {
         aspectRatio: aspectRatio,
         crop: crop,
+        handleAspectHeightChange: handleAspectHeightChange,
+        handleAspectWidthChange: handleAspectWidthChange,
+        handleHeightChange: handleHeightChange,
         handleSubmit: handleSubmit,
+        handleWidthChange: handleWidthChange,
+        height: height,
         imageRef: imageRef,
         isAspectRatioLocked: isAspectRatioLocked,
         isFullImage: isFullImage,
-        setAspectRatio: setAspectRatio,
-        setCrop: setCrop,
+        onToggleAspectRatioLock: onToggleAspectRatioLock,
         setIsFullImage: setIsFullImage,
-        hideControls: isPresent(fixedAspectRatio),
-        setAspectRatioLocked: setIsAspectRatioLocked
+        width: width,
+        hideControls: isPresent(fixedAspectRatio)
       })]
     })]
   });
@@ -500,14 +933,14 @@ var imagesApi = {
   bulkDestroy: bulkDestroy
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchAssets = function useFetchAssets(_ref) {
   var searchTerm = _ref.searchTerm,
     url = _ref.url,
     per = _ref.per;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useInfiniteQuery(_objectSpread$3({
+  return useInfiniteQuery(_objectSpread$2({
     queryKey: [QUERY_KEYS.ASSETS_LIST, searchTerm],
     queryFn: function queryFn(_ref2) {
       var _ref2$pageParam = _ref2.pageParam,
@@ -555,6 +988,31 @@ var useBulkDestroyAssets = function useBulkDestroyAssets(url) {
   });
 };
 
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
 var lib = {};
 
 var propTypes = {exports: {}};
@@ -939,7 +1397,7 @@ var InfiniteScroll = {exports: {}};
 
 	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-	var _react = require$$0;
+	var _react = g;
 
 	var _react2 = _interopRequireDefault(_react);
 
@@ -1244,7 +1702,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _class, _temp2;
 
-var _react = require$$0;
+var _react = g;
 
 var _react2 = _interopRequireDefault(_react);
 
@@ -1469,21 +1927,21 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
               className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
               "data-cy": "library-image-card",
               id: "unsplashImage".concat(image.id),
-              children: [tab === TABS[1].key && /*#__PURE__*/jsxs(Fragment, {
+              children: [tab === TABS[2].key && /*#__PURE__*/jsxs(Fragment, {
                 children: [/*#__PURE__*/jsx("img", {
                   "data-cy": "niu-unsplash-image-".concat(index),
-                  src: image === null || image === void 0 ? void 0 : (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
+                  src: image === null || image === void 0 || (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
                   onClick: function onClick() {
                     return handleUnsplashImageSelect(image);
                   }
                 }), /*#__PURE__*/jsxs("a", {
                   className: "neeto-ui-text-gray-100 absolute bottom-2 left-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
-                  href: "https://unsplash.com/@".concat(image === null || image === void 0 ? void 0 : (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
+                  href: "https://unsplash.com/@".concat(image === null || image === void 0 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
                   rel: "noreferrer",
                   target: "_blank",
-                  children: [image === null || image === void 0 ? void 0 : (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
+                  children: [image === null || image === void 0 || (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
                 })]
-              }), tab === TABS[0].key && /*#__PURE__*/jsxs(Fragment, {
+              }), tab === TABS[1].key && /*#__PURE__*/jsxs(Fragment, {
                 children: [hasPermission(VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsx(Dropdown, {
                   buttonSize: "small",
                   buttonStyle: "tertiary",
@@ -1572,7 +2030,7 @@ var Images = function Images(_ref) {
     images: results,
     key: debouncedQuery,
     loadMore: fetchNextPage,
-    tab: TABS[0].key
+    tab: TABS[1].key
   });
 };
 
@@ -1597,13 +2055,13 @@ var unsplashApi = {
   getUnsplashImage: getUnsplashImage
 };
 
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var UNSPLASH_LIST = QUERY_KEYS.UNSPLASH_LIST;
 var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
   var query = _ref.query;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useInfiniteQuery(_objectSpread$2({
+  return useInfiniteQuery(_objectSpread$1({
     queryKey: [UNSPLASH_LIST, {
       query: query
     }],
@@ -1630,35 +2088,13 @@ var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
   }, options));
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var UnsplashLibrary = function UnsplashLibrary(_ref) {
   var debouncedQuery = _ref.debouncedQuery,
     setSelectedImage = _ref.setSelectedImage,
     setIsUploading = _ref.setIsUploading,
     setActiveTab = _ref.setActiveTab;
-  var _useCreateBlob = useCreateBlob(),
-    createBlob = _useCreateBlob.mutate;
-  var handleBlobCreation = function handleBlobCreation(image) {
-    var payload = {
-      filename: generateASCIIFileName(image.filename),
-      content_type: image.contentType,
-      byte_size: image.byteSize,
-      checksum: image.checksum,
-      metadata: _objectSpread$1(_objectSpread$1({}, image.metadata), {}, {
-        url: constructCloudflareImageURL(image.url),
-        isCropped: false
-      }),
-      service_name: "cloudflare_image"
-    };
-    createBlob(payload);
-  };
-  var handleUploadComplete = function handleUploadComplete(image) {
-    globalProps.assetsUploaderService === CLOUD_FLARE && handleBlobCreation(image);
-    setSelectedImage(image);
-  };
   var _useImageUploader = useImageUploader({
-      onUploadComplete: handleUploadComplete,
+      onUploadComplete: setSelectedImage,
       setIsUploading: setIsUploading
     }),
     uploadFile = _useImageUploader.uploadFile;
@@ -1684,7 +2120,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
             _context.prev = 9;
             _context.t0 = _context["catch"](0);
             Toastr.error(_context.t0);
-            setActiveTab(TABS[0].key);
+            setActiveTab(TABS[1].key);
             setIsUploading(false);
           case 14:
           case "end":
@@ -1729,7 +2165,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     images: results,
     key: debouncedQuery,
     loadMore: fetchNextPage,
-    tab: TABS[1].key
+    tab: TABS[2].key
   });
 };
 
@@ -1745,15 +2181,15 @@ var ImageLibrary = function ImageLibrary(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var debouncedQuery = useDebounce(query, 400);
-  var inputPlaceHolder = equals(tab, TABS[1].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
+  var inputPlaceHolder = equals(tab, TABS[2].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
   useEffect(function () {
     setQuery("");
   }, [tab]);
   return /*#__PURE__*/jsxs("div", {
-    className: "w-full pb-2 pl-6 pt-1",
+    className: "w-full px-6 pb-2 pt-1",
     children: [/*#__PURE__*/jsx(Input, {
       autoFocus: true,
-      className: "mb-4 mr-6",
+      className: "mb-4",
       "data-cy": "niu-unsplash-image-picker-search-input",
       name: "text",
       placeholder: inputPlaceHolder,
@@ -1762,7 +2198,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
         var value = _ref2.target.value;
         return setQuery(value);
       }
-    }), tab === TABS[0].key ? /*#__PURE__*/jsx(Images, {
+    }), tab === TABS[1].key ? /*#__PURE__*/jsx(Images, {
       debouncedQuery: debouncedQuery,
       query: query,
       setSelectedImage: setSelectedImage
@@ -1776,7 +2212,6 @@ var ImageLibrary = function ImageLibrary(_ref) {
   });
 };
 
-var _excluded = ["key"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Modal = function Modal(_ref) {
@@ -1788,7 +2223,9 @@ var Modal = function Modal(_ref) {
     _ref$uploadConfig = _ref.uploadConfig,
     uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
     _ref$fixedAspectRatio = _ref.fixedAspectRatio,
-    fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
+    fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio,
+    _ref$defaultImageSize = _ref.defaultImageSize,
+    defaultImageSize = _ref$defaultImageSize === void 0 ? {} : _ref$defaultImageSize;
   var _useState = useState(TABS[0].key),
     _useState2 = _slicedToArray(_useState, 2),
     activeTab = _useState2[0],
@@ -1873,19 +2310,30 @@ var Modal = function Modal(_ref) {
     }),
     getRootProps = _useUploadDropzone.getRootProps,
     getInputProps = _useUploadDropzone.getInputProps,
-    isDragActive = _useUploadDropzone.isDragActive,
-    inputRef = _useUploadDropzone.inputRef;
-  var openFileUploadDialog = function openFileUploadDialog() {
-    var _inputRef$current;
-    return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
-  };
-  var options = createOptions([{
-    key: "local",
-    onClick: openFileUploadDialog
-  }]);
+    isDragActive = _useUploadDropzone.isDragActive;
   useEffect(function () {
     setActiveTab(TABS[0].key);
   }, [isOpen]);
+  var renderContent = function renderContent() {
+    if (activeTab === "upload") {
+      return /*#__PURE__*/jsx("div", {
+        className: "flex-grow px-6 pb-6",
+        children: /*#__PURE__*/jsx("div", {
+          className: "h-full w-full overflow-y-auto",
+          children: /*#__PURE__*/jsx(ImageDirectUpload, {
+            uploadConfig: uploadConfigWithDefaults,
+            onDrop: uploadFile
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/jsx(ImageLibrary, {
+      setActiveTab: setActiveTab,
+      setIsUploading: setIsUploading,
+      setSelectedImage: setSelectedImage,
+      tab: activeTab
+    });
+  };
   return /*#__PURE__*/jsxs(NeetoUIModal, {
     isOpen: isOpen,
     className: "niu-modal",
@@ -1901,6 +2349,7 @@ var Modal = function Modal(_ref) {
         children: t("neetoImageUploader.common.dropHere")
       })
     })), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsx(ImageEditor, {
+      defaultImageSize: defaultImageSize,
       fixedAspectRatio: fixedAspectRatio,
       handleImageEditComplete: handleImageEditComplete,
       handleReset: function handleReset() {
@@ -1909,7 +2358,7 @@ var Modal = function Modal(_ref) {
       image: selectedImage,
       signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
     }) : /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-      className: "h-full flex-col"
+      className: "flex h-full flex-col"
     }, getRootProps({
       onClick: function onClick(event) {
         return event.stopPropagation();
@@ -1921,42 +2370,21 @@ var Modal = function Modal(_ref) {
           children: t("neetoImageUploader.common.imageLibrary")
         })
       }), /*#__PURE__*/jsx("div", {
-        className: "px-6 py-2",
-        children: /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col items-center justify-between gap-2 sm:flex-row",
-          children: [/*#__PURE__*/jsx("div", {
-            className: "flex gap-2",
-            children: /*#__PURE__*/jsx(Tab, {
-              size: "small",
-              children: TABS.map(function (tab) {
-                return /*#__PURE__*/jsx(Tab.Item, {
-                  active: activeTab === tab.key,
-                  "data-cy": tab.dataCy,
-                  onClick: function onClick() {
-                    return setActiveTab(tab.key);
-                  },
-                  children: tab.label
-                }, tab.key);
-              })
-            })
-          }), /*#__PURE__*/jsx("div", {
-            className: "flex gap-2",
-            children: options.map(function (_ref2) {
-              var key = _ref2.key,
-                otherProps = _objectWithoutProperties$1(_ref2, _excluded);
-              return /*#__PURE__*/createElement(Button, _objectSpread(_objectSpread({}, otherProps), {}, {
-                key: key,
-                size: "small"
-              }));
-            })
-          })]
+        className: "flex gap-2 px-6 py-2",
+        children: /*#__PURE__*/jsx(Tab, {
+          size: "small",
+          children: TABS.map(function (tab) {
+            return /*#__PURE__*/jsx(Tab.Item, {
+              active: activeTab === tab.key,
+              "data-cy": tab.dataCy,
+              onClick: function onClick() {
+                return setActiveTab(tab.key);
+              },
+              children: tab.label
+            }, tab.key);
+          })
         })
-      }), /*#__PURE__*/jsx(ImageLibrary, {
-        setActiveTab: setActiveTab,
-        setIsUploading: setIsUploading,
-        setSelectedImage: setSelectedImage,
-        tab: activeTab
-      }), equals(activeTab, TABS[1].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
+      }), renderContent(), equals(activeTab, TABS[2].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
         className: "flex items-center justify-center gap-2",
         children: /*#__PURE__*/jsx(Typography, {
           style: "body2",
@@ -1977,4 +2405,4 @@ var Modal = function Modal(_ref) {
 };
 
 export { Modal as M, constructCloudflareImageURL as c };
-//# sourceMappingURL=index-vkjNhoF3.js.map
+//# sourceMappingURL=index-2Z-tiNdY.js.map