@homecode/ui 4.11.1

package/dist/esm/src/components/InputFile/InputFile.js

@@ -0,0 +1,292 @@
+import { Component, createRef, createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createStore } from 'justorm/react';
+import cn from 'classnames';
+import pick from 'lodash.pick';
+import compare from 'compareq';
+import Time from 'timen';
+import { Label } from '../Label/Label.js';
+import { Icon } from '../Icon/Icon.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { toBase64 } from '../../tools/file.js';
+import { spliceWhere } from '../../tools/array.js';
+import S from './InputFile.styl.js';
+import Item from './Item/Item.js';
+import '../AssistiveText/AssistiveText.styl.js';
+import '../Spinner/Spinner.styl.js';
+import '../Button/Button.styl.js';
+import '../ButtonGroup/ButtonGroup.styl.js';
+import 'nanoid';
+import '../Checkbox/Checkbox.styl.js';
+import '../Container/Container.styl.js';
+import 'moment';
+import { Draggable } from '../Draggable/Draggable.js';
+import '../Expand/Expand.styl.js';
+import 'lodash.omit';
+import '../RequiredStar/RequiredStar.styl.js';
+import '../Input/Input.styl.js';
+import '../Form/Form.styl.js';
+import '../Form/Validator.js';
+import '../Form/SubmitButtons/SubmitButtons.styl.js';
+import '../Gallery/Gallery.styl.js';
+import '../Heading/Heading.js';
+import '../Portal/Portal.js';
+import '../Paranja/Paranja.styl.js';
+import '../LightBox/LightBox.styl.js';
+import '../Notifications/Notifications.js';
+import '../../tools/dom.js';
+import '../Popup/Popup.styl.js';
+import '../../tools/queryParams.js';
+import '../PopupMenu/PopupMenu.styl.js';
+import '../Router/Router.js';
+import '../Select/Select.styl.js';
+import '../Table/Table.styl.js';
+import '../Tabs/Tabs.styl.js';
+import '../Text/Text.js';
+import '../Virtualized/Virtualized.styl.js';
+import '../Virtualized/List/List.styl.js';
+import '../Virtualized/List/ListScroll.styl.js';
+import '../../services/i18n.js';
+
+const SCROLL_OFFSET = {
+    s: 10,
+    m: 12,
+    l: 16,
+};
+const defaultFileState = {
+    total: 1,
+    loaded: 0,
+    error: null,
+    base64: '',
+};
+const buildDefaultState = (src, index, loaded) => ({
+    ...defaultFileState,
+    loaded,
+    index,
+    src,
+});
+class InputFile extends Component {
+    store;
+    filesToUpload = []; // [File,...]
+    previewRequests = {}; // [index]: Promise
+    inputRef = createRef();
+    _mounted = false;
+    constructor(props) {
+        super(props);
+        this.store = createStore(this, {
+            items: this.getStateFromProps(),
+            labelClipPath: '',
+            pickingIndex: null,
+            isDragging: false,
+        });
+    }
+    static defaultProps = {
+        size: 'm',
+        variant: 'default',
+        maxCount: 1,
+    };
+    componentDidMount() {
+        this._mounted = true;
+        this.props.uploadOnDemand?.(this.demandedUploader);
+    }
+    componentWillUnmount() {
+        this._mounted = false;
+        this.store.items.forEach(({ xhr }) => xhr?.abort());
+    }
+    componentDidUpdate(prevProps) {
+        const { value, maxCount } = this.props;
+        if (!compare(prevProps.value, value) || prevProps.maxCount !== maxCount) {
+            this.store.items = this.getStateFromProps();
+        }
+    }
+    isMultiple = () => this.props.maxCount > 1;
+    getStateFromProps() {
+        const { value, maxCount, upload } = this.props;
+        const loaded = upload ? 1 : 0;
+        if (this.isMultiple()) {
+            if (maxCount === 1)
+                return [buildDefaultState(value, 0, loaded)];
+            return value
+                .slice(0, maxCount)
+                .map((src, index) => buildDefaultState(src, index, loaded));
+        }
+        const val = Array.isArray(value) ? value[0] : value;
+        return val ? [buildDefaultState(val, 0, loaded)] : [];
+    }
+    getValFromState = () => {
+        const { items } = this.store;
+        if (this.isMultiple())
+            return items.map(({ src, base64 }) => src || base64);
+        if (!items[0])
+            return null;
+        return items[0].src || items[0].base64;
+    };
+    getLastIndex = () => {
+        const { value } = this.props;
+        return Array.isArray(value) ? value.length : 0;
+    };
+    filterAllowedFiles(files, index) {
+        const { maxCount, limit } = this.props;
+        const allowedFiles = [];
+        [...files].every(file => {
+            if (index >= maxCount)
+                return false;
+            if (limit) {
+                const sizeMb = file.size / 1024 / 1024;
+                if (sizeMb > limit) {
+                    console.error(`Max file size - ${limit}Mb`, file);
+                    return false;
+                }
+            }
+            allowedFiles.push(file);
+            index++;
+            return true;
+        }, []);
+        return allowedFiles;
+    }
+    onPlusButtonClick = () => this.inputRef.current.click();
+    onItemClick(index) {
+        this.store.pickingIndex = index;
+        Time.after(50, () => this.inputRef.current.click());
+    }
+    onDragStart = () => (this.store.isDragging = true);
+    onDragEnd = () => (this.store.isDragging = false);
+    onChange = async (e) => {
+        const { files } = e.target;
+        const { items, pickingIndex } = this.store;
+        const { onSelect, uploadOnDemand, upload } = this.props;
+        let index = pickingIndex ?? this.getLastIndex();
+        const allowedFiles = this.filterAllowedFiles(files, index);
+        allowedFiles.forEach(file => {
+            items[index] = { ...defaultFileState, index };
+            this.filesToUpload[index] = file;
+            this.previewRequests[index] = this.generatePreview(file, index);
+            index++;
+        });
+        onSelect?.(allowedFiles);
+        if (upload)
+            this.processUploadOnChange(allowedFiles);
+        if (uploadOnDemand)
+            this.processUploadOnDemand();
+        if (typeof pickingIndex === 'number')
+            this.store.pickingIndex = null;
+    };
+    onReorder = ids => {
+        const { items } = this.store;
+        const { onChange } = this.props;
+        this.store.items = ids.map(id => items[id]);
+        onChange(null, this.getValFromState());
+    };
+    onProgress = state => e => {
+        Object.assign(state, pick(e, ['total', 'loaded']));
+    };
+    async generatePreview(file, index) {
+        const state = this.store.items[index];
+        Object.assign(state, defaultFileState);
+        state.base64 = await toBase64(file);
+        delete this.previewRequests[index];
+    }
+    async processUploadOnDemand() {
+        await Promise.all(Object.values(this.previewRequests));
+        if (!this._mounted)
+            return;
+        const { onChange } = this.props;
+        onChange(null, this.getValFromState());
+    }
+    async processUploadOnChange(files) {
+        const { onChange } = this.props;
+        const { pickingIndex } = this.store;
+        const lastIndex = pickingIndex ?? this.getLastIndex();
+        const reqs = files.map((file, i) => this.upload(file, lastIndex + i));
+        await Promise.all(reqs);
+        onChange(null, this.getValFromState());
+    }
+    async upload(file, index) {
+        const { upload } = this.props;
+        const { items } = this.store;
+        const state = items[index];
+        const src = await upload({
+            file,
+            onProgress: this.onProgress(state),
+            getXHR: xhr => (state.xhr = xhr),
+        });
+        delete this.filesToUpload[index];
+        if (!this._mounted)
+            return;
+        Object.assign(state, {
+            src,
+            loaded: state.total,
+            xhr: null,
+        });
+    }
+    demandedUploader = async (upload) => {
+        const { value } = this.props;
+        const { items } = this.store;
+        let newVal;
+        if (this.isMultiple()) {
+            const requests = [];
+            newVal = [...value];
+            value.forEach((val, i) => {
+                const file = this.filesToUpload[i];
+                if (file) {
+                    const params = { file, onProgress: this.onProgress(items[i]) };
+                    requests.push(upload(params).then(url => (newVal[i] = url)));
+                }
+            });
+            await Promise.all(requests);
+        }
+        else {
+            newVal = await upload(this.filesToUpload[0], this.onProgress(items[0]));
+        }
+        this.filesToUpload = [];
+        return newVal;
+    };
+    remove = async (e, value) => {
+        e.stopPropagation();
+        const { remove, onChange } = this.props;
+        if (remove) {
+            const res = await remove(value);
+            if (!res)
+                return;
+        }
+        const { items } = this.store;
+        spliceWhere(items, value, 'src');
+        onChange(null, this.getValFromState());
+    };
+    renderPlusButton() {
+        const { size } = this.props;
+        return (jsx("label", { className: cn(S.item, S.addButton), onClick: this.onPlusButtonClick, children: jsx(Icon, { type: "plus", size: size }) }, "add-button"));
+    }
+    renderItem = (i, props = {}) => {
+        const { size } = this.props;
+        const { base64, src, loaded, total } = this.store.items[i];
+        const url = base64 || src;
+        return (createElement(Item, { ...props, size: size, key: String(url) + i, img: url, total: total, loaded: loaded, waitingForUpload: !!this.filesToUpload[i], onRemove: e => this.remove(e, url), onClick: () => this.onItemClick(i) }));
+    };
+    renderItems() {
+        const { draggable, maxCount } = this.props;
+        const { items, isDragging } = this.store;
+        if (items.length === 0)
+            return this.renderPlusButton();
+        const needAddButton = this.isMultiple() && items.length < maxCount;
+        if (draggable) {
+            const ids = Array.from({ length: items.length }, (_, i) => String(i));
+            return (jsx(Draggable, { className: S.draggable, itemClassName: S.item, items: ids, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, onChange: this.onReorder, renderItem: id => this.renderItem(parseInt(id, 10), { isDragging }), children: needAddButton && this.renderPlusButton() }));
+        }
+        const elems = items.map((_, i) => this.renderItem(i, { className: S.item }));
+        if (needAddButton)
+            elems.push(this.renderPlusButton());
+        return elems;
+    }
+    render() {
+        // @ts-ignore
+        const { className, size, variant, draggable, label, maxCount, accept, value, } = this.props;
+        const { labelClipPath, pickingIndex } = this.store;
+        const isEmpty = !value?.length;
+        const classes = cn(S.root, className, isEmpty && S.empty, S[`size-${size}`], S[`variant-${variant}`], draggable && S.draggable);
+        const scrollOffset = SCROLL_OFFSET[size];
+        return (jsxs("div", { className: classes, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }), jsx("input", { ref: this.inputRef, className: S.input, type: "file", multiple: maxCount > 1 && typeof pickingIndex !== 'number', accept: accept, onChange: this.onChange }), jsx(Label, { isOnTop: true, size: size, className: S.label, onClipPathChange: clipPath => (this.store.labelClipPath = clipPath), children: label }), jsx(Scroll, { y: true, size: "s", className: S.inner, innerClassName: S.items, fadeSize: size, offset: { y: { before: scrollOffset, after: scrollOffset } }, style: { clipPath: labelClipPath }, children: this.renderItems() })] }));
+    }
+}
+
+export { InputFile };

