@dreamcommerce/aurora 3.0.0-63 → 3.0.0-65

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

@@ -0,0 +1,76 @@
+import React, { createRef, memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ErrorList } from '@auroraComponents/error_list/error_list';
+import { ImagePickerPreview } from './components/image_picker_preview';
+import { IMAGE_PICKER_EXTENSIONS } from './image_picker_constants';
+import './image_picker_types';
+import { ImagePickerInput } from './components/image_picker_input';
+import { UploadedImagePickerItem } from './components/uploaded_image_picker_item';
+import { getAcceptFilesParametersFromAllowedExtensions } from './image_picker_utils';
+import { useImagePicker } from './use_image_picker';
+import { cn } from '@auroraUtilities/cn';
+export const ImagePicker = memo(({ id, onChange, onError, errors: initialErrors, allowedExtensions = [
+    IMAGE_PICKER_EXTENSIONS.WEBP,
+    IMAGE_PICKER_EXTENSIONS.JPG,
+    IMAGE_PICKER_EXTENSIONS.PNG,
+    IMAGE_PICKER_EXTENSIONS.GIF,
+    IMAGE_PICKER_EXTENSIONS.SVG,
+    IMAGE_PICKER_EXTENSIONS.JPEG
+], initialFile, name, onImageSizeUpdated, topButtons, editedImageResult }) => {
+    const [t] = useTranslation();
+    const inputRef = createRef();
+    const handleOnChange = (ev) => {
+        onChange?.(ev);
+        if (ev.fileList?.length) {
+            setImageSizeBasedOnUrl(URL.createObjectURL(ev.fileList[0]));
+        }
+    };
+    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, changeFile, file, errors, isPreview, isDragOver } = useImagePicker({ initialFile, onChange: handleOnChange, allowedExtensions, initialErrors, onError, inputRef });
+    const [imageSize, setImageSize] = useState(undefined);
+    const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
+    useEffect(() => {
+        onImageSizeUpdated?.(imageSize);
+    }, [imageSize]);
+    useEffect(() => {
+        initialFile && setImageSizeBasedOnUrl(initialFile?.fileUrl);
+    }, [initialFile]);
+    useEffect(() => {
+        if (!editedImageResult)
+            return;
+        const fileList = createFileList(editedImageResult);
+        changeFile(fileList);
+    }, [editedImageResult]);
+    const createFileList = (file) => {
+        const fileArray = [];
+        fileArray.push(file);
+        return fileArray;
+    };
+    const setImageSizeBasedOnUrl = (fileUrl) => {
+        createImageFromUrl(fileUrl).then((image) => {
+            setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
+        });
+    };
+    const createImageFromUrl = async (url) => {
+        const img = new Image();
+        img.src = url;
+        await img.decode();
+        return img;
+    };
+    const handleOnFileDelete = () => {
+        onFileDelete();
+        setImageSize(undefined);
+    };
+    return (React.createElement("div", { className: "aurora-mb-1" },
+        React.createElement("div", { className: cn('aurora-rounded-8 aurora-relative hover:aurora-border-active', {
+                'aurora-border aurora-border-dashed': !(errors && errors.length > 0 && !isDragOver),
+                'aurora-border-2 aurora-border-danger aurora-border-solid hover:aurora-border-danger': errors && errors.length > 0,
+                'aurora-border-none': isDragOver
+            }) },
+            file && !errors?.length ? (isPreview ? (React.createElement("div", { className: "aurora-p-1 aurora-pb-2 aurora-relative" },
+                topButtons && React.createElement("div", null, topButtons),
+                React.createElement(ImagePickerPreview, { file: file, onError: onPreviewError }),
+                React.createElement(UploadedImagePickerItem, { imageSize: imageSize, file: file, isValid: !errors?.length, onFileDelete: handleOnFileDelete }))) : (React.createElement("div", null, `${t('No preview')}`))) : (React.createElement(ImagePickerInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile })),
+            React.createElement("input", { className: "aurora-hidden", onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, accept: acceptFiles })),
+        errors && React.createElement(ErrorList, { errors: errors })));
+});
+//# sourceMappingURL=image_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+export declare const IMAGE_PICKER_EXTENSIONS: {
+    readonly GIF: "gif";
+    readonly JPG: "jpg";
+    readonly JPEG: "jpeg";
+    readonly PNG: "png";
+    readonly WEBP: "webp";
+    readonly SVG: "svg";
+};
+export declare const MIME_FILE_EXTENSIONS: {
+    readonly gif: "image/gif";
+    readonly jpg: "image/jpg";
+    readonly jpeg: "image/jpeg";
+    readonly png: "image/png";
+    readonly webp: "image/webp";
+    readonly svg: "image/svg+xml";
+};
+export declare const FILE_EXTENSION_TO_MIME_TYPE: {
+    readonly gif: "image/gif";
+    readonly jpg: "image/jpg";
+    readonly jpeg: "image/jpeg";
+    readonly png: "image/png";
+    readonly webp: "image/webp";
+    readonly svg: "image/svg+xml";
+};
+export declare const MIME_TYPE_TO_FILE_EXTENSIONS: {
+    readonly "image/gif": "gif";
+    readonly "image/jpg": "jpg";
+    readonly "image/jpeg": "jpeg";
+    readonly "image/png": "png";
+    readonly "image/webp": "webp";
+    readonly "image/svg+xml": "svg";
+};
+export declare const IMAGE_PICKER_ERROR: {
+    invalidFileFormat: string;
+};

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

