@bigbinary/neeto-image-uploader-frontend 1.5.25 → 1.6.0-beta1

package/dist/index.js

@@ -1,38 +1,32 @@
-import React, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState } from 'react';
+import require$$0, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState, createElement } from 'react';
 import classnames from 'classnames';
 import { noop as noop$1, keysToCamelCase, findBy, isPresent } from '@bigbinary/neeto-cist';
 import { Delete, LeftArrow, MenuHorizontal } from '@bigbinary/neeto-icons';
-import { Toastr, Typography, Button, Switch, Input, Spinner, Modal as Modal$1, Tab, Dropdown } from '@bigbinary/neetoui';
+import Button from '@bigbinary/neetoui/Button';
+import Typography from '@bigbinary/neetoui/Typography';
 import { pipe, values, flatten as flatten$1, map, toUpper, join, equals, isNil, isEmpty, mergeRight, mergeLeft, concat, __, inc, mergeDeepRight } from 'ramda';
 import { Trans, useTranslation } from 'react-i18next';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import i18next, { t as t$1 } from 'i18next';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
+import NeetoUIModal from '@bigbinary/neetoui/Modal';
+import Tab from '@bigbinary/neetoui/Tab';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useMutationWithInvalidation, useDebounce, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { useMutation, useQuery } from 'react-query';
 import axios from 'axios';
 import { DirectUpload } from '@rails/activestorage';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
