@bigbinary/neeto-image-uploader-frontend 1.5.24 → 1.5.26

package/dist/index.cjs.js

@@ -6,23 +6,40 @@ var React = require('react');
 var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
 var neetoIcons = require('@bigbinary/neeto-icons');
-var neetoui = require('@bigbinary/neetoui');
+var Button = require('@bigbinary/neetoui/Button');
+var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var i18next = require('i18next');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var Dropdown = require('@bigbinary/neetoui/Dropdown');
+var NeetoUIModal = require('@bigbinary/neetoui/Modal');
+var Tab = require('@bigbinary/neetoui/Tab');
+var Spinner = require('@bigbinary/neetoui/Spinner');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactQuery = require('react-query');
 var axios = require('axios');
 var activestorage = require('@rails/activestorage');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var Input = require('@bigbinary/neetoui/Input');
+var Switch = require('@bigbinary/neetoui/Switch');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
+var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
+var NeetoUIModal__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIModal);
+var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
@@ -2021,7 +2038,7 @@ var handleDropRejected = function handleDropRejected(fileRejections) {
     var errors = _ref.errors;
     return errors.map(function (_ref2) {
       var code = _ref2.code;
-      return neetoui.Toastr.error(FILE_ERRORS[code] || i18next.t("neetoImageUploader.imageUpload.genericError"));
+      return Toastr__default["default"].error(FILE_ERRORS[code] || i18next.t("neetoImageUploader.imageUpload.genericError"));
     });
   });
 };
@@ -2103,7 +2120,7 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
     })
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex flex-col space-y-1"
-  }, !isDisabled && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, !isDisabled && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-800 text-center leading-4",
     style: "body2"
   }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
@@ -2114,7 +2131,7 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
         "data-cy": "neeto-image-uploader-browse-text"
       })
     }
-  })), setIsAssetLibraryOpen && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  })), setIsAssetLibraryOpen && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "text-center leading-4",
     style: "body2",
     onClick: function onClick(e) {
@@ -2132,7 +2149,7 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement("input", _extends$1({}, getInputProps(), {
     "data-cy": "neeto-image-uploader-file-input",
     disabled: isDisabled
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  })), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-gray-700 text-center leading-4",
     "data-cy": "neeto-image-uploader-restriction-message",
     lineHeight: "snug",
@@ -2921,7 +2938,7 @@ var BasicImageUploader = function BasicImageUploader(_ref) {
     src: src
   }), {
     "data-cy": "uploaded-image"
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  })), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: "absolute right-3 top-3",
     "data-cy": "basic-image-uploader-remove-button",
     disabled: isDisabled,
