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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState } from 'react';
1
+ import require$$0, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState, createElement } from 'react';
2
2
  import classnames from 'classnames';
3
3
  import { noop as noop$1, keysToCamelCase, findBy, isPresent } from '@bigbinary/neeto-cist';
4
4
  import { Delete, LeftArrow, MenuHorizontal } from '@bigbinary/neeto-icons';
@@ -9,12 +9,13 @@ import { Trans, useTranslation } from 'react-i18next';
9
9
  import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
10
10
  import i18next, { t as t$1 } from 'i18next';
11
11
  import Toastr from '@bigbinary/neetoui/Toastr';
12
+ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
12
13
  import Dropdown from '@bigbinary/neetoui/Dropdown';
13
14
  import NeetoUIModal from '@bigbinary/neetoui/Modal';
14
15
  import Tab from '@bigbinary/neetoui/Tab';
15
16
  import Spinner from '@bigbinary/neetoui/Spinner';
17
+ import { useMutation, useQuery } from '@tanstack/react-query';
16
18
  import { useMutationWithInvalidation, useDebounce, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
17
- import { useMutation, useQuery } from 'react-query';
18
19
  import axios from 'axios';
19
20
  import { DirectUpload } from '@rails/activestorage';
20
21
  import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
@@ -26,21 +27,6 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
26
27
  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= */";
27
28
  n(css,{});
28
29
 
29
- function _extends$1() {
30
- _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
31
- for (var i = 1; i < arguments.length; i++) {
32
- var source = arguments[i];
33
- for (var key in source) {
34
- if (Object.prototype.hasOwnProperty.call(source, key)) {
35
- target[key] = source[key];
36
- }
37
- }
38
- }
39
- return target;
40
- };
41
- return _extends$1.apply(this, arguments);
42
- }
43
-
44
30
  function _typeof$2(o) {
45
31
  "@babel/helpers - typeof";
46
32
 
@@ -736,9 +722,9 @@ function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Sy
736
722
 
737
723
  function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
738
724
 
739
- 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; }
725
+ 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; }
740
726
 
741
- 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; }
727
+ 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; }
742
728
 
743
729
  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; }
744
730
 
@@ -955,7 +941,7 @@ function pickerOptionsFromAccept(accept) {
955
941
  mimeType = _ref5[0],
956
942
  ext = _ref5[1];
957
943
 
958
- return _objectSpread$4(_objectSpread$4({}, agg), {}, _defineProperty$2({}, mimeType, ext));
944
+ return _objectSpread$b(_objectSpread$b({}, agg), {}, _defineProperty$2({}, mimeType, ext));
959
945
  }, {});
960
946
  return [{
961
947
  // description is required due to https://crbug.com/1264708
@@ -1068,9 +1054,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
1068
1054
 
1069
1055
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
1070
1056
 
1071
- 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; }
1057
+ 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; }
1072
1058
 
1073
- 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; }
1059
+ 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; }
1074
1060
 
1075
1061
  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; }
1076
1062
 
@@ -1106,7 +1092,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
1106
1092
  };
1107
1093
  }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
1108
1094
 
