@dreamcommerce/aurora 3.1.5 → 3.1.7-1

package/build/cjs/packages/aurora/src/components/xhr_image_picker/xhr_image_picker.js

@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var XhrImagePicker = function XhrImagePicker(_ref) {
+var XhrImagePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     url = _ref.url,
     name = _ref.name,
@@ -67,9 +67,10 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
     _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
     imageExtenstion = _useState12[0],
     setImageExtenstion = _useState12[1];
+  var fileAsDataUrlRef = React.useRef(undefined);
   var handleControlChange = /*#__PURE__*/function () {
     var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(file) {
-      var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
+      var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject, _responseObject$data$, paths;
       return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -79,12 +80,13 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               fileList: fileList,
               fileAsDataUrl: fileAsDataUrl
             });
-            if (!(!fileList || !fileList.length)) {
-              _context.next = 5;
+            fileAsDataUrlRef.current = fileAsDataUrl;
+            if (!(!fileList || !fileList.length || fileAsDataUrl)) {
+              _context.next = 6;
               break;
             }
             return _context.abrupt("return");
-          case 5:
+          case 6:
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
@@ -96,22 +98,51 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 11;
-            return response.finally(function () {
-              return setIsLoading(false);
-            });
-          case 11:
+            _context.prev = 10;
+            _context.next = 13;
+            return response;
+          case 13:
             responseObject = _context.sent;
+            _context.next = 19;
+            break;
+          case 16:
+            _context.prev = 16;
+            _context.t0 = _context["catch"](10);
+            onError === null || onError === void 0 ? void 0 : onError([t('File upload failed')]);
+          case 19:
+            _context.prev = 19;
+            setIsLoading(false);
+            return _context.finish(19);
+          case 22:
+            if (responseObject) {
+              _context.next = 24;
+              break;
+            }
+            return _context.abrupt("return");
+          case 24:
+            if (!(responseObject.data.isSuccess === false)) {
+              _context.next = 27;
+              break;
+            }
+            onError === null || onError === void 0 ? void 0 : onError((_responseObject$data$ = responseObject.data.messages) !== null && _responseObject$data$ !== void 0 ? _responseObject$data$ : [t('File upload failed')]);
+            return _context.abrupt("return");
+          case 27:
+            if (responseObject.data.imagePath) {
+              paths = {
+                original: responseObject.data.imagePath
+              };
+            }
             onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded({
               fileList: fileList,
-              dataUrl: fileAsDataUrl,
-              imageId: responseObject.data.imageId
+              dataUrl: fileAsDataUrlRef.current,
+              imageId: responseObject.data.imageId,
+              paths: paths
             });
-          case 13:
+          case 29:
           case "end":
             return _context.stop();
         }
-      }, _callee);
+      }, _callee, null, [[10, 16, 19, 22]]);
     }));
     return function handleControlChange(_x) {
       return _ref2.apply(this, arguments);
@@ -153,15 +184,16 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
   }, []);
   React.useEffect(function () {
     image && setImageExtenstion(utilities.FileUtils.getFileExtension(image === null || image === void 0 ? void 0 : image.name));
-    return function () {
-      var _pendingRequestRef$cu;
-      return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
-    };
   }, [image]);
   React.useEffect(function () {
     var src = image !== null && image !== void 0 ? image : initialImage;
     setImageEditorSrc(src !== null && src !== void 0 ? src : '');
   }, [image, initialImage, isLoading]);
+  React.useEffect(function () {
+    return function () {
+      if (pendingRequestRef.current) pendingRequestRef.current();
+    };
+  }, []);
   var renderImageEditor = function renderImageEditor(defaultProps) {
     return ImageEditor ? (/*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ImageEditor, _rollupPluginBabelHelpers.objectSpread2({}, defaultProps)))) : null;
   };
@@ -194,7 +226,8 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
     }), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "aurora-text-xs aurora-text aurora-font-semibold"
     }, "".concat(t('Edit'))))),
-    editedImageResult: imageEditorResult
+    editedImageResult: imageEditorResult,
+    ref: ref
   })), !!ImageEditor && (/*#__PURE__*/React__default['default'].createElement(modal.Modal, {
     name: modalId,
     header: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, t('Edit image')),
@@ -206,7 +239,8 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       setImageEditorResult(result);
     }
   }))));