@@ -3402,7 +3419,7 @@ var useImageUploader = function useImageUploader(_ref) {
         setIsUploading(false);
       });
     } catch (error) {
-      neetoui.Toastr.error(error);
+      Toastr__default["default"].error(error);
     }
   };
   var productionUpload = /*#__PURE__*/function () {
@@ -3436,7 +3453,7 @@ var useImageUploader = function useImageUploader(_ref) {
           case 10:
             _context.prev = 10;
             _context.t0 = _context["catch"](0);
-            neetoui.Toastr.error(_context.t0);
+            Toastr__default["default"].error(_context.t0);
           case 13:
           case "end":
             return _context.stop();
@@ -3546,17 +3563,18 @@ var useImageControls = function useImageControls(_ref) {
     }
   };
   var handleWidthChange = function handleWidthChange(width) {
-    var newWidth = Number(width);
-    if (newWidth > 0 && Math.trunc(crop.x) + newWidth <= imageRef.current.width) {
+    var cropWidth = Number(width);
+    var displayWidth = cropWidth * imageRef.current.width / imageRef.current.naturalWidth;
+    if (displayWidth > 0 && Math.trunc(crop.x) + displayWidth <= imageRef.current.width) {
       if (isAspectRatioLocked) {
-        var newHeight = newWidth / (aspectRatio.width / aspectRatio.height);
-        newHeight + Math.trunc(crop.y) <= imageRef.current.height && setCrop(ramda.mergeRight(crop, {
-          width: newWidth,
-          height: newHeight
+        var displayHeight = displayWidth / (aspectRatio.width / aspectRatio.height);
+        displayHeight + Math.trunc(crop.y) <= imageRef.current.height && setCrop(ramda.mergeRight(crop, {
+          width: displayWidth,
+          height: displayHeight
         }));
       } else {
         setCrop(ramda.mergeRight(crop, {
-          width: newWidth
+          width: displayWidth
         }));
       }
     } else {
@@ -3564,17 +3582,18 @@ var useImageControls = function useImageControls(_ref) {
     }
   };
   var handleHeightChange = function handleHeightChange(height) {
-    var newHeight = Number(height);
-    if (newHeight > 0 && Math.trunc(crop.y) + newHeight <= imageRef.current.height) {
+    var cropHeight = Number(height);
+    var displayHeight = cropHeight * imageRef.current.height / imageRef.current.naturalHeight;
+    if (displayHeight > 0 && Math.trunc(crop.y) + displayHeight <= imageRef.current.height) {
       if (isAspectRatioLocked) {
-        var newWidth = newHeight * aspectRatio.width / aspectRatio.height;
-        newWidth + Math.trunc(crop.x) <= imageRef.current.width && setCrop(ramda.mergeRight(crop, {
-          height: newHeight,
-          width: newWidth
+        var displayWidth = displayHeight * aspectRatio.width / aspectRatio.height;
+        displayWidth + Math.trunc(crop.x) <= imageRef.current.width && setCrop(ramda.mergeRight(crop, {
+          height: displayHeight,
+          width: displayWidth
         }));
       } else {
         setCrop(ramda.mergeRight(crop, {
-          height: newHeight
+          height: displayHeight
         }));
       }
     } else {
@@ -3645,11 +3664,19 @@ var Controls = function Controls(_ref) {
     hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useState = React.useState(crop.height.toFixed(0)),
+  var getActualCropHeight = function getActualCropHeight(cropHeight) {
+    var _imageRef$current, _imageRef$current2;
+    return cropHeight * (((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.naturalHeight) / ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.height));
+  };
+  var getActualCropWidth = function getActualCropWidth(cropHeight) {
+    var _imageRef$current3, _imageRef$current4;
+    return cropHeight * (((_imageRef$current3 = imageRef.current) === null || _imageRef$current3 === void 0 ? void 0 : _imageRef$current3.naturalWidth) / ((_imageRef$current4 = imageRef.current) === null || _imageRef$current4 === void 0 ? void 0 : _imageRef$current4.width));
+  };
+  var _useState = React.useState(getActualCropHeight(crop.height)),
     _useState2 = _slicedToArray$2(_useState, 2),
     height = _useState2[0],
     setHeight = _useState2[1];
-  var _useState3 = React.useState(crop.width.toFixed(0)),
+  var _useState3 = React.useState(getActualCropWidth(crop.width)),
     _useState4 = _slicedToArray$2(_useState3, 2),
     width = _useState4[0],
     setWidth = _useState4[1];
@@ -3678,12 +3705,12 @@ var Controls = function Controls(_ref) {
     handleWidthChange(debouncedWidth);
   }, [debouncedWidth]);
   React.useEffect(function () {
-    setHeight(crop.height.toFixed(2));
-    setWidth(crop.width.toFixed(2));
+    setHeight(getActualCropHeight(crop.height));
+    setWidth(getActualCropWidth(crop.width));
   }, [crop]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex flex-col p-4 md:w-2/6 "
-  }, !hideControls && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, {
+  }, !hideControls && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Switch__default["default"], {
     checked: isFullImage,
     className: "flex-grow-0",
     label: t("neetoImageUploader.labels.selectOriginalImage"),
@@ -3692,46 +3719,46 @@ var Controls = function Controls(_ref) {
         return !isFullImage;
       });
     }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, {
+  }), /*#__PURE__*/React__default["default"].createElement(Switch__default["default"], {
     checked: isAspectRatioLocked,
     className: "mt-4 flex-grow-0",
     disabled: isFullImage,
     label: t("neetoImageUploader.labels.lockAspectRatio"),
     onChange: onToggleAspectRatioLock
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "mb-2 mt-6",
     style: "body2"
   }, t("neetoImageUploader.imageEditor.aspectRatio")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex gap-4 self-start"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     "data-cy": "aspect-ratio-width-input",
     disabled: isFullImage,
     size: "small",
     type: "number",
     value: aspectRatio.width,
     onChange: utils.withEventTargetValue(handleAspectWidthChange)
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, " : "), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], null, " : "), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     "data-cy": "aspect-ratio-height-input",
     disabled: isFullImage,
     size: "small",
     type: "number",
     value: aspectRatio.height,
     onChange: utils.withEventTargetValue(handleAspectHeightChange)
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }))), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     className: "mt-4 flex-grow-0",
     disabled: isFullImage,
     label: t("neetoImageUploader.labels.width"),
     type: "number",
-    value: width,
+    value: Math.round(width),
     onChange: utils.withEventTargetValue(setWidth)
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     className: "mt-4 flex-grow-0",
     disabled: isFullImage,
     label: t("neetoImageUploader.labels.height"),
     type: "number",
-    value: height,
+    value: Math.round(height),
     onChange: utils.withEventTargetValue(setHeight)
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: "mt-6 self-start",
     "data-cy": "neeto-image-uploader-crop-submit-button",
     label: t("neetoImageUploader.labels.done"),
@@ -3810,7 +3837,7 @@ var ImageEditor = function ImageEditor(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex h-full flex-col gap-4 px-8 py-12"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: "self-start",
     "data-cy": "image-editor-back-button",
     icon: neetoIcons.LeftArrow,
@@ -4669,7 +4696,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
     t = _useTranslation.t;
   var Loader = /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex justify-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
+  }, /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll"
   }, /*#__PURE__*/React__default["default"].createElement(_default, {
@@ -4774,7 +4801,7 @@ var Images = function Images(_ref) {
     refetch();
   }, [debouncedQuery]);
   if (error) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "mt-9 flex justify-center",
       style: "body2"
     }, t("neetoImageUploader.unsplash.errorMessage"));
@@ -4934,7 +4961,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
           case 19:
             _context.prev = 19;
             _context.t1 = _context["catch"](0);
-            neetoui.Toastr.error(_context.t1);
+            Toastr__default["default"].error(_context.t1);
             setActiveTab(TABS[0].key);
           case 23:
             _context.prev = 23;
@@ -4980,7 +5007,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     refetch();
   }, [debouncedQuery]);
   if (error) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "mt-9 flex justify-center",
       style: "body2"
     }, t("neetoImageUploader.unsplash.errorMessage"));
