@itcase/ui 1.9.56 → 1.9.58

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { DropdownItem } from '.';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { dropdownAppearance } from './Dropdown.appearance';
+const dropdownConfig = {
+    appearance: dropdownAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropdownConfig.appearance = appearanceConfig;
+    },
+};
+function Dropdown(props) {
+    const { appearance, className, dataTestId, dataTour, animationClose = 'dropdown_animation_close', animationOpen = 'dropdown_animation_open', dropdownList, showDivider, before, after, isSkeleton, isOpen, setIsOpen, onClickItem, children, } = props;
+    const dropdownRef = useRef(null);
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownConfig);
+    const [animationState, setAnimationState] = useState({
+        className: '',
+    });
+    const onAnimationEnd = useCallback(() => {
+        setAnimationState((prevState) => ({
+            className: isOpen ? prevState.className : '',
+        }));
+    }, [isOpen]);
+    useEffect(() => {
+        if (animationOpen && animationClose) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setAnimationState(() => ({
+                className: isOpen ? animationOpen : animationClose,
+            }));
+        }
+    }, [isOpen, animationOpen, animationClose]);
+    useEffect(() => {
+        function onClickWindow(event) {
+            const dropdownElement = dropdownRef.current;
+            if (dropdownElement && animationOpen) {
+                const isContainsTarget = dropdownElement.contains(event.target);
+                const hasOpenClass = dropdownElement.classList.contains(animationOpen);
+                if (!isContainsTarget && hasOpenClass) {
+                    setIsOpen(false);
+                }
+            }
+        }
+        window.addEventListener('click', onClickWindow);
+        return () => {
+            window.removeEventListener('click', onClickWindow);
+        };
+    }, [animationOpen, setIsOpen]);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignmentClass, fillClass, elevationClass, shapeClass, shapeStrengthClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (_jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && `alignment_${alignmentClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: [before, (children || dropdownList) && (_jsxs("div", { className: clsx('dropdown__wrapper'), onAnimationEnd: onAnimationEnd, children: [dropdownList?.map((item) => (_jsx(DropdownItem, { appearance: appearance, label: item.label, badgeValue: item.badgeValue, emptyMessage: item.emptyMessage, iconAfter: item.iconAfter, iconBefore: item.iconBefore, iconSrc: item.icon, showDivider: showDivider, isActive: item.isActive, isSkeleton: isSkeleton, onClick: item.onClick || ((event) => onClickItem?.(item, event)) }, item.key))), children] })), after] }));
+}
+export { Dropdown };

package/dist/components/Dropdown/DropdownItem.appearance.js

@@ -0,0 +1,13 @@
+import { dropdownAppearanceAccent } from './appearance/dropdownAccent';
+import { dropdownAppearanceShape } from './appearance/dropdownShape';
+import { dropdownAppearanceSize } from './appearance/dropdownSize';
+import { dropdownAppearanceStyle } from './appearance/dropdownStyle';
+import { dropdownAppearanceSurface } from './appearance/dropdownSurface';
+const dropdownItemAppearance = {
+    ...dropdownAppearanceSurface,
+    ...dropdownAppearanceStyle,
+    ...dropdownAppearanceShape,
+    ...dropdownAppearanceAccent,
+    ...dropdownAppearanceSize,
+};
+export { dropdownItemAppearance };

package/dist/components/Dropdown/DropdownItem.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Badge } from 'src/components/Badge';
+import { Divider } from 'src/components/Divider';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { dropdownItemAppearance } from './DropdownItem.appearance';
+const dropdownItemConfig = {
+    appearance: dropdownItemAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropdownItemConfig.appearance = appearanceConfig;
+    },
+};
+function DropdownItem(props) {
+    const { appearance, className, dataTestId, dataTour, label, desc, badgeValue, emptyMessage, showDivider, before, after, isActive, isDisabled, isSkeleton, isHover, onClick, onMouseEnter, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, dropdownItemConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, descTextColor, descTextColorHover, descTextGradient, descTextSize, descTextStyle, descTextWeight, descTextWrap, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerDirection, dividerFill, dividerSize, emptyMessageTextColor, emptyMessageTextColorHover, emptyMessageTextSize, emptyMessageTextStyle, emptyMessageTextWeight, emptyMessageTextWrap, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: dropdownItem } = useStyles(props);
+    return (_jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && `dropdown__item_direction_${directionClass}`, className, !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, sizeClass && `dropdown__item_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `dropdown__item_width_${widthClass}`, isDisabled && `dropdown__item_state_disabled`, onClick && 'cursor_type_pointer', isSkeleton && `dropdown__item_skeleton`, justifyContentClass &&
+            `dropdown__item_justify-content_${justifyContentClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [_jsx("div", { className: "dropdown__item-wrapper", children: _jsxs(React.Fragment, { children: [before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('dropdown__item_before', iconBadgeValue && 'dropdown__item_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), children || (_jsxs(React.Fragment, { children: [label && (_jsx(Text, { className: "dropdown__item-label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })), badgeValue && (_jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), desc && (_jsx(Text, { className: "dropdown__item-desc", size: descTextSize, textColor: descTextColor, textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, isActive: isActive, children: desc })), emptyMessage && (_jsx(Text, { className: "dropdown__item", size: emptyMessageTextSize, textColor: emptyMessageTextColor, textColorHover: emptyMessageTextColorHover, textStyle: emptyMessageTextStyle, textWeight: emptyMessageTextWeight, textWrap: emptyMessageTextWrap, isActive: isActive, children: emptyMessage }))] })), after, (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('dropdown__item_after', iconBadgeValue && 'dropdown__item_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'dropdown__item_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }), showDivider && (_jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
+}
+export { DropdownItem, dropdownItemConfig };

package/dist/components/Dropdown/appearance/dropdownAccent.js

@@ -0,0 +1,24 @@
+const dropdownAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentActivePrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        labelTextColorHover: 'accentTextPrimary',
+        badgeAppearance: 'surfacePrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'accentTextPrimary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+    },
+};
+export { dropdownAppearanceAccent };

package/dist/components/Dropdown/appearance/dropdownShape.js

@@ -0,0 +1,25 @@
+const dropdownAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { dropdownAppearanceShape };

package/dist/components/Dropdown/appearance/dropdownSize.js

@@ -0,0 +1,39 @@
+const dropdownAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'm',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'm',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        badgeSize: 'xs',
+        badgeTextSize: 'xs',
+        dividerSize: 's',
+        emptyMessageTextSize: 'xs',
+        iconAfterFillSize: '12',
+        iconAfterSize: '12',
+        iconBeforeFillSize: '12',
+        iconBeforeSize: '12',
+    },
+};
+export { dropdownAppearanceSize };

package/dist/components/Dropdown/appearance/dropdownStyle.js

@@ -0,0 +1,14 @@
+const dropdownAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { dropdownAppearanceStyle };

package/dist/components/Dropdown/appearance/dropdownSurface.js

@@ -0,0 +1,32 @@
+const dropdownAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'surfaceActivePrimary',
+        fillHover: 'surfaceHoverPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary',
+        dividerFill: 'surfaceTertiary',
+        emptyMessageTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+export { dropdownAppearanceSurface };

package/dist/components/Dropdown/index.js

@@ -0,0 +1,4 @@
+import { Dropdown } from './Dropdown';
+import { DropdownItem, dropdownItemConfig } from './DropdownItem';
+import { dropdownItemAppearance } from './DropdownItem.appearance';
+export { Dropdown, DropdownItem, dropdownItemAppearance, dropdownItemConfig };

package/dist/components/Dropzone/Dropzone.appearance.js

@@ -0,0 +1,15 @@
+import { dropzoneAppearanceDefault } from './appearance/dropzoneDefault';
+import { dropzoneAppearanceDisabled } from './appearance/dropzoneDisabled';
+import { dropzoneAppearanceError } from './appearance/dropzoneError';
+import { dropzoneAppearanceRequire } from './appearance/dropzoneRequire';
+import { dropzoneAppearanceShape } from './appearance/dropzoneShape';
+import { dropzoneAppearanceSuccess } from './appearance/dropzoneSuccess';
+const dropzoneAppearance = {
+    ...dropzoneAppearanceDefault,
+    ...dropzoneAppearanceRequire,
+    ...dropzoneAppearanceError,
+    ...dropzoneAppearanceShape,
+    ...dropzoneAppearanceSuccess,
+    ...dropzoneAppearanceDisabled,
+};
+export { dropzoneAppearance };

package/dist/components/Dropzone/Dropzone.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Dropzone/Dropzone.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { fromEvent } from 'file-selector'; // install with "react-dropzone"
+import { ErrorCode, useDropzone } from 'react-dropzone';
+import { Button } from 'src/components/Button';
+import { Loader } from 'src/components/Loader';
+import { Text } from 'src/components/Text';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useDropzoneFieldFiles } from 'src/hooks/useDropzoneFieldFiles';
+import { dropzoneAppearance } from './Dropzone.appearance';
+const dropzoneConfig = {
+    appearance: dropzoneAppearance,
+    setAppearance: (appearanceConfig) => {
+        dropzoneConfig.appearance = appearanceConfig;
+    },
+};
+const Dropzone = React.memo(function Dropzone(props) {
+    const { appearance, maxFiles = 5, maxSize = 10485760, // 10mb
+    dropzoneProps = {}, fieldValuesList: maybeFieldValuesList, fileErrorText, hintDescription, inputName, showFilename = true, thumbColumn, isSkeleton, isPreviews = true, onClickPreview, onAddFiles, onChangeFiles, onDeleteFile,
+    // className, unused
+    // size, unused
+     } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, dropzoneConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, errorMessageTextColor, errorMessageTextSize, errorMessageTextWeight, hintDescriptionTextColor, hintDescriptionTextSize, hintDescriptionTextWeight, hintDescriptionTextWrap, hintTitle, hintTitleTextColor, hintTitleTextSize, hintTitleTextWeight, hintTitleTextWrap, removeThumbAppearance, removeThumbShape, removeThumbText, removeThumbTextWeight, shapeClass, sizeClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass, thumbBorderWidthClass, thumbDirectionClass, thumbNameTextColor, thumbNameTextSize, thumbNameTextWeight, thumbNameTextWrap, } = propsGenerator;
+    const fieldValuesList = useMemo(() => {
+        return Array.isArray(maybeFieldValuesList) ? maybeFieldValuesList : [];
+    }, [maybeFieldValuesList]);
+    // Using a hook to manage files
+    const { convertValueFilesToDropzoneItems, fileIsLoading, fileRejectedMessage, setFileRejectedMessage, } = useDropzoneFieldFiles(fieldValuesList, isPreviews);
+    // Create dropzone options
+    const { getInputProps, getRootProps } = useDropzone({
+        // accept: { 'image/*': [] },
+        // validator: (file) => {},
+        maxFiles: maxFiles,
+        maxSize: maxSize,
+        ...dropzoneProps,
+        getFilesFromEvent: async (event) => {
+            const result = await fromEvent(event);
+            const newFiles = result.filter((item) => item instanceof File);
+            /** NOTE:
+             * By default, "react-dropzone" works by replacing the field's files
+             * when adding a new file. For example, if you drag and drop files
+             * one at a time, the previous ones will be replaced by
+             * the newly added ones. We're overriding this default behavior
+             * to allow multiple files to be added one by one(step by step).
+             *
+             * "react-dropzone" checks maximum number of available files(maxFiles)
+             * at the time of addition, not the total number of files in field.
+             * Thats why, we're forced to pass the existing + new files
+             * as the field value to the react-dropzone,
+             * so that the internal checks work as if all the existing files
+             * were added at once.
+             *
+             * That's behavior actual for accepted and rejected files.
+             */
+            return [...fieldValuesList, ...newFiles];
+        },
+        onDropAccepted: async (acceptedFiles) => {
+            const newDzFileItemsList = await convertValueFilesToDropzoneItems(acceptedFiles, true);
+            setFileRejectedMessage('');
+            // Callback just for add new files
+            onAddFiles && onAddFiles(newDzFileItemsList, inputName);
+            // Callback for save to form data (including empty when files are not valid)
+            onChangeFiles && onChangeFiles(newDzFileItemsList);
+        },
+        onDropRejected: (rejectedFiles) => {
+            // Clean error by default
+            let fileErrorMessage = '';
+            // If dropped files has rejected - show error message
+            if (rejectedFiles.length > 0) {
+                fileErrorMessage = 'Ошибка при добавлении файла';
+                const firstFileErrorItem = rejectedFiles[0].errors[0];
+                if (firstFileErrorItem) {
+                    if (firstFileErrorItem.code === ErrorCode.TooManyFiles) {
+                        fileErrorMessage = `Максимальное количество файлов: ${maxFiles}`;
+                    }
+                    else {
+                        fileErrorMessage = firstFileErrorItem.message;
+                    }
+                }
+            }
+            setFileRejectedMessage(fileErrorMessage);
+        },
+    });
+    // Delete file from dropzone
+    const onClickRemoveFile = useCallback((event, indexDeleted) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const dzFileItemDeleted = fieldValuesList[indexDeleted];
+        const newFiles = fieldValuesList.filter((dzFileItem) => dzFileItem.id !== dzFileItemDeleted.id);
+        onDeleteFile && onDeleteFile(dzFileItemDeleted, inputName);
+        onChangeFiles && onChangeFiles(newFiles);
+    }, 
+    // If "inputName" will be changes, then it should be a different field
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fieldValuesList, onChangeFiles, onDeleteFile]);
+    useEffect(() => {
+        // Check if we need to convert form state value to field format
+        const isNeedToConvert = fieldValuesList.some((fieldValue) => {
+            const isMaybeUrl = typeof fieldValue === 'string';
+            const isJsFile = fieldValue instanceof File;
+            const isImageData = typeof fieldValue === 'object' && !fieldValue.file;
+            return isMaybeUrl || isJsFile || isImageData;
+        });
+        if (isNeedToConvert) {
+            const convertFiledValueAndSaveAsFiles = async () => {
+                const dzFileItemsList = await convertValueFilesToDropzoneItems(fieldValuesList);
+                // Save to form state as right objects
+                onChangeFiles && onChangeFiles(dzFileItemsList);
+            };
+            // First time convert value to dropzoneFileItem and save to form state
+            convertFiledValueAndSaveAsFiles();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fieldValuesList]);
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { ...getRootProps({ className: `dropzone__dropzone dropzone` }), children: [_jsx("input", { ...getInputProps(), name: inputName }), _jsxs("div", { className: clsx('dropzone dropzone__dropzone-wrapper', thumbColumn && `dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+                            `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, isSkeleton && 'dropzone_skeleton', sizeClass && `dropzone_size_${sizeClass}`), children: [fieldValuesList.map((fileItem, index) => {
+                                const { id, name, error, file, preview } = fileItem;
+                                const fileErrorMessage = error || file?.error;
+                                const fileName = name || file?.name;
+                                return (_jsxs("aside", { className: clsx('dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass), children: [isPreviews && !error && preview && (_jsx("div", { className: "dropzone__thumb-image", children: _jsx("img", { className: "dropzone__thumb-image-inner", src: preview, onClick: (event) => {
+                                                    onClickPreview && onClickPreview(fileItem, event);
+                                                } }) })), (fileErrorText || fileErrorMessage) && (_jsx("div", { children: _jsx(Text, { size: thumbNameTextSize, textColor: thumbNameTextColor, textWeight: thumbNameTextWeight, textWrap: thumbNameTextWrap, children: fileErrorText || fileErrorMessage }) })), showFilename && fileName && (_jsx("div", { className: "dropzone__thumb-name", children: _jsx(Text, { className: "dropzone__thumb-name-inner", size: thumbNameTextSize, textColor: thumbNameTextColor, textWeight: thumbNameTextWeight, textWrap: thumbNameTextWrap, children: fileName }) })), fileIsLoading && (_jsx("div", { className: "dropzone__thumb-loader", children: _jsx(Loader, { width: "fill", height: "fill" }) })), _jsx("div", { className: clsx('dropzone__thumb-remove'), children: _jsx(Button, { appearance: removeThumbAppearance, className: "dropzone__thumb-remove-text", label: removeThumbText || 'Удалить', labelTextWeight: removeThumbTextWeight, shape: removeThumbShape, 
+                                                // TODO: Use id of dropzone special object
+                                                onClick: (event) => onClickRemoveFile(event, index) }) })] }, id || index));
+                            }), fieldValuesList.length === 0 ? (_jsxs("div", { className: "dropzone__hint", children: [_jsx(Text, { className: "dropzone__hint-title", size: hintTitleTextSize, textColor: hintTitleTextColor, textWeight: hintTitleTextWeight, textWrap: hintTitleTextWrap, children: hintTitle || 'Select a file or drag in form' }), hintDescription && (_jsx(Text, { className: "dropzone__hint-text", size: hintDescriptionTextSize, textColor: hintDescriptionTextColor, textWeight: hintDescriptionTextWeight, textWrap: hintDescriptionTextWrap, children: hintDescription }))] })) : (_jsxs("div", { className: "dropzone__hint dropzone__hint_type_add-more", children: [_jsx(Text, { className: "dropzone__hint-title", size: hintTitleTextSize, textColor: hintTitleTextColor, textWeight: hintTitleTextWeight, textWrap: hintTitleTextWrap, children: hintTitle || 'Select a file or drag in form' }), hintDescription && (_jsx(Text, { className: "dropzone__hint-text", size: hintDescriptionTextSize, textColor: hintDescriptionTextColor, textWeight: hintDescriptionTextWeight, textWrap: hintDescriptionTextWrap, children: hintDescription }))] }))] })] }), fileRejectedMessage && (_jsx("div", { className: "form-field__message", children: _jsx(Text, { className: "form-field__message-item form-field__message-item_type_message", size: errorMessageTextSize, textColor: errorMessageTextColor, textWeight: errorMessageTextWeight, children: fileRejectedMessage }) }))] }));
+});
+export { Dropzone };

package/dist/components/Dropzone/appearance/dropzoneDefault.js

@@ -0,0 +1,17 @@
+const dropzoneAppearanceDefault = {
+    defaultSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceTertiary',
+        hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+        hintTitleTextColor: 'surfaceTextPrimary',
+        hintTitleTextSize: 'm',
+        removeThumbText: 'удалить',
+        removeThumbTextColor: 'errorTextPrimary',
+        thumbBorderColor: 'surfaceBorderTertiary',
+        thumbBorderColorHover: 'surfaceBorderQuaternary',
+        thumbBorderWidth: '1',
+        thumbNameTextColor: 'surfaceTextPrimary',
+        thumbNameTextSize: 's',
+    },
+};
+export { dropzoneAppearanceDefault };

package/dist/components/Dropzone/appearance/dropzoneDisabled.js

@@ -0,0 +1,17 @@
+const dropzoneAppearanceDisabled = {
+    disabledTertiary: {
+        fill: 'disabledTertiary',
+        fillHover: 'disabledQuaternary',
+        hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+        hintTitleTextColor: 'disabledTextSecondary',
+        hintTitleTextSize: 'm',
+        removeThumbText: 'удалить',
+        removeThumbTextColor: 'errorTextPrimary',
+        thumbBorderColor: 'surfaceBorderTertiary',
+        thumbBorderColorHover: 'surfaceBorderQuaternary',
+        thumbBorderWidth: '1',
+        thumbNameTextColor: 'surfaceTextPrimary',
+        thumbNameTextSize: 's',
+    },
+};
+export { dropzoneAppearanceDisabled };

package/dist/components/Dropzone/appearance/dropzoneError.js

@@ -0,0 +1,17 @@
+const dropzoneAppearanceError = {
+    errorTertiary: {
+        fill: 'errorTertiary',
+        fillHover: 'errorTertiary',
+        hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+        hintTitleTextColor: 'errorTextQuaternary',
+        hintTitleTextSize: 'm',
+        removeThumbText: 'удалить',
+        removeThumbTextColor: 'errorTextPrimary',
+        thumbBorderColor: 'surfaceBorderTertiary',
+        thumbBorderColorHover: 'surfaceBorderQuaternary',
+        thumbBorderWidth: '1',
+        thumbNameTextColor: 'surfaceTextPrimary',
+        thumbNameTextSize: 's',
+    },
+};
+export { dropzoneAppearanceError };

package/dist/components/Dropzone/appearance/dropzoneRequire.js

@@ -0,0 +1,17 @@
+const dropzoneAppearanceRequire = {
+    requireTertiary: {
+        fill: 'warningTertiary',
+        fillHover: 'warningTertiary',
+        hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+        hintTitleTextColor: 'specialTextSecondary',
+        hintTitleTextSize: 'm',
+        removeThumbText: 'удалить',
+        removeThumbTextColor: 'errorTextPrimary',
+        thumbBorderColor: 'surfaceBorderTertiary',
+        thumbBorderColorHover: 'surfaceBorderQuaternary',
+        thumbBorderWidth: '1',
+        thumbNameTextColor: 'surfaceTextPrimary',
+        thumbNameTextSize: 's',
+    },
+};
+export { dropzoneAppearanceRequire };

package/dist/components/Dropzone/appearance/dropzoneShape.js

@@ -0,0 +1,25 @@
+const dropzoneAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { dropzoneAppearanceShape };

package/dist/components/Dropzone/appearance/dropzoneSuccess.js

@@ -0,0 +1,17 @@
+const dropzoneAppearanceSuccess = {
+    successTertiary: {
+        fill: 'successTertiary',
+        fillHover: 'successTertiary',
+        hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+        hintTitleTextColor: 'successTextQuaternary',
+        hintTitleTextSize: 'm',
+        removeThumbText: 'удалить',
+        removeThumbTextColor: 'errorTextPrimary',
+        thumbBorderColor: 'surfaceBorderTertiary',
+        thumbBorderColorHover: 'surfaceBorderQuaternary',
+        thumbBorderWidth: '1',
+        thumbNameTextColor: 'surfaceTextPrimary',
+        thumbNameTextSize: 's',
+    },
+};
+export { dropzoneAppearanceSuccess };

package/dist/components/Dropzone/index.js

@@ -0,0 +1 @@
+export { Dropzone } from './Dropzone';

package/dist/components/Flex/Flex.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Flex/Flex.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+function Flex(props) {
+    const { id, className, dataTestId, dataTour, type, dataId, print, style, tag: Tag = 'div', onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, justifyContentClass, alignContentClass, alignItemsClass, fillClass, borderColorClass, borderTypeClass, flowClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
+    const { styles: flexStyles, wrapper: flexWrapperStyles } = useStyles(props);
+    return (_jsx(Tag, { id: id, className: clsx(className, 'flex', widthClass && `width_${widthClass}`, alignContentClass && `flex_align-content_${alignContentClass}`, alignItemsClass && `flex_align-items_${alignItemsClass}`, directionClass && `flex_direction_${directionClass}`, fillClass && `fill_${fillClass}`, flowClass && `flex_flow_${flowClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, positionClass && `position_${positionClass}`, justifyContentClass && `flex_justify-content_${justifyContentClass}`, shapeClass && `flex_shape_${shapeClass}`, type && `flex_type_${type}`, !print && 'no-print', print && 'print', wrapClass && `flex_wrap_${wrapClass}`), "data-id": dataId, "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, flexStyles, style), onClick: onClick, children: _jsx("div", { className: "flex__wrapper", style: flexWrapperStyles, children: children }) }));
+}
+export { Flex };

