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

package/dist/{index-By7BkNOh.js → index-BkKE5xo-.js}

@@ -1,30 +1,30 @@
 'use strict';
 
-var _objectWithoutProperties$1 = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var require$$0 = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var NeetoUIModal = require('@bigbinary/neetoui/Modal');
-var Button = require('@bigbinary/neetoui/Button');
 var Tab = require('@bigbinary/neetoui/Tab');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var Toastr = require('@bigbinary/neetoui/Toastr');
 var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
-var utils = require('./utils-tPaqWDxV.js');
+var utils$1 = require('./utils-BxC_k1lu.js');
 var useImageUploader = require('./useImageUploader-Bm9TukCy.js');
 var index = require('./index-BtHfh_eu.js');
 var classnames = require('classnames');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
+var Button = require('@bigbinary/neetoui/Button');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var Input = require('@bigbinary/neetoui/Input');
 var Switch = require('@bigbinary/neetoui/Switch');
+var Label = require('@bigbinary/neetoui/Label');
 var jsxRuntime = require('react/jsx-runtime');
 var query = require('./query-B7ahlELA.js');
 var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
@@ -44,15 +44,6 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
 var css$2 = ".niu-modal {\n  width: 95vw !important;\n  height: 75vh !important;\n  max-width: 1152px !important;\n  max-height: 576px !important;\n  position: relative !important;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21vZGFsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxzQkFBQTtFQUNBLHVCQUFBO0VBQ0EsNEJBQUE7RUFDQSw0QkFBQTtFQUNBLDZCQUFBO0FBRkYiLCJzb3VyY2VzQ29udGVudCI6WyIvL0Fic3RyYWN0c1xuQGltcG9ydCBcIi4uL2Fic3RyYWN0cy92YXJpYWJsZXNcIjtcblxuLm5pdS1tb2RhbCB7XG4gIHdpZHRoOiAkbml1LW1vZGFsLXdpZHRoICFpbXBvcnRhbnQ7XG4gIGhlaWdodDogJG5pdS1tb2RhbC1oZWlnaHQgIWltcG9ydGFudDtcbiAgbWF4LXdpZHRoOiAkbml1LW1vZGFsLW1heC13aWR0aCAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LW1vZGFsLW1heC1oZWlnaHQgIWltcG9ydGFudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlICFpbXBvcnRhbnQ7XG59XG4iXX0= */";
 n(css$2,{});
 
-var createOptions = function createOptions() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return utils.OPTIONS.map(function (option) {
-    return ramda.mergeLeft(neetoCist.findBy({
-      key: option.key
-    }, options), option);
-  });
-};
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -283,11 +274,11 @@ var Controls = function Controls(_ref) {
     setWidth(getActualCropWidth(crop.width));
   }, [crop]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-col p-4 md:w-2/6 ",