package/dist/esm/src/components/InputFile/InputFile.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".InputFile_root__pY3JG{position:relative}.InputFile_border__whRyD{border-radius:inherit;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:background-color .2s ease-out;width:100%}.InputFile_variant-outlined__f5hnA .InputFile_border__whRyD{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD{background-color:var(--accent-color-alpha-100)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD:hover{background-color:var(--active-color-alpha-300)}.InputFile_empty__7j1BK:hover .InputFile_border__whRyD{background-color:var(--active-color-alpha-500)}.InputFile_label__bAEz-{align-items:center;display:flex;height:100%;position:absolute}.InputFile_inner__BQFX7{max-height:inherit}.InputFile_items__ND1YG{align-items:center;display:flex;flex-wrap:wrap;font-size:0;margin:-4px;width:calc(100% + 8px)}.InputFile_item__qg5I6{display:inline-flex;margin:4px;position:relative}.InputFile_item__qg5I6:first-child:last-child{width:100%}.InputFile_addButton__rW719{align-items:center;cursor:pointer;justify-content:center;position:relative;transition:background-color .2s ease-out}.InputFile_root__pY3JG:not(.InputFile_empty__7j1BK) .InputFile_addButton__rW719:hover{background-color:var(--active-color-alpha-500)}.InputFile_input__7FR5r{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}.InputFile_size-s__hsWTE{font-size:12px}.InputFile_size-s__hsWTE .InputFile_border__whRyD,.InputFile_size-s__hsWTE .InputFile_item__qg5I6{border-radius:4px}.InputFile_size-s__hsWTE .InputFile_items__ND1YG{padding:10px}.InputFile_size-s__hsWTE .InputFile_item__qg5I6{height:50px;width:50px}.InputFile_size-m__unA0n{font-size:16px}.InputFile_size-m__unA0n .InputFile_border__whRyD,.InputFile_size-m__unA0n .InputFile_item__qg5I6{border-radius:6px}.InputFile_size-m__unA0n .InputFile_items__ND1YG{padding:12px}.InputFile_size-m__unA0n .InputFile_item__qg5I6{height:70px;width:70px}.InputFile_size-l__wpOVo{font-size:20px}.InputFile_size-l__wpOVo .InputFile_border__whRyD,.InputFile_size-l__wpOVo .InputFile_item__qg5I6{border-radius:8px}.InputFile_size-l__wpOVo .InputFile_items__ND1YG{padding:14px}.InputFile_size-l__wpOVo .InputFile_item__qg5I6{height:100px;width:100px}.InputFile_draggable__M7-3v{position:relative;width:100%}.InputFile_draggable__M7-3v .InputFile_item__qg5I6:not(.InputFile_addButton__rW719){cursor:move}";
+var S = {"root":"InputFile_root__pY3JG","border":"InputFile_border__whRyD","variant-outlined":"InputFile_variant-outlined__f5hnA","variant-default":"InputFile_variant-default__Jqzal","empty":"InputFile_empty__7j1BK","label":"InputFile_label__bAEz-","inner":"InputFile_inner__BQFX7","items":"InputFile_items__ND1YG","item":"InputFile_item__qg5I6","addButton":"InputFile_addButton__rW719","input":"InputFile_input__7FR5r","size-s":"InputFile_size-s__hsWTE","size-m":"InputFile_size-m__unA0n","size-l":"InputFile_size-l__wpOVo","draggable":"InputFile_draggable__M7-3v"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/InputFile/InputFile.types.js

@@ -0,0 +1 @@
+

package/dist/esm/src/components/InputFile/Item/Item.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Button } from '../../Button/Button.js';
+import { Icon } from '../../Icon/Icon.js';
+import S from './Item.styl.js';
+
+function Item(props) {
+    const { className, size, img, total, loaded, waitingForUpload, children, onRemove, isDragging, ...rest } = props;
+    const style = {};
+    const isComplete = loaded === total;
+    const isLoading = !isComplete && loaded > 0;
+    const classes = cn(S.root, S[`size-${size}`], waitingForUpload && S.waitingForUpload, isLoading && S.loading, isDragging && S.dragging, className);
+    if (img)
+        style.backgroundImage = `url(${img})`;
+    return (jsxs("div", { ...rest, className: classes, style: style, children: [children, jsx(Button, { className: S.removeButton, size: "s", variant: "clear", square: true, onClick: onRemove, children: jsx(Icon, { type: "delete" }) }), jsx("div", { className: cn(S.progress, isComplete && S.complete), style: { left: `${(loaded / total) * 100 - 100}%` } }), jsx("div", { className: S.overlay })] }));
+}
+
+export { Item as default };