@@ -0,0 +1,36 @@
+export const IMAGE_PICKER_EXTENSIONS = {
+    GIF: 'gif',
+    JPG: 'jpg',
+    JPEG: 'jpeg',
+    PNG: 'png',
+    WEBP: 'webp',
+    SVG: 'svg'
+};
+export const MIME_FILE_EXTENSIONS = {
+    [IMAGE_PICKER_EXTENSIONS.GIF]: 'image/gif',
+    [IMAGE_PICKER_EXTENSIONS.JPG]: 'image/jpg',
+    [IMAGE_PICKER_EXTENSIONS.JPEG]: 'image/jpeg',
+    [IMAGE_PICKER_EXTENSIONS.PNG]: 'image/png',
+    [IMAGE_PICKER_EXTENSIONS.WEBP]: 'image/webp',
+    [IMAGE_PICKER_EXTENSIONS.SVG]: 'image/svg+xml'
+};
+export const FILE_EXTENSION_TO_MIME_TYPE = {
+    [IMAGE_PICKER_EXTENSIONS.GIF]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.GIF],
+    [IMAGE_PICKER_EXTENSIONS.JPG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPG],
+    [IMAGE_PICKER_EXTENSIONS.JPEG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPEG],
+    [IMAGE_PICKER_EXTENSIONS.PNG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.PNG],
+    [IMAGE_PICKER_EXTENSIONS.WEBP]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.WEBP],
+    [IMAGE_PICKER_EXTENSIONS.SVG]: MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.SVG]
+};
+export const MIME_TYPE_TO_FILE_EXTENSIONS = {
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.GIF]]: IMAGE_PICKER_EXTENSIONS.GIF,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPG]]: IMAGE_PICKER_EXTENSIONS.JPG,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.JPEG]]: IMAGE_PICKER_EXTENSIONS.JPEG,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.PNG]]: IMAGE_PICKER_EXTENSIONS.PNG,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.WEBP]]: IMAGE_PICKER_EXTENSIONS.WEBP,
+    [MIME_FILE_EXTENSIONS[IMAGE_PICKER_EXTENSIONS.SVG]]: IMAGE_PICKER_EXTENSIONS.SVG
+};
+export const IMAGE_PICKER_ERROR = {
+    invalidFileFormat: 'Invalid file format'
+};
+//# sourceMappingURL=image_picker_constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker_constants.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACnC,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;CACJ,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,WAAW;IAC1C,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,WAAW;IAC1C,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,YAAY;IAC5C,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,WAAW;IAC1C,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,YAAY;IAC5C,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,eAAe;CACxC,CAAC;AAEX,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACvC,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;IAChF,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;IAChF,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC;IAClF,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;IAChF,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC;IAClF,CAAC,uBAAuB,CAAC,GAAG,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC;CAC1E,CAAC;AAEX,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IAChF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IAChF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,EAAE,uBAAuB,CAAC,IAAI;IAClF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IAChF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC,EAAE,uBAAuB,CAAC,IAAI;IAClF,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;CAC1E,CAAC;AAEX,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,iBAAiB,EAAE,qBAAqB;CAC3C,CAAC"}

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