-};
+});
+XhrImagePicker.displayName = 'XhrImagePicker';
 
 exports.XhrImagePicker = XhrImagePicker;
 //# sourceMappingURL=xhr_image_picker.js.map

package/build/cjs/packages/aurora/src/components/xhr_image_picker/xhr_image_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/translations/en.json.js

@@ -59,6 +59,7 @@ var en = {
 	Remove: Remove,
 	"Transfering file...": "Transfering file...",
 	"Invalid file format": "Invalid file format",
+	"File upload failed": "File upload failed",
 	"Select color": "Select color",
 	"Shades of color": "Shades of color",
 	"Linear gradient": "Linear gradient",

package/build/cjs/packages/aurora/src/translations/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/translations/pl.json.js

@@ -59,6 +59,7 @@ var pl = {
 	Remove: Remove,
 	"Transfering file...": "Wgrywanie pliku...",
 	"Invalid file format": "Niepoprawny format pliku",
+	"File upload failed": "Błąd wgrywania pliku",
 	"Select color": "Wybierz kolor",
 	"Shades of color": "Odcienie koloru",
 	"Linear gradient": "Gradient liniowy",

package/build/cjs/packages/aurora/src/translations/pl.json.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IXhrImagePickerControl } from './xhr_image_picker_control_types';
-export declare const XhrImagePickerControl: React.FC<IXhrImagePickerControl>;
+export declare const XhrImagePickerControl: React.ForwardRefExoticComponent<IXhrImagePickerControl & React.RefAttributes<HTMLButtonElement>>;

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.js

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef } from 'react';
 import { Control } from '../../control/control.js';
 import { HelperText } from '../../helper_text/helper_text.js';
 import { Label } from '../../label/label.js';
 import { XhrImagePicker } from '../../xhr_image_picker/xhr_image_picker.js';
 
-var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
+var XhrImagePickerControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var url = _ref.url,
     label = _ref.label,
     required = _ref.required,
@@ -21,17 +20,15 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
     onUploaded = _ref.onUploaded,
     helperText = _ref.helperText,
     onImageSizeUpdated = _ref.onImageSizeUpdated,
-    ImageEditor = _ref.ImageEditor;
-  var _useState = useState(errors),
-    _useState2 = _slicedToArray(_useState, 2),
-    setErrors = _useState2[1];
+    ImageEditor = _ref.ImageEditor,
+    onError = _ref.onError;
   var handleControlError = function handleControlError(errors) {
-    setErrors(errors);
+    onError === null || onError === void 0 ? void 0 : onError(errors);
   };
   var handleControlChange = function handleControlChange(file) {
     var fileList = file.fileList,
       fileAsDataUrl = file.fileAsDataUrl;
-    setErrors(null);
+    onError === null || onError === void 0 ? void 0 : onError([]);
     onChange === null || onChange === void 0 ? void 0 : onChange({
       fileList: fileList,
       fileAsDataUrl: fileAsDataUrl
@@ -56,9 +53,11 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
     errors: errors,
     onUploaded: onUploaded,
     onImageSizeUpdated: onImageSizeUpdated,
-    ImageEditor: ImageEditor
+    ImageEditor: ImageEditor,
+    ref: ref
   }), helperText ? /*#__PURE__*/React.createElement(HelperText, null, helperText) : null);
-};
+});
+XhrImagePickerControl.displayName = 'XhrImagePickerControl';
 
 export { XhrImagePickerControl };
 //# sourceMappingURL=xhr_image_picker_control.js.map

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_drag_over_placeholder.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const ImagePickerDragOverPlaceholder: () => React.JSX.Element;
+interface IImagePickerDragOverPlaceholderProps {
+    onDropFile: (event: React.DragEvent<HTMLDivElement>) => void;
+}
+export declare const ImagePickerDragOverPlaceholder: ({ onDropFile }: IImagePickerDragOverPlaceholderProps) => React.JSX.Element;
+export {};

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_drag_over_placeholder.js