1109
- return /*#__PURE__*/React.createElement(Fragment, null, children(_objectSpread$3(_objectSpread$3({}, props), {}, {
1095
+ return /*#__PURE__*/require$$0.createElement(Fragment, null, children(_objectSpread$a(_objectSpread$a({}, props), {}, {
1110
1096
  open: open
1111
1097
  })));
1112
1098
  });
@@ -1479,7 +1465,7 @@ var initialState = {
1479
1465
  function useDropzone() {
1480
1466
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
1481
1467
 
1482
- var _defaultProps$props = _objectSpread$3(_objectSpread$3({}, defaultProps), props),
1468
+ var _defaultProps$props = _objectSpread$a(_objectSpread$a({}, defaultProps), props),
1483
1469
  accept = _defaultProps$props.accept,
1484
1470
  disabled = _defaultProps$props.disabled,
1485
1471
  getFilesFromEvent = _defaultProps$props.getFilesFromEvent,
@@ -1904,7 +1890,7 @@ function useDropzone() {
1904
1890
  onDrop = _ref2.onDrop,
1905
1891
  rest = _objectWithoutProperties$1(_ref2, _excluded3);
1906
1892
 
1907
- return _objectSpread$3(_objectSpread$3(_defineProperty$1({
1893
+ return _objectSpread$a(_objectSpread$a(_defineProperty$1({
1908
1894
  onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
1909
1895
  onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
1910
1896
  onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -1943,10 +1929,10 @@ function useDropzone() {
1943
1929
  tabIndex: -1
1944
1930
  }, refKey, inputRef);
1945
1931
 
1946
- return _objectSpread$3(_objectSpread$3({}, inputProps), rest);
1932
+ return _objectSpread$a(_objectSpread$a({}, inputProps), rest);
1947
1933
  };
1948
1934
  }, [inputRef, accept, multiple, onDropCb, disabled]);
1949
- return _objectSpread$3(_objectSpread$3({}, state), {}, {
1935
+ return _objectSpread$a(_objectSpread$a({}, state), {}, {
1950
1936
  isFocused: isFocused && !disabled,
1951
1937
  getRootProps: getRootProps,
1952
1938
  getInputProps: getInputProps,
@@ -1965,40 +1951,40 @@ function reducer(state, action) {
1965
1951
  /* istanbul ignore next */
1966
1952
  switch (action.type) {
1967
1953
  case "focus":
1968
- return _objectSpread$3(_objectSpread$3({}, state), {}, {
1954
+ return _objectSpread$a(_objectSpread$a({}, state), {}, {
1969
1955
  isFocused: true
1970
1956
  });
1971
1957
 
1972
1958
  case "blur":
1973
- return _objectSpread$3(_objectSpread$3({}, state), {}, {
1959
+ return _objectSpread$a(_objectSpread$a({}, state), {}, {
1974
1960
  isFocused: false
1975
1961
  });
1976
1962
 
1977
1963
  case "openDialog":
1978
- return _objectSpread$3(_objectSpread$3({}, initialState), {}, {
1964
+ return _objectSpread$a(_objectSpread$a({}, initialState), {}, {
1979
1965
  isFileDialogActive: true
1980
1966
  });
1981
1967
 
1982
1968
  case "closeDialog":
1983
- return _objectSpread$3(_objectSpread$3({}, state), {}, {
1969
+ return _objectSpread$a(_objectSpread$a({}, state), {}, {
1984
1970
  isFileDialogActive: false
1985
1971
  });
1986
1972
 
1987
1973
  case "setDraggedFiles":
1988
- return _objectSpread$3(_objectSpread$3({}, state), {}, {
1974
+ return _objectSpread$a(_objectSpread$a({}, state), {}, {
1989
1975
  isDragActive: action.isDragActive,
1990
1976
  isDragAccept: action.isDragAccept,
1991
1977
  isDragReject: action.isDragReject
1992
1978
  });
1993
1979
 
1994
1980
  case "setFiles":
1995
- return _objectSpread$3(_objectSpread$3({}, state), {}, {
1981
+ return _objectSpread$a(_objectSpread$a({}, state), {}, {
1996
1982
  acceptedFiles: action.acceptedFiles,
1997
1983
  fileRejections: action.fileRejections
1998
1984
  });
1999
1985
 
2000
1986
  case "reset":
2001
- return _objectSpread$3({}, initialState);
1987
+ return _objectSpread$a({}, initialState);
2002
1988
 
2003
1989
  default:
2004
1990
  return state;
@@ -2060,19 +2046,24 @@ var ProgressBar = function ProgressBar(_ref) {
2060
2046
  var _ref$progressPercenta = _ref.progressPercentage,
2061
2047
  progressPercentage = _ref$progressPercenta === void 0 ? 0 : _ref$progressPercenta,
2062
2048
  progressValue = _ref.progressValue;
2063
- return /*#__PURE__*/React.createElement("div", {
2064
- 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"
2065
- }, /*#__PURE__*/React.createElement("div", {
2066
- className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden dark:bg-gray-700"
2067
- }, /*#__PURE__*/React.createElement("div", {
2068
- 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",
2069
- "data-cy": "neeto-image-uploader-progress-bar",
2070
- style: {
2071
- width: "".concat(progressPercentage, "%")
2072
- }
2073
- }, progressValue)));
2049
+ return /*#__PURE__*/jsx("div", {
2050
+ 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",
2051
+ children: /*#__PURE__*/jsx("div", {
2052
+ className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden dark:bg-gray-700",
2053
+ children: /*#__PURE__*/jsx("div", {
2054
+ 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",
2055
+ "data-cy": "neeto-image-uploader-progress-bar",
2056
+ style: {
2057
+ width: "".concat(progressPercentage, "%")
2058
+ },
2059
+ children: progressValue
2060
+ })
2061
+ })
2062
+ });
2074
2063
  };
2075
2064
 
2065
+ 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; }
2066
+ 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; }
2076
2067
  var ImageDirectUpload = function ImageDirectUpload(_ref) {
2077
2068
  var _ref$uploadConfig = _ref.uploadConfig,
2078
2069
  uploadConfig = _ref$uploadConfig === void 0 ? DEFAULT_UPLOAD_CONFIG : _ref$uploadConfig,
@@ -2090,72 +2081,79 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
2090
2081
  isDragActive = _useUploadDropzone.isDragActive,
2091
2082
  uploadProgress = _useUploadDropzone.uploadProgress;
2092
2083
  var shouldShowProgress = !!(uploadProgress && !equals(uploadProgress, 1));
2093
- return shouldShowProgress ? /*#__PURE__*/React.createElement(ProgressBar, {
2084
+ return shouldShowProgress ? /*#__PURE__*/jsx(ProgressBar, {
2094
2085
  progressPercentage: uploadProgress,
2095
2086
  progressValue: "".concat(uploadProgress, "%")
2096
- }) : /*#__PURE__*/React.createElement("div", _extends$1({}, getRootProps(), {
2087
+ }) : /*#__PURE__*/jsx("div", _objectSpread$9(_objectSpread$9({}, getRootProps()), {}, {
2097
2088
  className: classnames(DROPZONE_ROOT_DIV_CLASSNAME, {
2098
2089
  "neeto-ui-border-gray-300": !isDragActive,
2099
2090
  "neeto-ui-border-gray-700": isDragActive
2091
+ }),
2092
+ children: /*#__PURE__*/jsxs("div", {
2093
+ className: "flex flex-col space-y-1",
2094
+ children: [!isDisabled && /*#__PURE__*/jsx(Typography, {
2095
+ className: "neeto-ui-text-gray-800 text-center leading-4",
2096
+ style: "body2",
2097
+ children: /*#__PURE__*/jsx(Trans, {
2098
+ i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
2099
+ components: {
2100
+ span: /*#__PURE__*/jsx("span", {
2101
+ className: "neeto-ui-text-primary-500",
2102
+ "data-cy": "neeto-image-uploader-browse-text"
2103
+ })
2104
+ }
2105
+ })
2106
+ }), setIsAssetLibraryOpen && /*#__PURE__*/jsx(Typography, {
2107
+ className: "text-center leading-4",
2108
+ style: "body2",
2109
+ onClick: function onClick(e) {
2110
+ e.stopPropagation();
2111
+ setIsAssetLibraryOpen(true);
2112
+ },
2113
+ children: /*#__PURE__*/jsx(Trans, {
2114
+ i18nKey: "neetoImageUploader.imageUpload.selectImagefromImageLibrary",
2115
+ components: {
2116
+ span: /*#__PURE__*/jsx("span", {
2117
+ className: "neeto-ui-text-primary-500",
2118
+ "data-cy": "open-asset-library-button"
2119
+ })
2120
+ }
2121
+ })
2122
+ }), /*#__PURE__*/jsx("input", _objectSpread$9(_objectSpread$9({}, getInputProps()), {}, {
2123
+ "data-cy": "neeto-image-uploader-file-input",
2124
+ disabled: isDisabled
2125
+ })), /*#__PURE__*/jsx(Typography, {
2126
+ className: "neeto-ui-text-gray-700 text-center leading-4",
2127
+ "data-cy": "neeto-image-uploader-restriction-message",
2128
+ lineHeight: "snug",
2129
+ style: "nano",
2130
+ children: /*#__PURE__*/jsx(Trans, {
2131
+ i18nKey: "neetoImageUploader.imageUpload.restrictionMessage",
2132
+ values: {
2133
+ fileTypes: getAllowedTypes(uploadConfig),
2134
+ size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
2135
+ }
2136
+ })
2137
+ })]
2100
2138
  })
2101
- }), /*#__PURE__*/React.createElement("div", {
2102
- className: "flex flex-col space-y-1"
2103
- }, !isDisabled && /*#__PURE__*/React.createElement(Typography, {
2104
- className: "neeto-ui-text-gray-800 text-center leading-4",
2105
- style: "body2"
2106
- }, /*#__PURE__*/React.createElement(Trans, {
2107
- i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
2108
- components: {
2109
- span: /*#__PURE__*/React.createElement("span", {
2110
- className: "neeto-ui-text-primary-500",
2111
- "data-cy": "neeto-image-uploader-browse-text"
2112
- })
2113
- }
2114
- })), setIsAssetLibraryOpen && /*#__PURE__*/React.createElement(Typography, {
2115
- className: "text-center leading-4",
2116
- style: "body2",
2117
- onClick: function onClick(e) {
2118
- e.stopPropagation();
2119
- setIsAssetLibraryOpen(true);
2120
- }
2121
- }, /*#__PURE__*/React.createElement(Trans, {
2122
- i18nKey: "neetoImageUploader.imageUpload.selectImagefromImageLibrary",
2123
- components: {
2124
- span: /*#__PURE__*/React.createElement("span", {
2125
- className: "neeto-ui-text-primary-500",
2126
- "data-cy": "open-asset-library-button"
2127
- })
2128
- }
2129
- })), /*#__PURE__*/React.createElement("input", _extends$1({}, getInputProps(), {
2130
- "data-cy": "neeto-image-uploader-file-input",
2131
- disabled: isDisabled
2132
- })), /*#__PURE__*/React.createElement(Typography, {
2133
- className: "neeto-ui-text-gray-700 text-center leading-4",
2134
- "data-cy": "neeto-image-uploader-restriction-message",
2135
- lineHeight: "snug",
2136
- style: "nano"
2137
- }, /*#__PURE__*/React.createElement(Trans, {
2138
- i18nKey: "neetoImageUploader.imageUpload.restrictionMessage",
2139
- values: {
2140
- fileTypes: getAllowedTypes(uploadConfig),
2141
- size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
2142
- }
2143
- }))));
2139
+ }));
2144
2140
  };
2145
2141
 
2146
2142
  var _excluded$4 = ["className"];
2143
+ 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; }
2144
+ 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; }
2147
2145
  var ImagePlaceholder = function ImagePlaceholder(_ref) {
2148
2146
  var _ref$className = _ref.className,
2149
2147
  className = _ref$className === void 0 ? "" : _ref$className,
2150
2148
  props = _objectWithoutProperties$2(_ref, _excluded$4);
2151
- return /*#__PURE__*/React.createElement("div", _extends$1({
2149
+ return /*#__PURE__*/jsx("div", _objectSpread$8({
2152
2150
  className: classnames("neeto-ui-bg-gray-200", _defineProperty$3({}, className, className))
2153
2151
  }, props));
2154
2152
  };
2155
2153
 
2156
2154
  var _excluded$3 = ["src", "className", "fallback"];
2157
- 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; }
2158
- 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; }
2155
+ 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; }
2156
+ 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; }
2159
2157
  var ImageWithFallback = function ImageWithFallback(_ref) {
2160
2158
  var src = _ref.src,
2161
2159
  _ref$className = _ref.className,
@@ -2174,13 +2172,13 @@ var ImageWithFallback = function ImageWithFallback(_ref) {
2174
2172
  };
2175
2173
  img.src = src;
2176
2174
  }, [src]);
2177
- return isLoaded ? /*#__PURE__*/React.createElement("img", _extends$1({}, _objectSpread$2({
2175
+ return isLoaded ? /*#__PURE__*/jsx("img", _objectSpread$7(_objectSpread$7({}, _objectSpread$7({
2178
2176
  src: src
2179
- }, props), {
2177
+ }, props)), {}, {
2180
2178
  className: "h-full w-auto object-contain"
2181
- })) : /*#__PURE__*/React.createElement(Fallback, _objectSpread$2({
2179
+ })) : /*#__PURE__*/jsx(Fallback, _objectSpread$7({}, _objectSpread$7({
2182
2180
  className: className
2183
- }, props));
2181
+ }, props)));
2184
2182
  };
2185
2183
 
2186
2184
  var IS_DEVELOPMENT_OR_HEROKU_ENV = process.env.RAILS_ENV === "development" || process.env.RAILS_ENV === "heroku";
@@ -2289,7 +2287,7 @@ function _defineProperty(obj, key, value) {
2289
2287
  return obj;
2290
2288
  }
2291
2289
 
2292
- function ownKeys$2(object, enumerableOnly) {
2290
+ function ownKeys$7(object, enumerableOnly) {
2293
2291
  var keys = Object.keys(object);
2294
2292
 
2295
2293
  if (Object.getOwnPropertySymbols) {
@@ -2308,13 +2306,13 @@ function _objectSpread2(target) {
2308
2306
  var source = arguments[i] != null ? arguments[i] : {};
2309
2307
 
2310
2308
  if (i % 2) {
2311
- ownKeys$2(Object(source), true).forEach(function (key) {
2309
+ ownKeys$7(Object(source), true).forEach(function (key) {
2312
2310
  _defineProperty(target, key, source[key]);
2313
2311
  });
2314
2312
  } else if (Object.getOwnPropertyDescriptors) {
2315
2313
  Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
2316
2314
  } else {
2317
- ownKeys$2(Object(source)).forEach(function (key) {
2315
+ ownKeys$7(Object(source)).forEach(function (key) {
2318
2316
  Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
2319
2317
  });
2320
2318
  }
@@ -2887,8 +2885,8 @@ var isItemsCenter = function isItemsCenter(_ref4) {
2887
2885
  };
2888
2886
 
2889
2887
  var _excluded$2 = ["src", "className", "imageFallbackProps", "onDrop", "isDisabled", "onRemove"];
2890
- 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; }
2891
- 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; }
2888
+ 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; }
2889
+ 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; }
2892
2890
  var BasicImageUploader = function BasicImageUploader(_ref) {
2893
2891
  var _ref$src = _ref.src,
2894
2892
  src = _ref$src === void 0 ? "" : _ref$src,
@@ -2906,29 +2904,31 @@ var BasicImageUploader = function BasicImageUploader(_ref) {
2906
2904
  _ref$onRemove = _ref.onRemove,
2907
2905
  onRemove = _ref$onRemove === void 0 ? noop$1 : _ref$onRemove,
2908
2906
  props = _objectWithoutProperties$2(_ref, _excluded$2);
2909
- return /*#__PURE__*/React.createElement("div", {
2907
+ return /*#__PURE__*/jsx("div", {
2910
2908
  className: classnames(className, {
2911
2909
  "cursor-pointer": true,
2912
2910
  "cursor-not-allowed": isDisabled,
2913
2911
  "opacity-70": isDisabled && isNilOrEmpty(src)
2914
- })
2915
- }, isNotNilOrEmpty(src) ? /*#__PURE__*/React.createElement("div", {
2916
- className: IMAGE_WRAPPER_CLASSNAME
2917
- }, /*#__PURE__*/React.createElement(ImageWithFallback, _extends$1({}, _objectSpread$1(_objectSpread$1({}, imageFallbackProps), {}, {
2918
- src: src
2919
- }), {
2920
- "data-cy": "uploaded-image"
2921
- })), /*#__PURE__*/React.createElement(Button, {
2922
- className: "absolute right-3 top-3",
2923
- "data-cy": "basic-image-uploader-remove-button",
2924
- disabled: isDisabled,
2925
- icon: Delete,
2926
- size: "small",
2927
- onClick: onRemove
2928
- })) : /*#__PURE__*/React.createElement(ImageDirectUpload, _objectSpread$1(_objectSpread$1({}, props), {}, {
2929
- isDisabled: isDisabled,
2930
- onDrop: onDrop
2931
- })));
2912
+ }),
2913
+ children: isNotNilOrEmpty(src) ? /*#__PURE__*/jsxs("div", {
2914
+ className: IMAGE_WRAPPER_CLASSNAME,
2915
+ children: [/*#__PURE__*/jsx(ImageWithFallback, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, imageFallbackProps), {}, {
2916
+ src: src
2917
+ })), {}, {
2918
+ "data-cy": "uploaded-image"
2919
+ })), /*#__PURE__*/jsx(Button, {
2920
+ className: "absolute right-3 top-3",
2921
+ "data-cy": "basic-image-uploader-remove-button",
2922
+ disabled: isDisabled,
2923
+ icon: Delete,
2924
+ size: "small",
2925
+ onClick: onRemove
2926
+ })]
2927
+ }) : /*#__PURE__*/jsx(ImageDirectUpload, _objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, props), {}, {
2928
+ isDisabled: isDisabled,
2929
+ onDrop: onDrop
2930
+ })))
2931
+ });
2932
2932
  };
2933
2933
 
2934
2934
  var create = function create(payload) {
@@ -2960,10 +2960,10 @@ var ASSETS_STALE_TIME = 900000; // 15 mins
2960
2960
 
2961
2961
  var UNSPLASH_STALE_TIME = 900000;
2962
2962
 
2963
- 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; }
2964
- 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; }
2963
+ 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; }
2964
+ 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; }
2965
2965
  var useCreateBlob = function useCreateBlob(options) {
2966
- return useMutationWithInvalidation(directUploadsApi.create, _objectSpread({
2966
+ return useMutationWithInvalidation(directUploadsApi.create, _objectSpread$5({
2967
2967
  keysToInvalidate: [QUERY_KEYS.ASSETS_LIST]
2968
2968
  }, options));
2969
2969
  };
@@ -3500,7 +3500,7 @@ var ReactCrop_min = {exports: {}};
3500
3500
  ReactCrop_min.exports;
3501
3501
 
3502
3502
  (function (module, exports) {
3503
- !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})()));
3503
+ !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})()));
3504
3504
  } (ReactCrop_min, ReactCrop_min.exports));
3505
3505
 
3506
3506
  var ReactCrop_minExports = ReactCrop_min.exports;
@@ -3513,8 +3513,12 @@ var developmentApi = {
3513
3513
  cropImage: cropImage
3514
3514
  };
3515
3515
 
3516
+ 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; }
3517
+ 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; }
3516
3518
  var useCropImage = function useCropImage(options) {
3517
- return useMutation(developmentApi.cropImage, options);
3519
+ return useMutation(_objectSpread$4({
3520
+ mutationFn: developmentApi.cropImage
3521
+ }, options));
3518
3522
  };
3519
3523
 
3520
3524
  var useImageControls = function useImageControls(_ref) {
@@ -3688,63 +3692,70 @@ var Controls = function Controls(_ref) {
3688
3692
  setHeight(getActualCropHeight(crop.height));
3689
3693
  setWidth(getActualCropWidth(crop.width));
3690
3694
  }, [crop]);
3691
- return /*#__PURE__*/React.createElement("div", {
3692
- className: "flex flex-col p-4 md:w-2/6 "
3693
- }, !hideControls && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, {
3694
- checked: isFullImage,
3695
- className: "flex-grow-0",
3696
- label: t("neetoImageUploader.labels.selectOriginalImage"),
3697
- onChange: function onChange() {
3698
- return setIsFullImage(function (isFullImage) {
3699
- return !isFullImage;
3700
- });
3701
- }
3702
- }), /*#__PURE__*/React.createElement(Switch, {
3703
- checked: isAspectRatioLocked,
3704
- className: "mt-4 flex-grow-0",
3705
- disabled: isFullImage,
3706
- label: t("neetoImageUploader.labels.lockAspectRatio"),
3707
- onChange: onToggleAspectRatioLock
3708
- }), /*#__PURE__*/React.createElement(Typography, {
3709
- className: "mb-2 mt-6",
3710
- style: "body2"
3711
- }, t("neetoImageUploader.imageEditor.aspectRatio")), /*#__PURE__*/React.createElement("div", {
3712
- className: "flex gap-4 self-start"
3713
- }, /*#__PURE__*/React.createElement(Input, {
3714
- "data-cy": "aspect-ratio-width-input",
3715
- disabled: isFullImage,
3716
- size: "small",
3717
- type: "number",
3718
- value: aspectRatio.width,
3719
- onChange: withEventTargetValue(handleAspectWidthChange)
3720
- }), /*#__PURE__*/React.createElement(Typography, null, " : "), /*#__PURE__*/React.createElement(Input, {
3721
- "data-cy": "aspect-ratio-height-input",
3722
- disabled: isFullImage,
3723
- size: "small",
3724
- type: "number",
3725
- value: aspectRatio.height,
3726
- onChange: withEventTargetValue(handleAspectHeightChange)
3727
- }))), /*#__PURE__*/React.createElement(Input, {
3728
- className: "mt-4 flex-grow-0",
3729
- disabled: isFullImage,
3730
- label: t("neetoImageUploader.labels.width"),
3731
- type: "number",
3732
- value: Math.round(width),
3733
- onChange: withEventTargetValue(setWidth)
3734
- }), /*#__PURE__*/React.createElement(Input, {
3735
- className: "mt-4 flex-grow-0",
3736
- disabled: isFullImage,
3737
- label: t("neetoImageUploader.labels.height"),
3738
- type: "number",
3739
- value: Math.round(height),
3740
- onChange: withEventTargetValue(setHeight)
3741
- }), /*#__PURE__*/React.createElement(Button, {
3742
- className: "mt-6 self-start",
3743
- "data-cy": "neeto-image-uploader-crop-submit-button",
3744
- label: t("neetoImageUploader.labels.done"),
3745
- disabled: isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
3746
- onClick: handleSubmit
3747
- }));
3695
+ return /*#__PURE__*/jsxs("div", {
3696
+ className: "flex flex-col p-4 md:w-2/6 ",
3697
+ children: [!hideControls && /*#__PURE__*/jsxs(Fragment$1, {
3698
+ children: [/*#__PURE__*/jsx(Switch, {
3699
+ checked: isFullImage,
3700
+ className: "flex-grow-0",
3701
+ label: t("neetoImageUploader.labels.selectOriginalImage"),
3702
+ onChange: function onChange() {
3703
+ return setIsFullImage(function (isFullImage) {
3704
+ return !isFullImage;
3705
+ });
3706
+ }
3707
+ }), /*#__PURE__*/jsx(Switch, {
3708
+ checked: isAspectRatioLocked,
3709
+ className: "mt-4 flex-grow-0",
3710
+ disabled: isFullImage,
3711
+ label: t("neetoImageUploader.labels.lockAspectRatio"),
3712
+ onChange: onToggleAspectRatioLock
3713
+ }), /*#__PURE__*/jsx(Typography, {
3714
+ className: "mb-2 mt-6",
3715
+ style: "body2",
3716
+ children: t("neetoImageUploader.imageEditor.aspectRatio")
3717
+ }), /*#__PURE__*/jsxs("div", {
3718
+ className: "flex gap-4 self-start",
3719
+ children: [/*#__PURE__*/jsx(Input, {
3720
+ "data-cy": "aspect-ratio-width-input",
3721
+ disabled: isFullImage,
3722
+ size: "small",
3723
+ type: "number",
3724
+ value: aspectRatio.width,
3725
+ onChange: withEventTargetValue(handleAspectWidthChange)
3726
+ }), /*#__PURE__*/jsx(Typography, {
3727
+ children: " : "
3728
+ }), /*#__PURE__*/jsx(Input, {
3729
+ "data-cy": "aspect-ratio-height-input",
3730
+ disabled: isFullImage,
3731
+ size: "small",
3732
+ type: "number",
3733
+ value: aspectRatio.height,
3734
+ onChange: withEventTargetValue(handleAspectHeightChange)
3735
+ })]
3736
+ })]
3737
+ }), /*#__PURE__*/jsx(Input, {
3738
+ className: "mt-4 flex-grow-0",
3739
+ disabled: isFullImage,
3740
+ label: t("neetoImageUploader.labels.width"),
3741
+ type: "number",
3742
+ value: Math.round(width),
3743
+ onChange: withEventTargetValue(setWidth)
3744
+ }), /*#__PURE__*/jsx(Input, {
3745
+ className: "mt-4 flex-grow-0",
3746
+ disabled: isFullImage,
3747
+ label: t("neetoImageUploader.labels.height"),
3748
+ type: "number",
3749
+ value: Math.round(height),
3750
+ onChange: withEventTargetValue(setHeight)
3751
+ }), /*#__PURE__*/jsx(Button, {
3752
+ className: "mt-6 self-start",
3753
+ "data-cy": "neeto-image-uploader-crop-submit-button",
3754
+ label: t("neetoImageUploader.labels.done"),
3755
+ disabled: isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
3756
+ onClick: handleSubmit
3757
+ })]
3758
+ });
3748
3759
  };
3749
3760
 
3750
3761
  var ImageEditor = function ImageEditor(_ref) {
@@ -3815,57 +3826,61 @@ var ImageEditor = function ImageEditor(_ref) {
3815
3826
  url: newURL
3816
3827
  }));
3817
3828
  };
3818
- return /*#__PURE__*/React.createElement("div", {
3819
- className: "flex h-full flex-col gap-4 px-8 py-12"
3820
- }, /*#__PURE__*/React.createElement(Button, {
3821
- className: "self-start",
3822
- "data-cy": "image-editor-back-button",
3823
- icon: LeftArrow,
3824
- iconPosition: "left",
3825
- style: "text",
3826
- onClick: handleReset
3827
- }), /*#__PURE__*/React.createElement("div", {
3828
- className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto"
3829
- }, /*#__PURE__*/React.createElement("div", {
3830
- id: "imageEditor",
3831
- ref: wrapperRef,
3832
- className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
3833
- "items-center": isItemsCenter({
3834
- wrapperRef: wrapperRef,
3835
- imageRef: imageRef
3836
- })
3837
- })
3838
- }, /*#__PURE__*/React.createElement(ReactCrop, {
3839
- crop: isFullImage ? null : crop,
3840
- src: image === null || image === void 0 ? void 0 : image.url,
3841
- aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
3842
- onChange: setCrop,
3843
- onComplete: setCrop
3844
- }, /*#__PURE__*/React.createElement("img", {
3845
- alt: t("neetoImageUploader.common.image"),
3846
- "data-cy": "image-editor-uploaded-image",
3847
- ref: imageRef,
3848
- src: image === null || image === void 0 ? void 0 : image.url,
3849
- onLoad: function onLoad(e) {
3850
- return onImageLoaded({
3851
- image: e.target,
3829
+ return /*#__PURE__*/jsxs("div", {
3830
+ className: "flex h-full flex-col gap-4 px-8 py-12",
3831
+ children: [/*#__PURE__*/jsx(Button, {
3832
+ className: "self-start",
3833
+ "data-cy": "image-editor-back-button",
3834
+ icon: LeftArrow,
3835
+ iconPosition: "left",
3836
+ style: "text",
3837
+ onClick: handleReset
3838
+ }), /*#__PURE__*/jsxs("div", {
3839
+ className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto",
3840
+ children: [/*#__PURE__*/jsx("div", {
3841
+ id: "imageEditor",
3842
+ ref: wrapperRef,
3843
+ className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
3844
+ "items-center": isItemsCenter({
3845
+ wrapperRef: wrapperRef,
3846
+ imageRef: imageRef
3847
+ })
3848
+ }),
3849
+ children: /*#__PURE__*/jsx(ReactCrop, {
3850
+ crop: isFullImage ? null : crop,
3851
+ src: image === null || image === void 0 ? void 0 : image.url,
3852
+ aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
3853
+ onChange: setCrop,
3854
+ onComplete: setCrop,
3855
+ children: /*#__PURE__*/jsx("img", {
3856
+ alt: t("neetoImageUploader.common.image"),
3857
+ "data-cy": "image-editor-uploaded-image",
3858
+ ref: imageRef,
3859
+ src: image === null || image === void 0 ? void 0 : image.url,
3860
+ onLoad: function onLoad(e) {
3861
+ return onImageLoaded({
3862
+ image: e.target,
3863
+ setCrop: setCrop,
3864
+ cropAspectRatio: cropAspectRatio
3865
+ });
3866
+ }
3867
+ })
3868
+ })
3869
+ }), /*#__PURE__*/jsx(Controls, {
3870
+ aspectRatio: aspectRatio,
3871
+ crop: crop,
3872
+ handleSubmit: handleSubmit,
3873
+ imageRef: imageRef,
3874
+ isAspectRatioLocked: isAspectRatioLocked,
3875
+ isFullImage: isFullImage,
3876
+ setAspectRatio: setAspectRatio,
3852
3877
  setCrop: setCrop,
3853
- cropAspectRatio: cropAspectRatio
3854
- });
3855
- }
3856
- }))), /*#__PURE__*/React.createElement(Controls, {
3857
- aspectRatio: aspectRatio,
3858
- crop: crop,
3859
- handleSubmit: handleSubmit,
3860
- imageRef: imageRef,
3861
- isAspectRatioLocked: isAspectRatioLocked,
3862
- isFullImage: isFullImage,
3863
- setAspectRatio: setAspectRatio,
3864
- setCrop: setCrop,
3865
- setIsFullImage: setIsFullImage,
3866
- hideControls: isPresent(fixedAspectRatio),
3867
- setAspectRatioLocked: setIsAspectRatioLocked
3868
- })));
3878
+ setIsFullImage: setIsFullImage,
3879
+ hideControls: isPresent(fixedAspectRatio),
3880
+ setAspectRatioLocked: setIsAspectRatioLocked
3881
+ })]
3882
+ })]
3883
+ });
3869
3884
  };
