@dreamcommerce/aurora 2.5.2 → 2.5.3-2

package/build/cjs/packages/aurora/src/assets/icon_wrong_file_format.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var main_module = require('../css/icons/main.module.less.js');
+var icon = require('./icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const IconWrongFileFormat = ({ className = '', size }) => (React__default['default'].createElement(icon['default'], null,
+    React__default['default'].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 52", width: "67", height: "52", className: `${className || ''} ${main_module['default'][`icon_${size}`]}` },
+        React__default['default'].createElement("path", { d: "M36.9768 2H1.5V49.9829H29.9977M44.5374 2H65.4745V49.9829H39.8847", stroke: "#ABB4CD", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3" }),
+        React__default['default'].createElement("path", { d: "m36.976 2-7.5606 7.7972 9.8869 10.196-9.8869 10.196 9.8869 10.196-9.3053 9.5965", stroke: "#ABB4CD", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3" }),
+        React__default['default'].createElement("path", { d: "m34.069 45.784-15.703-15.594-16.866 16.794v2.9989h28.498l4.0711-4.1985z", fill: "#ABB4CD", stroke: "#ABB4CD", strokeLinejoin: "round", strokeWidth: "2" }),
+        React__default['default'].createElement("path", { d: "m45.726 24.793 19.774 20.393v4.7983h-26.753c-0.1938 0.1999 1.1365-1.3195 5.7892-6.5976 4.6526-5.2782-2.3263-8.3971-5.2076-11.996l6.3974-6.5976z", fill: "#ABB4CD", stroke: "#ABB4CD", strokeLinejoin: "round", strokeWidth: "3" }),
+        React__default['default'].createElement("circle", { cx: "54.352", cy: "13.197", r: "4", fill: "#ABB4CD" }))));
+
+exports.default = IconWrongFileFormat;
+//# sourceMappingURL=icon_wrong_file_format.js.map

package/build/cjs/packages/aurora/src/assets/icon_wrong_file_format.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/aurora/src/components/controls/hoc/control_image_picker/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../index.js');
+var index$1 = require('../../../hint/index.js');
+var index$2 = require('../../../image_picker/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ControlImagePicker = ({ label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo, hasWidthInput, widthInputPostfix, widthInputLabel, widthInputHint }) => {
+    return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
+        (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
+            label,
+            hint && React__default['default'].createElement(index$1['default'], { hint: hint, spacingLeft: true }))),
+        React__default['default'].createElement(index['default'].Content, null,
+            React__default['default'].createElement(index['default'].Element, null,
+                React__default['default'].createElement(index$2['default'], { id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, hasWidthInput: hasWidthInput, widthInputPostfix: widthInputPostfix, widthInputLabel: widthInputLabel, widthInputHint: widthInputHint }))),
+        React__default['default'].createElement(index['default'].Errors, null)));
+};
+
+exports.default = ControlImagePicker;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/controls/hoc/control_image_picker/index.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/aurora/src/components/file_picker/constants.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const FILE_PICKER_ERROR = {
+    invalidFileFormat: 'Invalid file format',
+    invalidInputWidth: 'The value cannot be greater than the width of the uploaded file'
+};
+const JPG_EXTENSION = 'jpg';
+const JPEG_EXTENSION = 'jpeg';
+const SVG_MIME_TYPE = 'svg+xml';
+const SVG_EXTENSION = 'svg';
+
+exports.FILE_PICKER_ERROR = FILE_PICKER_ERROR;
+exports.JPEG_EXTENSION = JPEG_EXTENSION;
+exports.JPG_EXTENSION = JPG_EXTENSION;
+exports.SVG_EXTENSION = SVG_EXTENSION;
+exports.SVG_MIME_TYPE = SVG_MIME_TYPE;
+//# sourceMappingURL=constants.js.map

package/build/cjs/packages/aurora/src/components/file_picker/constants.js.map

@@ -0,0 +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;"}

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

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var constants = require('./constants.js');
 