@@ -0,0 +1,59 @@
+import React, { ChangeEvent, ReactNode } from 'react';
+import { IMAGE_PICKER_EXTENSIONS, MIME_FILE_EXTENSIONS } from './image_picker_constants';
+import { TControlErrors } from "../control/control_types";
+export declare type TImagePickerFile = {
+    fileUrl: string;
+    fileName: string;
+};
+export declare type TImagePickerExtension = typeof IMAGE_PICKER_EXTENSIONS[keyof typeof IMAGE_PICKER_EXTENSIONS];
+export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];
+export declare type IUseFilePickerOnChange = {
+    fileList: FileList | null;
+    fileAsDataUrl?: string | ArrayBuffer | null;
+};
+export interface IImagePicker {
+    id: string;
+    name?: string;
+    className?: string;
+    onChange?: (file: IUseFilePickerOnChange) => void;
+    allowedExtensions?: TImagePickerExtension[];
+    initialFile?: TImagePickerFile;
+    errors?: TControlErrors;
+    onError?: (errors: string[]) => void;
+    onImageSizeUpdated?: (imageSize?: TImageSize) => void;
+    topButtons?: ReactNode;
+    editedImageResult?: File;
+}
+export interface IImagePickerInput {
+    id: string;
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    allowedExtensions: TImagePickerExtension[];
+    isDragOver: boolean;
+}
+export declare type TImageSize = {
+    width: number;
+    height: number;
+};
+export interface IUseImagePicker {
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFileDelete: () => void;
+    onPreviewError: () => void;
+    changeFile: (files: FileList) => void;
+    file: TImagePickerFile | undefined;
+    errors: string[];
+    isPreview: boolean;
+    isDragOver: boolean;
+}
+export interface IUseImagePickerProps {
+    onChange?: (file: IUseFilePickerOnChange) => void;
+    initialFile?: TImagePickerFile;
+    allowedExtensions?: TImagePickerExtension[];
+    inputRef: React.RefObject<HTMLInputElement>;
+    initialErrors?: TControlErrors;
+    onError?: (errors: string[]) => void;
+}

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

@@ -0,0 +1,4 @@
+import 'react';
+import './image_picker_constants';
+import '@auroraComponents/control/control_types';
+//# sourceMappingURL=image_picker_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA8C,OAAO,CAAC;AACtD,OAA8D,0BAA0B,CAAC;AACzF,OAA+B,yCAAyC,CAAC"}

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

@@ -0,0 +1 @@
+export declare const getAcceptFilesParametersFromAllowedExtensions: (allowedExtensions: string[]) => string;

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