+    className: "flex flex-col space-y-6 p-4 md:w-2/6",
     children: [!hideControls && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
         checked: isFullImage,
-        className: "flex-grow-0",
+        className: "w-full",
         label: t("neetoImageUploader.labels.selectOriginalImage"),
         onChange: function onChange() {
           return setIsFullImage(function (isFullImage) {
@@ -296,53 +287,65 @@ var Controls = function Controls(_ref) {
         }
       }), /*#__PURE__*/jsxRuntime.jsx(Switch, {
         checked: isAspectRatioLocked,
-        className: "mt-4 flex-grow-0",
+        className: "w-full",
         disabled: isFullImage,
         label: t("neetoImageUploader.labels.lockAspectRatio"),
         onChange: onToggleAspectRatioLock
-      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "mb-2 mt-6",
-        style: "body2",
-        children: t("neetoImageUploader.imageEditor.aspectRatio")
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex gap-4 self-start",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
-          "data-cy": "aspect-ratio-width-input",
-          disabled: isFullImage,
-          size: "small",
-          type: "number",
-          value: aspectRatio.width,
-          onChange: utils$1.withEventTargetValue(handleAspectWidthChange)
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          children: " : "
-        }), /*#__PURE__*/jsxRuntime.jsx(Input, {
-          "data-cy": "aspect-ratio-height-input",
-          disabled: isFullImage,
-          size: "small",
-          type: "number",
-          value: aspectRatio.height,
-          onChange: utils$1.withEventTargetValue(handleAspectHeightChange)
+        className: "flex w-full items-start gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+          className: "w-24 pt-2",
+          children: t("neetoImageUploader.imageEditor.aspectRatio")
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex w-32 justify-between gap-1 self-start",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+            className: "w-12",
+            "data-cy": "aspect-ratio-width-input",
+            disabled: isFullImage,
+            type: "number",
+            value: aspectRatio.width,
+            onChange: utils.withEventTargetValue(handleAspectWidthChange)
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            children: ":"
+          }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+            className: "w-12",
+            "data-cy": "aspect-ratio-height-input",
+            disabled: isFullImage,
+            type: "number",
+            value: aspectRatio.height,
+            onChange: utils.withEventTargetValue(handleAspectHeightChange)
+          })]
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(Input, {
-      className: "mt-4 flex-grow-0",
-      disabled: isFullImage,
-      label: t("neetoImageUploader.labels.width"),
-      type: "number",
-      value: Math.round(width),
-      onChange: utils$1.withEventTargetValue(setWidth)
-    }), /*#__PURE__*/jsxRuntime.jsx(Input, {
-      className: "mt-4 flex-grow-0",
-      disabled: isFullImage,
-      label: t("neetoImageUploader.labels.height"),
-      type: "number",
-      value: Math.round(height),
-      onChange: utils$1.withEventTargetValue(setHeight)
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.width")
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+        className: "w-32 flex-grow-0",
+        disabled: isFullImage,
+        type: "number",
+        value: Math.round(width),
+        onChange: utils.withEventTargetValue(setWidth)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex w-full items-start gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        className: "w-24 pt-2",
+        children: t("neetoImageUploader.labels.height")
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+        className: "w-32 flex-grow-0",
+        disabled: isFullImage,
+        type: "number",
+        value: Math.round(height),
+        onChange: utils.withEventTargetValue(setHeight)
+      })]
     }), /*#__PURE__*/jsxRuntime.jsx(Button, {
       className: "mt-6 self-start",
       "data-cy": "neeto-image-uploader-crop-submit-button",
       label: t("neetoImageUploader.labels.done"),
-      disabled: utils.isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
+      disabled: utils$1.isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
       onClick: handleSubmit
     })]
   });