@@ -3,14 +3,16 @@ import { useTranslation } from '../../../../../../external/react-i18next/dist/es
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 
-var ImagePickerDragOverPlaceholder = function ImagePickerDragOverPlaceholder() {
+var ImagePickerDragOverPlaceholder = function ImagePickerDragOverPlaceholder(_ref) {
+  var onDropFile = _ref.onDropFile;
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   return /*#__PURE__*/React.createElement("div", {
-    className: cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-20 aurora-pointer-events-none aurora-w-full aurora-h-full')
+    onDrop: onDropFile,
+    className: cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-20 aurora-w-full aurora-h-full')
   }, /*#__PURE__*/React.createElement("div", {
-    className: "aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center"
+    className: "aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center aurora-pointer-events-none"
   }, /*#__PURE__*/React.createElement("span", {
     className: "aurora-text-xs aurora-text-interactive"
   }, "".concat(t('Drop file here')))));

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_drag_over_placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_input.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
 declare type ImagePickerInput = {
     id: string;
-    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDropFile: (event: React.DragEvent<HTMLDivElement>) => void;
     allowedExtensionsLabel?: string;
     allowedExtensions: string[];
     isDragOver: boolean;

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_input.js

@@ -7,22 +7,18 @@ import { UploadLineIcon } from '../../../assets/icons/upload_icon.js';
 
 var ImagePickerInput = function ImagePickerInput(_ref) {
   var id = _ref.id,
-    onDropFile = _ref.onDropFile,
-    onDragOver = _ref.onDragOver,
-    onDragLeave = _ref.onDragLeave,
     allowedExtensionsLabel = _ref.allowedExtensionsLabel,
     allowedExtensions = _ref.allowedExtensions,
-    isDragOver = _ref.isDragOver;
+    isDragOver = _ref.isDragOver,
+    onDropFile = _ref.onDropFile;
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-  return /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    onDrop: onDropFile,
-    onDragOver: onDragOver,
-    onDragLeave: onDragLeave,
+  return /*#__PURE__*/React.createElement("div", {
     className: "aurora-relative aurora-flex aurora-items-center aurora-justify-center aurora-w-full aurora-h-full aurora-cursor-pointer aurora-p-1 aurora-pb-2 aurora-group/imagePickerInput"
-  }, isDragOver && /*#__PURE__*/React.createElement(ImagePickerDragOverPlaceholder, null), /*#__PURE__*/React.createElement("div", {
+  }, isDragOver && /*#__PURE__*/React.createElement(ImagePickerDragOverPlaceholder, {
+    onDropFile: onDropFile
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('aurora-flex aurora-flex-col aurora-items-center aurora-w-full aurora-h-full aurora-pt-4 aurora-pb-3 aurora-px-1')
   }, /*#__PURE__*/React.createElement(UploadLineIcon, {
     className: "aurora-w-5 aurora-h-5 aurora-fill-subtle group-hover/imagePickerInput:aurora-fill-primary aurora-mb-2"

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_input.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview.js

@@ -5,7 +5,7 @@ var ImagePickerPreview = function ImagePickerPreview(_ref) {
     onError = _ref.onError,
     onLoad = _ref.onLoad;
   return /*#__PURE__*/React.createElement("div", {
-    className: 'aurora-rounded-4 aurora-w-full aurora-h-full aurora-min-h-16 aurora-flex aurora-justify-center aurora-items-center'
+    className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-min-h-16 aurora-flex aurora-justify-center aurora-items-center"
   }, /*#__PURE__*/React.createElement("img", {
     className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-object-contain",
     alt: file.fileName,

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview_container.js

@@ -2,15 +2,9 @@ import React from 'react';
 
 var ImagePickerPreviewContainer = function ImagePickerPreviewContainer(_ref) {
   var classname = _ref.classname,
-    children = _ref.children,
-    onDragLeave = _ref.onDragLeave,
-    onDragOver = _ref.onDragOver,
-    onDropFile = _ref.onDropFile;
-  return /*#__PURE__*/React.createElement("label", {
-    className: classname,
-    onDragLeave: onDragLeave,
-    onDragOver: onDragOver,
-    onDrop: onDropFile
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classname
   }, children);
 };
 

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview_container.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js

@@ -1,17 +1,12 @@
 import React from 'react';
-import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { DeleteBinLineIcon } from '../../../assets/icons/delete_bin_icon.js';
 import { FileUtils } from '@dreamcommerce/utilities';
+import { ImagePickerDeleteButton } from '../image_picker_delete_button.js';
 
 var UploadedImagePickerItem = function UploadedImagePickerItem(_ref) {
   var imageSize = _ref.imageSize,
     onFileDelete = _ref.onFileDelete,
     isValid = _ref.isValid,
     file = _ref.file;
-  var _useTranslation = useTranslation(),
-    _useTranslation2 = _slicedToArray(_useTranslation, 1),
-    t = _useTranslation2[0];
   var imageName = FileUtils.getFileName(file.fileName);
   var imageExtension = FileUtils.getFileExtension(file.fileName);
   var imageWidth = imageSize && imageSize.width;
@@ -20,16 +15,9 @@ var UploadedImagePickerItem = function UploadedImagePickerItem(_ref) {
     className: "aurora-flex aurora-justify-between aurora-items-center aurora-pt-2 aurora-px-1 aurora-gap-1"
   }, /*#__PURE__*/React.createElement("div", {
     className: "aurora-text-xs aurora-text-subtle aurora-overflow-hidden aurora-text-ellipsis"
-  }, isValid && (/*#__PURE__*/React.createElement(React.Fragment, null, imageName, ".".concat(imageExtension, " (").concat(imageWidth, "x").concat(imageHeight, "px)")))), /*#__PURE__*/React.createElement("button", {
-    "data-test-id": "image-picker-remove-button",
-    onClick: onFileDelete,
-    className: "aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-border-danger aurora-rounded-full aurora-px-3 aurora-py-[6px]",
-    type: "button"
-  }, /*#__PURE__*/React.createElement(DeleteBinLineIcon, {
-    className: "aurora-w-4 aurora-h-4 aurora-fill-danger"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "aurora-text-xs aurora-text-danger aurora-font-semibold"
-  }, "".concat(t('Remove')))));
+  }, isValid && (/*#__PURE__*/React.createElement(React.Fragment, null, imageName, "".concat(imageExtension ? '.' : '').concat(imageExtension, " (").concat(imageWidth, "x").concat(imageHeight, "px)")))), /*#__PURE__*/React.createElement(ImagePickerDeleteButton, {
+    onFileDelete: onFileDelete
+  }));
 };
 
 export { UploadedImagePickerItem };

package/build/esm/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/image_picker.d.ts

@@ -1,3 +1,3 @@
 import { IImagePicker } from './image_picker_types';
 import React from 'react';
-export declare const ImagePicker: React.FC<IImagePicker>;
+export declare const ImagePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<IImagePicker & React.RefAttributes<HTMLButtonElement>>>;

package/build/esm/packages/aurora/src/components/image_picker/image_picker.js

@@ -1,4 +1,4 @@
-import React, { memo, useState, useEffect, createRef } from 'react';
+import React, { memo, forwardRef, useState, useEffect, createRef } from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
@@ -8,15 +8,16 @@ import { ImagePickerDragOverPlaceholder } from './components/image_picker_drag_o
 import { ImagePickerInput } from './components/image_picker_input.js';
 import { ImagePickerPreview } from './components/image_picker_preview.js';
 import { ImagePickerPreviewContainer } from './components/image_picker_preview_container.js';
+import { ImagePickerDeleteButton } from './image_picker_delete_button.js';
 import { UploadedImagePickerItem } from './components/uploaded_image_picker_item.js';
 import { getAcceptFilesParametersFromAllowedExtensions } from './image_picker_utils.js';
 import { useImagePicker } from './use_image_picker.js';
 
-var ImagePicker = /*#__PURE__*/memo(function (_ref) {
+var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     onChange = _ref.onChange,
     onError = _ref.onError,
-    initialErrors = _ref.errors,
+    errors = _ref.errors,
     _ref$allowedExtension = _ref.allowedExtensions,
     allowedExtensions = _ref$allowedExtension === void 0 ? [IMAGE_PICKER_EXTENSIONS.WEBP, IMAGE_PICKER_EXTENSIONS.JPG, IMAGE_PICKER_EXTENSIONS.PNG, IMAGE_PICKER_EXTENSIONS.GIF, IMAGE_PICKER_EXTENSIONS.SVG, IMAGE_PICKER_EXTENSIONS.JPEG] : _ref$allowedExtension,
     allowedExtensionsLabel = _ref.allowedExtensionsLabel,
@@ -40,7 +41,6 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       initialFile: initialFile,
       onChange: handleOnChange,
       allowedExtensions: allowedExtensions,
-      initialErrors: initialErrors,
       onError: onError,
       inputRef: inputRef
     }),
@@ -52,7 +52,6 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     onPreviewError = _useImagePicker.onPreviewError,
     changeFile = _useImagePicker.changeFile,
     file = _useImagePicker.file,
-    errors = _useImagePicker.errors,
     isPreview = _useImagePicker.isPreview,
     isDragOver = _useImagePicker.isDragOver;
   var _useState = useState(undefined),
@@ -112,19 +111,25 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "aurora-mb-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('aurora-rounded-8 aurora-relative hover:aurora-border-active', {
+  }, /*#__PURE__*/React.createElement("button", {
+    className: cn('aurora-block aurora-w-full aurora-rounded-8 aurora-relative hover:aurora-border-active focus-visible:aurora-border-active focus-visible:aurora-outline-none', {
       'aurora-border aurora-border-dashed': !(errors && errors.length > 0 && !isDragOver),
-      'aurora-border-2 aurora-border-danger aurora-border-solid hover:aurora-border-danger': errors && errors.length > 0,
-      'aurora-border-none': isDragOver
-    })
+      'aurora-border-2 aurora-border-danger aurora-border-solid hover:aurora-border-danger focus-visible:aurora-border-danger': errors && errors.length > 0,
+      'aurora-border-transparent hover:aurora-border-transparent focus-visible:aurora-border-transparent': isDragOver
+    }),
+    onClick: function onClick() {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+    },
+    ref: ref,
+    type: 'button'
+  }, /*#__PURE__*/React.createElement("div", {
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave
   }, file && !(errors !== null && errors !== void 0 && errors.length) ? isPreview ? (/*#__PURE__*/React.createElement("div", {
     className: "aurora-p-1 aurora-relative"
   }, /*#__PURE__*/React.createElement(ImagePickerPreviewContainer, {
-    classname: "aurora-relative aurora-flex aurora-flex-col",
-    onDragLeave: onDragLeave,
-    onDragOver: onDragOver,
-    onDropFile: onDropFile
+    classname: "aurora-relative aurora-flex aurora-flex-col"
   }, topButtons && /*#__PURE__*/React.createElement(React.Fragment, null, topButtons), /*#__PURE__*/React.createElement("label", {
     htmlFor: id,
     className: "aurora-relative"
@@ -136,9 +141,11 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onFileDelete: handleOnFileDelete
-  })), isDragOver && /*#__PURE__*/React.createElement(ImagePickerDragOverPlaceholder, null))) : (/*#__PURE__*/React.createElement("div", null, "".concat(t('No preview')))) : (/*#__PURE__*/React.createElement(ImagePickerInput, {
-    onDragLeave: onDragLeave,
-    onDragOver: onDragOver,
+  })), isDragOver && /*#__PURE__*/React.createElement(ImagePickerDragOverPlaceholder, {
+    onDropFile: onDropFile
+  }))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "".concat(t('No preview'))), /*#__PURE__*/React.createElement(ImagePickerDeleteButton, {
+    onFileDelete: onFileDelete
+  }))) : (/*#__PURE__*/React.createElement(ImagePickerInput, {
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
     allowedExtensionsLabel: allowedExtensionsLabel,
@@ -152,13 +159,14 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     type: "file",
     name: name,
     accept: acceptFiles
-  })), errors && /*#__PURE__*/React.createElement(ErrorList, {
+  }))), errors && /*#__PURE__*/React.createElement(ErrorList, {
     errors: errors
   }));
-}, function (prev, curr) {
+}), function (prev, curr) {
   var _prev$initialFile, _curr$initialFile, _prev$initialFile2, _curr$initialFile2;
   return ((_prev$initialFile = prev.initialFile) === null || _prev$initialFile === void 0 ? void 0 : _prev$initialFile.fileUrl) === ((_curr$initialFile = curr.initialFile) === null || _curr$initialFile === void 0 ? void 0 : _curr$initialFile.fileUrl) && ((_prev$initialFile2 = prev.initialFile) === null || _prev$initialFile2 === void 0 ? void 0 : _prev$initialFile2.fileName) === ((_curr$initialFile2 = curr.initialFile) === null || _curr$initialFile2 === void 0 ? void 0 : _curr$initialFile2.fileName) && prev.errors === curr.errors && prev.editedImageResult === curr.editedImageResult && prev.topButtons === curr.topButtons;
 });