package/dist/components/Flex/FlexItem.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+function FlexItem(props) {
+    const { className, htmlFor, print, style, tag: Tag = 'div', children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { dataTestId, dataTour, directionClass, justifyContentClass, alignItemsClass, alignSelfClass, fillClass, fillHoverClass, dataId, growClass, positionClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
+    const { styles: flexItemStyles } = useStyles(props);
+    return (_jsx(Tag, { className: clsx(className, 'flex__item', positionClass && `position_${positionClass}`, alignItemsClass && `flex__item_align-items_${alignItemsClass}`, alignSelfClass && `flex__item_align-self_${alignSelfClass}`, directionClass && `flex__item_direction_${directionClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, growClass && `flex__item_grow_${growClass}`, justifyContentClass &&
+            `flex__item_justify-content_${justifyContentClass}`, shapeClass && `flex__item_shape_${shapeClass}`, !print && 'no-print', print && 'print', widthClass && `width_${widthClass}`, wrapClass && `flex__item_wrap_${wrapClass}`), "data-id": dataId, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: Object.assign({}, flexItemStyles, style), children: children }));
+}
+export { FlexItem };

package/dist/components/Flex/index.js

@@ -0,0 +1,3 @@
+import { Flex } from './Flex';
+import { FlexItem } from './FlexItem';
+export { Flex, FlexItem };

package/dist/components/Grid/Grid.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Grid/Grid.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+function Grid(props) {
+    const { id, className, dataTestId, dataTour, type, horizontalResizing, horizontalScroll, print, tag: Tag = 'div', useGridSystem, verticalResizing, before, after, onClick, onDoubleClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { justifyContentClass, justifyItemsClass, alignContentClass, alignItemsClass, fillClass, fillHoverClass, borderColorClass, columnGapClass, columnsClass, heightClass, rowGapClass, rowsClass, widthClass, } = propsGenerator;
+    const { styles: gridStyles } = useStyles(props);
+    return (_jsxs(Tag, { id: id, className: clsx(className, 'grid', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, useGridSystem && `grid_state_system`, horizontalScroll && `grid_scroll_horizontal`, type && `grid_type_${type}`, columnsClass && `grid_columns_${columnsClass}`, rowsClass && `grid_rows_${rowsClass}`, rowGapClass && `grid_row-gap_${rowGapClass}`, columnGapClass && `grid_column-gap_${columnGapClass}`, alignContentClass && `grid_align-content_${alignContentClass}`, alignItemsClass && `grid_align-items_${alignItemsClass}`, borderColorClass && `border-color_${borderColorClass}`, justifyContentClass && `grid_justify-content_${justifyContentClass}`, justifyItemsClass && `grid_justify-items_${justifyItemsClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, horizontalResizing && `grid_horizontal-resizing_${horizontalResizing}`, verticalResizing && `grid_vertical-resizing_${verticalResizing}`, !print && 'no-print', print && 'print'), "data-testid": dataTestId, "data-tour": dataTour, style: gridStyles, onClick: onClick, onDoubleClick: onDoubleClick, children: [before && _jsx("div", { className: "grid__before", children: before }), children, after && _jsx("div", { className: "grid__after", children: after })] }));
+}
+export { Grid };

package/dist/components/Grid/GridItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+function GridItem(props) {
+    const { id, className, dataTestId, dataTour, print, style, onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, justifySelfClass, alignSelfClass, fillClass, fillHoverClass, columnEndClass, columnGapClass, columnSpanClass, columnStartClass, gapClass, heightClass, orderClass, rowEndClass, rowGapClass, rowSpanClass, rowStartClass, widthClass, } = propsGenerator;
+    const { styles: gridItemStyles } = useStyles(props);
+    return (_jsx("div", { id: id, className: clsx(className, 'grid__item', orderClass && `order_${orderClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, alignSelfClass && `grid__item_align-self_${alignSelfClass}`, justifySelfClass && `grid__item_justify-self_${justifySelfClass}`, columnStartClass && `grid__item_column-start_${columnStartClass}`, columnEndClass && `grid__item_column-end_${columnEndClass}`, columnSpanClass && `grid__item_column-span_${columnSpanClass}`, rowStartClass && `grid__item_row-start_${rowStartClass}`, rowEndClass && `grid__item_row-end_${rowEndClass}`, rowSpanClass && `grid__item_row-span_${rowSpanClass}`, directionClass && `direction_${directionClass}`, gapClass && `gap_${gapClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, rowGapClass && `row-gap_${rowGapClass}`, !print && 'no-print', print && 'print', columnGapClass && `column-gap_${columnGapClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, gridItemStyles, style), onClick: onClick, children: children }));
+}
+export { GridItem };

package/dist/components/Grid/GridRow.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+function GridRow(props) {
+    const { id, className, dataTestId, dataTour, dataId, htmlFor, print, tag: Tag = 'div', onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { fillClass, fillHoverClass, borderColorClass, heightClass, widthClass, } = propsGenerator;
+    const { styles: gridRowStyles } = useStyles(props);
+    return (_jsx(Tag, { id: id, className: clsx(className, 'grid__row', widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, !print && 'no-print', print && 'print', borderColorClass && `border-color_${borderColorClass}`), "data-id": dataId, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, style: gridRowStyles, onClick: onClick, children: children }));
+}
+export { GridRow };

package/dist/components/Grid/index.js

@@ -0,0 +1,4 @@
+import { Grid } from './Grid';
+import { GridItem } from './GridItem';
+import { GridRow } from './GridRow';
+export { Grid, GridItem, GridRow };