+import Input from '@bigbinary/neetoui/Input';
+import Switch from '@bigbinary/neetoui/Switch';
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
 var css = ".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}}.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}.niu-unsplash-container {\n  height: calc(75vh - 220px) !important;\n  max-height: 355px;\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}.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9yZWFjdC1pbWFnZS1jcm9wL2Rpc3QvUmVhY3RDcm9wLmNzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21vZGFsLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zdHlsZXNoZWV0cy9hcHBsaWNhdGlvbi5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvY29tcG9uZW50cy9faW1hZ2UtbGlicmFyeS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYWJzdHJhY3RzL192YXJpYWJsZXMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlYWN0LWNyb3Auc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxXQUFXLGlCQUFpQixDQUFDLG9CQUFvQixDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsc0RBQXNELHFCQUFxQixDQUFDLHdDQUF3QyxjQUFjLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLDhEQUE4RCxhQUFhLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLHdJQUF3SSxpQkFBaUIsQ0FBQyxnRUFBZ0UsaUJBQWlCLENBQUMsMkJBQTJCLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsOEJBQThCLENBQUMsV0FBVyxDQUFDLHNDQUFzQyxDQUFDLHNCQUFzQixDQUFDLGdEQUFnRCxjQUFjLENBQUMscURBQXFELGlCQUFpQixDQUFDLDJEQUEyRCxDQUFDLGlDQUFpQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsa0JBQWtCLENBQUMsc0RBQXNELFlBQVksQ0FBQyxzSkFBc0osVUFBVSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxxQ0FBcUMsQ0FBQywyRUFBMkUsU0FBUyxDQUFDLFdBQVcsQ0FBQyxzQ0FBb0QsbUJBQW1CLENBQUMscUNBQW1ELG1CQUFtQixDQUFDLDJFQUEyRSxVQUFVLENBQUMsVUFBVSxDQUFDLHNDQUFtRCxrQkFBa0IsQ0FBQyxxQ0FBa0Qsa0JBQWtCLENBQUMsd0JBQXdCLGlCQUFpQixDQUFDLCtCQUErQixpQkFBaUIsQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsK0JBQStCLENBQUMscUNBQXFDLENBQUMsK0JBQStCLENBQUMscUNBQXFDLGlCQUFpQixDQUFDLGtCQUFrQixDQUFDLG1CQUFtQixLQUFLLENBQUMsTUFBTSxDQUFDLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsS0FBSyxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixLQUFLLENBQUMsbUJBQW1CLEtBQUssQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLGdCQUFnQixDQUFDLDBCQUEwQixLQUFLLENBQUMsT0FBTyxDQUFDLGtCQUFrQixPQUFPLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLENBQUMseUJBQXlCLE9BQU8sQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQyxpQkFBaUIsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsUUFBUSxDQUFDLFFBQVEsQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQUMseUJBQXlCLFFBQVEsQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsT0FBTyxDQUFDLE1BQU0sQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixNQUFNLENBQUMsNkNBQTZDLGNBQWMsQ0FBQyxxQkFBcUIsaUJBQWlCLENBQUMsMkJBQTJCLEtBQUssQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxlQUFlLENBQUMsMkJBQTJCLE9BQU8sQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxpQkFBaUIsQ0FBQywyQkFBMkIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLGtCQUFrQixDQUFDLDJCQUEyQixLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsZ0JBQWdCLENBQUMscUlBQXFJLFlBQVksQ0FBQyw0TkFBNE4sWUFBWSxDQUFDLHdCQUF3Qix3RUFBd0UsWUFBWSxDQUFDLHdCQUF3QixVQUFVLENBQUMsV0FBVyxDQUFDLENDQS8rSDtFQUNFLHNCQUFBO0VBQ0EsdUJBQUE7RUFDQSw0QkFBQTtFQUNBLDRCQUFBO0VBQ0EsNkJBQUE7QUNFRixDQ1BBO0VBQ0UscUNBQUE7RUFDQSxpQkNJa0M7QUZNcEMsQ0NSRTtFQUNFLFlBQUE7RUFDQSxXQUFBO0VBQ0Esb0JBQUE7S0FBQSxpQkFBQTtFQUNBLG1FQUFBO0VBQ0Esc0NBQUE7RUFDQSxrQkFBQTtFQUNBLGVBQUE7QURVSixDR3BCRTtFQUNFLFdBQUE7RUFDQSxZQUFBO0FIdUJKLENHckJJO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxjQUFBO0FIdUJOIiwic291cmNlc0NvbnRlbnQiOlsiLlJlYWN0Q3JvcHtwb3NpdGlvbjpyZWxhdGl2ZTtkaXNwbGF5OmlubGluZS1ibG9jaztjdXJzb3I6Y3Jvc3NoYWlyO292ZXJmbG93OmhpZGRlbjttYXgtd2lkdGg6MTAwJX0uUmVhY3RDcm9wICosLlJlYWN0Q3JvcCAqOjpiZWZvcmUsLlJlYWN0Q3JvcCAqOjphZnRlcntib3gtc2l6aW5nOmJvcmRlci1ib3h9LlJlYWN0Q3JvcC0tZGlzYWJsZWQsLlJlYWN0Q3JvcC0tbG9ja2Vke2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXJ7bWF4LWhlaWdodDppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+dmlkZW97ZGlzcGxheTpibG9jazttYXgtd2lkdGg6MTAwJTttYXgtaGVpZ2h0OmluaGVyaXR9LlJlYWN0Q3JvcDpub3QoLlJlYWN0Q3JvcC0tZGlzYWJsZWQpIC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyPnZpZGVve3RvdWNoLWFjdGlvbjpub25lfS5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbnt0b3VjaC1hY3Rpb246bm9uZX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtsZWZ0OjA7dHJhbnNmb3JtOnRyYW5zbGF0ZTNkKDAsIDAsIDApO2N1cnNvcjptb3ZlO2JveC1zaGFkb3c6MCAwIDAgOTk5OWVtIHJnYmEoMCwwLDAsLjUpO2JvcmRlcjoxcHggZGFzaGVkICNmZmZ9LlJlYWN0Q3JvcC0tZGlzYWJsZWQgLlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb257Y3Vyc29yOmluaGVyaXR9LlJlYWN0Q3JvcC0tY2lyY3VsYXItY3JvcCAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntib3JkZXItcmFkaXVzOjUwJTtib3gtc2hhZG93OjBweCAwcHggMXB4IDFweCAjZmZmLDAgMCAwIDk5OTllbSByZ2JhKDAsMCwwLC41KX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbjpmb2N1c3tvdXRsaW5lOm5vbmU7Ym9yZGVyLWNvbG9yOmJsdWU7Ym9yZGVyLXN0eWxlOnNvbGlkfS5SZWFjdENyb3AtLWludmlzaWJsZS1jcm9wIC5SZWFjdENyb3BfX2Nyb3Atc2VsZWN0aW9ue2Rpc3BsYXk6bm9uZX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjphZnRlciwuUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjphZnRlcntjb250ZW50OlwiXCI7ZGlzcGxheTpibG9jaztwb3NpdGlvbjphYnNvbHV0ZTtiYWNrZ3JvdW5kLWNvbG9yOnJnYmEoMjU1LDI1NSwyNTUsLjQpfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtdnQ6OmFmdGVye3dpZHRoOjFweDtoZWlnaHQ6MTAwJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3Jle2xlZnQ6MzMuMzMzMyU7bGVmdDozMy4zMzMzMzMzMzMzJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YWZ0ZXJ7bGVmdDo2Ni42NjY2JTtsZWZ0OjY2LjY2NjY2NjY2NjclfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3dpZHRoOjEwMCU7aGVpZ2h0OjFweH0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3Jle3RvcDozMy4zMzMzJTt0b3A6MzMuMzMzMzMzMzMzMyV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3RvcDo2Ni42NjY2JTt0b3A6NjYuNjY2NjY2NjY2NyV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGV7cG9zaXRpb246YWJzb2x1dGV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6OmFmdGVye3Bvc2l0aW9uOmFic29sdXRlO2NvbnRlbnQ6XCJcIjtkaXNwbGF5OmJsb2NrO3dpZHRoOjEwcHg7aGVpZ2h0OjEwcHg7YmFja2dyb3VuZC1jb2xvcjpyZ2JhKDAsMCwwLC4yKTtib3JkZXI6MXB4IHNvbGlkIHJnYmEoMjU1LDI1NSwyNTUsLjcpO291dGxpbmU6MXB4IHNvbGlkIHJnYmEoMCwwLDAsMCl9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6Zm9jdXM6OmFmdGVye2JvcmRlci1jb2xvcjpibHVlO2JhY2tncm91bmQ6IzJkYmZmZn0uUmVhY3RDcm9wIC5vcmQtbnd7dG9wOjA7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpudy1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLW53OjphZnRlcnt0b3A6MDtsZWZ0OjB9LlJlYWN0Q3JvcCAub3JkLW57dG9wOjA7bGVmdDo1MCU7bWFyZ2luLXRvcDotNXB4O21hcmdpbi1sZWZ0Oi01cHg7Y3Vyc29yOm4tcmVzaXplfS5SZWFjdENyb3AgLm9yZC1uOjphZnRlcnt0b3A6MH0uUmVhY3RDcm9wIC5vcmQtbmV7dG9wOjA7cmlnaHQ6MDttYXJnaW4tdG9wOi01cHg7bWFyZ2luLXJpZ2h0Oi01cHg7Y3Vyc29yOm5lLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtbmU6OmFmdGVye3RvcDowO3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLWV7dG9wOjUwJTtyaWdodDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tcmlnaHQ6LTVweDtjdXJzb3I6ZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLWU6OmFmdGVye3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLXNle2JvdHRvbTowO3JpZ2h0OjA7bWFyZ2luLWJvdHRvbTotNXB4O21hcmdpbi1yaWdodDotNXB4O2N1cnNvcjpzZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLXNlOjphZnRlcntib3R0b206MDtyaWdodDowfS5SZWFjdENyb3AgLm9yZC1ze2JvdHRvbTowO2xlZnQ6NTAlO21hcmdpbi1ib3R0b206LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpzLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtczo6YWZ0ZXJ7Ym90dG9tOjB9LlJlYWN0Q3JvcCAub3JkLXN3e2JvdHRvbTowO2xlZnQ6MDttYXJnaW4tYm90dG9tOi01cHg7bWFyZ2luLWxlZnQ6LTVweDtjdXJzb3I6c3ctcmVzaXplfS5SZWFjdENyb3AgLm9yZC1zdzo6YWZ0ZXJ7Ym90dG9tOjA7bGVmdDowfS5SZWFjdENyb3AgLm9yZC13e3RvcDo1MCU7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjp3LXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtdzo6YWZ0ZXJ7bGVmdDowfS5SZWFjdENyb3BfX2Rpc2FibGVkIC5SZWFjdENyb3BfX2RyYWctaGFuZGxle2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2RyYWctYmFye3Bvc2l0aW9uOmFic29sdXRlfS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ue3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLXRvcDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1le3JpZ2h0OjA7dG9wOjA7d2lkdGg6NnB4O2hlaWdodDoxMDAlO21hcmdpbi1yaWdodDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ze2JvdHRvbTowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLWJvdHRvbTotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC13e3RvcDowO2xlZnQ6MDt3aWR0aDo2cHg7aGVpZ2h0OjEwMCU7bWFyZ2luLWxlZnQ6LTNweH0uUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWJhciwuUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZSwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1iYXJ7ZGlzcGxheTpub25lfS5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtbiwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGUub3JkLWUsLlJlYWN0Q3JvcC0tZml4ZWQtYXNwZWN0IC5SZWFjdENyb3BfX2RyYWctaGFuZGxlLm9yZC1zLC5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtd3tkaXNwbGF5Om5vbmV9QG1lZGlhKHBvaW50ZXI6IGNvYXJzZSl7LlJlYWN0Q3JvcCAub3JkLW4sLlJlYWN0Q3JvcCAub3JkLWUsLlJlYWN0Q3JvcCAub3JkLXMsLlJlYWN0Q3JvcCAub3JkLXd7ZGlzcGxheTpub25lfS5SZWFjdENyb3BfX2RyYWctaGFuZGxle3dpZHRoOjI0cHg7aGVpZ2h0OjI0cHh9fVxuIiwiLm5pdS1tb2RhbCB7XG4gIHdpZHRoOiAkbml1LW1vZGFsLXdpZHRoICFpbXBvcnRhbnQ7XG4gIGhlaWdodDogJG5pdS1tb2RhbC1oZWlnaHQgIWltcG9ydGFudDtcbiAgbWF4LXdpZHRoOiAkbml1LW1vZGFsLW1heC13aWR0aCAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LW1vZGFsLW1heC1oZWlnaHQgIWltcG9ydGFudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlICFpbXBvcnRhbnQ7XG59XG4iLCJAaW1wb3J0IFwicmVhY3QtaW1hZ2UtY3JvcC9kaXN0L1JlYWN0Q3JvcC5jc3NcIjtcblxuLy9BYnN0cmFjdHNcbkBpbXBvcnQgXCJhYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi8vQ29tcG9uZW50c1xuQGltcG9ydCBcIi4vY29tcG9uZW50cy9tb2RhbFwiO1xuQGltcG9ydCBcIi4vY29tcG9uZW50cy9pbWFnZS1saWJyYXJ5XCI7XG5AaW1wb3J0IFwiLi9jb21wb25lbnRzL3JlYWN0LWNyb3BcIjtcbiIsIi5uaXUtdW5zcGxhc2gtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiBjYWxjKCN7JG5pdS1tb2RhbC1oZWlnaHR9IC0gI3skbml1LW1vZGFsLWhlYWRlci1oZWlnaHR9KSAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0O1xuXG4gIGltZyB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIGFuaW1hdGlvbjogZmFkZS1pbiAxLjJzIDFzIGN1YmljLWJlemllcigwLjM5LCAwLjU3NSwgMC41NjUsIDEpIGJvdGg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxufVxuIiwiJG5pdS1tb2RhbC13aWR0aDogOTV2dztcbiRuaXUtbW9kYWwtaGVpZ2h0OiA3NXZoO1xuJG5pdS1tb2RhbC1tYXgtd2lkdGg6IDExNTJweDtcbiRuaXUtbW9kYWwtbWF4LWhlaWdodDogNTc2cHg7XG4kbml1LW1vZGFsLWhlYWRlci1oZWlnaHQ6IDIyMHB4O1xuXG4kbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0OiAzNTVweDtcbiIsIi5SZWFjdENyb3Age1xuICAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG5cbiAgICBpbWcge1xuICAgICAgaGVpZ2h0OiBhdXRvO1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAxMDAlO1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuICB9XG59XG4iXX0= */";
 n(css,{});
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
 function _typeof$2(o) {
   "@babel/helpers - typeof";
 
@@ -728,9 +722,9 @@ function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Sy
 
 function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -947,7 +941,7 @@ function pickerOptionsFromAccept(accept) {
           mimeType = _ref5[0],
           ext = _ref5[1];
 
-      return _objectSpread$4(_objectSpread$4({}, agg), {}, _defineProperty$2({}, mimeType, ext));
+      return _objectSpread$b(_objectSpread$b({}, agg), {}, _defineProperty$2({}, mimeType, ext));
     }, {});
     return [{
       // description is required due to https://crbug.com/1264708
@@ -1060,9 +1054,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -1098,7 +1092,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
-  return /*#__PURE__*/React.createElement(Fragment, null, children(_objectSpread$3(_objectSpread$3({}, props), {}, {
+  return /*#__PURE__*/require$$0.createElement(Fragment, null, children(_objectSpread$a(_objectSpread$a({}, props), {}, {
     open: open
   })));
 });
@@ -1471,7 +1465,7 @@ var initialState = {
 function useDropzone() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaultProps$props = _objectSpread$3(_objectSpread$3({}, defaultProps), props),
+  var _defaultProps$props = _objectSpread$a(_objectSpread$a({}, defaultProps), props),
       accept = _defaultProps$props.accept,
       disabled = _defaultProps$props.disabled,
       getFilesFromEvent = _defaultProps$props.getFilesFromEvent,
@@ -1896,7 +1890,7 @@ function useDropzone() {
           onDrop = _ref2.onDrop,
           rest = _objectWithoutProperties$1(_ref2, _excluded3);
 
-      return _objectSpread$3(_objectSpread$3(_defineProperty$1({
+      return _objectSpread$a(_objectSpread$a(_defineProperty$1({
         onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
         onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
         onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -1935,10 +1929,10 @@ function useDropzone() {
         tabIndex: -1
       }, refKey, inputRef);
 
-      return _objectSpread$3(_objectSpread$3({}, inputProps), rest);
+      return _objectSpread$a(_objectSpread$a({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
-  return _objectSpread$3(_objectSpread$3({}, state), {}, {
+  return _objectSpread$a(_objectSpread$a({}, state), {}, {
     isFocused: isFocused && !disabled,
     getRootProps: getRootProps,
     getInputProps: getInputProps,
@@ -1957,40 +1951,40 @@ function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
     case "focus":
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$a(_objectSpread$a({}, state), {}, {
         isFocused: true
       });
 
     case "blur":
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$a(_objectSpread$a({}, state), {}, {
         isFocused: false
       });
 
     case "openDialog":
-      return _objectSpread$3(_objectSpread$3({}, initialState), {}, {
+      return _objectSpread$a(_objectSpread$a({}, initialState), {}, {
         isFileDialogActive: true
       });
 
     case "closeDialog":
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$a(_objectSpread$a({}, state), {}, {
         isFileDialogActive: false
       });
 
     case "setDraggedFiles":
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$a(_objectSpread$a({}, state), {}, {
         isDragActive: action.isDragActive,
         isDragAccept: action.isDragAccept,
         isDragReject: action.isDragReject
       });
 
     case "setFiles":
-      return _objectSpread$3(_objectSpread$3({}, state), {}, {
+      return _objectSpread$a(_objectSpread$a({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections
       });
 
     case "reset":
-      return _objectSpread$3({}, initialState);
+      return _objectSpread$a({}, initialState);
 
     default:
       return state;
@@ -2052,19 +2046,24 @@ var ProgressBar = function ProgressBar(_ref) {
   var _ref$progressPercenta = _ref.progressPercentage,
     progressPercentage = _ref$progressPercenta === void 0 ? 0 : _ref$progressPercenta,
     progressValue = _ref.progressValue;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex h-full cursor-pointer items-center justify-center gap-3 border border-dashed p-5 transition-all duration-300 ease-in-out"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden dark:bg-gray-700"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-primary-600 text-2xs neeto-ui-text-primary-100 neeto-ui-rounded-full flex h-3 animate-pulse items-center justify-center font-medium leading-none transition-all duration-300 ease-in-out",
-    "data-cy": "neeto-image-uploader-progress-bar",
-    style: {
-      width: "".concat(progressPercentage, "%")
-    }
-  }, progressValue)));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex h-full cursor-pointer items-center justify-center gap-3 border border-dashed p-5 transition-all duration-300 ease-in-out",
+    children: /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden dark:bg-gray-700",
+      children: /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-bg-primary-600 text-2xs neeto-ui-text-primary-100 neeto-ui-rounded-full flex h-3 animate-pulse items-center justify-center font-medium leading-none transition-all duration-300 ease-in-out",
+        "data-cy": "neeto-image-uploader-progress-bar",
+        style: {
+          width: "".concat(progressPercentage, "%")
+        },
+        children: progressValue
+      })
+    })
+  });
 };
 
+function ownKeys$a(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageDirectUpload = function ImageDirectUpload(_ref) {
   var _ref$uploadConfig = _ref.uploadConfig,
     uploadConfig = _ref$uploadConfig === void 0 ? DEFAULT_UPLOAD_CONFIG : _ref$uploadConfig,
@@ -2082,72 +2081,79 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
     isDragActive = _useUploadDropzone.isDragActive,
     uploadProgress = _useUploadDropzone.uploadProgress;
   var shouldShowProgress = !!(uploadProgress && !equals(uploadProgress, 1));
-  return shouldShowProgress ? /*#__PURE__*/React.createElement(ProgressBar, {
+  return shouldShowProgress ? /*#__PURE__*/jsx(ProgressBar, {
     progressPercentage: uploadProgress,
     progressValue: "".concat(uploadProgress, "%")
-  }) : /*#__PURE__*/React.createElement("div", _extends$1({}, getRootProps(), {
+  }) : /*#__PURE__*/jsx("div", _objectSpread$9(_objectSpread$9({}, getRootProps()), {}, {
     className: classnames(DROPZONE_ROOT_DIV_CLASSNAME, {
       "neeto-ui-border-gray-300": !isDragActive,
       "neeto-ui-border-gray-700": isDragActive
+    }),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col space-y-1",
+      children: [!isDisabled && /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-800 text-center leading-4",
+        style: "body2",
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
+          components: {
+            span: /*#__PURE__*/jsx("span", {
+              className: "neeto-ui-text-primary-500",
+              "data-cy": "neeto-image-uploader-browse-text"
+            })
+          }
+        })
+      }), setIsAssetLibraryOpen && /*#__PURE__*/jsx(Typography, {
+        className: "text-center leading-4",
+        style: "body2",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          setIsAssetLibraryOpen(true);
+        },
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoImageUploader.imageUpload.selectImagefromImageLibrary",
+          components: {
+            span: /*#__PURE__*/jsx("span", {
+              className: "neeto-ui-text-primary-500",
+              "data-cy": "open-asset-library-button"
+            })
+          }
+        })
+      }), /*#__PURE__*/jsx("input", _objectSpread$9(_objectSpread$9({}, getInputProps()), {}, {
+        "data-cy": "neeto-image-uploader-file-input",
+        disabled: isDisabled
+      })), /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-700 text-center leading-4",
+        "data-cy": "neeto-image-uploader-restriction-message",
+        lineHeight: "snug",
+        style: "nano",
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoImageUploader.imageUpload.restrictionMessage",
+          values: {
+            fileTypes: getAllowedTypes(uploadConfig),
+            size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
+          }
+        })
+      })]
     })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col space-y-1"
-  }, !isDisabled && /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 text-center leading-4",
-    style: "body2"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
-    components: {
-      span: /*#__PURE__*/React.createElement("span", {
-        className: "neeto-ui-text-primary-500",
-        "data-cy": "neeto-image-uploader-browse-text"
-      })
-    }
-  })), setIsAssetLibraryOpen && /*#__PURE__*/React.createElement(Typography, {
-    className: "text-center leading-4",
-    style: "body2",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      setIsAssetLibraryOpen(true);
-    }
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoImageUploader.imageUpload.selectImagefromImageLibrary",
-    components: {
-      span: /*#__PURE__*/React.createElement("span", {
-        className: "neeto-ui-text-primary-500",
-        "data-cy": "open-asset-library-button"
-      })
-    }
-  })), /*#__PURE__*/React.createElement("input", _extends$1({}, getInputProps(), {
-    "data-cy": "neeto-image-uploader-file-input",
-    disabled: isDisabled
-  })), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700 text-center leading-4",
-    "data-cy": "neeto-image-uploader-restriction-message",
-    lineHeight: "snug",
-    style: "nano"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoImageUploader.imageUpload.restrictionMessage",
-    values: {
-      fileTypes: getAllowedTypes(uploadConfig),
-      size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
-    }
-  }))));
+  }));
 };
 
 var _excluded$4 = ["className"];