@@ -5012,7 +5039,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
   }, [tab]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full pb-2 pl-6 pt-1"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     autoFocus: true,
     className: "mb-4 mr-6",
     "data-cy": "niu-unsplash-image-picker-search-input",
@@ -5090,7 +5117,7 @@ var Modal = function Modal(_ref) {
             signedId: image.signedId
           });
         },
-        onError: neetoui.Toastr.error
+        onError: Toastr__default["default"].error
       });
     }
     handleCloseModal();
@@ -5119,16 +5146,16 @@ var Modal = function Modal(_ref) {
   React.useEffect(function () {
     setActiveTab(TABS[0].key);
   }, [isOpen]);
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+  return /*#__PURE__*/React__default["default"].createElement(NeetoUIModal__default["default"], {
     isOpen: isOpen,
     className: "niu-modal",
     size: "large",
     onClose: handleCloseModal
   }, isUploading && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null)), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
+  }, /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null)), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
     className: "neeto-ui-rounded-xl neeto-ui-bg-gray-400 absolute flex h-full w-full flex-col items-center justify-around border-4 border-dashed border-gray-900 opacity-40"
-  }, getRootProps()), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, t("neetoImageUploader.common.dropHere"))), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/React__default["default"].createElement(ImageEditor, {
+  }, getRootProps()), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], null, t("neetoImageUploader.common.dropHere"))), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/React__default["default"].createElement(ImageEditor, {
     fixedAspectRatio: fixedAspectRatio,
     handleImageEditComplete: handleImageEditComplete,
     handleReset: function handleReset() {
@@ -5142,7 +5169,7 @@ var Modal = function Modal(_ref) {
     onClick: function onClick(event) {
       return event.stopPropagation();
     }
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  })), /*#__PURE__*/React__default["default"].createElement(NeetoUIModal__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h2"
   }, t("neetoImageUploader.common.imageLibrary"))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "px-6 py-2"