-const useFilePicker = ({ onChange, initialFile }) => {
+const useFilePicker = ({ onChange, initialFile, allowedExtensions }) => {
     const [file, setFile] = React.useState(initialFile);
+    const [errors, setErrors] = React.useState([]);
     const [isDragOver, setDragOver] = React.useState(false);
     const [isPreview, setPreview] = React.useState(true);
+    const [isVectorImage, setIsVectorImage] = React.useState(false);
     React.useEffect(() => {
         setFile(initialFile);
     }, [initialFile]);
@@ -15,9 +18,49 @@ const useFilePicker = ({ onChange, initialFile }) => {
         event.stopPropagation();
         event.preventDefault();
         const { dataTransfer: { files } } = event;
+        setFileFormatError(checkIfFileIsInCorrectFormat(allowedExtensions, files[0].type));
+        checkIfImageIsVector(files[0].type);
         setDragOver(false);
         updateFile(files);
     };
+    const checkIfFileIsInCorrectFormat = (allowedExtensions, fileType) => {
+        if (!allowedExtensions)
+            return;
+        const fileExtension = getFileExtension(fileType);
+        let formatIsCorrect;
+        if (Array.isArray(fileExtension)) {
+            formatIsCorrect = allowedExtensions.some((extension) => fileExtension.includes(extension.toLowerCase()));
+        }
+        else {
+            formatIsCorrect = allowedExtensions === null || allowedExtensions === void 0 ? void 0 : allowedExtensions.some((extension) => {
+                return extension.toLowerCase() === fileExtension.toLowerCase();
+            });
+        }
+        return formatIsCorrect;
+    };
+    const setFileFormatError = (isFileFormatCorrect) => {
+        if (!isFileFormatCorrect) {
+            setErrors([...errors, constants.FILE_PICKER_ERROR.invalidFileFormat]);
+        }
+        else {
+            setErrors([]);
+        }
+    };
+    const getFileExtension = (fileType) => {
+        const substringIndex = fileType.lastIndexOf('/');
+        const fileExtension = fileType.substring(substringIndex + 1);
+        if (fileExtension === constants.JPG_EXTENSION || fileExtension === constants.JPEG_EXTENSION) {
+            return [constants.JPG_EXTENSION, constants.JPEG_EXTENSION];
+        }
+        else if (fileExtension === constants.SVG_MIME_TYPE) {
+            return constants.SVG_EXTENSION;
+        }
+        return fileExtension;
+    };
+    const checkIfImageIsVector = (fileType) => {
+        const fileExtenstion = getFileExtension(fileType);
+        fileExtenstion === 'svg' ? setIsVectorImage(true) : setIsVectorImage(false);
+    };
     const onFileChange = ({ target: { files } }) => {
         updateFile(files);
     };
@@ -27,6 +70,8 @@ const useFilePicker = ({ onChange, initialFile }) => {
                 fileName: files === null || files === void 0 ? void 0 : files[0].name,
                 fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
             });
+            setFileFormatError(checkIfFileIsInCorrectFormat(allowedExtensions, files[0].type));
+            checkIfImageIsVector(files[0].type);
         }
         else {
             setFile(undefined);
@@ -48,6 +93,7 @@ const useFilePicker = ({ onChange, initialFile }) => {
     const onFileDelete = () => {
         setFile(undefined);
         setPreview(true);
+        setErrors([]);
         onChange === null || onChange === void 0 ? void 0 : onChange(null);
     };
     const onPreviewError = () => {
@@ -61,8 +107,10 @@ const useFilePicker = ({ onChange, initialFile }) => {
         onFileDelete,
         onPreviewError,
         file,
+        errors,
         isPreview,
-        isDragOver
+        isDragOver,
+        isVectorImage
     };
 };
 

package/build/cjs/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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/image_picker/components/image_input.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var with_translation = require('../../../utilities/translation/with_translation.js');
+var icon_upload = require('../../../assets/icon_upload.js');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/image_picker/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ImageInput = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions, isDragOver }) => {
+    const [t] = useTranslation.useTranslation();
+    return (React__default['default'].createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave, className: main_module['default'][css_classes['default'].imagePickerLabel] },
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerDescription] },
+            React__default['default'].createElement(icon_upload['default'], { className: main_module['default'][css_classes['default'].imagePickerUploadIcon] }),
+            React__default['default'].createElement("p", null, t('Drag a file here or browse')),
+            React__default['default'].createElement("span", null,
+                "(",
+                t('supported format'),
+                ": ",
+                allowedExtensions.join(', '),
+                ")"))));
+};
+var ImageInput$1 = with_translation['default'](ImageInput);
+
+exports.default = ImageInput$1;
+//# sourceMappingURL=image_input.js.map