@@ -0,0 +1,6 @@
+import { FILE_EXTENSION_TO_MIME_TYPE } from './image_picker_constants';
+import './image_picker_types';
+export const getAcceptFilesParametersFromAllowedExtensions = (allowedExtensions) => {
+    return allowedExtensions.map((extension) => FILE_EXTENSION_TO_MIME_TYPE[extension]).join(', ');
+};
+//# sourceMappingURL=image_picker_utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_picker_utils.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAsC,sBAAsB,CAAC;AAE7D,MAAM,CAAC,MAAM,6CAA6C,GAAG,CAAC,iBAA2B,EAAE,EAAE;IACzF,OAAO,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAgC,EAAE,EAAE,CAAC,2BAA2B,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1H,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react';
+import i18n from '../../i18n';
+import { IMAGE_PICKER_ERROR, MIME_TYPE_TO_FILE_EXTENSIONS } from './image_picker_constants';
+import './image_picker_types';
+export const useImagePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
+    const [fileList, setFileList] = useState(null);
+    const [file, setFile] = useState(initialFile);
+    const [fileAsDataUrl, setFileAsDataUrl] = useState(null);
+    const [errors, setErrors] = useState([]);
+    const [isDragOver, setDragOver] = useState(false);
+    const [isPreview, setPreview] = useState(true);
+    const reader = useRef(new FileReader());
+    useEffect(() => {
+        reader.current && getDataUrlFromFile(reader.current.result);
+        reader.current.addEventListener('load', () => getDataUrlFromFile(reader.current.result), false);
+        return () => reader.current.removeEventListener('load', () => getDataUrlFromFile(reader.current.result));
+    }, []);
+    useEffect(() => {
+        setFile(initialFile);
+    }, [initialFile]);
+    useEffect(() => {
+        initialErrors && setErrors(initialErrors);
+    }, [initialErrors]);
+    useEffect(() => {
+        fileAsDataUrl && onChange?.({ fileList, fileAsDataUrl });
+    }, [fileAsDataUrl]);
+    const onDropFile = (event) => {
+        setErrors([]);
+        event.stopPropagation();
+        event.preventDefault();
+        const { dataTransfer: { files } } = event;
+        if (!files.length)
+            return;
+        validateFileExtension(allowedExtensions, files[0].type);
+        setDragOver(false);
+        updateFile(files);
+    };
+    const validateFileExtension = (allowedExtensions, mimeType) => {
+        if (!allowedExtensions)
+            return true;
+        const isValid = allowedExtensions.reduce((acc, extension) => {
+            return acc ? acc : MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
+        }, false);
+        if (isValid) {
+            setErrors([]);
+            return isValid;
+        }
+        setErrors([...errors, i18n.t(IMAGE_PICKER_ERROR.invalidFileFormat)]);
+        onError?.(errors);
+        return isValid;
+    };
+    const onFileChange = (event) => {
+        changeFile(event.target.files);
+    };
+    const changeFile = (files) => {
+        setErrors([]);
+        updateFile(files);
+    };
+    const updateFile = (files) => {
+        if (files?.length) {
+            setFileList(files);
+            reader.current.readAsDataURL(files[0]);
+            setFile({
+                fileName: files?.[0].name,
+                fileUrl: URL.createObjectURL(files?.[0])
+            });
+            const isValid = validateFileExtension(allowedExtensions, files[0].type);
+            if (isValid)
+                onChange?.({ fileList: files });
+        }
+        else {
+            setFile(undefined);
+            onChange?.({ fileList: files });
+        }
+        setPreview(true);
+    };
+    const getDataUrlFromFile = (fileReaderResult) => {
+        setFileAsDataUrl(fileReaderResult);
+    };
+    const onDragOver = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+        if (!isDragOver) {
+            setDragOver(true);
+        }
+    };
+    const onDragLeave = () => {
+        setDragOver(false);
+    };
+    const onFileDelete = () => {
+        inputRef.current.value = '';
+        setFileList(null);
+        setFile(undefined);
+        setFileAsDataUrl(null);
+        setPreview(true);
+        setErrors([]);
+        onChange?.({ fileList: null, fileAsDataUrl: null });
+    };
+    const onPreviewError = () => {
+        setPreview(false);
+    };
+    return {
+        onDropFile,
+        onFileChange,
+        onDragOver,
+        onDragLeave,
+        onFileDelete,
+        onPreviewError,
+        changeFile,
+        file,
+        errors,
+        isPreview,
+        isDragOver
+    };
+};
+//# sourceMappingURL=use_image_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use_image_picker.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/use_image_picker.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TTextAreaProps } from './text_area_types';
+export declare const TextArea: React.ForwardRefExoticComponent<TTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { cn } from '@auroraUtilities/cn';
+import { textAreaVariants } from './text_area_variants';
+import './text_area_types';
+export const TextArea = React.forwardRef(({ errors, className, id, name, value, defaultValue = '', placeholder = '', disabled, readOnly, onChange, onKeyDown, onKeyUp, ...props }, ref) => (React.createElement("textarea", { ...props, ref: ref, id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, className: cn(textAreaVariants(), errors && 'aurora-border-danger', disabled && 'aurora-bg-subtle aurora-text-subtle-light aurora-pointer-events-none aurora-cursor-not-allowed', className) })));
+TextArea.displayName = 'TextArea';
+//# sourceMappingURL=text_area.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text_area.js","sourceRoot":"","sources":["../../../../../../../src/components/text_area/text_area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAA+B,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACpC,CACI,EACI,MAAM,EACN,SAAS,EACT,EAAE,EACF,IAAI,EACJ,KAAK,EACL,YAAY,GAAG,EAAE,EACjB,WAAW,GAAG,EAAE,EAChB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACX,EACD,GAAG,EACL,EAAE,CAAC,CACD,qCACQ,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACT,gBAAgB,EAAE,EAClB,MAAM,IAAI,sBAAsB,EAChC,QAAQ,IAAI,gGAAgG,EAC5G,SAAS,CACZ,GACH,CACL,CACJ,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/build/esm/packages/aurora/src/components/text_area/text_area_types.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export interface TTextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
+    errors?: string | string[];
+}