+ImagePicker.displayName = 'ImagePicker';
 
 export { ImagePicker };
 //# sourceMappingURL=image_picker.js.map

package/build/esm/packages/aurora/src/components/image_picker/image_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/image_picker_delete_button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ImagePickerDeleteButton: ({ onFileDelete }: {
+    onFileDelete: () => void;
+}) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/image_picker/image_picker_delete_button.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { DeleteBinLineIcon } from '../../assets/icons/delete_bin_icon.js';
+
+var ImagePickerDeleteButton = function ImagePickerDeleteButton(_ref) {
+  var onFileDelete = _ref.onFileDelete;
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  return /*#__PURE__*/React.createElement("button", {
+    "data-test-id": "image-picker-remove-button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onFileDelete();
+    },
+    className: "aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-border-danger aurora-rounded-full aurora-px-3 aurora-py-[6px]",
+    type: "button"
+  }, /*#__PURE__*/React.createElement(DeleteBinLineIcon, {
+    className: "aurora-w-4 aurora-h-4 aurora-fill-danger"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "aurora-text-xs aurora-text-danger aurora-font-semibold"
+  }, "".concat(t('Remove'))));
+};
+
+export { ImagePickerDeleteButton };
+//# sourceMappingURL=image_picker_delete_button.js.map

