@dreamcommerce/aurora 2.18.0-0 → 2.18.0-2

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js

@@ -93,8 +93,11 @@ var useFilePicker = function useFilePicker(_ref) {
     return isValid;
   };
 
-  var onFileChange = function onFileChange(_ref2) {
-    var files = _ref2.target.files;
+  var onFileChange = function onFileChange(event) {
+    changeFile(event.target.files);
+  };
+
+  var changeFile = function changeFile(files) {
     setErrors([]);
     updateFile(files);
   };
@@ -163,6 +166,7 @@ var useFilePicker = function useFilePicker(_ref) {
     onDragLeave: onDragLeave,
     onFileDelete: onFileDelete,
     onPreviewError: onPreviewError,
+    changeFile: changeFile,
     file: file,
     errors: errors,
     isPreview: isPreview,

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -3,6 +3,8 @@ declare const _default: {
     imagePickerWrapper: string;
     imagePickerWrapperError: string;
     imagePickerWrapperHasFile: string;
+    imagePickerWrapperTopButtons: string;
+    imagePickerEditButton: string;
     imagePickerLabel: string;
     imagePickerDescription: string;
     imagePickerImagePreview: string;

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

@@ -4,6 +4,8 @@ var CSS_CLASSES = {
   imagePickerWrapper: "".concat(imagePicker, "__wrapper"),
   imagePickerWrapperError: "".concat(imagePicker, "__wrapper-error"),
   imagePickerWrapperHasFile: "".concat(imagePicker, "__wrapper-has-file"),
+  imagePickerWrapperTopButtons: "".concat(imagePicker, "__wrapper-top-buttons"),
+  imagePickerEditButton: "".concat(imagePicker, "__edit-button"),
   imagePickerLabel: "".concat(imagePicker, "__label"),
   imagePickerDescription: "".concat(imagePicker, "__description"),
   imagePickerImagePreview: "".concat(imagePicker, "__image-preview"),

package/build/esm/packages/aurora/src/components/image_picker/css_classes.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;"}
+{"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;"}

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

@@ -24,7 +24,9 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       name = _ref.name,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      onImageSizeUpdated = _ref.onImageSizeUpdated;
+      onImageSizeUpdated = _ref.onImageSizeUpdated,
+      topButtons = _ref.topButtons,
+      editedImageResult = _ref.editedImageResult;
 
   var _useTranslation = useTranslation(),
       _useTranslation2 = _slicedToArray(_useTranslation, 1),
@@ -46,6 +48,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       onDragLeave = _useFilePicker.onDragLeave,
       onFileDelete = _useFilePicker.onFileDelete,
       onPreviewError = _useFilePicker.onPreviewError,
+      changeFile = _useFilePicker.changeFile,
       file = _useFilePicker.file,
       errors = _useFilePicker.errors,
       isPreview = _useFilePicker.isPreview,
@@ -65,6 +68,18 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
   }, [initialFile]);
+  useEffect(function () {
+    if (!editedImageResult) return;
+    var fileList = createFileList(editedImageResult);
+    changeFile(fileList);
+    updateFile(fileList);
+  }, [editedImageResult]);
+
+  var createFileList = function createFileList(file) {
+    var fileArray = [];
+    fileArray.push(file);
+    return fileArray;
+  };
 
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
     createImageFromUrl(fileUrl).then(function (image) {
@@ -144,7 +159,9 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     className: imagePickerClassName
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(imagePickerWrapperClassName, " ").concat(dragOverStyles.imagePickerWrapper)
-  }, file && (isPreview ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePreview, {
+  }, file && (isPreview ? /*#__PURE__*/React.createElement(React.Fragment, null, topButtons && /*#__PURE__*/React.createElement("div", {
+    className: styles[CSS_CLASSES.imagePickerWrapperTopButtons]
+  }, topButtons), /*#__PURE__*/React.createElement(ImagePreview, {
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onError: onPreviewError
@@ -174,7 +191,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
 }, 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;
+  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;
 });
 
 export default ImagePicker;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/types.d.ts

@@ -1,19 +1,13 @@
 import { IFilePicker, TFilesExtension } from "../file_picker/types";
-import React from 'react';
+import React, { ReactNode } from 'react';
 export declare type TImagePickerFile = {
     fileUrl: string;
     fileName: string;
 };
 export interface IImagePicker extends IFilePicker {
     onImageSizeUpdated?: (imageSize?: TImageSize) => void;
-}
-export interface ISelectedImagePreview {
-    file: TImagePickerFile;
-    isPreview: boolean;
-    fileFormatIsCorrect?: boolean;
-    imageSize?: TImageSize;
-    onPreviewError: () => void;
-    onFileDelete: () => void;
+    topButtons?: ReactNode;
+    editedImageResult?: File;
 }
 export interface IImagePickerInput {
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/types.ts"],"names":[],"mappings":"AAAA,OAA6C,qCAAqC,CAAC;AAEnF,OAAkB,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/types.ts"],"names":[],"mappings":"AAAA,OAA6C,qCAAqC,CAAC;AACnF,OAAiC,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/modal_new/components/modal/modal.js

@@ -16,6 +16,8 @@ var ModalNew = function ModalNew(_ref) {
       animationDirection = _ref$animationDirecti === void 0 ? MODAL_ANIMATION_DIRECTIONS.top : _ref$animationDirecti,
       header = _ref.header,
       footer = _ref.footer,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
       children = _ref.children;
 
   var _useState = useState(false),
@@ -82,7 +84,11 @@ var ModalNew = function ModalNew(_ref) {
   if (!$modalsManagerContainer) return null;
   return renderModal ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     id: name,
-    className: modalClassNames
+    className: "".concat(modalClassNames, " js__modal"),
+    style: {
+      minWidth: minWidth,
+      maxHeight: maxWidth
+    }
   }, header && /*#__PURE__*/React.createElement(ModalHeader, {
     content: header.content,
     closeAction: handleCloseModal

package/build/esm/packages/aurora/src/components/modal_new/components/modal/modal.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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/modal_new/components/modals_wrapper.js

@@ -46,7 +46,7 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
   }, showWrapper && /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles[cssModalsManagerWrapper])
   }, /*#__PURE__*/React.createElement("div", {
-    className: modalsWrapperBackdropClassNames
+    className: "".concat(modalsWrapperBackdropClassNames, " js__modal-mask")
   }), /*#__PURE__*/React.createElement("div", {
     id: MODALS_CONTENT_ID,
     className: "".concat(styles[cssModalsManagerWrapperContent])

package/build/esm/packages/aurora/src/components/modal_new/types.d.ts

@@ -22,6 +22,8 @@ export interface IModalNewProps {
     animationDirection?: typeof MODAL_ANIMATION_DIRECTIONS[keyof typeof MODAL_ANIMATION_DIRECTIONS];
     header?: IModalHeaderProps;
     footer?: IModalFooterProps;
+    minWidth?: string;
+    maxWidth?: string;
     children: ReactNode;
 }
 export interface IModalHeaderProps {

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import { IXhrImagePickerProps } from "./types";
+import React from 'react';
 declare const XhrImagePicker: React.FC<IXhrImagePickerProps>;
 export default XhrImagePicker;

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js

@@ -1,8 +1,14 @@
-import React, { useRef, useEffect } from 'react';
-import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { FILES_EXTENSIONS } from '../file_picker/constants.js';
-import { REQUEST_TYPES } from '../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js';
+import CSS_CLASSES from '../image_picker/css_classes.js';
+import IconImage from '../../assets/icon_image.js';
+import styles from '../../css/image_picker/main.module.less.js';
 import ImagePicker from '../image_picker/index.js';
+import { useModalsContext } from '../modal_new/hooks/use_modals_context.js';
+import { ModalNew } from '../modal_new/components/modal/modal.js';
+import { REQUEST_TYPES } from '../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js';
 import { useHttpApi } from '../../hooks/use_http_api.js';
 
 var XhrImagePicker = function XhrImagePicker(_ref) {
@@ -16,32 +22,65 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       onChange = _ref.onChange,
       onImageSizeUpdated = _ref.onImageSizeUpdated,
       _ref$allowedExtension = _ref.allowedExtensions,
-      allowedExtensions = _ref$allowedExtension === void 0 ? [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG, FILES_EXTENSIONS.JPEG] : _ref$allowedExtension;
+      allowedExtensions = _ref$allowedExtension === void 0 ? [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG, FILES_EXTENSIONS.JPEG] : _ref$allowedExtension,
+      ImageEditor = _ref.ImageEditor;
+
+  var _useTranslation = useTranslation(),
+      _useTranslation2 = _slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
+
   var httpApi = useHttpApi();
   var pendingRequestRef = React.useRef();
   var initialImageFile = useRef();
 
+  var _useModalsContext = useModalsContext(),
+      showModal = _useModalsContext.showModal,
+      hideModal = _useModalsContext.hideModal;
+
+  var modalId = "image-picker-editor-".concat(id);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialImage = _useState2[0],
+      setInitialImage = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      image = _useState4[0],
+      setImage = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      imageEditorSrc = _useState6[0],
+      setImageEditorSrc = _useState6[1];
+
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      imageEditorResult = _useState8[0],
+      setImageEditorResult = _useState8[1];
+
   var handleControlChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-      var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, data;
+      var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
 
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
+            fileList && setImage(fileList[0]);
             onChange === null || onChange === void 0 || onChange({
               fileList: fileList,
               fileAsDataUrl: fileAsDataUrl
             });
 
             if (!(!fileList || !fileList.length)) {
-              _context.next = 4;
+              _context.next = 5;
               break;
             }
 
             return _context.abrupt("return");
 
-          case 4:
+          case 5:
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
@@ -53,18 +92,18 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 9;
+            _context.next = 10;
             return response;
 
-          case 9:
-            data = _context.sent;
+          case 10:
+            responseObject = _context.sent;
             onUploaded === null || onUploaded === void 0 || onUploaded({
               fileList: fileList,
               dataUrl: fileAsDataUrl,
-              imageId: data.imageId
+              imageId: responseObject.data.imageId
             });
 
-          case 11:
+          case 12:
           case "end":
             return _context.stop();
         }
@@ -78,13 +117,56 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
   useEffect(function () {
     initialImageFile.current = initialFile;
+
+    var setFileFromUrl = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fileData) {
+        var response, data, file;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return fetch(fileData.fileUrl);
+
+            case 2:
+              response = _context2.sent;
+              _context2.next = 5;
+              return response.blob();
+
+            case 5:
+              data = _context2.sent;
+              file = new File([data], fileData.fileName);
+              setInitialImage(file);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+
+      return function setFileFromUrl(_x2) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    if (!initialImageFile.current) return;
+    setFileFromUrl(initialImageFile.current);
     return function () {
       var _pendingRequestRef$cu;
 
       return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(ImagePicker, {
+  useEffect(function () {
+    var src = image !== null && image !== void 0 ? image : initialImage;
+    setImageEditorSrc(src !== null && src !== void 0 ? src : '');
+  }, [image, initialImage]);
+
+  var renderImageEditor = function renderImageEditor(defaultProps) {
+    return ImageEditor ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageEditor, _objectSpread2({}, defaultProps))) : null;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePicker, {
     id: id,
     name: name,
     onChange: handleControlChange,
@@ -92,8 +174,26 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
     errors: errors,
     allowedExtensions: allowedExtensions,
     initialFile: initialImageFile.current,
-    onImageSizeUpdated: onImageSizeUpdated
-  });
+    onImageSizeUpdated: onImageSizeUpdated,
+    topButtons: ImageEditor && /*#__PURE__*/React.createElement("button", {
+      className: styles[CSS_CLASSES.imagePickerEditButton],
+      onClick: function onClick() {
+        return showModal(modalId);
+      },
+      type: "button"
+    }, /*#__PURE__*/React.createElement(IconImage, null), t('Edit')),
+    editedImageResult: imageEditorResult
+  }), ImageEditor && /*#__PURE__*/React.createElement(ModalNew, {
+    name: modalId,
+    header: t('Edit image'),
+    minWidth: "80vw"
+  }, renderImageEditor({
+    src: imageEditorSrc,
+    onEditionDone: function onEditionDone(result) {
+      hideModal(modalId);
+      setImageEditorResult(result);
+    }
+  })));
 };
 
 export default XhrImagePicker;

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.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;"}
+{"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;AACA;AACA;AACA;AACA;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/xhr_image_picker/types.d.ts

@@ -1,8 +1,14 @@
+/// <reference types="react" />
 import { IImagePicker } from "../image_picker/types";
-export interface IXhrImagePickerProps extends IImagePicker {
+export interface IXhrImagePickerProps extends Omit<IImagePicker, 'topButtons'> {
     url: string;
     onUploaded?: (data: TUploadedImageData) => void;
     onUploadError?: Function;
+    ImageEditor?: React.FunctionComponent;
+}
+export interface IImageEditorProps {
+    src?: File | string;
+    onEditionDone?: (result: File | undefined) => void;
 }
 export declare type TUploadedImageData = {
     fileList: FileList;

package/build/esm/packages/aurora/src/css/color_picker_new/main.module.less.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 250px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n  background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n  width: 24px;\n  height: 24px;\n  background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n  cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n  display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #ececec;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child) {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child):hover {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 250px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n  background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n  width: 24px;\n  height: 24px;\n  background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n  cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n  display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #abb4cd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n  width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n  width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
 var styles = {
   "color-picker__container": "main-module_color-picker__container__14ccI",
   "color-picker__rbgcp": "main-module_color-picker__rbgcp__2FKdw",

package/build/esm/packages/aurora/src/css/controls/main.module.less.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n.main-module_controls__1yrPe:not(:last-child) {\n  margin-bottom: 1rem;\n}\n.main-module_controls_error__1aqLg svg {\n  fill: #e60c54;\n}\n.main-module_controls_error__1aqLg * {\n  color: #e60c54;\n}\n.main-module_controls__content__4Zj5y {\n  display: flex;\n  align-items: flex-start;\n  margin-left: -0.25rem;\n  margin-right: -0.25rem;\n}\n.main-module_controls__content_auto__25ns9 {\n  min-width: auto;\n}\n.main-module_controls__content_block__2Siky {\n  flex-direction: column;\n}\n.main-module_controls__content_block__2Siky .main-module_controls__element__YU7DA:not(:last-child) {\n  margin-bottom: 1rem;\n}\n.main-module_controls__content_vcenter__3T-e7 {\n  display: flex;\n  align-items: center;\n}\n.main-module_controls__content_clear-margin__3qJ66 {\n  margin-left: 0;\n  margin-right: 0;\n}\n.main-module_controls__element__YU7DA {\n  flex: 0 1 100%;\n  max-width: 100%;\n  padding: 0 0.25rem;\n}\n.main-module_controls__element_auto__5AjdP {\n  flex-basis: auto;\n}\n.main-module_controls__element_full__1GU_6 {\n  flex-basis: 100%;\n}\n.main-module_controls__element_three-quarters__7L5AA {\n  flex-basis: 75%;\n}\n.main-module_controls__element_half__3B2Jl {\n  flex-basis: 50%;\n}\n.main-module_controls__element_quarter__2nuhI {\n  flex-basis: 25%;\n  max-width: 25%;\n}\n.main-module_controls__element_prefix__3kJbw,\n.main-module_controls__element_postfix__2qdjJ {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n.main-module_controls__element_prefix__3kJbw::before {\n  content: attr(data-prefix);\n  position: absolute;\n  left: 0.965em;\n  z-index: 1;\n}\n.main-module_controls__element_prefix__3kJbw .main-module_control__RIN7v {\n  padding-left: 2.5025em;\n}\n.main-module_controls__element_postfix__2qdjJ::after {\n  content: attr(data-postfix);\n  position: absolute;\n  right: 0.965em;\n  z-index: 1;\n}\n.main-module_controls__element_postfix__2qdjJ .main-module_control__RIN7v {\n  padding-right: 2.86em;\n}\n.main-module_controls__element_checkbox__tJ0tm,\n.main-module_controls__element_checkbox-switch__L_Lic,\n.main-module_controls__element_radio__2kCck,\n.main-module_controls__element_color-picker__3wTA0 {\n  display: flex;\n  align-items: center;\n}\n.main-module_controls__element_checkbox__tJ0tm .main-module_checkbox__vRI_x,\n.main-module_controls__element_checkbox-switch__L_Lic .main-module_checkbox__vRI_x,\n.main-module_controls__element_radio__2kCck .main-module_checkbox__vRI_x,\n.main-module_controls__element_color-picker__3wTA0 .main-module_checkbox__vRI_x,\n.main-module_controls__element_checkbox__tJ0tm .main-module_radio__yu617,\n.main-module_controls__element_checkbox-switch__L_Lic .main-module_radio__yu617,\n.main-module_controls__element_radio__2kCck .main-module_radio__yu617,\n.main-module_controls__element_color-picker__3wTA0 .main-module_radio__yu617 {\n  flex: 0 0 auto;\n}\n.main-module_controls__element_spread__28eqq {\n  justify-content: space-between;\n  align-items: center;\n}\n.main-module_controls__element_vcenter__2xs_a {\n  display: flex;\n  align-items: center;\n}\n.main-module_controls__element_vtop__257yQ {\n  display: flex;\n  align-items: flex-start;\n}\n.main-module_controls__element_hcenter__2tkPq {\n  display: flex;\n  justify-content: center;\n}\n.main-module_controls__label__1HTDS {\n  display: flex;\n  align-items: center;\n  color: #2d3748;\n  margin-bottom: 0.3rem;\n}\n.main-module_controls__label_with-postfix__1g002 {\n  display: flex;\n  justify-content: space-between;\n}\n.main-module_controls__hint__UZPP2 {\n  display: flex;\n  margin-top: -0.25rem;\n  margin-left: 0.5rem;\n}\n.main-module_controls__errors__1nRxU {\n  margin-top: 0.4rem;\n  font-size: 11px;\n  font-size: 0.7857142857142857rem;\n  color: #e60c54;\n  text-align: left;\n}\n.main-module_controls__errors-label__2yGyP {\n  cursor: default;\n}\n.main-module_controls__errors-list__1eq14 {\n  padding: 0.5rem;\n  background-color: #ffffff;\n}\n.main-module_controls__errors-list-item__DzpwC {\n  list-style-type: none;\n}\n.main-module_controls__errors-list-item__DzpwC:not(:last-child) {\n  margin-bottom: 0.5rem;\n}\n.main-module_controls__additional-info__3yRra {\n  font-size: 11px;\n  font-size: 0.7857142857142857rem;\n  color: #5c657e;\n  margin: 0;\n}\n.main-module_controls__additional-content__1jX07 {\n  margin-left: 2.5rem;\n  margin-top: 1rem;\n}\n.main-module_controls__additional-content_with-border__38d_y {\n  margin-left: 0.8rem;\n  border-left: 1px solid #d0e6ff;\n  padding-left: 1.7rem;\n}\n.main-module_controls__additional-content_checkbox-switch__1I7F_ {\n  margin-left: 3.2rem;\n}\n.main-module_controls__icon__2aZg7 {\n  position: absolute;\n  left: 1.25rem;\n  pointer-events: none;\n}\n.main-module_controls__element_with-icon__188vU {\n  align-items: center;\n  position: relative;\n  display: flex;\n}\ninput,\ntextarea {\n  box-sizing: border-box;\n  -webkit-font-smoothing: antialiased;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  color: #5c657e;\n  background-color: #ffffff;\n}\ninput ::before,\ntextarea ::before,\ninput ::after,\ntextarea ::after {\n  box-sizing: border-box;\n  -webkit-font-smoothing: antialiased;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n}\ninput[type='number'] {\n  -moz-appearance: textfield;\n}\ntextarea {\n  min-height: 8rem;\n  resize: vertical;\n}\n/** ugly fix for same height for input and select in firefox */\n@-moz-document url-prefix() {\n  option {\n    font-size: 12px;\n    font-size: 0.8571428571428571rem;\n  }\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n.main-module_controls__1yrPe:not(:last-child) {\n  margin-bottom: 1rem;\n}\n.main-module_controls_error__1aqLg svg {\n  fill: #e60c54;\n}\n.main-module_controls_error__1aqLg * {\n  color: #e60c54;\n}\n.main-module_controls__content__4Zj5y {\n  display: flex;\n  align-items: flex-start;\n  margin-left: -0.25rem;\n  margin-right: -0.25rem;\n}\n.main-module_controls__content_auto__25ns9 {\n  min-width: auto;\n}\n.main-module_controls__content_block__2Siky {\n  flex-direction: column;\n}\n.main-module_controls__content_block__2Siky .main-module_controls__element__YU7DA:not(:last-child) {\n  margin-bottom: 1rem;\n}\n.main-module_controls__content_vcenter__3T-e7 {\n  display: flex;\n  align-items: center;\n}\n.main-module_controls__content_clear-margin__3qJ66 {\n  margin-left: 0;\n  margin-right: 0;\n}\n.main-module_controls__element__YU7DA {\n  flex: 0 1 100%;\n  max-width: 100%;\n  padding: 0 0.25rem;\n}\n.main-module_controls__element_auto__5AjdP {\n  flex-basis: auto;\n}\n.main-module_controls__element_full__1GU_6 {\n  flex-basis: 100%;\n}\n.main-module_controls__element_three-quarters__7L5AA {\n  flex-basis: 75%;\n}\n.main-module_controls__element_half__3B2Jl {\n  flex-basis: 50%;\n}\n.main-module_controls__element_quarter__2nuhI {\n  flex-basis: 25%;\n  max-width: 25%;\n}\n.main-module_controls__element_prefix__3kJbw,\n.main-module_controls__element_postfix__2qdjJ {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n.main-module_controls__element_prefix__3kJbw::before {\n  content: attr(data-prefix);\n  position: absolute;\n  left: 0.965em;\n  z-index: 1;\n}\n.main-module_controls__element_prefix__3kJbw .main-module_control__RIN7v {\n  padding-left: 2.5025em;\n}\n.main-module_controls__element_postfix__2qdjJ::after {\n  content: attr(data-postfix);\n  position: absolute;\n  right: 0.965em;\n  z-index: 1;\n}\n.main-module_controls__element_postfix__2qdjJ .main-module_control__RIN7v {\n  padding-right: 2.86em;\n}\n.main-module_controls__element_checkbox__tJ0tm,\n.main-module_controls__element_checkbox-switch__L_Lic,\n.main-module_controls__element_radio__2kCck,\n.main-module_controls__element_color-picker__3wTA0 {\n  display: flex;\n  align-items: center;\n}\n.main-module_controls__element_checkbox__tJ0tm .main-module_checkbox__vRI_x,\n.main-module_controls__element_checkbox-switch__L_Lic .main-module_checkbox__vRI_x,\n.main-module_controls__element_radio__2kCck .main-module_checkbox__vRI_x,\n.main-module_controls__element_color-picker__3wTA0 .main-module_checkbox__vRI_x,\n.main-module_controls__element_checkbox__tJ0tm .main-module_radio__yu617,\n.main-module_controls__element_checkbox-switch__L_Lic .main-module_radio__yu617,\n.main-module_controls__element_radio__2kCck .main-module_radio__yu617,\n.main-module_controls__element_color-picker__3wTA0 .main-module_radio__yu617 {\n  flex: 0 0 auto;\n}\n.main-module_controls__element_spread__28eqq {\n  justify-content: space-between;\n  align-items: center;\n}\n.main-module_controls__element_vcenter__2xs_a {\n  display: flex;\n  align-items: center;\n}\n.main-module_controls__element_vtop__257yQ {\n  display: flex;\n  align-items: flex-start;\n}\n.main-module_controls__element_hcenter__2tkPq {\n  display: flex;\n  justify-content: center;\n}\n.main-module_controls__label__1HTDS {\n  display: flex;\n  align-items: center;\n  color: #2d3748;\n  margin-bottom: 0.3rem;\n}\n.main-module_controls__label_with-postfix__1g002 {\n  display: flex;\n  justify-content: space-between;\n}\n.main-module_controls__hint__UZPP2 {\n  display: flex;\n  margin-top: -0.25rem;\n  margin-left: 0.5rem;\n}\n.main-module_controls__errors__1nRxU {\n  margin-top: 0.4rem;\n  font-size: 11px;\n  font-size: 0.7857142857142857rem;\n  color: #e60c54;\n  text-align: left;\n}\n.main-module_controls__errors-label__2yGyP {\n  cursor: default;\n}\n.main-module_controls__errors-list__1eq14 {\n  padding: 0.5rem;\n  background-color: #ffffff;\n}\n.main-module_controls__errors-list-item__DzpwC {\n  list-style-type: none;\n}\n.main-module_controls__errors-list-item__DzpwC:not(:last-child) {\n  margin-bottom: 0.5rem;\n}\n.main-module_controls__additional-info__3yRra {\n  font-size: 11px;\n  font-size: 0.7857142857142857rem;\n  color: #5c657e;\n  margin: 0;\n}\n.main-module_controls__additional-content__1jX07 {\n  margin-left: 2.5rem;\n  margin-top: 1rem;\n}\n.main-module_controls__additional-content_with-border__38d_y {\n  margin-left: 0.8rem;\n  border-left: 1px solid #d0e6ff;\n  padding-left: 1.7rem;\n}\n.main-module_controls__additional-content_checkbox-switch__1I7F_ {\n  margin-left: 3.2rem;\n}\n.main-module_controls__icon__2aZg7 {\n  position: absolute;\n  left: 1.25rem;\n  pointer-events: none;\n}\n.main-module_controls__element_with-icon__188vU {\n  align-items: center;\n  position: relative;\n  display: flex;\n}\ninput,\ntextarea {\n  box-sizing: border-box;\n  -webkit-font-smoothing: antialiased;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  color: #5c657e;\n  background-color: #ffffff;\n  width: 100%;\n}\ninput ::before,\ntextarea ::before,\ninput ::after,\ntextarea ::after {\n  box-sizing: border-box;\n  -webkit-font-smoothing: antialiased;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n}\ninput[type='number'] {\n  -moz-appearance: textfield;\n}\ntextarea {\n  min-height: 8rem;\n  resize: vertical;\n}\n/** ugly fix for same height for input and select in firefox */\n@-moz-document url-prefix() {\n  option {\n    font-size: 12px;\n    font-size: 0.8571428571428571rem;\n  }\n}\n";
 var cssStyles = {
   "controls": "main-module_controls__1yrPe",
   "controls_error": "main-module_controls_error__1aqLg",

package/build/esm/packages/aurora/src/css/hint/main.module.less.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n  vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n  margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n  margin-right: 1rem;\n}\n.main-module_hint__content__IIh3W {\n  min-width: 258px;\n  max-width: 500px;\n  padding: 1rem !important;\n  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n  background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n  border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n  border-color: transparent transparent #fff6cc transparent;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n  vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n  margin-left: 0.5rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n  margin-right: 1rem;\n}\n.main-module_hint__content__IIh3W {\n  min-width: 258px;\n  max-width: 500px;\n  padding: 1rem !important;\n  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n  background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n  border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n  border-color: transparent transparent #fff6cc transparent;\n}\n";
 var cssClasses = {
   "hint": "main-module_hint__3cahT",
   "hint_spacing-left": "main-module_hint_spacing-left__1dKcO",

package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n  color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n  color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n  fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  position: relative;\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  top: 1rem;\n  right: 1rem;\n  z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background-color: #ffffff;\n  background-image: none;\n  border: 0;\n  border-radius: 2px;\n  padding: 0.5rem;\n  font-size: 12px;\n  color: #3c83ec;\n  cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n  color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n  color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n  fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
 var styles = {
   "image-picker__wrapper": "main-module_image-picker__wrapper__2RK3f",
   "image-picker__wrapper-error": "main-module_image-picker__wrapper-error__kCZeA",
@@ -8,6 +8,8 @@ var styles = {
   "image-picker__label": "main-module_image-picker__label__1i_Fq",
   "image-picker__description": "main-module_image-picker__description__1v13N",
   "image-picker__upload-icon": "main-module_image-picker__upload-icon__3sMvN",
+  "image-picker__wrapper-top-buttons": "main-module_image-picker__wrapper-top-buttons__241RY",
+  "image-picker__edit-button": "main-module_image-picker__edit-button__3O-iq",
   "image-picker__input": "main-module_image-picker__input__3Wu2I",
   "image-picker__supported-formats": "main-module_image-picker__supported-formats__1_R_X",
   "image-picker__delete-button": "main-module_image-picker__delete-button__21_kT",

package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;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,wBAAwB,8DAAkE;AAC1F;AACA;AACA;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/css/input/main.module.less.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_control__3q9YC {\n  width: 100%;\n  padding: 0.715em;\n  display: block;\n  outline: 0;\n  font-family: inherit;\n  color: #2d3748;\n  font-size: 14px;\n  font-size: 1rem;\n  transition: box-shadow 0.2s ease-in, border-color 0.1s ease-out;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  background-color: #ffffff;\n  border: 1px solid #abb4cd;\n  border-radius: 3px;\n}\n.main-module_control_error__3ZjY4 {\n  border-color: #e60c54 !important;\n}\n.main-module_control__3q9YC:hover {\n  border-color: #5c657e;\n}\n.main-module_control__3q9YC:focus,\n.main-module_control_focus__3cPNu {\n  border-color: #3c83ec;\n  box-shadow: 0 0 3px 0 #3c83ec;\n}\n.main-module_control_disabled__3aXd_ {\n  background-color: #ececec;\n  border-color: #ececec;\n  color: #abb4cd;\n}\n.main-module_control_disabled__3aXd_ .main-module_control__input__sYzjo {\n  background-color: #ececec;\n  color: #abb4cd;\n}\n.main-module_control_s__3r0PG {\n  padding: 0.6rem 0.7rem;\n  gap: 0.6rem;\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  border-radius: 26.01px;\n}\n.main-module_control_s__3r0PG:hover {\n  border-color: #3c83ec;\n  box-shadow: 0 0 3px 0 #3c83ec;\n}\n.main-module_control_s__3r0PG div span {\n  vertical-align: top;\n}\n.main-module_control_wrapper__hK5up {\n  padding-right: 2rem;\n  display: flex;\n}\n.main-module_control__input__sYzjo {\n  cursor: default;\n}\n.main-module_control__remove-button__2QN9- {\n  background-color: transparent;\n  padding-right: 11px;\n  border-right: 1px solid #abb4cd;\n  cursor: pointer;\n}\n::-moz-placeholder {\n  color: #abb4cd;\n}\n:-ms-input-placeholder {\n  color: #abb4cd;\n}\n::placeholder {\n  color: #abb4cd;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_control__3q9YC {\n  width: 100%;\n  padding: 0.715em;\n  display: block;\n  outline: 0;\n  font-family: inherit;\n  color: #2d3748;\n  font-size: 14px;\n  font-size: 1rem;\n  transition: box-shadow 0.2s ease-in, border-color 0.1s ease-out;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  background-color: #ffffff;\n  border: 1px solid #abb4cd;\n  border-radius: 3px;\n}\n.main-module_control_error__3ZjY4 {\n  border-color: #e60c54 !important;\n}\n.main-module_control__3q9YC:hover {\n  border-color: #5c657e;\n}\n.main-module_control__3q9YC:focus,\n.main-module_control_focus__3cPNu {\n  border-color: #3c83ec;\n  box-shadow: 0 0 3px 0 #3c83ec;\n}\n.main-module_control_disabled__3aXd_ {\n  background-color: #ececec;\n  border-color: #ececec;\n  color: #abb4cd;\n}\n.main-module_control_disabled__3aXd_ input {\n  background-color: #ececec;\n}\n.main-module_control_disabled__3aXd_ .main-module_control__input__sYzjo {\n  background-color: #ececec;\n  color: #abb4cd;\n}\n.main-module_control_s__3r0PG {\n  padding: 0.326em;\n}\n.main-module_control_wrapper__hK5up {\n  padding-right: 2rem;\n  display: flex;\n}\n.main-module_control__input__sYzjo {\n  cursor: default;\n}\n.main-module_control__remove-button__2QN9- {\n  background-color: transparent;\n  padding-right: 11px;\n  border-right: 1px solid #abb4cd;\n  cursor: pointer;\n}\n.main-module_control__pre-element__1QG1E {\n  padding: 0.6rem 0.7rem;\n  border-radius: 23px;\n  gap: 0.5rem;\n  display: flex;\n  justify-content: start;\n  align-items: center;\n}\n.main-module_control__pre-element__1QG1E:hover {\n  border-color: #3c83ec;\n  box-shadow: 0 0 3px 0 #3c83ec;\n}\n::-moz-placeholder {\n  color: #abb4cd;\n}\n:-ms-input-placeholder {\n  color: #abb4cd;\n}\n::placeholder {\n  color: #abb4cd;\n}\n";
 var inputCssClasses = {
   "control": "main-module_control__3q9YC",
   "control_error": "main-module_control_error__3ZjY4",
@@ -9,7 +9,8 @@ var inputCssClasses = {
   "control__input": "main-module_control__input__sYzjo",
   "control_s": "main-module_control_s__3r0PG",
   "control_wrapper": "main-module_control_wrapper__hK5up",
-  "control__remove-button": "main-module_control__remove-button__2QN9-"
+  "control__remove-button": "main-module_control__remove-button__2QN9-",
+  "control__pre-element": "main-module_control__pre-element__1QG1E"
 };
 styleInject(css_248z);
 

package/build/esm/packages/aurora/src/css/input/main.module.less.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;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,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/index.d.ts

@@ -54,6 +54,7 @@ import { IControlRadioGroupOption } from "./components/controls/types";
 import { IDatepickerRange } from "./components/date_picker/types";
 import { IDropdownContext } from "./components/dropdown/context/types";
 import { IHeadingProps } from "./components/heading/types";
+import { IImageEditorProps } from "./components/xhr_image_picker/types";
 import { ILoaderProps } from "./components/loader/types";
 import { IWithLoader } from "./components/with_loader/types";
 import IconArrow from "./assets/icon_arrow";
@@ -127,4 +128,4 @@ export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect
 /**
  * export types
  */
-export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IColorPickerColor, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize };
+export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IColorPickerColor, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize, IImageEditorProps };

package/build/esm/packages/aurora/src/index.js

@@ -38,6 +38,7 @@ export { default as TagsSelector } from './components/tags_selector/index.js';
 export { default as ControlTagsSelector } from './components/controls/hoc/control_tags_selector/index.js';
 export { default as ControlTextarea } from './components/controls/hoc/control_textarea/index.js';
 export { default as ImagePicker } from './components/image_picker/index.js';
+export { ModalNew } from './components/modal_new/components/modal/modal.js';
 export { default as XhrImagePicker } from './components/xhr_image_picker/index.js';
 export { default as ControlXhrImagePicker } from './components/controls/hoc/control_xhr_image_picker/index.js';
 export { default as Table } from './components/table/index.js';
@@ -59,7 +60,6 @@ export { default as Link } from './components/link/index.js';
 export { default as Loader } from './components/loader/index.js';
 export { default as Modal } from './components/modal/index.js';
 export { ModalContext } from './components/modal/context/modal_context.js';
-export { ModalNew } from './components/modal_new/components/modal/modal.js';
 export { default as ModalProvider } from './components/modal/hoc/modal_provider.js';
 export { default as useModals } from './components/modal_new/hooks/use_modals.js';
 export { default as ModalsManager } from './components/modal_new/index.js';

package/build/esm/packages/aurora/src/translations/en.json

@@ -55,5 +55,7 @@
     "Invalid file format": "Invalid file format",
     "save": "save",
     "Shades of color": "Shades of color",
-    "Select color": "Select color"
+    "Select color": "Select color",
+    "Edit": "Edit",
+    "Edit image": "Edit image"
 }