+function ownKeys$9(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImagePlaceholder = function ImagePlaceholder(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     props = _objectWithoutProperties$2(_ref, _excluded$4);
-  return /*#__PURE__*/React.createElement("div", _extends$1({
+  return /*#__PURE__*/jsx("div", _objectSpread$8({
     className: classnames("neeto-ui-bg-gray-200", _defineProperty$3({}, className, className))
   }, props));
 };
 
 var _excluded$3 = ["src", "className", "fallback"];
-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$2(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$3(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$8(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageWithFallback = function ImageWithFallback(_ref) {
   var src = _ref.src,
     _ref$className = _ref.className,
@@ -2166,13 +2172,13 @@ var ImageWithFallback = function ImageWithFallback(_ref) {
     };
     img.src = src;
   }, [src]);
-  return isLoaded ? /*#__PURE__*/React.createElement("img", _extends$1({}, _objectSpread$2({
+  return isLoaded ? /*#__PURE__*/jsx("img", _objectSpread$7(_objectSpread$7({}, _objectSpread$7({
     src: src
-  }, props), {
+  }, props)), {}, {
     className: "h-full w-auto object-contain"
-  })) : /*#__PURE__*/React.createElement(Fallback, _objectSpread$2({
+  })) : /*#__PURE__*/jsx(Fallback, _objectSpread$7({}, _objectSpread$7({
     className: className
-  }, props));
+  }, props)));
 };
 
 var IS_DEVELOPMENT_OR_HEROKU_ENV = process.env.RAILS_ENV === "development" || process.env.RAILS_ENV === "heroku";
@@ -2281,7 +2287,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function ownKeys$2(object, enumerableOnly) {
+function ownKeys$7(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
@@ -2300,13 +2306,13 @@ function _objectSpread2(target) {
     var source = arguments[i] != null ? arguments[i] : {};
 
     if (i % 2) {
-      ownKeys$2(Object(source), true).forEach(function (key) {
+      ownKeys$7(Object(source), true).forEach(function (key) {
         _defineProperty(target, key, source[key]);
       });
     } else if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$2(Object(source)).forEach(function (key) {
+      ownKeys$7(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -2879,8 +2885,8 @@ var isItemsCenter = function isItemsCenter(_ref4) {
 };
 
 var _excluded$2 = ["src", "className", "imageFallbackProps", "onDrop", "isDisabled", "onRemove"];
-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$3(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 ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BasicImageUploader = function BasicImageUploader(_ref) {
   var _ref$src = _ref.src,
     src = _ref$src === void 0 ? "" : _ref$src,
@@ -2898,29 +2904,31 @@ var BasicImageUploader = function BasicImageUploader(_ref) {
     _ref$onRemove = _ref.onRemove,
     onRemove = _ref$onRemove === void 0 ? noop$1 : _ref$onRemove,
     props = _objectWithoutProperties$2(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classnames(className, {
       "cursor-pointer": true,
       "cursor-not-allowed": isDisabled,
       "opacity-70": isDisabled && isNilOrEmpty(src)
-    })
-  }, isNotNilOrEmpty(src) ? /*#__PURE__*/React.createElement("div", {
-    className: IMAGE_WRAPPER_CLASSNAME
-  }, /*#__PURE__*/React.createElement(ImageWithFallback, _extends$1({}, _objectSpread$1(_objectSpread$1({}, imageFallbackProps), {}, {
-    src: src
-  }), {
-    "data-cy": "uploaded-image"
-  })), /*#__PURE__*/React.createElement(Button, {
-    className: "absolute right-3 top-3",
-    "data-cy": "basic-image-uploader-remove-button",
-    disabled: isDisabled,
-    icon: Delete,
-    size: "small",
-    onClick: onRemove
-  })) : /*#__PURE__*/React.createElement(ImageDirectUpload, _objectSpread$1(_objectSpread$1({}, props), {}, {
-    isDisabled: isDisabled,
-    onDrop: onDrop
-  })));
+    }),
+    children: isNotNilOrEmpty(src) ? /*#__PURE__*/jsxs("div", {
+      className: IMAGE_WRAPPER_CLASSNAME,
+      children: [/*#__PURE__*/jsx(ImageWithFallback, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, imageFallbackProps), {}, {
+        src: src
+      })), {}, {
+        "data-cy": "uploaded-image"
+      })), /*#__PURE__*/jsx(Button, {
+        className: "absolute right-3 top-3",
+        "data-cy": "basic-image-uploader-remove-button",
+        disabled: isDisabled,
+        icon: Delete,
+        size: "small",
+        onClick: onRemove
+      })]
+    }) : /*#__PURE__*/jsx(ImageDirectUpload, _objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, props), {}, {
+      isDisabled: isDisabled,
+      onDrop: onDrop
+    })))
+  });
 };
 
 var create = function create(payload) {
@@ -2952,10 +2960,10 @@ var ASSETS_STALE_TIME = 900000; // 15 mins
 
 var UNSPLASH_STALE_TIME = 900000;
 
-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$3(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 ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateBlob = function useCreateBlob(options) {
-  return useMutationWithInvalidation(directUploadsApi.create, _objectSpread({
+  return useMutationWithInvalidation(directUploadsApi.create, _objectSpread$5({
     keysToInvalidate: [QUERY_KEYS.ASSETS_LIST]
   }, options));
 };
@@ -3492,7 +3500,7 @@ var ReactCrop_min = {exports: {}};
 ReactCrop_min.exports;
 
 (function (module, exports) {
-	!function(e,t){module.exports=t(React);}(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})())); 
+	!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, ReactCrop_min.exports));
 
 var ReactCrop_minExports = ReactCrop_min.exports;
@@ -3505,8 +3513,12 @@ 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$3(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 useMutation(developmentApi.cropImage, options);
+  return useMutation(_objectSpread$4({
+    mutationFn: developmentApi.cropImage
+  }, options));
 };
 
 var useImageControls = function useImageControls(_ref) {
@@ -3535,17 +3547,18 @@ var useImageControls = function useImageControls(_ref) {
     }
   };
   var handleWidthChange = function handleWidthChange(width) {
-    var newWidth = Number(width);
-    if (newWidth > 0 && Math.trunc(crop.x) + newWidth <= imageRef.current.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 newHeight = newWidth / (aspectRatio.width / aspectRatio.height);
-        newHeight + Math.trunc(crop.y) <= imageRef.current.height && setCrop(mergeRight(crop, {
-          width: newWidth,
-          height: newHeight
+        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: newWidth
+          width: displayWidth
         }));
       }
     } else {
@@ -3553,17 +3566,18 @@ var useImageControls = function useImageControls(_ref) {
     }
   };
   var handleHeightChange = function handleHeightChange(height) {
-    var newHeight = Number(height);
-    if (newHeight > 0 && Math.trunc(crop.y) + newHeight <= imageRef.current.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 newWidth = newHeight * aspectRatio.width / aspectRatio.height;
-        newWidth + Math.trunc(crop.x) <= imageRef.current.width && setCrop(mergeRight(crop, {
-          height: newHeight,
-          width: newWidth
+        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: newHeight
+          height: displayHeight
         }));
       }
     } else {
@@ -3634,11 +3648,19 @@ var Controls = function Controls(_ref) {
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState(crop.height.toFixed(0)),
+  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$2(_useState, 2),
     height = _useState2[0],
     setHeight = _useState2[1];
-  var _useState3 = useState(crop.width.toFixed(0)),
+  var _useState3 = useState(getActualCropWidth(crop.width)),
     _useState4 = _slicedToArray$2(_useState3, 2),
     width = _useState4[0],
     setWidth = _useState4[1];
@@ -3667,66 +3689,73 @@ var Controls = function Controls(_ref) {
     handleWidthChange(debouncedWidth);
   }, [debouncedWidth]);
   useEffect(function () {
-    setHeight(crop.height.toFixed(2));
-    setWidth(crop.width.toFixed(2));
+    setHeight(getActualCropHeight(crop.height));
+    setWidth(getActualCropWidth(crop.width));
   }, [crop]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col p-4 md:w-2/6 "
-  }, !hideControls && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, {
-    checked: isFullImage,
-    className: "flex-grow-0",
-    label: t("neetoImageUploader.labels.selectOriginalImage"),
-    onChange: function onChange() {
-      return setIsFullImage(function (isFullImage) {
-        return !isFullImage;
-      });
-    }
-  }), /*#__PURE__*/React.createElement(Switch, {
-    checked: isAspectRatioLocked,
-    className: "mt-4 flex-grow-0",
-    disabled: isFullImage,
-    label: t("neetoImageUploader.labels.lockAspectRatio"),
-    onChange: onToggleAspectRatioLock
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "mb-2 mt-6",
-    style: "body2"
-  }, t("neetoImageUploader.imageEditor.aspectRatio")), /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-4 self-start"
-  }, /*#__PURE__*/React.createElement(Input, {
-    "data-cy": "aspect-ratio-width-input",
-    disabled: isFullImage,
-    size: "small",
-    type: "number",
-    value: aspectRatio.width,
-    onChange: withEventTargetValue(handleAspectWidthChange)
-  }), /*#__PURE__*/React.createElement(Typography, null, " : "), /*#__PURE__*/React.createElement(Input, {
-    "data-cy": "aspect-ratio-height-input",
-    disabled: isFullImage,
-    size: "small",
-    type: "number",
-    value: aspectRatio.height,
-    onChange: withEventTargetValue(handleAspectHeightChange)
-  }))), /*#__PURE__*/React.createElement(Input, {
-    className: "mt-4 flex-grow-0",
-    disabled: isFullImage,
-    label: t("neetoImageUploader.labels.width"),
-    type: "number",
-    value: width,
-    onChange: withEventTargetValue(setWidth)
-  }), /*#__PURE__*/React.createElement(Input, {
-    className: "mt-4 flex-grow-0",
-    disabled: isFullImage,
-    label: t("neetoImageUploader.labels.height"),
-    type: "number",
-    value: height,
-    onChange: withEventTargetValue(setHeight)
-  }), /*#__PURE__*/React.createElement(Button, {
-    className: "mt-6 self-start",
-    "data-cy": "neeto-image-uploader-crop-submit-button",
-    label: t("neetoImageUploader.labels.done"),
-    disabled: isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
-    onClick: handleSubmit
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col p-4 md:w-2/6 ",
+    children: [!hideControls && /*#__PURE__*/jsxs(Fragment$1, {
+      children: [/*#__PURE__*/jsx(Switch, {
+        checked: isFullImage,
+        className: "flex-grow-0",
+        label: t("neetoImageUploader.labels.selectOriginalImage"),
+        onChange: function onChange() {
+          return setIsFullImage(function (isFullImage) {
+            return !isFullImage;
+          });
+        }
+      }), /*#__PURE__*/jsx(Switch, {
+        checked: isAspectRatioLocked,
+        className: "mt-4 flex-grow-0",
+        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)
+        })]
+      })]
+    }), /*#__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__*/jsx(Button, {
+      className: "mt-6 self-start",
+      "data-cy": "neeto-image-uploader-crop-submit-button",
+      label: t("neetoImageUploader.labels.done"),
+      disabled: isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
+      onClick: handleSubmit
+    })]
+  });
 };
 
 var ImageEditor = function ImageEditor(_ref) {
@@ -3797,57 +3826,61 @@ var ImageEditor = function ImageEditor(_ref) {
       url: newURL
     }));
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full flex-col gap-4 px-8 py-12"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "self-start",
-    "data-cy": "image-editor-back-button",
-    icon: LeftArrow,
-    iconPosition: "left",
-    style: "text",
-    onClick: handleReset
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto"
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "imageEditor",
-    ref: wrapperRef,
-    className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
-      "items-center": isItemsCenter({
-        wrapperRef: wrapperRef,
-        imageRef: imageRef
-      })
-    })
-  }, /*#__PURE__*/React.createElement(ReactCrop, {
-    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
-  }, /*#__PURE__*/React.createElement("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,
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex h-full flex-col gap-4 px-8 py-12",
+    children: [/*#__PURE__*/jsx(Button, {
+      className: "self-start",
+      "data-cy": "image-editor-back-button",
+      icon: LeftArrow,
+      iconPosition: "left",
+      style: "text",
+      onClick: handleReset
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto",
+      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", {
+          "items-center": isItemsCenter({
+            wrapperRef: wrapperRef,
+            imageRef: imageRef
+          })
+        }),
+        children: /*#__PURE__*/jsx(ReactCrop, {
+          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", {
+            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
+              });
+            }
+          })
+        })
+      }), /*#__PURE__*/jsx(Controls, {
+        aspectRatio: aspectRatio,
+        crop: crop,
+        handleSubmit: handleSubmit,
+        imageRef: imageRef,
+        isAspectRatioLocked: isAspectRatioLocked,
+        isFullImage: isFullImage,
+        setAspectRatio: setAspectRatio,
         setCrop: setCrop,
-        cropAspectRatio: cropAspectRatio
-      });
-    }
-  }))), /*#__PURE__*/React.createElement(Controls, {
-    aspectRatio: aspectRatio,
-    crop: crop,
-    handleSubmit: handleSubmit,
-    imageRef: imageRef,
-    isAspectRatioLocked: isAspectRatioLocked,
-    isFullImage: isFullImage,
-    setAspectRatio: setAspectRatio,
-    setCrop: setCrop,
-    setIsFullImage: setIsFullImage,
-    hideControls: isPresent(fixedAspectRatio),
-    setAspectRatioLocked: setIsAspectRatioLocked
-  })));
+        setIsFullImage: setIsFullImage,
+        hideControls: isPresent(fixedAspectRatio),
+        setAspectRatioLocked: setIsAspectRatioLocked
+      })]
+    })]
+  });
 };
 
 var fetch = function fetch(_ref) {
@@ -3867,20 +3900,24 @@ var imagesApi = {
   fetch: fetch
 };
 
+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$3(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,
     page = _ref.page,
     per = _ref.per;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.ASSETS_LIST], function () {
-    return imagesApi.fetch({
-      searchTerm: searchTerm,
-      url: url,
-      page: page,
-      per: per
-    });
-  }, mergeRight({
+  return useQuery(_objectSpread$3({
+    queryKey: [QUERY_KEYS.ASSETS_LIST],
+    queryFn: function queryFn() {
+      return imagesApi.fetch({
+        searchTerm: searchTerm,
+        url: url,
+        page: page,
+        per: per
+      });
+    },
     staleTime: ASSETS_STALE_TIME
   }, options));
 };
@@ -4181,7 +4218,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 = React;
+	var _react = require$$0;
 
 	var _react2 = _interopRequireDefault(_react);
 
@@ -4486,7 +4523,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _class, _temp2;
 
-var _react = React;
+var _react = require$$0;
 
 var _react2 = _interopRequireDefault(_react);
 
@@ -4656,53 +4693,61 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
     handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? noop$1 : _ref$handleUnsplashIm;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var Loader = /*#__PURE__*/React.createElement("div", {
-    className: "flex justify-center"
-  }, /*#__PURE__*/React.createElement(Spinner, null));
-  return /*#__PURE__*/React.createElement("div", {
-    className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll"
-  }, /*#__PURE__*/React.createElement(_default, {
-    hasMore: hasMore,
-    loadMore: loadMore,
-    pack: true,
-    position: true,
-    className: "w-full",
-    loader: Loader,
-    sizes: INFINITE_SCROLLER_SIZES,
-    style: INFINITE_SCROLLER_STYLE,
-    useWindow: false
-  }, images.map(function (image, index) {
-    var _image$urls, _image$user, _image$user2;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
-      key: image.id
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "relative w-full",
-      style: {
-        paddingBottom: "".concat(image.height / image.width * 100, "%")
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
-      id: "unsplashImage".concat(image.id)
-    }, tab === TABS[1].key && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
-      "data-cy": "niu-unsplash-image-".concat(index),
-      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__*/React.createElement("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 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
-      rel: "noreferrer",
-      target: "_blank"
-    }, 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__*/React.createElement("img", {
-      "data-cy": "niu-library-image-".concat(index),
-      src: image === null || image === void 0 ? void 0 : image.url,
-      onClick: function onClick() {
-        return setSelectedImage(image);
-      }
-    }))));
-  })));
+  var Loader = /*#__PURE__*/jsx("div", {
+    className: "flex justify-center",
+    children: /*#__PURE__*/jsx(Spinner, {})
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll",
+    children: /*#__PURE__*/jsx(_default, {
+      hasMore: hasMore,
+      loadMore: loadMore,
+      pack: true,
+      position: true,
+      className: "w-full",
+      loader: Loader,
+      sizes: INFINITE_SCROLLER_SIZES,
+      style: INFINITE_SCROLLER_STYLE,
+      useWindow: false,
+      children: images.map(function (image, index) {
+        var _image$urls, _image$user, _image$user2;
+        return /*#__PURE__*/jsx("div", {
+          className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
+          children: /*#__PURE__*/jsx("div", {
+            className: "relative w-full",
+            style: {
+              paddingBottom: "".concat(image.height / image.width * 100, "%")
+            },
+            children: /*#__PURE__*/jsxs("div", {
+              className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
+              id: "unsplashImage".concat(image.id),
+              children: [tab === TABS[1].key && /*#__PURE__*/jsxs(Fragment$1, {
+                children: [/*#__PURE__*/jsx("img", {
+                  "data-cy": "niu-unsplash-image-".concat(index),
+                  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 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
+                  rel: "noreferrer",
+                  target: "_blank",
+                  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__*/jsx("img", {
+                "data-cy": "niu-library-image-".concat(index),
+                src: image === null || image === void 0 ? void 0 : image.url,
+                onClick: function onClick() {
+                  return setSelectedImage(image);
+                }
+              })]
+            })
+          })
+        }, image.id);
+      })
+    })
+  });
 };
 
 var Images = function Images(_ref) {
@@ -4763,12 +4808,13 @@ var Images = function Images(_ref) {
     refetch();
   }, [debouncedQuery]);
   if (error) {
-    return /*#__PURE__*/React.createElement(Typography, {
+    return /*#__PURE__*/jsx(Typography, {
       className: "mt-9 flex justify-center",
-      style: "body2"
-    }, t("neetoImageUploader.unsplash.errorMessage"));
+      style: "body2",
+      children: t("neetoImageUploader.unsplash.errorMessage")
+    });
   }
-  return /*#__PURE__*/React.createElement(InfiniteScroller, {
+  return /*#__PURE__*/jsx(InfiniteScroller, {
     hasMore: hasMore,
     images: images,
     loadMore: loadMore,
@@ -4798,17 +4844,21 @@ 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$3(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_KEYS.UNSPLASH_LIST;
 var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
   var pageNo = _ref.pageNo,
     query = _ref.query;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([UNSPLASH_LIST], function () {
-    return unsplashApi.searchUnsplashImages({
-      pageNo: pageNo,
-      query: query
-    });
-  }, mergeRight({
+  return useQuery(_objectSpread$2({
+    queryKey: [UNSPLASH_LIST],
+    queryFn: function queryFn() {
+      return unsplashApi.searchUnsplashImages({
+        pageNo: pageNo,
+        query: query
+      });
+    },
     staleTime: UNSPLASH_STALE_TIME
   }, options));
 };
@@ -4969,12 +5019,13 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     refetch();
   }, [debouncedQuery]);
   if (error) {
-    return /*#__PURE__*/React.createElement(Typography, {
+    return /*#__PURE__*/jsx(Typography, {
       className: "mt-9 flex justify-center",
-      style: "body2"
-    }, t("neetoImageUploader.unsplash.errorMessage"));
+      style: "body2",
+      children: t("neetoImageUploader.unsplash.errorMessage")
+    });
   }
-  return /*#__PURE__*/React.createElement(InfiniteScroller, {
+  return /*#__PURE__*/jsx(InfiniteScroller, {
     handleUnsplashImageSelect: handleUnsplashImageSelect,
     hasMore: hasMore,
     images: images,
@@ -4999,33 +5050,36 @@ var ImageLibrary = function ImageLibrary(_ref) {
   useEffect(function () {
     setQuery("");
   }, [tab]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full pb-2 pl-6 pt-1"
-  }, /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    className: "mb-4 mr-6",
-    "data-cy": "niu-unsplash-image-picker-search-input",
-    name: "text",
-    placeholder: inputPlaceHolder,
-    value: query,
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
-      return setQuery(value);
-    }
-  }), tab === TABS[0].key ? /*#__PURE__*/React.createElement(Images, {
-    debouncedQuery: debouncedQuery,
-    query: query,
-    setSelectedImage: setSelectedImage
-  }) : /*#__PURE__*/React.createElement(UnsplashLibrary, {
-    debouncedQuery: debouncedQuery,
-    query: query,
-    setActiveTab: setActiveTab,
-    setIsUploading: setIsUploading,
-    setSelectedImage: setSelectedImage
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full pb-2 pl-6 pt-1",
+    children: [/*#__PURE__*/jsx(Input, {
+      autoFocus: true,
+      className: "mb-4 mr-6",
+      "data-cy": "niu-unsplash-image-picker-search-input",
+      name: "text",
+      placeholder: inputPlaceHolder,
+      value: query,
+      onChange: function onChange(_ref2) {
+        var value = _ref2.target.value;
+        return setQuery(value);
+      }
+    }), tab === TABS[0].key ? /*#__PURE__*/jsx(Images, {
+      debouncedQuery: debouncedQuery,
+      query: query,
+      setSelectedImage: setSelectedImage
+    }) : /*#__PURE__*/jsx(UnsplashLibrary, {
+      debouncedQuery: debouncedQuery,
+      query: query,
+      setActiveTab: setActiveTab,
+      setIsUploading: setIsUploading,
+      setSelectedImage: setSelectedImage
+    })]
+  });
 };
 
 var _excluded$1 = ["key"];
+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$3(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 Modal = function Modal(_ref) {
   var isOpen = _ref.isOpen,
     _ref$onClose = _ref.onClose,
@@ -5108,79 +5162,99 @@ var Modal = function Modal(_ref) {
   useEffect(function () {
     setActiveTab(TABS[0].key);
   }, [isOpen]);
-  return /*#__PURE__*/React.createElement(Modal$1, {
+  return /*#__PURE__*/jsxs(NeetoUIModal, {
     isOpen: isOpen,
     className: "niu-modal",
     size: "large",
-    onClose: handleCloseModal
-  }, isUploading && /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50"
-  }, /*#__PURE__*/React.createElement(Spinner, null)), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/React.createElement("div", _extends$1({
-    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()), /*#__PURE__*/React.createElement(Typography, null, t("neetoImageUploader.common.dropHere"))), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/React.createElement(ImageEditor, {
-    fixedAspectRatio: fixedAspectRatio,
-    handleImageEditComplete: handleImageEditComplete,
-    handleReset: function handleReset() {
-      return setSelectedImage({});
-    },
-    image: selectedImage,
-    signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
-  }) : /*#__PURE__*/React.createElement("div", _extends$1({
-    className: "h-full flex-col"
-  }, getRootProps({
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    }
-  })), /*#__PURE__*/React.createElement(Modal$1.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("neetoImageUploader.common.imageLibrary"))), /*#__PURE__*/React.createElement("div", {
-    className: "px-6 py-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center justify-between gap-2 sm:flex-row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2"
-  }, /*#__PURE__*/React.createElement(Tab, {
-    size: "small"
-  }, TABS.map(function (tab) {
-    return /*#__PURE__*/React.createElement(Tab.Item, {
-      active: activeTab === tab.key,
-      "data-cy": tab.dataCy,
-      key: tab.key,
-      onClick: function onClick() {
-        return setActiveTab(tab.key);
-      }
-    }, tab.label);
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2"
-  }, options.map(function (_ref2) {
-    var key = _ref2.key,
-      otherProps = _objectWithoutProperties$2(_ref2, _excluded$1);
-    return /*#__PURE__*/React.createElement(Button, _extends$1({}, otherProps, {
-      key: key,
-      size: "small"
-    }));
-  })))), /*#__PURE__*/React.createElement(ImageLibrary, {
-    setActiveTab: setActiveTab,
-    setIsUploading: setIsUploading,
-    setSelectedImage: setSelectedImage,
-    tab: activeTab
-  }), equals(activeTab, TABS[1].key) && /*#__PURE__*/React.createElement(Modal$1.Footer, {
-    className: "flex items-center justify-center gap-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
-    components: {
-      a: /*#__PURE__*/React.createElement("a", {
-        href: UNSPLASH_URL,
-        rel: "noreferrer",
-        target: "_blank"
+    onClose: handleCloseModal,
+    children: [isUploading && /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    }), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsx("div", _objectSpread$1(_objectSpread$1({
+      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__*/jsx(Typography, {
+        children: t("neetoImageUploader.common.dropHere")
       })
-    }
-  })))), /*#__PURE__*/React.createElement("input", getInputProps()));
+    })), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsx(ImageEditor, {
+      fixedAspectRatio: fixedAspectRatio,
+      handleImageEditComplete: handleImageEditComplete,
+      handleReset: function handleReset() {
+        return setSelectedImage({});
+      },
+      image: selectedImage,
+      signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
+    }) : /*#__PURE__*/jsxs("div", _objectSpread$1(_objectSpread$1({
+      className: "h-full flex-col"
+    }, getRootProps({
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    })), {}, {
+      children: [/*#__PURE__*/jsx(NeetoUIModal.Header, {
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "h2",
+          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$2(_ref2, _excluded$1);
+              return /*#__PURE__*/createElement(Button, _objectSpread$1(_objectSpread$1({}, otherProps), {}, {
+                key: key,
+                size: "small"
+              }));
+            })
+          })]
+        })
+      }), /*#__PURE__*/jsx(ImageLibrary, {
+        setActiveTab: setActiveTab,
+        setIsUploading: setIsUploading,
+        setSelectedImage: setSelectedImage,
+        tab: activeTab
+      }), equals(activeTab, TABS[1].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
+        className: "flex items-center justify-center gap-2",
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
+            components: {
+              a: /*#__PURE__*/jsx("a", {
+                href: UNSPLASH_URL,
+                rel: "noreferrer",
+                target: "_blank"
+              })
+            }
+          })
+        })
+      })]
+    })), /*#__PURE__*/jsx("input", _objectSpread$1({}, getInputProps()))]
+  });
 };
 
 var _excluded = ["key", "label"];