package/dist/esm/src/components/InputFile/Item/Item.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Item_root__uFQw8{background-position:50%;background-size:cover;height:100%;overflow:hidden;position:relative}.Item_root__uFQw8.Item_loading__hN0tA{pointer-events:none}.Item_root__uFQw8>.Item_overlay__lE8hl,.Item_root__uFQw8>img{border-radius:inherit}.Item_size-s__6FWi7{border-radius:4px}.Item_size-m__ICwh8{border-radius:6px}.Item_size-l__zv6Xj{border-radius:8px}.Item_overlay__lE8hl{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .1s ease-out;z-index:1}.Item_waitingForUpload__JFsoN .Item_overlay__lE8hl{background-color:var(--accent-color-alpha-200);border:2px dashed var(--accent-color-alpha-500)}.Item_root__uFQw8:hover .Item_overlay__lE8hl{background-color:var(--active-color-alpha-500)}.Item_root__uFQw8:hover .Item_removeButton__EgOub{transform:translateX(0)}.Item_removeButton__EgOub{border-radius:0;border-top-left-radius:inherit;bottom:0;position:absolute;right:0;transform:translateX(100%);transition:transform .2s ease-out;z-index:2}.Item_removeButton__EgOub,.Item_removeButton__EgOub:hover{background-color:var(--decent-color-alpha-900)}.Item_removeButton__EgOub:hover{color:var(--danger-color)}.Item_progress__bpcNP{background-color:var(--active-color-alpha-800);height:100%;left:-100%;pointer-events:none;position:absolute;top:0;transition:all .2s ease-out;width:100%;z-index:1}.Item_progress__bpcNP.Item_complete__lEfmV{opacity:0}.Item_dragging__HPzfu{overflow:visible}.Item_dragging__HPzfu .Item_overlay__lE8hl,.Item_dragging__HPzfu .Item_progress__bpcNP,.Item_dragging__HPzfu .Item_removeButton__EgOub{display:none}";
+var S = {"root":"Item_root__uFQw8","loading":"Item_loading__hN0tA","overlay":"Item_overlay__lE8hl","size-s":"Item_size-s__6FWi7","size-m":"Item_size-m__ICwh8","size-l":"Item_size-l__zv6Xj","waitingForUpload":"Item_waitingForUpload__JFsoN","removeButton":"Item_removeButton__EgOub","progress":"Item_progress__bpcNP","complete":"Item_complete__lEfmV","dragging":"Item_dragging__HPzfu"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Label/Label.constants.json.js

@@ -0,0 +1,8 @@
+var LABEL_MULTIPLIER = 0.7;
+var LABEL_PADDING = 5;
+var C = {
+	LABEL_MULTIPLIER: LABEL_MULTIPLIER,
+	LABEL_PADDING: LABEL_PADDING
+};
+
+export { LABEL_MULTIPLIER, LABEL_PADDING, C as default };

package/dist/esm/src/components/Label/Label.helpers.js

@@ -0,0 +1,35 @@
+import C from './Label.constants.json.js';
+
+function getBottomOffset(size = 's') {
+    if (size === 'l')
+        return 4;
+    if (size === 'm')
+        return 2;
+    return 0;
+}
+function getLabelClipPath(left, width, size = 's') {
+    const offset = 10;
+    const A = left - C.LABEL_PADDING;
+    // @ts-ignore
+    const B = width === 0 ? 0 : left + width * C.LABEL_MULTIPLIER + C.LABEL_PADDING;
+    const cutWidth = 5 + getBottomOffset(size);
+    const min = `-${offset}px`;
+    const max = `calc(100% + ${offset}px)`;
+    const points = [
+        [min, min],
+        [min, max],
+        [max, max],
+        [max, min],
+        [`${B}px`, min],
+        [`${B}px`, `${cutWidth - 1}px`],
+        [`${B - 1}px`, `${cutWidth}px`],
+        [`${A + 1}px`, `${cutWidth}px`],
+        [`${A}px`, `${cutWidth - 1}px`],
+        [`${A}px`, min],
+    ]
+        .map(coords => coords.join(' '))
+        .join(', \n');
+    return `polygon(${points})`;
+}
+
+export { getLabelClipPath };

package/dist/esm/src/components/Label/Label.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Component, createRef } from 'react';
+import cn from 'classnames';
+import Time from 'timen';
+import S from './Label.styl.js';
+import { getLabelClipPath } from './Label.helpers.js';
+
+class Label extends Component {
+    gapWrapRef = createRef();
+    gapRef = createRef();
+    timers;
+    state = { clipPath: '' };
+    labelWidth = 0;
+    static defaultProps = {
+        size: 'm',
+    };
+    constructor(props) {
+        super(props);
+        this.timers = Time.create();
+    }
+    componentDidMount() {
+        this.updateClipPath();
+    }
+    componentDidUpdate(prevProps) {
+        const { children, isOnTop, size, onClipPathChange } = this.props;
+        const needUpadte = onClipPathChange &&
+            (children !== prevProps.children ||
+                isOnTop !== prevProps.isOnTop ||
+                size !== prevProps.size);
+        if (needUpadte)
+            this.updateClipPath();
+    }
+    updateClipPath = () => {
+        const { isOnTop, onClipPathChange, size } = this.props;
+        const gapWrapElem = this.gapWrapRef?.current;
+        const gapElem = this.gapRef?.current;
+        if (!onClipPathChange || !gapWrapElem || !gapElem)
+            return;
+        // @ts-ignore
+        const { offsetLeft } = gapWrapElem;
+        const { offsetWidth } = gapElem;
+        const labelWidth = isOnTop ? offsetWidth : 0;
+        if (this.labelWidth === labelWidth)
+            return;
+        this.labelWidth = labelWidth;
+        const clipPath = getLabelClipPath(offsetLeft, labelWidth, size);
+        onClipPathChange(clipPath);
+    };
+    render() {
+        const { className, size, isOnTop, isError, children } = this.props;
+        const classes = cn(S.root, S[`size-${size}`], isOnTop && S.onTop, isError && S.isError, className);
+        if (!children)
+            return null;
+        return (jsxs("div", { className: classes, children: [jsx("div", { className: S.view, children: jsx("div", { children: children }) }), jsx("div", { className: S.gapWrap, ref: this.gapWrapRef, children: jsx("div", { className: S.gap, ref: this.gapRef, children: children }) })] }));
+    }
+}
+
+export { Label };

