@bigbinary/neeto-image-uploader-frontend 2.3.9 → 2.3.11

package/dist/{index-9fdcdfac.js → index-BkKE5xo-.js}

@@ -1,32 +1,32 @@
 'use strict';
 
-var _objectWithoutProperties$1 = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var require$$0 = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var NeetoUIModal = require('@bigbinary/neetoui/Modal');
-var Button = require('@bigbinary/neetoui/Button');
 var Tab = require('@bigbinary/neetoui/Tab');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var Toastr = require('@bigbinary/neetoui/Toastr');
 var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
-var utils = require('./utils-ede1695e.js');
-var useImageUploader = require('./useImageUploader-49fd1436.js');
-var index = require('./index-cf7e4b89.js');
+var utils$1 = require('./utils-BxC_k1lu.js');
+var useImageUploader = require('./useImageUploader-Bm9TukCy.js');
+var index = require('./index-BtHfh_eu.js');
 var classnames = require('classnames');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var Button = require('@bigbinary/neetoui/Button');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Input = require('@bigbinary/neetoui/Input');
 var Switch = require('@bigbinary/neetoui/Switch');
+var Label = require('@bigbinary/neetoui/Label');
 var jsxRuntime = require('react/jsx-runtime');
-var query = require('./query-3c31bf92.js');
+var query = require('./query-B7ahlELA.js');
 var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
 var constants = require('@bigbinary/neeto-team-members-frontend/constants');
 var Alert = require('@bigbinary/neetoui/Alert');