@@ -372,7 +375,7 @@ var ImageEditor = function ImageEditor(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     aspectRatio = _useState6[0],
     setAspectRatio = _useState6[1];
-  var _useState7 = require$$0.useState(utils.DEFAULT_CROP_CONFIG),
+  var _useState7 = require$$0.useState(utils$1.DEFAULT_CROP_CONFIG),
     _useState8 = _slicedToArray(_useState7, 2),
     crop = _useState8[0],
     setCrop = _useState8[1];
@@ -389,7 +392,7 @@ var ImageEditor = function ImageEditor(_ref) {
       return;
     }
     cropImage({
-      crop: utils.getCropValues({
+      crop: utils$1.getCropValues({
         crop: crop,
         imageRef: imageRef
       }),
@@ -407,11 +410,11 @@ var ImageEditor = function ImageEditor(_ref) {
       handleImageEditComplete(image);
       return;
     }
-    var newURL = initializers.globalProps.assetsUploaderService === index.CLOUD_FLARE ? utils.getCloudFlareCroppedURL({
+    var newURL = initializers.globalProps.assetsUploaderService === index.CLOUD_FLARE ? utils$1.getCloudFlareCroppedURL({
       imageRef: imageRef,
       image: image,
       crop: crop
-    }) : utils.getImageKitCroppedURL({
+    }) : utils$1.getImageKitCroppedURL({
       crop: crop,
       imageURL: image.url,
       imageRef: imageRef
@@ -435,7 +438,7 @@ var ImageEditor = function ImageEditor(_ref) {
         id: "imageEditor",
         ref: wrapperRef,
         className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
-          "items-center": utils.isItemsCenter({
+          "items-center": utils$1.isItemsCenter({
             wrapperRef: wrapperRef,
             imageRef: imageRef
           })
@@ -452,7 +455,7 @@ var ImageEditor = function ImageEditor(_ref) {
             ref: imageRef,
             src: image === null || image === void 0 ? void 0 : image.url,
             onLoad: function onLoad(e) {
-              return utils.onImageLoaded({
+              return utils$1.onImageLoaded({
                 image: e.target,
                 setCrop: setCrop,
                 cropAspectRatio: cropAspectRatio
@@ -522,7 +525,7 @@ var useFetchAssets = function useFetchAssets(_ref) {
       });
     },
     getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
-      return lastPage.length === utils.IMAGES_PER_PAGE ? lastPageParam + 1 : null;
+      return lastPage.length === utils$1.IMAGES_PER_PAGE ? lastPageParam + 1 : null;
     },
     select: function select(data) {
       var results = data.pages.flatMap(ramda.identity);
@@ -1429,7 +1432,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
     deleteConfirmation = _useState2[0],
     setDeleteConfirmation = _useState2[1];
   var isMenuButtonEnabled = initializers.globalProps.assetsUploaderService !== index.CLOUD_FLARE;
-  var _useBulkDestroyAssets = useBulkDestroyAssets(utils.ASSETS_DESTROY_URL),
+  var _useBulkDestroyAssets = useBulkDestroyAssets(utils$1.ASSETS_DESTROY_URL),
     isPending = _useBulkDestroyAssets.isPending,
     bulkDelete = _useBulkDestroyAssets.mutate;
   var handleDelete = require$$0.useCallback(function () {
@@ -1455,8 +1458,8 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
       position: true,
       className: "w-full",
       loader: Loader,
-      sizes: utils.INFINITE_SCROLLER_SIZES,
-      style: utils.INFINITE_SCROLLER_STYLE,
+      sizes: utils$1.INFINITE_SCROLLER_SIZES,
+      style: utils$1.INFINITE_SCROLLER_STYLE,
       useWindow: false,
       children: images.map(function (image, index) {
         var _image$urls, _image$user, _image$user2;
@@ -1471,7 +1474,7 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
               className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
               "data-cy": "library-image-card",
               id: "unsplashImage".concat(image.id),
-              children: [tab === utils.TABS[1].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [tab === utils$1.TABS[2].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [/*#__PURE__*/jsxRuntime.jsx("img", {
                   "data-cy": "niu-unsplash-image-".concat(index),
                   src: image === null || image === void 0 ? void 0 : (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
@@ -1485,8 +1488,8 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
                   target: "_blank",
                   children: [image === null || image === void 0 ? void 0 : (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
                 })]
-              }), tab === utils.TABS[0].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [utils$1.hasPermission(constants.VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
+              }), tab === utils$1.TABS[1].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [utils.hasPermission(constants.VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
                   buttonSize: "small",
                   buttonStyle: "tertiary",
                   "data-cy": "image-library-image-options-".concat(index),
@@ -1544,8 +1547,8 @@ var Images = function Images(_ref) {
     t = _useTranslation.t;
   var _useFetchAssets = useFetchAssets({
       searchTerm: debouncedQuery,
-      per: utils.IMAGES_PER_PAGE,
-      url: utils.ASSETS_FETCH_URL
+      per: utils$1.IMAGES_PER_PAGE,
+      url: utils$1.ASSETS_FETCH_URL
     }),
     fetchNextPage = _useFetchAssets.fetchNextPage,
     hasNextPage = _useFetchAssets.hasNextPage,
@@ -1574,7 +1577,7 @@ var Images = function Images(_ref) {
     images: results,
     key: debouncedQuery,
     loadMore: fetchNextPage,
-    tab: utils.TABS[0].key
+    tab: utils$1.TABS[1].key
   });
 };
 
@@ -1673,10 +1676,10 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
             _context.prev = 0;
             setIsUploading(true);
             _context.next = 4;
-            return unsplashApi.getUnsplashImage((_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular, utils.UNSPLASH_DEFAULT_REQUEST_CONFIG);
+            return unsplashApi.getUnsplashImage((_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular, utils$1.UNSPLASH_DEFAULT_REQUEST_CONFIG);
           case 4:
             response = _context.sent;
-            file = new File([response.data], utils.UNSPLASH_DEFAULT_NAME, {
+            file = new File([response.data], utils$1.UNSPLASH_DEFAULT_NAME, {
               type: response.data.type
             });
             uploadFile(file);
@@ -1686,7 +1689,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
             _context.prev = 9;
             _context.t0 = _context["catch"](0);
             Toastr.error(_context.t0);
-            setActiveTab(utils.TABS[0].key);
+            setActiveTab(utils$1.TABS[1].key);
             setIsUploading(false);
           case 14:
           case "end":
@@ -1731,7 +1734,7 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
     images: results,
     key: debouncedQuery,
     loadMore: fetchNextPage,
-    tab: utils.TABS[1].key
+    tab: utils$1.TABS[2].key
   });
 };
 
@@ -1747,15 +1750,15 @@ var ImageLibrary = function ImageLibrary(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var debouncedQuery = reactUtils.useDebounce(query, 400);
-  var inputPlaceHolder = ramda.equals(tab, utils.TABS[1].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
+  var inputPlaceHolder = ramda.equals(tab, utils$1.TABS[2].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
   require$$0.useEffect(function () {
     setQuery("");
   }, [tab]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "w-full pb-2 pl-6 pt-1",
+    className: "w-full px-6 pb-2 pt-1",
     children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
       autoFocus: true,
-      className: "mb-4 mr-6",
+      className: "mb-4",
       "data-cy": "niu-unsplash-image-picker-search-input",
       name: "text",
       placeholder: inputPlaceHolder,
@@ -1764,7 +1767,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
         var value = _ref2.target.value;
         return setQuery(value);
       }
-    }), tab === utils.TABS[0].key ? /*#__PURE__*/jsxRuntime.jsx(Images, {
+    }), tab === utils$1.TABS[1].key ? /*#__PURE__*/jsxRuntime.jsx(Images, {
       debouncedQuery: debouncedQuery,
       query: query,
       setSelectedImage: setSelectedImage
@@ -1778,7 +1781,6 @@ var ImageLibrary = function ImageLibrary(_ref) {
   });
 };
 
-var _excluded = ["key"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Modal = function Modal(_ref) {
@@ -1791,7 +1793,7 @@ var Modal = function Modal(_ref) {
     uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
     _ref$fixedAspectRatio = _ref.fixedAspectRatio,
     fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
-  var _useState = require$$0.useState(utils.TABS[0].key),
+  var _useState = require$$0.useState(utils$1.TABS[0].key),
     _useState2 = _slicedToArray(_useState, 2),
     activeTab = _useState2[0],
     setActiveTab = _useState2[1];
@@ -1807,7 +1809,7 @@ var Modal = function Modal(_ref) {
     t = _useTranslation.t;
   var _useCreateBlob = useImageUploader.useCreateBlob(),
     createBlob = _useCreateBlob.mutate;
-  var uploadConfigWithDefaults = ramda.mergeRight(utils.DEFAULT_UPLOAD_CONFIG, uploadConfig);
+  var uploadConfigWithDefaults = ramda.mergeRight(utils$1.DEFAULT_UPLOAD_CONFIG, uploadConfig);
   var isCloudFlareImageUploader = initializers.globalProps.assetsUploaderService === index.CLOUD_FLARE;
   var handleCloseModal = function handleCloseModal() {
     onClose();
@@ -1869,25 +1871,37 @@ var Modal = function Modal(_ref) {
       setIsUploading: setIsUploading
     }),
     uploadFile = _useImageUploader.uploadFile;
-  var _useUploadDropzone = utils.useUploadDropzone({
+  var _useUploadDropzone = utils$1.useUploadDropzone({
       uploadConfig: uploadConfigWithDefaults,
       onDrop: uploadFile
     }),
     getRootProps = _useUploadDropzone.getRootProps,
     getInputProps = _useUploadDropzone.getInputProps,
-    isDragActive = _useUploadDropzone.isDragActive,
-    inputRef = _useUploadDropzone.inputRef;
-  var openFileUploadDialog = function openFileUploadDialog() {
-    var _inputRef$current;
-    return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
-  };
-  var options = createOptions([{
-    key: "local",
-    onClick: openFileUploadDialog
-  }]);
+    isDragActive = _useUploadDropzone.isDragActive;
   require$$0.useEffect(function () {
-    setActiveTab(utils.TABS[0].key);
+    setActiveTab(utils$1.TABS[0].key);
   }, [isOpen]);
+  var renderContent = function renderContent() {
+    if (activeTab === "upload") {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-grow px-6 pb-6",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "h-full w-full overflow-y-auto",
+          children: /*#__PURE__*/jsxRuntime.jsx(utils$1.ImageDirectUpload, {
+            isDisabled: neetoCist.isPresent(fixedAspectRatio),
+            uploadConfig: uploadConfigWithDefaults,
+            onDrop: uploadFile
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(ImageLibrary, {
+      setActiveTab: setActiveTab,
+      setIsUploading: setIsUploading,
+      setSelectedImage: setSelectedImage,
+      tab: activeTab
+    });
+  };
   return /*#__PURE__*/jsxRuntime.jsxs(NeetoUIModal, {
     isOpen: isOpen,
     className: "niu-modal",
@@ -1896,13 +1910,13 @@ var Modal = function Modal(_ref) {
     children: [isUploading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
       children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
-    }), utils.isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    }), utils$1.isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
       className: "neeto-ui-rounded-xl neeto-ui-bg-gray-400 absolute flex h-full w-full flex-col items-center justify-around border-4 border-dashed border-gray-900 opacity-40"
     }, getRootProps()), {}, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
         children: t("neetoImageUploader.common.dropHere")
       })
-    })), !utils.isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsxRuntime.jsx(ImageEditor, {
+    })), !utils$1.isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsxRuntime.jsx(ImageEditor, {
       fixedAspectRatio: fixedAspectRatio,
       handleImageEditComplete: handleImageEditComplete,
       handleReset: function handleReset() {
@@ -1911,7 +1925,7 @@ var Modal = function Modal(_ref) {
       image: selectedImage,
       signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
     }) : /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-      className: "h-full flex-col"
+      className: "flex h-full flex-col"
     }, getRootProps({
       onClick: function onClick(event) {
         return event.stopPropagation();
@@ -1923,42 +1937,21 @@ var Modal = function Modal(_ref) {
           children: t("neetoImageUploader.common.imageLibrary")
         })
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-6 py-2",
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col items-center justify-between gap-2 sm:flex-row",
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex gap-2",
-            children: /*#__PURE__*/jsxRuntime.jsx(Tab, {
-              size: "small",
-              children: utils.TABS.map(function (tab) {
-                return /*#__PURE__*/jsxRuntime.jsx(Tab.Item, {
-                  active: activeTab === tab.key,
-                  "data-cy": tab.dataCy,
-                  onClick: function onClick() {
-                    return setActiveTab(tab.key);
-                  },
-                  children: tab.label
-                }, tab.key);
-              })
-            })
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex gap-2",
-            children: options.map(function (_ref2) {
-              var key = _ref2.key,
-                otherProps = _objectWithoutProperties$1(_ref2, _excluded);
-              return /*#__PURE__*/require$$0.createElement(Button, _objectSpread(_objectSpread({}, otherProps), {}, {
-                key: key,
-                size: "small"
-              }));
-            })
-          })]
+        className: "flex gap-2 px-6 py-2",
+        children: /*#__PURE__*/jsxRuntime.jsx(Tab, {
+          size: "small",
+          children: utils$1.TABS.map(function (tab) {
+            return /*#__PURE__*/jsxRuntime.jsx(Tab.Item, {
+              active: activeTab === tab.key,
+              "data-cy": tab.dataCy,
+              onClick: function onClick() {
+                return setActiveTab(tab.key);
+              },
+              children: tab.label
+            }, tab.key);
+          })
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(ImageLibrary, {
-        setActiveTab: setActiveTab,
-        setIsUploading: setIsUploading,
-        setSelectedImage: setSelectedImage,
-        tab: activeTab
-      }), ramda.equals(activeTab, utils.TABS[1].key) && /*#__PURE__*/jsxRuntime.jsx(NeetoUIModal.Footer, {
+      }), renderContent(), ramda.equals(activeTab, utils$1.TABS[2].key) && /*#__PURE__*/jsxRuntime.jsx(NeetoUIModal.Footer, {
         className: "flex items-center justify-center gap-2",
         children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
           style: "body2",
@@ -1966,7 +1959,7 @@ var Modal = function Modal(_ref) {
             i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
             components: {
               a: /*#__PURE__*/jsxRuntime.jsx("a", {
-                href: utils.UNSPLASH_URL,
+                href: utils$1.UNSPLASH_URL,
                 rel: "noreferrer",
                 target: "_blank"
               })
@@ -1980,4 +1973,4 @@ var Modal = function Modal(_ref) {
 
 exports.Modal = Modal;
 exports.constructCloudflareImageURL = constructCloudflareImageURL;
-//# sourceMappingURL=index-By7BkNOh.js.map
+//# sourceMappingURL=index-BkKE5xo-.js.map