package/build/cjs/packages/aurora/src/components/image_picker/components/image_input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;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/components/image_picker/components/selected_image_preview.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var utilities = require('@dreamcommerce/utilities');
+var icon_delete = require('../../../assets/icon_delete.js');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/image_picker/main.module.less.js');
+var icon_wrong_file_format = require('../../../assets/icon_wrong_file_format.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const SelectedImagePreview = ({ file, isPreview, fileFormatIsCorrect, imageSize, onPreviewError, onFileDelete }) => {
+    const [t] = useTranslation.useTranslation();
+    const imageName = utilities.FileUtils.getFileName(file.fileName);
+    const imageExtension = utilities.FileUtils.getFileExtension(file.fileName);
+    const imageWidth = imageSize && imageSize.width;
+    const imageHeight = imageSize && imageSize.height;
+    const previewMarkupJsx = fileFormatIsCorrect ? (React__default['default'].createElement("img", { alt: "", src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '', onError: onPreviewError, className: main_module['default'][css_classes['default'].imagePickerImagePreview] })) : (React__default['default'].createElement(icon_wrong_file_format['default'], { className: main_module['default'][css_classes['default'].imagePickerWrongFileFormatIcon] }));
+    return (React__default['default'].createElement("div", null,
+        isPreview ? (React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerImagePreviewWrapper] }, previewMarkupJsx)) : (React__default['default'].createElement("div", null, t('No preview'))),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFile] },
+            React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileNameWrapper] }, fileFormatIsCorrect && (React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileFullName] },
+                React__default['default'].createElement("span", null, utilities.FileUtils.getFileNameShortenInMiddle(imageName, 10, 5, 1)),
+                React__default['default'].createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
+            React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileRemoveWrapper] },
+                React__default['default'].createElement("span", { onClick: onFileDelete, className: main_module['default'][css_classes['default'].imagePickerDeleteButton] },
+                    React__default['default'].createElement(icon_delete['default'], { className: main_module['default'][css_classes['default'].imagePickerDeleteIcon] }),
+                    React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerDeleteLabel] }, t('Remove')))))));
+};
+
+exports.default = SelectedImagePreview;
+//# sourceMappingURL=selected_image_preview.js.map