package/build/esm/packages/aurora/src/components/text_area/text_area_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text_area_types.js.map

package/build/esm/packages/aurora/src/components/text_area/text_area_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text_area_types.js","sourceRoot":"","sources":["../../../../../../../src/components/text_area/text_area_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/aurora/src/components/text_area/text_area_variants.d.ts

@@ -0,0 +1 @@
+export declare const textAreaVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/build/esm/packages/aurora/src/components/text_area/text_area_variants.js

@@ -0,0 +1,3 @@
+import { cva } from 'class-variance-authority';
+export const textAreaVariants = cva('aurora-rounded-6 aurora-h-[72px] focus aurora-border aurora-bg aurora-text-s aurora-placeholder-neutral-500 aurora-text aurora-px-3 aurora-py-2 hover:aurora-border-strong active:aurora-border-active disabled:aurora-opacity-50 aurora-w-full');
+//# sourceMappingURL=text_area_variants.js.map

package/build/esm/packages/aurora/src/components/text_area/text_area_variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text_area_variants.js","sourceRoot":"","sources":["../../../../../../../src/components/text_area/text_area_variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAC/B,iPAAiP,CACpP,CAAC"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IXhrImagePickerProps } from './xhr_image_picker_types';
+export declare const XhrImagePicker: React.FC<IXhrImagePickerProps>;

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

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FileUtils } from '@dreamcommerce/utilities';
+import { REQUEST_TYPES } from '@dreamcommerce/star_core';
+import { useHttpApi } from '@auroraHooks/use_http_api';
+import { useTranslation } from 'react-i18next';
+import { useModalsContext } from '@auroraComponents/modal/hooks/use_modals_context';
+import { IMAGE_PICKER_EXTENSIONS } from '@auroraComponents/image_picker/image_picker_constants';
+import { ImagePicker } from '@auroraComponents/image_picker/image_picker';
+import { Loader } from '@auroraComponents/loader/loader';
+import { Modal } from '@auroraComponents/modal/components/modal/modal';
+import './xhr_image_picker_types';
+import '@auroraComponents/image_picker/image_picker_types';
+import { ImageEditLineIcon } from '@auroraAssets/icons/image_edit_icon';
+export const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onError, onChange, onImageSizeUpdated, allowedExtensions = [
+    IMAGE_PICKER_EXTENSIONS.WEBP,
+    IMAGE_PICKER_EXTENSIONS.JPG,
+    IMAGE_PICKER_EXTENSIONS.PNG,
+    IMAGE_PICKER_EXTENSIONS.GIF,
+    IMAGE_PICKER_EXTENSIONS.SVG,
+    IMAGE_PICKER_EXTENSIONS.JPEG
+], ImageEditor }) => {
+    const [t] = useTranslation();
+    const httpApi = useHttpApi();
+    const pendingRequestRef = React.useRef();
+    const initialImageFile = useRef();
+    const { showModal, hideModal } = useModalsContext();
+    const modalId = `image-picker-editor-${id}`;
+    const [initialImage, setInitialImage] = useState();
+    const [image, setImage] = useState();
+    const [imageEditorSrc, setImageEditorSrc] = useState('');
+    const [imageEditorResult, setImageEditorResult] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const [imageExtenstion, setImageExtenstion] = useState();
+    const handleControlChange = async (file) => {
+        const { fileList, fileAsDataUrl } = file;
+        fileList && setImage(fileList[0]);
+        onChange?.({ fileList, fileAsDataUrl });
+        if (!fileList || !fileList.length)
+            return;
+        if (pendingRequestRef.current) {
+            pendingRequestRef.current();
+            pendingRequestRef.current = undefined;
+        }
+        setIsLoading(true);
+        const { response, cancelRequest } = httpApi.fetch({
+            url,
+            method: REQUEST_TYPES.post,
+            data: fileList[0]
+        });
+        pendingRequestRef.current = cancelRequest;
+        const responseObject = await response.finally(() => setIsLoading(false));
+        onUploaded?.({
+            fileList,
+            dataUrl: fileAsDataUrl,
+            imageId: responseObject.data.imageId
+        });
+    };
+    useEffect(() => {
+        if (initialFile) {
+            setImageExtenstion(FileUtils.getFileExtension(initialFile?.fileName));
+            initialImageFile.current = initialFile;
+            const setFileFromUrl = async (fileData) => {
+                const response = await fetch(fileData.fileUrl);
+                const data = await response.blob();
+                const file = new File([data], fileData.fileName);
+                setInitialImage(file);
+            };
+            if (!initialImageFile.current)
+                return;
+            setFileFromUrl(initialImageFile.current);
+        }
+    }, []);
+    useEffect(() => {
+        image && setImageExtenstion(FileUtils.getFileExtension(image?.name));
+        return () => pendingRequestRef.current?.();
+    }, [image]);
+    useEffect(() => {
+        const src = image ?? initialImage;
+        setImageEditorSrc(src ?? '');
+    }, [image, initialImage, isLoading]);
+    const renderImageEditor = (defaultProps) => {
+        return ImageEditor ? (React.createElement("div", null,
+            React.createElement(ImageEditor, { ...defaultProps }))) : null;
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null,
+            React.createElement(ImagePicker, { id: id, name: name, onChange: handleControlChange, onError: onError, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialImageFile.current, onImageSizeUpdated: onImageSizeUpdated, topButtons: !!ImageEditor &&
+                    imageExtenstion !== 'svg' && (React.createElement("button", { onClick: () => showModal(modalId), type: "button", className: " aurora-absolute aurora-top-2 aurora-right-2 aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-rounded-full aurora-px-3 aurora-py-[6px] aurora-bg" },
+                    React.createElement(ImageEditLineIcon, { className: "aurora-w-4 aurora-h-4 aurora-fill" }),
+                    React.createElement("span", { className: "aurora-text-xs aurora-text aurora-font-semibold" }, `${t('Edit')}`))), editedImageResult: imageEditorResult }),
+            isLoading && (React.createElement("div", null,
+                React.createElement(Loader, null),
+                React.createElement("span", null, `${t('Transfering file...')}`)))),
+        !!ImageEditor && (React.createElement(Modal, { name: modalId, header: t('Edit image'), width: "l" }, renderImageEditor({
+            src: imageEditorSrc,
+            onEditionDone: (result) => {
+                hideModal(modalId);
+                setImageEditorResult(result);
+            }
+        })))));
+};
+//# sourceMappingURL=xhr_image_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xhr_image_picker.js","sourceRoot":"","sources":["../../../../../../../src/components/xhr_image_picker/xhr_image_picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACpF,OAAO,EAAE,uBAAuB,EAAE,MAAM,uDAAuD,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,gDAAgD,CAAC;AACvE,OAAwD,0BAA0B,CAAC;AACnF,OAAyD,mDAAmD,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,MAAM,CAAC,MAAM,cAAc,GAAmC,CAAC,EAC3D,EAAE,EACF,GAAG,EACH,IAAI,EACJ,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,iBAAiB,GAAG;IAChB,uBAAuB,CAAC,IAAI;IAC5B,uBAAuB,CAAC,GAAG;IAC3B,uBAAuB,CAAC,GAAG;IAC3B,uBAAuB,CAAC,GAAG;IAC3B,uBAAuB,CAAC,GAAG;IAC3B,uBAAuB,CAAC,IAAI;CAC/B,EACD,WAAW,EACd,EAAE,EAAE;IACD,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,EAAsC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,MAAM,EAAoB,CAAC;IACpD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACpD,MAAM,OAAO,GAAG,uBAAuB,EAAE,EAAE,CAAC;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAoB,CAAC;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAoB,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAgB,EAAE,CAAC,CAAC;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAAoB,CAAC;IAC/E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE7E,MAAM,mBAAmB,GAAG,KAAK,EAAE,IAA4B,EAAE,EAAE;QAC/D,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAEzC,QAAQ,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAElC,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;QAExC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,MAAM;YAAE,OAAO;QAE1C,IAAI,iBAAiB,CAAC,OAAO,EAAE;YAC3B,iBAAiB,CAAC,OAAO,EAAE,CAAC;YAC5B,iBAAiB,CAAC,OAAO,GAAG,SAAS,CAAC;SACzC;QAED,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnB,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,KAAK,CAAsB;YACnE,GAAG;YACH,MAAM,EAAE,aAAa,CAAC,IAAI;YAC1B,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;SACpB,CAAC,CAAC;QAEH,iBAAiB,CAAC,OAAO,GAAG,aAAa,CAAC;QAE1C,MAAM,cAAc,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;QAEzE,UAAU,EAAE,CAAC;YACT,QAAQ;YACR,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,OAAiB;SACjD,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,WAAW,EAAE;YACb,kBAAkB,CAAC,SAAS,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;YAEtE,gBAAgB,CAAC,OAAO,GAAG,WAAW,CAAC;YAEvC,MAAM,cAAc,GAAG,KAAK,EAAE,QAA0B,EAAE,EAAE;gBACxD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAC/C,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;gBACnC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACjD,eAAe,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC,CAAC;YAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO;gBAAE,OAAO;YAEtC,cAAc,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAC5C;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACX,KAAK,IAAI,kBAAkB,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;QAErE,OAAO,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,EAAE,CAAC;IAC/C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,GAAG,GAAG,KAAK,IAAI,YAAY,CAAC;QAClC,iBAAiB,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAErC,MAAM,iBAAiB,GAAgC,CAAC,YAAY,EAAE,EAAE;QACpE,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB;YACI,oBAAC,WAAW,OAAK,YAAY,GAAI,CAC/B,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACH;QACI;YACI,oBAAC,WAAW,IACR,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,gBAAgB,CAAC,OAAO,EACrC,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EACN,CAAC,CAAC,WAAW;oBACb,eAAe,KAAK,KAAK,IAAI,CACzB,gCACI,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,EACjC,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mKAAmK;oBAE7K,oBAAC,iBAAiB,IAAC,SAAS,EAAC,mCAAmC,GAAG;oBACnE,8BAAM,SAAS,EAAC,iDAAiD,IAAE,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAQ,CACpF,CACZ,EAEL,iBAAiB,EAAE,iBAAiB,GACtC;YACD,SAAS,IAAI,CACV;gBACI,oBAAC,MAAM,OAAG;gBACV,kCAAO,GAAG,CAAC,CAAC,qBAAqB,CAAC,EAAE,CAAQ,CAC1C,CACT,CACC;QAEL,CAAC,CAAC,WAAW,IAAI,CACd,oBAAC,KAAK,IAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAC,GAAG,IACnD,iBAAiB,CAAC;YACf,GAAG,EAAE,cAAc;YACnB,aAAa,EAAE,CAAC,MAAM,EAAE,EAAE;gBACtB,SAAS,CAAC,OAAO,CAAC,CAAC;gBACnB,oBAAoB,CAAC,MAAM,CAAC,CAAC;YACjC,CAAC;SACJ,CAAC,CACE,CACX,CACF,CACN,CAAC;AACN,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,2 @@
+import "@auroraComponents/image_picker/image_picker_types";
+//# sourceMappingURL=xhr_image_picker_types.js.map