@@ -5150,10 +5177,10 @@ var Modal = function Modal(_ref) {
     className: "flex flex-col items-center justify-between gap-2 sm:flex-row"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex gap-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, {
+  }, /*#__PURE__*/React__default["default"].createElement(Tab__default["default"], {
     size: "small"
   }, TABS.map(function (tab) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
+    return /*#__PURE__*/React__default["default"].createElement(Tab__default["default"].Item, {
       active: activeTab === tab.key,
       "data-cy": tab.dataCy,
       key: tab.key,
@@ -5166,7 +5193,7 @@ var Modal = function Modal(_ref) {
   }, options.map(function (_ref2) {
     var key = _ref2.key,
       otherProps = _objectWithoutProperties$2(_ref2, _excluded$1);
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({}, otherProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], _extends$1({}, otherProps, {
       key: key,
       size: "small"
     }));
@@ -5175,9 +5202,9 @@ var Modal = function Modal(_ref) {
     setIsUploading: setIsUploading,
     setSelectedImage: setSelectedImage,
     tab: activeTab
-  }), ramda.equals(activeTab, TABS[1].key) && /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, {
+  }), ramda.equals(activeTab, TABS[1].key) && /*#__PURE__*/React__default["default"].createElement(NeetoUIModal__default["default"].Footer, {
     className: "flex items-center justify-center gap-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
   }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
     i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
@@ -5192,8 +5219,8 @@ var Modal = function Modal(_ref) {
 };
 
 var _excluded = ["key", "label"];
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
+var Menu = Dropdown__default["default"].Menu,
+  MenuItem = Dropdown__default["default"].MenuItem;
 var ImageUploader = function ImageUploader(_ref) {
   var _ref$onUploadComplete = _ref.onUploadComplete,
     onUploadComplete = _ref$onUploadComplete === void 0 ? neetoCist.noop : _ref$onUploadComplete,
@@ -5270,7 +5297,7 @@ var ImageUploader = function ImageUploader(_ref) {
     };
     createBlob(payload, {
       onSuccess: handleSuccess,
-      onError: neetoui.Toastr.error
+      onError: Toastr__default["default"].error
     });
   };
   var _useImageUploader = useImageUploader({
@@ -5301,7 +5328,7 @@ var ImageUploader = function ImageUploader(_ref) {
     className: "h-full w-full",
     "data-cy": "uploaded-image",
     src: image.url
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+  }), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
     buttonProps: {
       className: "absolute right-3 top-3"
     },
@@ -5372,7 +5399,7 @@ var useImageUpload = function useImageUpload() {
         }));
       });
     } catch (error) {
-      neetoui.Toastr.error(error);
+      Toastr__default["default"].error(error);
     } finally {
       setIsUploading(false);
     }
@@ -5411,14 +5438,14 @@ var useImageUpload = function useImageUpload() {
             };
             createBlob(payload, {
               onSuccess: onUploadComplete,
-              onError: neetoui.Toastr.error
+              onError: Toastr__default["default"].error
             });
             _context.next = 13;
             break;
           case 10:
             _context.prev = 10;
             _context.t0 = _context["catch"](0);
-            neetoui.Toastr.error(_context.t0);
+            Toastr__default["default"].error(_context.t0);
           case 13:
             _context.prev = 13;
             setIsUploading(false);
@@ -5529,7 +5556,7 @@ var useProfileImageUpload = function useProfileImageUpload(_ref) {
             _context.prev = 9;
             _context.t0 = _context["catch"](0);
             errorMessage = ramda.equals(_context.t0.message, i18next.t("neetoImageUploader.errors.sdkKeysMissing")) ? i18next.t("neetoImageUploader.errors.imagekitKeysMissing") : _context.t0.message;
-            neetoui.Toastr.error(errorMessage);
+            Toastr__default["default"].error(errorMessage);
           case 13:
             _context.prev = 13;
             setIsUploading(false);