@@ -34,29 +34,6 @@ var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties$1);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
-var NeetoUIModal__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIModal);
-var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab);
-var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
-var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
-var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
-var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
-var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
-var MenuHorizontal__default = /*#__PURE__*/_interopDefaultLegacy(MenuHorizontal);
-var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
-var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
-
 var constructCloudflareImageURL = function constructCloudflareImageURL(url) {
   var domain = window.location.host.split(".").slice(-2).join(".");
   return url.replace("https://imagedelivery.net", "https://images.".concat(domain, "/cdn-cgi/imagedelivery"));
@@ -67,15 +44,6 @@ 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 utils.OPTIONS.map(function (option) {
-    return ramda.mergeLeft(neetoCist.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) {
@@ -109,24 +77,22 @@ function getAugmentedNamespace(n) {
 
 var ReactCrop_min = {exports: {}};
 
-ReactCrop_min.exports;
-
 (function (module, exports) {
-	!function(e,t){module.exports=t(require$$0__default["default"]);}(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, ReactCrop_min.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);
 
 var cropImage = function cropImage(payload) {
-  return axios__default["default"].post("neeto_image_uploader_engine/development/crop_image", payload);
+  return axios.post("neeto_image_uploader_engine/development/crop_image", payload);
 };
 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__default["default"](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 _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; }
 var useCropImage = function useCropImage(options) {
   return reactQuery.useMutation(_objectSpread$4({
     mutationFn: developmentApi.cropImage
@@ -272,11 +238,11 @@ var Controls = function Controls(_ref) {
     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 = require$$0.useState(getActualCropHeight(crop.height)),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     height = _useState2[0],
     setHeight = _useState2[1];
   var _useState3 = require$$0.useState(getActualCropWidth(crop.width)),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     width = _useState4[0],
     setWidth = _useState4[1];
   var _useImageControls = useImageControls({
@@ -308,66 +274,78 @@ var Controls = function Controls(_ref) {
     setWidth(getActualCropWidth(crop.width));
   }, [crop]);
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
         checked: isFullImage,
-        className: "flex-grow-0",
+        className: "w-full",
         label: t("neetoImageUploader.labels.selectOriginalImage"),
         onChange: function onChange() {
           return setIsFullImage(function (isFullImage) {
             return !isFullImage;
           });
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], {
+      }), /*#__PURE__*/jsxRuntime.jsx(Switch, {
         checked: isAspectRatioLocked,
-        className: "mt-4 flex-grow-0",
+        className: "w-full",
         disabled: isFullImage,
         label: t("neetoImageUploader.labels.lockAspectRatio"),
         onChange: onToggleAspectRatioLock
-      }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-        className: "mb-2 mt-6",
-        style: "body2",
-        children: t("neetoImageUploader.imageEditor.aspectRatio")
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex gap-4 self-start",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
-          "data-cy": "aspect-ratio-width-input",
-          disabled: isFullImage,
-          size: "small",
-          type: "number",
-          value: aspectRatio.width,
-          onChange: utils$1.withEventTargetValue(handleAspectWidthChange)
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
-          children: " : "
-        }), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
-          "data-cy": "aspect-ratio-height-input",
-          disabled: isFullImage,
-          size: "small",
-          type: "number",
-          value: aspectRatio.height,
-          onChange: utils$1.withEventTargetValue(handleAspectHeightChange)
+        className: "flex w-full items-start gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+          className: "w-24 pt-2",
+          children: t("neetoImageUploader.imageEditor.aspectRatio")
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex w-32 justify-between gap-1 self-start",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+            className: "w-12",
+            "data-cy": "aspect-ratio-width-input",
+            disabled: isFullImage,
+            type: "number",
+            value: aspectRatio.width,
+            onChange: utils.withEventTargetValue(handleAspectWidthChange)
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            children: ":"
+          }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+            className: "w-12",
+            "data-cy": "aspect-ratio-height-input",
+            disabled: isFullImage,
+            type: "number",
+            value: aspectRatio.height,
+            onChange: utils.withEventTargetValue(handleAspectHeightChange)
+          })]
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
-      className: "mt-4 flex-grow-0",
-      disabled: isFullImage,
-      label: t("neetoImageUploader.labels.width"),
-      type: "number",
-      value: Math.round(width),
-      onChange: utils$1.withEventTargetValue(setWidth)
-    }), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
-      className: "mt-4 flex-grow-0",
-      disabled: isFullImage,
-      label: t("neetoImageUploader.labels.height"),
-      type: "number",
-      value: Math.round(height),
-      onChange: utils$1.withEventTargetValue(setHeight)
-    }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.width")
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+        className: "w-32 flex-grow-0",
+        disabled: isFullImage,
+        type: "number",
+        value: Math.round(width),
+        onChange: utils.withEventTargetValue(setWidth)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.height")
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+        className: "w-32 flex-grow-0",
+        disabled: isFullImage,
+        type: "number",
+        value: Math.round(height),
+        onChange: utils.withEventTargetValue(setHeight)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
       className: "mt-6 self-start",
       "data-cy": "neeto-image-uploader-crop-submit-button",
       label: t("neetoImageUploader.labels.done"),
-      disabled: utils.isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
+      disabled: utils$1.isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
       onClick: handleSubmit
     })]
   });