package/build/esm/packages/aurora/src/components/image_picker/image_picker_delete_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/image_picker_types.d.ts

@@ -27,16 +27,10 @@ export interface IImagePicker {
 }
 export interface IImagePickerInput {
     id: string;
-    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
     allowedExtensions: TImagePickerExtension[];
     isDragOver: boolean;
 }
 export interface IImagePickerPreviewContainer {
-    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
     children: ReactNode;
     classname: string;
 }
@@ -45,15 +39,14 @@ export declare type TImageSize = {
     height: number;
 };
 export interface IUseImagePicker {
-    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
-    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDropFile: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
     onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
     onFileDelete: () => void;
     onPreviewError: () => void;
     changeFile: (files: FileList) => void;
     file: TImagePickerFile | undefined;
-    errors: string[];
     isPreview: boolean;
     isDragOver: boolean;
 }
@@ -62,6 +55,5 @@ export interface IUseImagePickerProps {
     initialFile?: TImagePickerFile;
     allowedExtensions?: TImagePickerExtension[];
     inputRef: React.RefObject<HTMLInputElement>;
-    initialErrors?: TControlErrors;
     onError?: (errors: string[]) => void;
 }

package/build/esm/packages/aurora/src/components/image_picker/use_image_picker.d.ts

@@ -1,2 +1,2 @@
 import { IUseImagePicker, IUseImagePickerProps } from './image_picker_types';
-export declare const useImagePicker: ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }: IUseImagePickerProps) => IUseImagePicker;
+export declare const useImagePicker: ({ onChange, initialFile, allowedExtensions, inputRef, onError }: IUseImagePickerProps) => IUseImagePicker;