package/build/cjs/packages/aurora/src/components/image_picker/components/selected_image_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;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/components/image_picker/css_classes.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const imagePicker = 'image-picker';
+var CSS_CLASSES = {
+    imagePicker: `${imagePicker}`,
+    imagePickerWrapper: `${imagePicker}__wrapper`,
+    imagePickerWrapperError: `${imagePicker}__wrapper-error`,
+    imagePickerWrapperHasFile: `${imagePicker}__wrapper-has-file`,
+    imagePickerLabel: `${imagePicker}__label`,
+    imagePickerDescription: `${imagePicker}__description`,
+    imagePickerImagePreview: `${imagePicker}__image-preview`,
+    imagePickerImagePreviewWrapper: `${imagePicker}__image-preview-wrapper`,
+    imagePickerWrongFileFormatIcon: `${imagePicker}__wrong-file-format-icon`,
+    imagePickerErrorText: `${imagePicker}__error-text`,
+    imagePickerUploadIcon: `${imagePicker}__upload-icon`,
+    imagePickerDeleteButton: `${imagePicker}__delete-button`,
+    imagePickerDeleteLabel: `${imagePicker}__delete-label`,
+    imagePickerDeleteIcon: `${imagePicker}__delete-icon`,
+    imagePickerInput: `${imagePicker}__input`,
+    imagePickerSelectedFile: `${imagePicker}__selected-file`,
+    imagePickerSelectedFileNameWrapper: `${imagePicker}__selected-file-name-wrapper`,
+    imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`,
+    imagePickerSelectedFileFullName: `${imagePicker}__selected-file-full-name`
+};
+
+exports.default = CSS_CLASSES;
+//# sourceMappingURL=css_classes.js.map

package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js.map

@@ -0,0 +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;"}

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

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../external/react-i18next/dist/es/useTranslation.js');
+var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
+var classnames = require('classnames');
+var constants = require('../file_picker/constants.js');
+var use_file_picker = require('../file_picker/use_file_picker.js');
+var utils = require('../file_picker/utils.js');
+var css_classes = require('./css_classes.js');
+var index$1 = require('../controls/hoc/control_input/index.js');
+var main_module = require('../../css/image_picker/main.module.less.js');
+var image_input = require('./components/image_input.js');
+var selected_image_preview = require('./components/selected_image_preview.js');
+var index = require('../spacing/index.js');
+var utils$1 = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+const ImagePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '', hasWidthInput, widthInputPostfix = 'px', widthInputLabel, widthInputHint }) => {
+    const [t] = useTranslation.useTranslation();
+    const [fileFormatIsCorrect, setFileFormatIsCorrect] = React.useState(true);
+    const [imageSize, setImageSize] = React.useState({ width: 0, height: 0 });
+    const [widthInputValue, setWidthInputValue] = React.useState();
+    const [isInputWidthTooBig, setIsInputWidthTooBig] = React.useState(false);
+    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver, isVectorImage } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions });
+    const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
+    const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
+    const imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
+    const imagePickerWrapperClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePickerWrapper], file && main_module['default'][css_classes['default'].imagePickerWrapperHasFile], !fileFormatIsCorrect && main_module['default'][css_classes['default'].imagePickerWrapperError]);
+    const useStyles = reactJss_esm.createUseStyles({
+        imagePickerWrapper: {
+            border: ({ isDragOver }) => (isDragOver ? '1px solid #135cc8' : ''),
+            backgroundColor: ({ isDragOver }) => (isDragOver ? 'rgba(208, 230, 255, 0.5)' : ''),
+            '& svg': {
+                // @ts-ignore
+                fill: ({ isDragOver }) => (isDragOver ? '#3c83ec' : '')
+            }
+        }
+    });
+    const dragOverStyles = useStyles({ isDragOver });
+    const getImageWidth = (event) => {
+        let selectedImage;
+        if (event.target instanceof HTMLInputElement) {
+            const { target: { files } } = event;
+            selectedImage = files[0];
+        }
+        else {
+            const { dataTransfer: { files } } = event;
+            selectedImage = files[0];
+        }
+        const imgElement = document.createElement('img');
+        const objectURL = URL.createObjectURL(selectedImage);
+        imgElement.onload = () => {
+            setImageSize({ width: imgElement.width, height: imgElement.height });
+            URL.revokeObjectURL(objectURL);
+        };
+        imgElement.src = objectURL;
+    };
+    const checkIfInputMaxWidthIsGreaterThenImageWidth = () => {
+        if (!widthInputValue || !imageSize.width)
+            return;
+        widthInputValue > imageSize.width ? setIsInputWidthTooBig(true) : setIsInputWidthTooBig(false);
+    };
+    const handleonDropFile = (event) => {
+        onDropFile(event);
+        getImageWidth(event);
+    };
+    const handleOnFileChange = (event) => {
+        onFileChange(event);
+        getImageWidth(event);
+    };
+    const handleOnFileDelete = () => {
+        setImageSize({ width: 0, height: 0 });
+        onFileDelete();
+    };
+    const handleOnWidthInputChange = (event) => {
+        setWidthInputValue(event.target.valueAsNumber);
+    };
+    React.useEffect(() => {
+        utils$1.checkIfInvalideFileFormatErrorOccured(errors) ? setFileFormatIsCorrect(false) : setFileFormatIsCorrect(true);
+        file && checkIfInputMaxWidthIsGreaterThenImageWidth();
+    }, [errors, file, widthInputValue]);
+    React.useEffect(() => {
+        setWidthInputValue(imageSize.width);
+    }, [imageSize]);
+    return (React__default['default'].createElement("div", { className: imagePickerClassName },
+        React__default['default'].createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
+            file && (React__default['default'].createElement(selected_image_preview['default'], { file: file, onFileDelete: handleOnFileDelete, onPreviewError: onPreviewError, isPreview: isPreview, fileFormatIsCorrect: fileFormatIsCorrect, imageSize: imageSize })),
+            React__default['default'].createElement(image_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: handleonDropFile }),
+            React__default['default'].createElement("input", { onChange: handleOnFileChange, id: id, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
+        !fileFormatIsCorrect && React__default['default'].createElement("p", { className: main_module['default'][css_classes['default'].imagePickerErrorText] }, t('Invalid file format')),
+        showMaxWidthInput && (React__default['default'].createElement(index['default'], { as: "div", "mt-xs": 2 },
+            React__default['default'].createElement(index$1['default'], { id: `${id}-image-width`, type: "number", postfix: widthInputPostfix, value: widthInputValue, isRequired: true, label: widthInputLabel, hint: widthInputHint, onChange: handleOnWidthInputChange, errors: isInputWidthTooBig ? [`${t(constants.FILE_PICKER_ERROR.invalidInputWidth)}`] : null })))));
+};
+
+exports.default = ImagePicker;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/image_picker/utils.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var constants = require('../file_picker/constants.js');
+
+const checkIfInvalideFileFormatErrorOccured = (errorsArray) => {
+    return errorsArray && errorsArray.includes(constants.FILE_PICKER_ERROR.invalidFileFormat);
+};
+
+exports.checkIfInvalideFileFormatErrorOccured = checkIfInvalideFileFormatErrorOccured;
+//# sourceMappingURL=utils.js.map

package/build/cjs/packages/aurora/src/components/image_picker/utils.js.map

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

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Modal = ({ children, className, modalRef }) => {
-    return (React__default['default'].createElement("div", { "data-test-id": "modal", ref: modalRef, className: `${main_module['default']['modal-window']} ${main_module['default']['modal-window_visible']} ${className}` },
+const Modal = ({ children, className, modalRef, style = {} }) => {
+    return (React__default['default'].createElement("div", { style: style, "data-test-id": "modal", ref: modalRef, className: `${main_module['default']['modal-window']} ${main_module['default']['modal-window_visible']} ${className}` },
         React__default['default'].createElement("div", { className: main_module['default']['modal-window__body'] }, children)));
 };
 

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../../../../../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}\n.main-module_image-picker__description__1v13N p {\n  color: #3c83ec;\n}\n.main-module_image-picker__description__1v13N span {\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  flex-shrink: 0;\n  color: #3c83ec;\n  cursor: pointer;\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__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  flex: 1;\n  max-width: 50%;\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-full-name__3fALB {\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__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","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","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__input":"main-module_image-picker__input__3Wu2I","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__selected-file-full-name":"main-module_image-picker__selected-file-full-name__3fALB","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
+styleInject_es['default'](css_248z);
+
+exports.default = styles;
+//# sourceMappingURL=main.module.less.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/css/modal/main.module.less.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../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_modal-window__1epDY {\n  flex-direction: column;\n  position: relative;\n  z-index: 2000;\n  max-width: 1400px;\n  max-height: 100%;\n  min-width: 320px;\n  background-color: #ffffff;\n  border-radius: 5px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.25s ease;\n}\n.main-module_modal-window_show-transition-start__20Zyy,\n.main-module_modal-window_hide-transition-end__2tbM7 {\n  opacity: 0;\n  transform: translate3d(0, -20vh, 0);\n}\n.main-module_modal-window_show-transition-end__1bGXM,\n.main-module_modal-window_hide-transition-start__3v2ve {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.main-module_modal-window_show-tooltip-transition-start__3T6jk,\n.main-module_modal-window_hide-tooltip-transition-end__1-Elu {\n  opacity: 0;\n}\n.main-module_modal-window_show-tooltip-transition-end__3qcFY,\n.main-module_modal-window_hide-tooltip-transition-start__1LrQS {\n  opacity: 1;\n}\n.main-module_modal-window_visible__Y9ArZ {\n  display: flex;\n}\n.main-module_modal-window_relative__2bV4q {\n  position: absolute;\n}\n.main-module_modal-window_loading__i6ehQ {\n  min-width: auto;\n}\n.main-module_modal-window_small__2ohvZ {\n  max-width: 440px;\n}\n.main-module_modal-window__body__o4m8Y {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height: calc(var(--vh, 1vh) * 100 - (2 * 1rem));\n}\n.main-module_modal-window__body_no-overflow__144M5 {\n  overflow: visible;\n}\n.main-module_modal-window__header__vMn-j {\n  flex: 0 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 2rem 2rem 0.5rem 2rem;\n}\n.main-module_modal-window__header-actions__Qj4RZ {\n  margin-left: 2rem;\n}\n.main-module_modal-window__close-icon__32GlC {\n  cursor: pointer;\n  fill: #5c657e;\n}\n.main-module_modal-window__close-icon__32GlC * {\n  fill: #5c657e;\n}\n.main-module_modal-window__content__2Yq_0 {\n  overflow-y: auto;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: none;\n  padding: 1rem 2rem 1rem 2rem;\n}\n.main-module_modal-window__content_no-overflow__d24L_ {\n  overflow-y: visible;\n}\n.main-module_modal-window__footer__1o3OM {\n  padding: 0.75rem 2rem;\n  text-align: right;\n  border-top: 1px solid #ececec;\n  border-bottom: 2px solid transparent;\n}\n.main-module_modal-window-mask__mR_gM {\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1900;\n  background-color: rgba(0, 0, 0, 0.5);\n  width: calc(100vw);\n  height: calc(100vh);\n  height: calc(var(--vh, 1vh) * 100);\n  transition: all 0.25s ease;\n}\n.main-module_modal-window-mask_show-transition-start__2F24Y,\n.main-module_modal-window-mask_hide-transition-end__1SeMQ {\n  opacity: 0;\n}\n.main-module_modal-window-mask_show-transition-end__3QHf6,\n.main-module_modal-window-mask_hide-transition-start__1FESf {\n  opacity: 1;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_modal-window__1epDY {\n  flex-direction: column;\n  position: relative;\n  z-index: 2000;\n  max-width: 1400px;\n  max-height: 100%;\n  min-width: 320px;\n  background-color: #ffffff;\n  border-radius: 5px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.25s ease;\n}\n.main-module_modal-window_show-transition-start__20Zyy,\n.main-module_modal-window_hide-transition-end__2tbM7 {\n  opacity: 0;\n  transform: translate3d(0, -20vh, 0);\n}\n.main-module_modal-window_show-transition-end__1bGXM,\n.main-module_modal-window_hide-transition-start__3v2ve {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.main-module_modal-window_show-tooltip-transition-start__3T6jk,\n.main-module_modal-window_hide-tooltip-transition-end__1-Elu {\n  opacity: 0;\n}\n.main-module_modal-window_show-tooltip-transition-end__3qcFY,\n.main-module_modal-window_hide-tooltip-transition-start__1LrQS {\n  opacity: 1;\n}\n.main-module_modal-window_visible__Y9ArZ {\n  display: flex;\n}\n.main-module_modal-window_relative__2bV4q {\n  position: absolute;\n}\n.main-module_modal-window_loading__i6ehQ {\n  min-width: auto;\n}\n.main-module_modal-window_small__2ohvZ {\n  max-width: 440px;\n}\n.main-module_modal-window__body__o4m8Y {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height: calc(var(--vh, 1vh) * 100 - (2 * 1rem));\n}\n.main-module_modal-window__body_no-overflow__144M5 {\n  overflow: visible;\n}\n.main-module_modal-window__header__vMn-j {\n  flex: 0 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 2rem 2rem 0.5rem 2rem;\n}\n.main-module_modal-window__header-actions__Qj4RZ {\n  margin-left: 2rem;\n}\n.main-module_modal-window__close-icon__32GlC {\n  cursor: pointer;\n  fill: #5c657e;\n}\n.main-module_modal-window__close-icon__32GlC * {\n  fill: #5c657e;\n}\n.main-module_modal-window__content__2Yq_0 {\n  overflow-y: auto;\n  -ms-scroll-chaining: none;\n      overscroll-behavior: none;\n  padding: 1rem 2rem 1rem 2rem;\n}\n.main-module_modal-window__content_no-overflow__d24L_ {\n  overflow-y: visible;\n}\n.main-module_modal-window__footer__1o3OM {\n  padding: 0.75rem 2rem;\n  text-align: right;\n  border-top: 1px solid #ececec;\n  border-bottom: 2px solid transparent;\n}\n.main-module_modal-window-mask__mR_gM {\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1900;\n  background-color: rgba(0, 0, 0, 0.5);\n  width: calc(100vw);\n  height: calc(var(--vh, 1vh) * 100);\n  transition: all 0.25s ease;\n}\n.main-module_modal-window-mask_show-transition-start__2F24Y,\n.main-module_modal-window-mask_hide-transition-end__1SeMQ {\n  opacity: 0;\n}\n.main-module_modal-window-mask_show-transition-end__3QHf6,\n.main-module_modal-window-mask_hide-transition-start__1FESf {\n  opacity: 1;\n}\n";
 var cssClasses = {"modal-window":"main-module_modal-window__1epDY","modal-window_show-transition-start":"main-module_modal-window_show-transition-start__20Zyy","modal-window_hide-transition-end":"main-module_modal-window_hide-transition-end__2tbM7","modal-window_show-transition-end":"main-module_modal-window_show-transition-end__1bGXM","modal-window_hide-transition-start":"main-module_modal-window_hide-transition-start__3v2ve","modal-window_show-tooltip-transition-start":"main-module_modal-window_show-tooltip-transition-start__3T6jk","modal-window_hide-tooltip-transition-end":"main-module_modal-window_hide-tooltip-transition-end__1-Elu","modal-window_show-tooltip-transition-end":"main-module_modal-window_show-tooltip-transition-end__3qcFY","modal-window_hide-tooltip-transition-start":"main-module_modal-window_hide-tooltip-transition-start__1LrQS","modal-window_visible":"main-module_modal-window_visible__Y9ArZ","modal-window_relative":"main-module_modal-window_relative__2bV4q","modal-window_loading":"main-module_modal-window_loading__i6ehQ","modal-window_small":"main-module_modal-window_small__2ohvZ","modal-window__body":"main-module_modal-window__body__o4m8Y","modal-window__body_no-overflow":"main-module_modal-window__body_no-overflow__144M5","modal-window__header":"main-module_modal-window__header__vMn-j","modal-window__header-actions":"main-module_modal-window__header-actions__Qj4RZ","modal-window__close-icon":"main-module_modal-window__close-icon__32GlC","modal-window__content":"main-module_modal-window__content__2Yq_0","modal-window__content_no-overflow":"main-module_modal-window__content_no-overflow__d24L_","modal-window__footer":"main-module_modal-window__footer__1o3OM","modal-window-mask":"main-module_modal-window-mask__mR_gM","modal-window-mask_show-transition-start":"main-module_modal-window-mask_show-transition-start__2F24Y","modal-window-mask_hide-transition-end":"main-module_modal-window-mask_hide-transition-end__1SeMQ","modal-window-mask_show-transition-end":"main-module_modal-window-mask_show-transition-end__3QHf6","modal-window-mask_hide-transition-start":"main-module_modal-window-mask_hide-transition-start__1FESf"};
 styleInject_es['default'](css_248z);