package/dist/esm/src/components/Label/Label.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Label_size-s__CL8do{font-size:12px;padding:0 10px}.Label_size-m__X81DA{font-size:16px;padding:0 12px}.Label_size-l__-2YIE{font-size:20px;padding:0 14px}.Label_size-xl__aeykV{padding-right:10px}.Label_root__TewVm{align-items:center;color:var(--accent-color-alpha-500);display:flex;left:0;padding-bottom:0;padding-top:0;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Label_root__TewVm,.Label_root__TewVm>div{height:100%;max-width:100%}.Label_gap__zlRrx,.Label_view__Lz9Eu>div{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Label_view__Lz9Eu{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;max-width:100%;transform:translateZ(0);transform-origin:top left;transition:transform .15s ease-out}.Label_onTop__7Ntzk .Label_view__Lz9Eu{color:var(--accent-color);transform:scale(.7) translate3d(0,-50%,0)}.Label_isError__YqI0d .Label_view__Lz9Eu{color:var(--danger-color)}.Label_gapWrap__lDGBB{max-width:100%;opacity:0;padding:inherit;pointer-events:none;position:absolute}.Label_gapWrap__lDGBB:before{border-radius:4px;content:\"\";height:1.4em;left:-6px;position:absolute;right:-6px;z-index:-1}";
+var S = {"size-s":"Label_size-s__CL8do","size-m":"Label_size-m__X81DA","size-l":"Label_size-l__-2YIE","size-xl":"Label_size-xl__aeykV","root":"Label_root__TewVm","view":"Label_view__Lz9Eu","gap":"Label_gap__zlRrx","onTop":"Label_onTop__7Ntzk","isError":"Label_isError__YqI0d","gapWrap":"Label_gapWrap__lDGBB"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Lazy/Lazy.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import Time from 'timen';
+import { createStore } from 'justorm/react';
+import { Container } from '../Container/Container.js';
+import { Spinner } from '../Spinner/Spinner.js';
+
+function compare(cb1, cb2) {
+    return cb1?.toString() === cb2?.toString();
+}
+const loaded = new Map();
+class Lazy extends Component {
+    store;
+    Node;
+    hasNode = false;
+    clearSpinnerTimeout;
+    static defaultProps = {
+        size: 'm',
+    };
+    constructor(props) {
+        super(props);
+        this.Node = loaded.get(this.props.loader);
+        this.hasNode = Boolean(this.Node);
+        this.store = createStore(this, {
+            loading: !this.hasNode,
+            spinnerTimeout: this.hasNode,
+        });
+    }
+    componentDidMount() {
+        if (!this.hasNode)
+            this.update();
+    }
+    componentDidUpdate({ loader }) {
+        if (!compare(this.props.loader, loader)) {
+            // @ts-ignore
+            this.clearSpinnerTimeout?.();
+            this.update();
+        }
+    }
+    update() {
+        const { loader } = this.props;
+        this.clearSpinnerTimeout = Time.after(500, () => this.setState({ spinnerTimeout: false }));
+        this.store.loading = true;
+        loader().then(({ default: Node }) => {
+            if (!compare(this.props.loader, loader))
+                return;
+            this.Node = Node;
+            loaded.set(loader, Node);
+            this.store.loading = false;
+        });
+    }
+    render() {
+        const { Node } = this;
+        const { progressElem, loader, hideSpinner, ...props } = this.props;
+        const { loading, spinnerTimeout } = this.store;
+        if (Node)
+            return jsx(Node, { ...props });
+        if (!spinnerTimeout && loading && !hideSpinner) {
+            return (progressElem ?? (jsx(Container, { fullHeight: true, fullWidth: true, children: jsx(Spinner, { size: props.size }) })));
+        }
+        return null;
+    }
+}
+
+export { Lazy };

package/dist/esm/src/components/LightBox/LightBox.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { Paranja } from '../Paranja/Paranja.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import S from './LightBox.styl.js';
+
+function LightBox({ children, onClose, blur, ...props }) {
+    const [isOpen, setOpen] = useState(false);
+    const onKeyDown = useCallback(e => {
+        if (isOpen && e.key === 'Escape') {
+            e.stopPropagation();
+            setOpen(false);
+            onClose?.();
+        }
+    }, [isOpen, onClose]);
+    useEffect(() => {
+        setOpen(props.isOpen);
+    }, [props.isOpen]);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+    }, [isOpen]);
+    return (jsxs(Paranja, { className: cn(S.root, isOpen && S.open), blur: blur, children: [children, jsx(Button, { className: S.close, onClick: onClose, variant: "clear", children: jsx(Icon, { type: "close", size: "l" }) })] }));
+}
+
+export { LightBox };

package/dist/esm/src/components/LightBox/LightBox.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".LightBox_root__R-JhJ{align-items:center;display:flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease-out}.LightBox_open__a-qrU{opacity:1;pointer-events:all}.LightBox_close__ts4k1{border-radius:0;color:var(--accent-color);height:60px;min-height:60px;position:absolute;right:0;top:0;width:60px;z-index:1}.LightBox_close__ts4k1:hover{background-color:var(--decent-color-alpha-200);color:var(--active-color)}@media (min-width:700px){.LightBox_close__ts4k1{height:100px;min-height:100px;width:100px}}";
+var S = {"root":"LightBox_root__R-JhJ","open":"LightBox_open__a-qrU","close":"LightBox_close__ts4k1"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Notifications/Notifications.constants.json.js

@@ -0,0 +1,6 @@
+var ANIMATION_DURATION = 300;
+var C = {
+	ANIMATION_DURATION: ANIMATION_DURATION
+};
+
+export { ANIMATION_DURATION, C as default };

package/dist/esm/src/components/Notifications/Notifications.js

@@ -0,0 +1,67 @@
+import { createElement, Component } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { withStore } from 'justorm/react';
+import { Icon } from '../Icon/Icon.js';
+import { Button } from '../Button/Button.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import STORE from './store.js';
+import S from './Notifications.styl.js';
+
+function getTouchPos(e) {
+    const { clientX: x, clientY: y } = e.targetTouches[0];
+    return { x, y };
+}
+function getDeltaPos(p1, p2) {
+    return {
+        x: Math.abs(p2.x - p1.x),
+        y: Math.abs(p2.y - p1.y),
+    };
+}
+const TOUCH_MOVE_TRESHOLD = 50;
+class Item extends Component {
+    startPos = null;
+    onTouchStart = e => {
+        this.startPos = getTouchPos(e);
+    };
+    onTouchMove = e => {
+        const { unpause } = this.props;
+        if (!this.startPos)
+            return;
+        // e.preventDefault();
+        e.stopPropagation();
+        const pos = getTouchPos(e);
+        const delta = getDeltaPos(this.startPos, pos);
+        if (delta.x > delta.y && delta.x > TOUCH_MOVE_TRESHOLD) {
+            unpause();
+            this.closeMe();
+        }
+    };
+    onTouchEnd = () => {
+        const { unpause } = this.props;
+        unpause();
+        this.startPos = null;
+    };
+    onTouchCancel = () => (this.startPos = null);
+    closeMe = () => {
+        const { id, close } = this.props;
+        close(id);
+    };
+    render() {
+        const { type = 'default', title, content, visible, pause, unpause, } = this.props;
+        const classes = cn(S.item, S[`type-${type}`], visible && S.visible);
+        return (jsx("div", { className: classes, onMouseOver: pause, onFocus: pause, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onMouseOut: unpause, onBlur: unpause, onTouchEnd: this.onTouchEnd, onTouchCancel: this.onTouchCancel, children: jsxs("div", { className: S.itemInner, children: [(title || content) && (jsxs("div", { className: S.text, children: [title && jsx("div", { className: S.title, children: title }), content && jsx("div", { className: S.content, children: content })] })), jsx(Button, { className: S.close, variant: "clear", square: true, onClick: this.closeMe, children: jsx(Icon, { type: "close", size: "s" }) })] }) }));
+    }
+}
+const NotificationsStore = STORE;
+const Notifications = withStore({
+    notifications: ['items', 'data'],
+})(function Notifications({ store, ...rest }) {
+    const { notifications } = store;
+    const { items, data, pause, unpause, close } = notifications;
+    const api = { pause, unpause, close };
+    const classes = cn(S.root, items.length === 0 && S.empty);
+    return (jsx(Scroll, { ...rest, y: true, size: "s", className: classes, innerClassName: S.inner, offset: { y: { before: 22, after: 22 } }, children: items.map(id => (createElement(Item, { ...data[id], ...api, id: id, key: id }))) }));
+});
+
+export { Notifications, NotificationsStore };

package/dist/esm/src/components/Notifications/Notifications.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Notifications_root__S3ujN{max-height:calc(var(--vh)*100);overflow:hidden;position:fixed;right:0;top:0;transform:translateZ(0);transition:right .3s ease-out;width:320px;z-index:20}.Notifications_inner__6v9e3{padding:var(--indent-m)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--border-radius-l)}.Notifications_item__I3Up4{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:100%;max-height:0;max-width:100%;opacity:0;position:relative;transition:all .3s ease-out;width:300px}.Notifications_item__I3Up4+.Notifications_item__I3Up4{padding-top:10px}.Notifications_item__I3Up4:hover{transform:translateX(-2px)}.Notifications_visible__ln4-n{left:0;max-height:500px;opacity:1}.Notifications_itemInner__nEYAl{align-items:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--decent-color-alpha-500);box-shadow:inset 0 0 1px var(--accent-color-alpha-300),0 0 20px var(--decent-color);box-sizing:border-box;display:flex;padding:16px 32px 16px 20px;position:relative;transition:.3s ease-out;transition-property:transform}.Notifications_type-warning__Nxg6C .Notifications_itemInner__nEYAl{background-color:var(--warning-color-alpha-300)}.Notifications_type-danger__zeIMt .Notifications_itemInner__nEYAl{background-color:var(--danger-color-alpha-300)}.Notifications_icon__nKs-X{background:no-repeat 50%;height:24px;margin-right:10px;min-width:24px;width:24px}.Notifications_type-loading__N4EE5 .Notifications_icon__nKs-X{transform:translateY(-20px)}.Notifications_text__7QZL6{display:flex;flex-direction:column;flex-grow:1;z-index:1}.Notifications_title__Gu9bs{font-size:16px;font-weight:700}.Notifications_content__Zrvw2{font-size:12px;margin-top:calc(var(--indent-s)/2)}.Notifications_content__Zrvw2:first-child{margin-top:0}.Notifications_close__-IUH3{background-color:transparent;border-radius:50%;cursor:pointer;height:40px!important;max-height:40px!important;max-width:40px!important;opacity:0;position:absolute;right:-5px;top:-5px;transform:scale(.8);transition:.1s ease-out;transition-property:opacity,transform;width:40px!important}.Notifications_item__I3Up4:hover .Notifications_close__-IUH3{opacity:.8}.Notifications_close__-IUH3:hover{background-color:transparent;background-color:initial;opacity:1;transform:scale(1)}@media (max-width:700px){.Notifications_item__I3Up4,.Notifications_root__S3ujN{width:100%}.Notifications_title__Gu9bs{font-size:20px}.Notifications_content__Zrvw2{font-size:16px}.Notifications_close__-IUH3{transform:scale(1.2)}}";
+var S = {"root":"Notifications_root__S3ujN","inner":"Notifications_inner__6v9e3","empty":"Notifications_empty__zCpOA","item":"Notifications_item__I3Up4","itemInner":"Notifications_itemInner__nEYAl","visible":"Notifications_visible__ln4-n","type-warning":"Notifications_type-warning__Nxg6C","type-danger":"Notifications_type-danger__zeIMt","icon":"Notifications_icon__nKs-X","type-loading":"Notifications_type-loading__N4EE5","text":"Notifications_text__7QZL6","title":"Notifications_title__Gu9bs","content":"Notifications_content__Zrvw2","close":"Notifications_close__-IUH3"};
+styleInject(css_248z);
+
+export { S as default };