package/build/esm/packages/aurora/src/components/xhr_image_picker/xhr_image_picker_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xhr_image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/xhr_image_picker/xhr_image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA6B,mDAAmD,CAAC"}

package/build/esm/packages/aurora/src/constants/css_tokens/css_icon_color_tokens.d.ts

@@ -18,7 +18,7 @@ export declare const CSS_ICON_COLOR_TOKENS: {
 };
 export declare const CSS_ICON_COLOR_TOKENS_VALUES: {
     readonly base: "#03081C";
-    readonly subtle: "#CBCDD1";
+    readonly subtle: "#9799A2";
     readonly disabled: "#E6E7EB";
     readonly inverse: "#FFFFFF";
     readonly inverseSubtle: "#FFFFFF33";

package/build/esm/packages/aurora/src/constants/css_tokens/css_icon_color_tokens.js

@@ -2,7 +2,7 @@ import { CSS_COLOR_TOKENS_VALUES } from './css_color_tokens_values.js';
 
 var CSS_ICON_COLOR_TOKENS_VALUES = {
   base: CSS_COLOR_TOKENS_VALUES.neutral900,
-  subtle: CSS_COLOR_TOKENS_VALUES.neutral500,
+  subtle: CSS_COLOR_TOKENS_VALUES.neutral600,
   disabled: CSS_COLOR_TOKENS_VALUES.neutral200,
   inverse: CSS_COLOR_TOKENS_VALUES.neutral0,
   inverseSubtle: CSS_COLOR_TOKENS_VALUES.lightTransparent20,

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

@@ -91,3 +91,4 @@ export { ColorPickerWithContext } from "./components/color_picker/color_picker";
 export { ColorPickerControl } from './components/controls/color_picker_control/color_picker_control';
 export { Checkbox } from "./components/checkbox/checkbox";
 export { RadioGroup } from "./components/radio_group/radio_group";
+export { ControlsGroup } from "./components/controls/controls_group/controls_group";

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

@@ -88,4 +88,5 @@ export { ColorPickerWithContext } from './components/color_picker/color_picker.j
 export { ColorPickerControl } from './components/controls/color_picker_control/color_picker_control.js';
 export { Checkbox } from './components/checkbox/checkbox.js';
 export { RadioGroup } from './components/radio_group/radio_group.js';
+export { ControlsGroup } from './components/controls/controls_group/controls_group.js';
 //# sourceMappingURL=index.js.map

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