@@ -383,22 +361,22 @@ var ImageEditor = function ImageEditor(_ref) {
     _ref$fixedAspectRatio = _ref.fixedAspectRatio,
     fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
   var _useState = require$$0.useState(true),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     isAspectRatioLocked = _useState2[0],
     setIsAspectRatioLocked = _useState2[1];
   var _useState3 = require$$0.useState(false),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     isFullImage = _useState4[0],
     setIsFullImage = _useState4[1];
   var _useState5 = require$$0.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__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     aspectRatio = _useState6[0],
     setAspectRatio = _useState6[1];
-  var _useState7 = require$$0.useState(utils.DEFAULT_CROP_CONFIG),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+  var _useState7 = require$$0.useState(utils$1.DEFAULT_CROP_CONFIG),
+    _useState8 = _slicedToArray(_useState7, 2),
     crop = _useState8[0],
     setCrop = _useState8[1];
   var _useTranslation = reactI18next.useTranslation(),
@@ -414,7 +392,7 @@ var ImageEditor = function ImageEditor(_ref) {
       return;
     }
     cropImage({
-      crop: utils.getCropValues({
+      crop: utils$1.getCropValues({
         crop: crop,
         imageRef: imageRef
       }),
@@ -432,11 +410,11 @@ var ImageEditor = function ImageEditor(_ref) {
       handleImageEditComplete(image);
       return;
     }
-    var newURL = initializers.globalProps.assetsUploaderService === index.CLOUD_FLARE ? utils.getCloudFlareCroppedURL({
+    var newURL = initializers.globalProps.assetsUploaderService === index.CLOUD_FLARE ? utils$1.getCloudFlareCroppedURL({
       imageRef: imageRef,
       image: image,
       crop: crop
-    }) : utils.getImageKitCroppedURL({
+    }) : utils$1.getImageKitCroppedURL({
       crop: crop,
       imageURL: image.url,
       imageRef: imageRef
@@ -447,10 +425,10 @@ var ImageEditor = function ImageEditor(_ref) {
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex h-full flex-col gap-4 px-8 py-12",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
       className: "self-start",
       "data-cy": "image-editor-back-button",
-      icon: LeftArrow__default["default"],
+      icon: LeftArrow,
       iconPosition: "left",
       style: "text",
       onClick: handleReset
@@ -459,8 +437,8 @@ var ImageEditor = function ImageEditor(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         id: "imageEditor",
         ref: wrapperRef,
-        className: classnames__default["default"]("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
-          "items-center": utils.isItemsCenter({
+        className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
+          "items-center": utils$1.isItemsCenter({
             wrapperRef: wrapperRef,
             imageRef: imageRef
           })
@@ -477,7 +455,7 @@ var ImageEditor = function ImageEditor(_ref) {
             ref: imageRef,
             src: image === null || image === void 0 ? void 0 : image.url,
             onLoad: function onLoad(e) {
-              return utils.onImageLoaded({
+              return utils$1.onImageLoaded({
                 image: e.target,
                 setCrop: setCrop,
                 cropAspectRatio: cropAspectRatio
@@ -507,7 +485,7 @@ var fetch = function fetch(_ref) {
     url = _ref.url,
     page = _ref.page,
     per = _ref.per;
-  return axios__default["default"].get(url, {
+  return axios.get(url, {
     params: {
       searchTerm: searchTerm,
       page: page,
@@ -516,7 +494,7 @@ var fetch = function fetch(_ref) {
   });
 };
 var bulkDestroy = function bulkDestroy(imageIds, url) {
-  return axios__default["default"]["delete"](url, {
+  return axios["delete"](url, {
     params: {
       imageIds: imageIds
     }
@@ -528,7 +506,7 @@ var imagesApi = {
 };
 
 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__default["default"](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 _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 useFetchAssets = function useFetchAssets(_ref) {
   var searchTerm = _ref.searchTerm,
     url = _ref.url,
@@ -547,7 +525,7 @@ var useFetchAssets = function useFetchAssets(_ref) {
       });
     },
     getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
-      return lastPage.length === utils.IMAGES_PER_PAGE ? lastPageParam + 1 : null;
+      return lastPage.length === utils$1.IMAGES_PER_PAGE ? lastPageParam + 1 : null;
     },
     select: function select(data) {
       var results = data.pages.flatMap(ramda.identity);
@@ -951,15 +929,13 @@ var bricks = function bricks() {
 
 var bricks_module = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  'default': bricks
+  default: bricks
 });
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(bricks_module);
 
 var InfiniteScroll = {exports: {}};
 
-InfiniteScroll.exports;
-
 (function (module, exports) {
 
 	Object.defineProperty(exports, "__esModule", {
@@ -968,7 +944,7 @@ 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__default["default"];
+	var _react = require$$0;
 
 	var _react2 = _interopRequireDefault(_react);
 
@@ -1273,7 +1249,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _class, _temp2;
 
-var _react = require$$0__default["default"];
+var _react = require$$0;
 
 var _react2 = _interopRequireDefault(_react);
 
@@ -1433,8 +1409,8 @@ _default = lib.default = MasonryInfiniteScroller;
 var css = ".niu-unsplash-container {\n  height: calc(75vh - 220px) !important;\n  max-height: 355px;\n}\n.niu-unsplash-container img {\n  height: 100%;\n  width: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  animation: fade-in 1.2s 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  border-radius: var(--neeto-ui-rounded);\n  position: relative;\n  cursor: pointer;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2ltYWdlLWxpYnJhcnkuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2Fic3RyYWN0cy9fdmFyaWFibGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxxQ0FBQTtFQUNBLGlCQ0NrQztBREhwQztBQUlFO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxvQkFBQTtLQUFBLGlCQUFBO0VBQ0EsbUVBQUE7RUFDQSxzQ0FBQTtFQUNBLGtCQUFBO0VBQ0EsZUFBQTtBQUZKIiwic291cmNlc0NvbnRlbnQiOlsiLy9BYnN0cmFjdHNcbkBpbXBvcnQgXCIuLi9hYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi5uaXUtdW5zcGxhc2gtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiBjYWxjKCN7JG5pdS1tb2RhbC1oZWlnaHR9IC0gI3skbml1LW1vZGFsLWhlYWRlci1oZWlnaHR9KSAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0O1xuXG4gIGltZyB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIGFuaW1hdGlvbjogZmFkZS1pbiAxLjJzIDFzIGN1YmljLWJlemllcigwLjM5LCAwLjU3NSwgMC41NjUsIDEpIGJvdGg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxufVxuIiwiJG5pdS1tb2RhbC13aWR0aDogOTV2dztcbiRuaXUtbW9kYWwtaGVpZ2h0OiA3NXZoO1xuJG5pdS1tb2RhbC1tYXgtd2lkdGg6IDExNTJweDtcbiRuaXUtbW9kYWwtbWF4LWhlaWdodDogNTc2cHg7XG4kbml1LW1vZGFsLWhlYWRlci1oZWlnaHQ6IDIyMHB4O1xuXG4kbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0OiAzNTVweDtcbiJdfQ== */";
 n(css,{});
 
-var Menu = Dropdown__default["default"].Menu,
-  MenuItem = Dropdown__default["default"].MenuItem;
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
 var InfiniteScroller = function InfiniteScroller(_ref) {
   var _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
@@ -1452,11 +1428,11 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
       isOpen: false,
       imageIds: []
     }),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     deleteConfirmation = _useState2[0],
     setDeleteConfirmation = _useState2[1];
   var isMenuButtonEnabled = initializers.globalProps.assetsUploaderService !== index.CLOUD_FLARE;
-  var _useBulkDestroyAssets = useBulkDestroyAssets(utils.ASSETS_DESTROY_URL),
+  var _useBulkDestroyAssets = useBulkDestroyAssets(utils$1.ASSETS_DESTROY_URL),
     isPending = _useBulkDestroyAssets.isPending,
     bulkDelete = _useBulkDestroyAssets.mutate;
   var handleDelete = require$$0.useCallback(function () {
@@ -1471,7 +1447,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
   }, [deleteConfirmation.imageIds]);
   var Loader = /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "flex justify-center",
-    children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+    children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll",
@@ -1482,8 +1458,8 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
       position: true,
       className: "w-full",
       loader: Loader,
-      sizes: utils.INFINITE_SCROLLER_SIZES,
-      style: utils.INFINITE_SCROLLER_STYLE,
+      sizes: utils$1.INFINITE_SCROLLER_SIZES,
+      style: utils$1.INFINITE_SCROLLER_STYLE,
       useWindow: false,
       children: images.map(function (image, index) {
         var _image$urls, _image$user, _image$user2;
@@ -1498,7 +1474,7 @@ 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 === utils.TABS[1].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [tab === utils$1.TABS[2].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [/*#__PURE__*/jsxRuntime.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,
@@ -1512,12 +1488,12 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
                   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")]
                 })]
-              }), tab === utils.TABS[0].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [utils$1.hasPermission(constants.VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
+              }), tab === utils$1.TABS[1].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [utils.hasPermission(constants.VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
                   buttonSize: "small",
                   buttonStyle: "tertiary",
                   "data-cy": "image-library-image-options-".concat(index),
-                  icon: MenuHorizontal__default["default"],
+                  icon: MenuHorizontal,
                   buttonProps: {
                     className:
                     // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
@@ -1547,7 +1523,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
           })
         }, image.id);
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
+    }), /*#__PURE__*/jsxRuntime.jsx(Alert, {
       isOpen: deleteConfirmation.isOpen,
       isSubmitting: isPending,
       message: t("neetoImageUploader.deleteConfirmation.message"),
@@ -1571,8 +1547,8 @@ var Images = function Images(_ref) {
     t = _useTranslation.t;
   var _useFetchAssets = useFetchAssets({
       searchTerm: debouncedQuery,
-      per: utils.IMAGES_PER_PAGE,
-      url: utils.ASSETS_FETCH_URL
+      per: utils$1.IMAGES_PER_PAGE,
+      url: utils$1.ASSETS_FETCH_URL
     }),
     fetchNextPage = _useFetchAssets.fetchNextPage,
     hasNextPage = _useFetchAssets.hasNextPage,
@@ -1583,7 +1559,7 @@ var Images = function Images(_ref) {
     isLoading = _useFetchAssets.isLoading,
     isError = _useFetchAssets.isError;
   if (isError) {
-    return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography, {
       className: "mt-9 flex justify-center",
       style: "body2",
       children: t("neetoImageUploader.unsplash.errorMessage")
@@ -1592,7 +1568,7 @@ var Images = function Images(_ref) {
   if (isLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-around",
-      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
     });
   }
   return /*#__PURE__*/require$$0.createElement(InfiniteScroller, {
@@ -1601,15 +1577,15 @@ var Images = function Images(_ref) {
     images: results,
     key: debouncedQuery,
     loadMore: fetchNextPage,
-    tab: utils.TABS[0].key
+    tab: utils$1.TABS[1].key
   });
 };
 
-var newAxiosInstance = axios__default["default"].create();
+var newAxiosInstance = axios.create();
 var searchUnsplashImages = function searchUnsplashImages(_ref) {
   var pageNo = _ref.pageNo,
     query = _ref.query;
-  return axios__default["default"].get("neeto_image_uploader_engine/unsplash/fetch", {
+  return axios.get("neeto_image_uploader_engine/unsplash/fetch", {
     params: {
       page: pageNo,
       per_page: 30,
@@ -1627,7 +1603,7 @@ var unsplashApi = {
 };
 
 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__default["default"](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 _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 UNSPLASH_LIST = query.QUERY_KEYS.UNSPLASH_LIST;
 var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
   var query$1 = _ref.query;
@@ -1660,7 +1636,7 @@ var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
 };
 
 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__default["default"](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; }
+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,
@@ -1692,18 +1668,18 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     }),
     uploadFile = _useImageUploader.uploadFile;
   var handleUnsplashImageSelect = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(image) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
       var _image$urls, response, file;
-      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
             setIsUploading(true);
             _context.next = 4;
-            return unsplashApi.getUnsplashImage((_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular, utils.UNSPLASH_DEFAULT_REQUEST_CONFIG);
+            return unsplashApi.getUnsplashImage((_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular, utils$1.UNSPLASH_DEFAULT_REQUEST_CONFIG);
           case 4:
             response = _context.sent;
-            file = new File([response.data], utils.UNSPLASH_DEFAULT_NAME, {
+            file = new File([response.data], utils$1.UNSPLASH_DEFAULT_NAME, {
               type: response.data.type
             });
             uploadFile(file);
@@ -1712,8 +1688,8 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
           case 9:
             _context.prev = 9;
             _context.t0 = _context["catch"](0);
-            Toastr__default["default"].error(_context.t0);
-            setActiveTab(utils.TABS[0].key);
+            Toastr.error(_context.t0);
+            setActiveTab(utils$1.TABS[1].key);
             setIsUploading(false);
           case 14:
           case "end":
@@ -1739,7 +1715,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     isError = _useFetchUnsplashImag.isError,
     isLoading = _useFetchUnsplashImag.isLoading;
   if (isError) {
-    return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    return /*#__PURE__*/jsxRuntime.jsx(Typography, {
       className: "mt-9 flex justify-center",
       style: "body2",
       children: t("neetoImageUploader.unsplash.errorMessage")
@@ -1748,7 +1724,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
   if (isLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex justify-around",
-      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
     });
   }
   return /*#__PURE__*/require$$0.createElement(InfiniteScroller, {
@@ -1758,7 +1734,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     images: results,
     key: debouncedQuery,
     loadMore: fetchNextPage,
-    tab: utils.TABS[1].key
+    tab: utils$1.TABS[2].key
   });
 };
 
@@ -1768,21 +1744,21 @@ var ImageLibrary = function ImageLibrary(_ref) {
     setIsUploading = _ref.setIsUploading,
     setActiveTab = _ref.setActiveTab;
   var _useState = require$$0.useState(""),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var debouncedQuery = reactUtils.useDebounce(query, 400);
-  var inputPlaceHolder = ramda.equals(tab, utils.TABS[1].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
+  var inputPlaceHolder = ramda.equals(tab, utils$1.TABS[2].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
   require$$0.useEffect(function () {
     setQuery("");
   }, [tab]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "w-full pb-2 pl-6 pt-1",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+    className: "w-full px-6 pb-2 pt-1",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
       autoFocus: true,
-      className: "mb-4 mr-6",
+      className: "mb-4",
       "data-cy": "niu-unsplash-image-picker-search-input",
       name: "text",
       placeholder: inputPlaceHolder,
@@ -1791,7 +1767,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
         var value = _ref2.target.value;
         return setQuery(value);
       }
-    }), tab === utils.TABS[0].key ? /*#__PURE__*/jsxRuntime.jsx(Images, {
+    }), tab === utils$1.TABS[1].key ? /*#__PURE__*/jsxRuntime.jsx(Images, {
       debouncedQuery: debouncedQuery,
       query: query,
       setSelectedImage: setSelectedImage
@@ -1805,9 +1781,8 @@ 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__default["default"](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; }
+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) {
   var isOpen = _ref.isOpen,
     _ref$onClose = _ref.onClose,
@@ -1818,23 +1793,23 @@ var Modal = function Modal(_ref) {
     uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
     _ref$fixedAspectRatio = _ref.fixedAspectRatio,
     fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
-  var _useState = require$$0.useState(utils.TABS[0].key),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+  var _useState = require$$0.useState(utils$1.TABS[0].key),
+    _useState2 = _slicedToArray(_useState, 2),
     activeTab = _useState2[0],
     setActiveTab = _useState2[1];
   var _useState3 = require$$0.useState({}),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     selectedImage = _useState4[0],
     setSelectedImage = _useState4[1];
   var _useState5 = require$$0.useState(false),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     isUploading = _useState6[0],
     setIsUploading = _useState6[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useCreateBlob = useImageUploader.useCreateBlob(),
     createBlob = _useCreateBlob.mutate;
-  var uploadConfigWithDefaults = ramda.mergeRight(utils.DEFAULT_UPLOAD_CONFIG, uploadConfig);
+  var uploadConfigWithDefaults = ramda.mergeRight(utils$1.DEFAULT_UPLOAD_CONFIG, uploadConfig);
   var isCloudFlareImageUploader = initializers.globalProps.assetsUploaderService === index.CLOUD_FLARE;
   var handleCloseModal = function handleCloseModal() {
     onClose();
@@ -1887,7 +1862,7 @@ var Modal = function Modal(_ref) {
             signedId: image.signedId
           });
         },
-        onError: Toastr__default["default"].error
+        onError: Toastr.error
       });
     }
   };
@@ -1896,40 +1871,52 @@ var Modal = function Modal(_ref) {
       setIsUploading: setIsUploading
     }),
     uploadFile = _useImageUploader.uploadFile;
-  var _useUploadDropzone = utils.useUploadDropzone({
+  var _useUploadDropzone = utils$1.useUploadDropzone({
       uploadConfig: uploadConfigWithDefaults,
       onDrop: uploadFile
     }),
     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;
   require$$0.useEffect(function () {
-    setActiveTab(utils.TABS[0].key);
+    setActiveTab(utils$1.TABS[0].key);
   }, [isOpen]);
-  return /*#__PURE__*/jsxRuntime.jsxs(NeetoUIModal__default["default"], {
+  var renderContent = function renderContent() {
+    if (activeTab === "upload") {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-grow px-6 pb-6",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "h-full w-full overflow-y-auto",
+          children: /*#__PURE__*/jsxRuntime.jsx(utils$1.ImageDirectUpload, {
+            isDisabled: neetoCist.isPresent(fixedAspectRatio),
+            uploadConfig: uploadConfigWithDefaults,
+            onDrop: uploadFile
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(ImageLibrary, {
+      setActiveTab: setActiveTab,
+      setIsUploading: setIsUploading,
+      setSelectedImage: setSelectedImage,
+      tab: activeTab
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(NeetoUIModal, {
     isOpen: isOpen,
     className: "niu-modal",
     size: "large",
     onClose: handleCloseModal,
     children: [isUploading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
-      children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
-    }), utils.isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    }), utils$1.isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
       className: "neeto-ui-rounded-xl neeto-ui-bg-gray-400 absolute flex h-full w-full flex-col items-center justify-around border-4 border-dashed border-gray-900 opacity-40"
     }, getRootProps()), {}, {
-      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
         children: t("neetoImageUploader.common.dropHere")
       })
-    })), !utils.isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsxRuntime.jsx(ImageEditor, {
+    })), !utils$1.isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsxRuntime.jsx(ImageEditor, {
       fixedAspectRatio: fixedAspectRatio,
       handleImageEditComplete: handleImageEditComplete,
       handleReset: function handleReset() {
@@ -1938,62 +1925,41 @@ var Modal = function Modal(_ref) {
       image: selectedImage,
       signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
     }) : /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-      className: "h-full flex-col"
+      className: "flex h-full flex-col"
     }, getRootProps({
       onClick: function onClick(event) {
         return event.stopPropagation();
       }
     })), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(NeetoUIModal__default["default"].Header, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx(NeetoUIModal.Header, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
           style: "h2",
           children: t("neetoImageUploader.common.imageLibrary")
         })
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-6 py-2",
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col items-center justify-between gap-2 sm:flex-row",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex gap-2",
-            children: /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"], {
-              size: "small",
-              children: utils.TABS.map(function (tab) {
-                return /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"].Item, {
-                  active: activeTab === tab.key,
-                  "data-cy": tab.dataCy,
-                  onClick: function onClick() {
-                    return setActiveTab(tab.key);
-                  },
-                  children: tab.label
-                }, tab.key);
-              })
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex gap-2",
-            children: options.map(function (_ref2) {
-              var key = _ref2.key,
-                otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
-              return /*#__PURE__*/require$$0.createElement(Button__default["default"], _objectSpread(_objectSpread({}, otherProps), {}, {
-                key: key,
-                size: "small"
-              }));
-            })
-          })]
+        className: "flex gap-2 px-6 py-2",
+        children: /*#__PURE__*/jsxRuntime.jsx(Tab, {
+          size: "small",
+          children: utils$1.TABS.map(function (tab) {
+            return /*#__PURE__*/jsxRuntime.jsx(Tab.Item, {
+              active: activeTab === tab.key,
+              "data-cy": tab.dataCy,
+              onClick: function onClick() {
+                return setActiveTab(tab.key);
+              },
+              children: tab.label
+            }, tab.key);
+          })
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(ImageLibrary, {
-        setActiveTab: setActiveTab,
-        setIsUploading: setIsUploading,
-        setSelectedImage: setSelectedImage,
-        tab: activeTab
-      }), ramda.equals(activeTab, utils.TABS[1].key) && /*#__PURE__*/jsxRuntime.jsx(NeetoUIModal__default["default"].Footer, {
+      }), renderContent(), ramda.equals(activeTab, utils$1.TABS[2].key) && /*#__PURE__*/jsxRuntime.jsx(NeetoUIModal.Footer, {
         className: "flex items-center justify-center gap-2",
-        children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
           style: "body2",
           children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
             i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
             components: {
               a: /*#__PURE__*/jsxRuntime.jsx("a", {
-                href: utils.UNSPLASH_URL,
+                href: utils$1.UNSPLASH_URL,
                 rel: "noreferrer",
                 target: "_blank"
               })
@@ -2007,4 +1973,4 @@ var Modal = function Modal(_ref) {
 
 exports.Modal = Modal;
 exports.constructCloudflareImageURL = constructCloudflareImageURL;
-//# sourceMappingURL=index-9fdcdfac.js.map
+//# sourceMappingURL=index-BkKE5xo-.js.map