3870
3885
 
3871
3886
  var fetch = function fetch(_ref) {
@@ -3885,20 +3900,24 @@ var imagesApi = {
3885
3900
  fetch: fetch
3886
3901
  };
3887
3902
 
3903
+ 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; }
3904
+ 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; }
3888
3905
  var useFetchAssets = function useFetchAssets(_ref) {
3889
3906
  var searchTerm = _ref.searchTerm,
3890
3907
  url = _ref.url,
3891
3908
  page = _ref.page,
3892
3909
  per = _ref.per;
3893
3910
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
3894
- return useQuery([QUERY_KEYS.ASSETS_LIST], function () {
3895
- return imagesApi.fetch({
3896
- searchTerm: searchTerm,
3897
- url: url,
3898
- page: page,
3899
- per: per
3900
- });
3901
- }, mergeRight({
3911
+ return useQuery(_objectSpread$3({
3912
+ queryKey: [QUERY_KEYS.ASSETS_LIST],
3913
+ queryFn: function queryFn() {
3914
+ return imagesApi.fetch({
3915
+ searchTerm: searchTerm,
3916
+ url: url,
3917
+ page: page,
3918
+ per: per
3919
+ });
3920
+ },
3902
3921
  staleTime: ASSETS_STALE_TIME
3903
3922
  }, options));
3904
3923
  };
@@ -4199,7 +4218,7 @@ InfiniteScroll.exports;
4199
4218
 
4200
4219
  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; }; }();
4201
4220
 
4202
- var _react = React;
4221
+ var _react = require$$0;
4203
4222
 
4204
4223
  var _react2 = _interopRequireDefault(_react);
4205
4224
 
@@ -4504,7 +4523,7 @@ var _createClass = function () { function defineProperties(target, props) { for
4504
4523
 
4505
4524
  var _class, _temp2;
4506
4525
 
4507
- var _react = React;
4526
+ var _react = require$$0;
4508
4527
 
4509
4528
  var _react2 = _interopRequireDefault(_react);
4510
4529
 
@@ -4674,53 +4693,61 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
4674
4693
  handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? noop$1 : _ref$handleUnsplashIm;
4675
4694
  var _useTranslation = useTranslation(),
4676
4695
  t = _useTranslation.t;
4677
- var Loader = /*#__PURE__*/React.createElement("div", {
4678
- className: "flex justify-center"
4679
- }, /*#__PURE__*/React.createElement(Spinner, null));
4680
- return /*#__PURE__*/React.createElement("div", {
4681
- className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll"
4682
- }, /*#__PURE__*/React.createElement(_default, {
4683
- hasMore: hasMore,
4684
- loadMore: loadMore,
4685
- pack: true,
4686
- position: true,
4687
- className: "w-full",
4688
- loader: Loader,
4689
- sizes: INFINITE_SCROLLER_SIZES,
4690
- style: INFINITE_SCROLLER_STYLE,
4691
- useWindow: false
4692
- }, images.map(function (image, index) {
4693
- var _image$urls, _image$user, _image$user2;
4694
- return /*#__PURE__*/React.createElement("div", {
4695
- className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
4696
- key: image.id
4697
- }, /*#__PURE__*/React.createElement("div", {
4698
- className: "relative w-full",
4699
- style: {
4700
- paddingBottom: "".concat(image.height / image.width * 100, "%")
4701
- }
4702
- }, /*#__PURE__*/React.createElement("div", {
4703
- className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
4704
- id: "unsplashImage".concat(image.id)
4705
- }, tab === TABS[1].key && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
4706
- "data-cy": "niu-unsplash-image-".concat(index),
4707
- src: image === null || image === void 0 || (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
4708
- onClick: function onClick() {
4709
- return handleUnsplashImageSelect(image);
4710
- }
4711
- }), /*#__PURE__*/React.createElement("a", {
4712
- className: "neeto-ui-text-gray-100 absolute bottom-2 left-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
4713
- href: "https://unsplash.com/@".concat(image === null || image === void 0 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
4714
- rel: "noreferrer",
4715
- target: "_blank"
4716
- }, 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", {
4717
- "data-cy": "niu-library-image-".concat(index),
4718
- src: image === null || image === void 0 ? void 0 : image.url,
4719
- onClick: function onClick() {
4720
- return setSelectedImage(image);
4721
- }
4722
- }))));
4723
- })));
4696
+ var Loader = /*#__PURE__*/jsx("div", {
4697
+ className: "flex justify-center",
4698
+ children: /*#__PURE__*/jsx(Spinner, {})
4699
+ });
4700
+ return /*#__PURE__*/jsx("div", {
4701
+ className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll",
4702
+ children: /*#__PURE__*/jsx(_default, {
4703
+ hasMore: hasMore,
4704
+ loadMore: loadMore,
4705
+ pack: true,
4706
+ position: true,
4707
+ className: "w-full",
4708
+ loader: Loader,
4709
+ sizes: INFINITE_SCROLLER_SIZES,
4710
+ style: INFINITE_SCROLLER_STYLE,
4711
+ useWindow: false,
4712
+ children: images.map(function (image, index) {
4713
+ var _image$urls, _image$user, _image$user2;
4714
+ return /*#__PURE__*/jsx("div", {
4715
+ className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
4716
+ children: /*#__PURE__*/jsx("div", {
4717
+ className: "relative w-full",
4718
+ style: {
4719
+ paddingBottom: "".concat(image.height / image.width * 100, "%")
4720
+ },
4721
+ children: /*#__PURE__*/jsxs("div", {
4722
+ className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
4723
+ id: "unsplashImage".concat(image.id),
4724
+ children: [tab === TABS[1].key && /*#__PURE__*/jsxs(Fragment$1, {
4725
+ children: [/*#__PURE__*/jsx("img", {
4726
+ "data-cy": "niu-unsplash-image-".concat(index),
4727
+ src: image === null || image === void 0 || (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
4728
+ onClick: function onClick() {
4729
+ return handleUnsplashImageSelect(image);
4730
+ }
4731
+ }), /*#__PURE__*/jsxs("a", {
4732
+ className: "neeto-ui-text-gray-100 absolute bottom-2 left-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
4733
+ href: "https://unsplash.com/@".concat(image === null || image === void 0 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
4734
+ rel: "noreferrer",
4735
+ target: "_blank",
4736
+ children: [image === null || image === void 0 || (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
4737
+ })]
4738
+ }), tab === TABS[0].key && /*#__PURE__*/jsx("img", {
4739
+ "data-cy": "niu-library-image-".concat(index),
4740
+ src: image === null || image === void 0 ? void 0 : image.url,
4741
+ onClick: function onClick() {
4742
+ return setSelectedImage(image);
4743
+ }
4744
+ })]
4745
+ })
4746
+ })
4747
+ }, image.id);
4748
+ })
4749
+ })
4750
+ });
4724
4751
  };
4725
4752
 
4726
4753
  var Images = function Images(_ref) {
@@ -4781,12 +4808,13 @@ var Images = function Images(_ref) {
4781
4808
  refetch();
4782
4809
  }, [debouncedQuery]);
4783
4810
  if (error) {
4784
- return /*#__PURE__*/React.createElement(Typography, {
4811
+ return /*#__PURE__*/jsx(Typography, {
4785
4812
  className: "mt-9 flex justify-center",
4786
- style: "body2"
4787
- }, t("neetoImageUploader.unsplash.errorMessage"));
4813
+ style: "body2",
4814
+ children: t("neetoImageUploader.unsplash.errorMessage")
4815
+ });
4788
4816
  }
4789
- return /*#__PURE__*/React.createElement(InfiniteScroller, {
4817
+ return /*#__PURE__*/jsx(InfiniteScroller, {
4790
4818
  hasMore: hasMore,
4791
4819
  images: images,
4792
4820
  loadMore: loadMore,
@@ -4816,17 +4844,21 @@ var unsplashApi = {
4816
4844
  getUnsplashImage: getUnsplashImage
4817
4845
  };
4818
4846
 
4847
+ 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; }
4848
+ 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; }
4819
4849
  var UNSPLASH_LIST = QUERY_KEYS.UNSPLASH_LIST;
4820
4850
  var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
4821
4851
  var pageNo = _ref.pageNo,
4822
4852
  query = _ref.query;
4823
4853
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
4824
- return useQuery([UNSPLASH_LIST], function () {
4825
- return unsplashApi.searchUnsplashImages({
4826
- pageNo: pageNo,
4827
- query: query
4828
- });
4829
- }, mergeRight({
4854
+ return useQuery(_objectSpread$2({
4855
+ queryKey: [UNSPLASH_LIST],
4856
+ queryFn: function queryFn() {
4857
+ return unsplashApi.searchUnsplashImages({
4858
+ pageNo: pageNo,
4859
+ query: query
4860
+ });
4861
+ },
4830
4862
  staleTime: UNSPLASH_STALE_TIME
4831
4863
  }, options));
4832
4864
  };
@@ -4987,12 +5019,13 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
4987
5019
  refetch();
4988
5020
  }, [debouncedQuery]);
4989
5021
  if (error) {
4990
- return /*#__PURE__*/React.createElement(Typography, {
5022
+ return /*#__PURE__*/jsx(Typography, {
4991
5023
  className: "mt-9 flex justify-center",
4992
- style: "body2"
4993
- }, t("neetoImageUploader.unsplash.errorMessage"));
5024
+ style: "body2",
5025
+ children: t("neetoImageUploader.unsplash.errorMessage")
5026
+ });
4994
5027
  }
4995
- return /*#__PURE__*/React.createElement(InfiniteScroller, {
5028
+ return /*#__PURE__*/jsx(InfiniteScroller, {
4996
5029
  handleUnsplashImageSelect: handleUnsplashImageSelect,
4997
5030
  hasMore: hasMore,
4998
5031
  images: images,
@@ -5017,33 +5050,36 @@ var ImageLibrary = function ImageLibrary(_ref) {
5017
5050
  useEffect(function () {
5018
5051
  setQuery("");
5019
5052
  }, [tab]);
5020
- return /*#__PURE__*/React.createElement("div", {
5021
- className: "w-full pb-2 pl-6 pt-1"
5022
- }, /*#__PURE__*/React.createElement(Input, {
5023
- autoFocus: true,
5024
- className: "mb-4 mr-6",
5025
- "data-cy": "niu-unsplash-image-picker-search-input",
5026
- name: "text",
5027
- placeholder: inputPlaceHolder,
5028
- value: query,
5029
- onChange: function onChange(_ref2) {
5030
- var value = _ref2.target.value;
5031
- return setQuery(value);
5032
- }
5033
- }), tab === TABS[0].key ? /*#__PURE__*/React.createElement(Images, {
5034
- debouncedQuery: debouncedQuery,
5035
- query: query,
5036
- setSelectedImage: setSelectedImage
5037
- }) : /*#__PURE__*/React.createElement(UnsplashLibrary, {
5038
- debouncedQuery: debouncedQuery,
5039
- query: query,
5040
- setActiveTab: setActiveTab,
5041
- setIsUploading: setIsUploading,
5042
- setSelectedImage: setSelectedImage
5043
- }));
5053
+ return /*#__PURE__*/jsxs("div", {
5054
+ className: "w-full pb-2 pl-6 pt-1",
5055
+ children: [/*#__PURE__*/jsx(Input, {
5056
+ autoFocus: true,
5057
+ className: "mb-4 mr-6",
5058
+ "data-cy": "niu-unsplash-image-picker-search-input",
5059
+ name: "text",
5060
+ placeholder: inputPlaceHolder,
5061
+ value: query,
5062
+ onChange: function onChange(_ref2) {
5063
+ var value = _ref2.target.value;
5064
+ return setQuery(value);
5065
+ }
5066
+ }), tab === TABS[0].key ? /*#__PURE__*/jsx(Images, {
5067
+ debouncedQuery: debouncedQuery,
5068
+ query: query,
5069
+ setSelectedImage: setSelectedImage
5070
+ }) : /*#__PURE__*/jsx(UnsplashLibrary, {
5071
+ debouncedQuery: debouncedQuery,
5072
+ query: query,
5073
+ setActiveTab: setActiveTab,
5074
+ setIsUploading: setIsUploading,
5075
+ setSelectedImage: setSelectedImage
5076
+ })]
5077
+ });
5044
5078
  };
5045
5079
 
5046
5080
  var _excluded$1 = ["key"];
5081
+ 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; }
5082
+ 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; }
5047
5083
  var Modal = function Modal(_ref) {
5048
5084
  var isOpen = _ref.isOpen,
5049
5085
  _ref$onClose = _ref.onClose,
@@ -5126,79 +5162,99 @@ var Modal = function Modal(_ref) {
5126
5162
  useEffect(function () {
5127
5163
  setActiveTab(TABS[0].key);
5128
5164
  }, [isOpen]);
5129
- return /*#__PURE__*/React.createElement(NeetoUIModal, {
5165
+ return /*#__PURE__*/jsxs(NeetoUIModal, {
5130
5166
  isOpen: isOpen,
5131
5167
  className: "niu-modal",
5132
5168
  size: "large",
5133
- onClose: handleCloseModal
5134
- }, isUploading && /*#__PURE__*/React.createElement("div", {
5135
- className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50"
5136
- }, /*#__PURE__*/React.createElement(Spinner, null)), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/React.createElement("div", _extends$1({
5137
- 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"
5138
- }, getRootProps()), /*#__PURE__*/React.createElement(Typography, null, t("neetoImageUploader.common.dropHere"))), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/React.createElement(ImageEditor, {
5139
- fixedAspectRatio: fixedAspectRatio,
5140
- handleImageEditComplete: handleImageEditComplete,
5141
- handleReset: function handleReset() {
5142
- return setSelectedImage({});
5143
- },
5144
- image: selectedImage,
5145
- signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
5146
- }) : /*#__PURE__*/React.createElement("div", _extends$1({
5147
- className: "h-full flex-col"
5148
- }, getRootProps({
5149
- onClick: function onClick(event) {
5150
- return event.stopPropagation();
5151
- }
5152
- })), /*#__PURE__*/React.createElement(NeetoUIModal.Header, null, /*#__PURE__*/React.createElement(Typography, {
5153
- style: "h2"
5154
- }, t("neetoImageUploader.common.imageLibrary"))), /*#__PURE__*/React.createElement("div", {
5155
- className: "px-6 py-2"
5156
- }, /*#__PURE__*/React.createElement("div", {
5157
- className: "flex flex-col items-center justify-between gap-2 sm:flex-row"
5158
- }, /*#__PURE__*/React.createElement("div", {
5159
- className: "flex gap-2"
5160
- }, /*#__PURE__*/React.createElement(Tab, {
5161
- size: "small"
5162
- }, TABS.map(function (tab) {
5163
- return /*#__PURE__*/React.createElement(Tab.Item, {
5164
- active: activeTab === tab.key,
5165
- "data-cy": tab.dataCy,
5166
- key: tab.key,
5167
- onClick: function onClick() {
5168
- return setActiveTab(tab.key);
5169
- }
5170
- }, tab.label);
5171
- }))), /*#__PURE__*/React.createElement("div", {
5172
- className: "flex gap-2"
5173
- }, options.map(function (_ref2) {
5174
- var key = _ref2.key,
5175
- otherProps = _objectWithoutProperties$2(_ref2, _excluded$1);
5176
- return /*#__PURE__*/React.createElement(Button, _extends$1({}, otherProps, {
5177
- key: key,
5178
- size: "small"
5179
- }));
5180
- })))), /*#__PURE__*/React.createElement(ImageLibrary, {
5181
- setActiveTab: setActiveTab,
5182
- setIsUploading: setIsUploading,
5183
- setSelectedImage: setSelectedImage,
5184
- tab: activeTab
5185
- }), equals(activeTab, TABS[1].key) && /*#__PURE__*/React.createElement(NeetoUIModal.Footer, {
5186
- className: "flex items-center justify-center gap-2"
5187
- }, /*#__PURE__*/React.createElement(Typography, {
5188
- style: "body2"
5189
- }, /*#__PURE__*/React.createElement(Trans, {
5190
- i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
5191
- components: {
5192
- a: /*#__PURE__*/React.createElement("a", {
5193
- href: UNSPLASH_URL,
5194
- rel: "noreferrer",
5195
- target: "_blank"
5169
+ onClose: handleCloseModal,
5170
+ children: [isUploading && /*#__PURE__*/jsx("div", {
5171
+ className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
5172
+ children: /*#__PURE__*/jsx(Spinner, {})
5173
+ }), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsx("div", _objectSpread$1(_objectSpread$1({
5174
+ 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"
5175
+ }, getRootProps()), {}, {
5176
+ children: /*#__PURE__*/jsx(Typography, {
5177
+ children: t("neetoImageUploader.common.dropHere")
5196
5178
  })
5197
- }
5198
- })))), /*#__PURE__*/React.createElement("input", getInputProps()));
5179
+ })), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsx(ImageEditor, {
5180
+ fixedAspectRatio: fixedAspectRatio,
5181
+ handleImageEditComplete: handleImageEditComplete,
5182
+ handleReset: function handleReset() {
5183
+ return setSelectedImage({});
5184
+ },
5185
+ image: selectedImage,
5186
+ signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
5187
+ }) : /*#__PURE__*/jsxs("div", _objectSpread$1(_objectSpread$1({
5188
+ className: "h-full flex-col"
5189
+ }, getRootProps({
5190
+ onClick: function onClick(event) {
5191
+ return event.stopPropagation();
5192
+ }
5193
+ })), {}, {
5194
+ children: [/*#__PURE__*/jsx(NeetoUIModal.Header, {
5195
+ children: /*#__PURE__*/jsx(Typography, {
5196
+ style: "h2",
5197
+ children: t("neetoImageUploader.common.imageLibrary")
5198
+ })
5199
+ }), /*#__PURE__*/jsx("div", {
5200
+ className: "px-6 py-2",
5201
+ children: /*#__PURE__*/jsxs("div", {
5202
+ className: "flex flex-col items-center justify-between gap-2 sm:flex-row",
5203
+ children: [/*#__PURE__*/jsx("div", {
5204
+ className: "flex gap-2",
5205
+ children: /*#__PURE__*/jsx(Tab, {
5206
+ size: "small",
5207
+ children: TABS.map(function (tab) {
5208
+ return /*#__PURE__*/jsx(Tab.Item, {
5209
+ active: activeTab === tab.key,
5210
+ "data-cy": tab.dataCy,
5211
+ onClick: function onClick() {
5212
+ return setActiveTab(tab.key);
5213
+ },
5214
+ children: tab.label
5215
+ }, tab.key);
5216
+ })
5217
+ })
5218
+ }), /*#__PURE__*/jsx("div", {
5219
+ className: "flex gap-2",
5220
+ children: options.map(function (_ref2) {
5221
+ var key = _ref2.key,
5222
+ otherProps = _objectWithoutProperties$2(_ref2, _excluded$1);
5223
+ return /*#__PURE__*/createElement(Button, _objectSpread$1(_objectSpread$1({}, otherProps), {}, {
5224
+ key: key,
5225
+ size: "small"
5226
+ }));
5227
+ })
5228
+ })]
5229
+ })
5230
+ }), /*#__PURE__*/jsx(ImageLibrary, {
5231
+ setActiveTab: setActiveTab,
5232
+ setIsUploading: setIsUploading,
5233
+ setSelectedImage: setSelectedImage,
5234
+ tab: activeTab
5235
+ }), equals(activeTab, TABS[1].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
5236
+ className: "flex items-center justify-center gap-2",
5237
+ children: /*#__PURE__*/jsx(Typography, {
5238
+ style: "body2",
5239
+ children: /*#__PURE__*/jsx(Trans, {
5240
+ i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
5241
+ components: {
5242
+ a: /*#__PURE__*/jsx("a", {
5243
+ href: UNSPLASH_URL,
5244
+ rel: "noreferrer",
5245
+ target: "_blank"
5246
+ })
5247
+ }
5248
+ })
5249
+ })
5250
+ })]
5251
+ })), /*#__PURE__*/jsx("input", _objectSpread$1({}, getInputProps()))]
5252
+ });
5199
5253
  };
5200
5254
 
5201
5255
  var _excluded = ["key", "label"];
5256
+ 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; }
5257
+ 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; }
5202
5258
  var Menu = Dropdown.Menu,
5203
5259
  MenuItem = Dropdown.MenuItem;
5204
5260
  var ImageUploader = function ImageUploader(_ref) {
@@ -5297,45 +5353,50 @@ var ImageUploader = function ImageUploader(_ref) {
5297
5353
  onClick: handleDelete,
5298
5354
  "data-cy": "image-uploader-remove-button"
5299
5355
  }];
5300
- return /*#__PURE__*/React.createElement("div", {
5356
+ return /*#__PURE__*/jsxs("div", {
5301
5357
  className: classnames(className, {
5302
5358
  "cursor-pointer": true
5303
- })
5304
- }, isNotNilOrEmpty(image.url) ? /*#__PURE__*/React.createElement("div", {
5305
- className: IMAGE_WRAPPER_CLASSNAME,
5306
- "data-cy": "image-uploader-wrapper"
5307
- }, /*#__PURE__*/React.createElement(ImageWithFallback, {
5308
- className: "h-full w-full",
5309
- "data-cy": "uploaded-image",
5310
- src: image.url
5311
- }), /*#__PURE__*/React.createElement(Dropdown, {
5312
- buttonProps: {
5313
- className: "absolute right-3 top-3"
5314
- },
5315
- buttonSize: "small",
5316
- buttonStyle: "primary",
5317
- icon: MenuHorizontal
5318
- }, /*#__PURE__*/React.createElement(Menu, null, options.map(function (_ref2) {
5319
- var key = _ref2.key,
5320
- label = _ref2.label,
5321
- otherProps = _objectWithoutProperties$2(_ref2, _excluded);
5322
- return /*#__PURE__*/React.createElement(MenuItem.Button, _extends$1({}, otherProps, {
5323
- key: key
5324
- }), label);
5325
- })))) : /*#__PURE__*/React.createElement(ImageDirectUpload, {
5326
- setIsAssetLibraryOpen: setIsAssetLibraryOpen,
5327
- isDisabled: isPresent(fixedAspectRatio),
5328
- uploadConfig: uploadConfigWithDefaults,
5329
- onDrop: uploadFile
5330
- }), /*#__PURE__*/React.createElement(Modal, {
5331
- fixedAspectRatio: fixedAspectRatio,
5332
- isOpen: isAssetLibraryOpen,
5333
- uploadConfig: uploadConfigWithDefaults,
5334
- onClose: function onClose() {
5335
- return setIsAssetLibraryOpen(false);
5336
- },
5337
- onUploadComplete: handleImageSelectionFromLibrary
5338
- }));
5359
+ }),
5360
+ children: [isNotNilOrEmpty(image.url) ? /*#__PURE__*/jsxs("div", {
5361
+ className: IMAGE_WRAPPER_CLASSNAME,
5362
+ "data-cy": "image-uploader-wrapper",
5363
+ children: [/*#__PURE__*/jsx(ImageWithFallback, {
5364
+ className: "h-full w-full",
5365
+ "data-cy": "uploaded-image",
5366
+ src: image.url
5367
+ }), /*#__PURE__*/jsx(Dropdown, {
5368
+ buttonProps: {
5369
+ className: "absolute right-3 top-3"
5370
+ },
5371
+ buttonSize: "small",
5372
+ buttonStyle: "primary",
5373
+ icon: MenuHorizontal,
5374
+ children: /*#__PURE__*/jsx(Menu, {
5375
+ children: options.map(function (_ref2) {
5376
+ var key = _ref2.key,
5377
+ label = _ref2.label,
5378
+ otherProps = _objectWithoutProperties$2(_ref2, _excluded);
5379
+ return /*#__PURE__*/createElement(MenuItem.Button, _objectSpread(_objectSpread({}, otherProps), {}, {
5380
+ key: key
5381
+ }), label);
5382
+ })
5383
+ })
5384
+ })]
5385
+ }) : /*#__PURE__*/jsx(ImageDirectUpload, {
5386
+ setIsAssetLibraryOpen: setIsAssetLibraryOpen,
5387
+ isDisabled: isPresent(fixedAspectRatio),
5388
+ uploadConfig: uploadConfigWithDefaults,
5389
+ onDrop: uploadFile
5390
+ }), /*#__PURE__*/jsx(Modal, {
5391
+ fixedAspectRatio: fixedAspectRatio,
5392
+ isOpen: isAssetLibraryOpen,
5393
+ uploadConfig: uploadConfigWithDefaults,
5394
+ onClose: function onClose() {
5395
+ return setIsAssetLibraryOpen(false);
5396
+ },
5397
+ onUploadComplete: handleImageSelectionFromLibrary
5398
+ })]
5399
+ });
5339
5400
  };
5340
5401
 
5341
5402
  var useImageUpload = function useImageUpload() {