+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$3(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 Menu = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
 var ImageUploader = function ImageUploader(_ref) {
@@ -5279,45 +5353,50 @@ var ImageUploader = function ImageUploader(_ref) {
     onClick: handleDelete,
     "data-cy": "image-uploader-remove-button"
   }];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classnames(className, {
       "cursor-pointer": true
-    })
-  }, isNotNilOrEmpty(image.url) ? /*#__PURE__*/React.createElement("div", {
-    className: IMAGE_WRAPPER_CLASSNAME,
-    "data-cy": "image-uploader-wrapper"
-  }, /*#__PURE__*/React.createElement(ImageWithFallback, {
-    className: "h-full w-full",
-    "data-cy": "uploaded-image",
-    src: image.url
-  }), /*#__PURE__*/React.createElement(Dropdown, {
-    buttonProps: {
-      className: "absolute right-3 top-3"
-    },
-    buttonSize: "small",
-    buttonStyle: "primary",
-    icon: MenuHorizontal
-  }, /*#__PURE__*/React.createElement(Menu, null, options.map(function (_ref2) {
-    var key = _ref2.key,
-      label = _ref2.label,
-      otherProps = _objectWithoutProperties$2(_ref2, _excluded);
-    return /*#__PURE__*/React.createElement(MenuItem.Button, _extends$1({}, otherProps, {
-      key: key
-    }), label);
-  })))) : /*#__PURE__*/React.createElement(ImageDirectUpload, {
-    setIsAssetLibraryOpen: setIsAssetLibraryOpen,
-    isDisabled: isPresent(fixedAspectRatio),
-    uploadConfig: uploadConfigWithDefaults,
-    onDrop: uploadFile
-  }), /*#__PURE__*/React.createElement(Modal, {
-    fixedAspectRatio: fixedAspectRatio,
-    isOpen: isAssetLibraryOpen,
-    uploadConfig: uploadConfigWithDefaults,
-    onClose: function onClose() {
-      return setIsAssetLibraryOpen(false);
-    },
-    onUploadComplete: handleImageSelectionFromLibrary
-  }));
+    }),
+    children: [isNotNilOrEmpty(image.url) ? /*#__PURE__*/jsxs("div", {
+      className: IMAGE_WRAPPER_CLASSNAME,
+      "data-cy": "image-uploader-wrapper",
+      children: [/*#__PURE__*/jsx(ImageWithFallback, {
+        className: "h-full w-full",
+        "data-cy": "uploaded-image",
+        src: image.url
+      }), /*#__PURE__*/jsx(Dropdown, {
+        buttonProps: {
+          className: "absolute right-3 top-3"
+        },
+        buttonSize: "small",
+        buttonStyle: "primary",
+        icon: MenuHorizontal,
+        children: /*#__PURE__*/jsx(Menu, {
+          children: options.map(function (_ref2) {
+            var key = _ref2.key,
+              label = _ref2.label,
+              otherProps = _objectWithoutProperties$2(_ref2, _excluded);
+            return /*#__PURE__*/createElement(MenuItem.Button, _objectSpread(_objectSpread({}, otherProps), {}, {
+              key: key
+            }), label);
+          })
+        })
+      })]
+    }) : /*#__PURE__*/jsx(ImageDirectUpload, {
+      setIsAssetLibraryOpen: setIsAssetLibraryOpen,
+      isDisabled: isPresent(fixedAspectRatio),
+      uploadConfig: uploadConfigWithDefaults,
+      onDrop: uploadFile
+    }), /*#__PURE__*/jsx(Modal, {
+      fixedAspectRatio: fixedAspectRatio,
+      isOpen: isAssetLibraryOpen,
+      uploadConfig: uploadConfigWithDefaults,
+      onClose: function onClose() {
+        return setIsAssetLibraryOpen(false);
+      },
+      onUploadComplete: handleImageSelectionFromLibrary
+    })]
+  });
 };
 
 var useImageUpload = function useImageUpload() {