@homecode/ui 4.18.16 → 4.18.18

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

@@ -1,2 +1,295 @@
-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"../Calendar/Calendar.styl.js";import"lodash.omit";import"../RequiredStar/RequiredStar.styl.js";import"nanoid";import"../Input/Input.styl.js";import"../Portal/Portal.js";import"../Paranja/Paranja.styl.js";import"../../tools/dom.js";import"../Popup/Popup.styl.js";import"../../tools/queryParams.js";import"../Select/Select.styl.js";import"../Checkbox/Checkbox.styl.js";import"../Container/Container.styl.js";import"../DatePicker/DatePicker.styl.js";import"moment";import"../DatePickerInput/DatePickerInput.styl.js";import{Draggable}from"../Draggable/Draggable.js";import"../Expand/Expand.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"../LightBox/LightBox.styl.js";import"../Notifications/Notifications.js";import"../PopupMenu/PopupMenu.styl.js";import"../Router/Router.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},defaultFileState={total:1,loaded:0,error:null,base64:""},buildDefaultState=(t,e,s)=>({...defaultFileState,loaded:s,index:e,src:t});class InputFile extends Component{store;filesToUpload=[];previewRequests={};inputRef=createRef();_mounted=!1;constructor(t){super(t),this.store=createStore(this,{items:this.getStateFromProps(),labelClipPath:"",pickingIndex:null,isDragging:!1})}static defaultProps={size:"m",variant:"default",maxCount:1};componentDidMount(){this._mounted=!0,this.props.uploadOnDemand?.(this.demandedUploader)}componentWillUnmount(){this._mounted=!1,this.store.items.forEach(({xhr:t})=>t?.abort())}componentDidUpdate(t){var{value:e,maxCount:s}=this.props;compare(t.value,e)&&t.maxCount===s||(this.store.items=this.getStateFromProps())}isMultiple=()=>1<this.props.maxCount;getStateFromProps(){var{value:t,maxCount:e,upload:s}=this.props;const r=s?1:0;return this.isMultiple()?1===e?[buildDefaultState(t,0,r)]:t.slice(0,e).map((t,e)=>buildDefaultState(t,e,r)):(s=Array.isArray(t)?t[0]:t)?[buildDefaultState(s,0,r)]:[]}getValFromState=()=>{var t=this.store["items"];return this.isMultiple()?t.map(({src:t,base64:e})=>t||e):t[0]?t[0].src||t[0].base64:null};getLastIndex=()=>{var t=this.props["value"];return Array.isArray(t)?t.length:0};filterAllowedFiles(t,e){const{maxCount:s,limit:r}=this.props,i=[];return[...t].every(t=>{if(e>=s)return!1;if(r&&t.size/1024/1024>r)return console.error(`Max file size - ${r}Mb`,t),!1;return i.push(t),e++,!0},[]),i}onPlusButtonClick=()=>this.inputRef.current.click();onItemClick(t){this.store.pickingIndex=t,Time.after(50,()=>this.inputRef.current.click())}onDragStart=()=>this.store.isDragging=!0;onDragEnd=()=>this.store.isDragging=!1;onChange=async t=>{t=t.target.files;const{items:e,pickingIndex:s}=this.store;var{onSelect:r,uploadOnDemand:i,upload:o}=this.props;let a=s??this.getLastIndex();t=this.filterAllowedFiles(t,a);t.forEach(t=>{e[a]={...defaultFileState,index:a},this.filesToUpload[a]=t,this.previewRequests[a]=this.generatePreview(t,a),a++}),r?.(t),o&&this.processUploadOnChange(t),i&&this.processUploadOnDemand(),"number"==typeof s&&(this.store.pickingIndex=null)};onReorder=t=>{const e=this.store["items"];var s=this.props["onChange"];this.store.items=t.map(t=>e[t]),s(null,this.getValFromState())};onProgress=e=>t=>{Object.assign(e,pick(t,["total","loaded"]))};async generatePreview(t,e){var s=this.store.items[e];Object.assign(s,defaultFileState),s.base64=await toBase64(t),delete this.previewRequests[e]}async processUploadOnDemand(){var t;await Promise.all(Object.values(this.previewRequests)),this._mounted&&(t=this.props["onChange"],t(null,this.getValFromState()))}async processUploadOnChange(t){var e=this.props["onChange"],s=this.store["pickingIndex"];const r=s??this.getLastIndex();s=t.map((t,e)=>this.upload(t,r+e));await Promise.all(s),e(null,this.getValFromState())}async upload(t,e){var s=this.props["upload"],r=this.store["items"];const i=r[e];r=await s({file:t,onProgress:this.onProgress(i),getXHR:t=>i.xhr=t});delete this.filesToUpload[e],this._mounted&&Object.assign(i,{src:r,loaded:i.total,xhr:null})}demandedUploader=async r=>{var t=this.props["value"];const i=this.store["items"];let o;if(this.isMultiple()){const a=[];o=[...t],t.forEach((t,e)=>{var s=this.filesToUpload[e];s&&(s={file:s,onProgress:this.onProgress(i[e])},a.push(r(s).then(t=>o[e]=t)))}),await Promise.all(a)}else o=await r(this.filesToUpload[0],this.onProgress(i[0]));return this.filesToUpload=[],o};remove=async(t,e)=>{t.stopPropagation();var{remove:t,onChange:s}=this.props;if(t&&!await t(e))return;t=this.store.items;spliceWhere(t,e,"src"),s(null,this.getValFromState())};renderPlusButton(){var t=this.props["size"];return jsx("label",{className:cn(S.item,S.addButton),onClick:this.onPlusButtonClick,children:jsx(Icon,{type:"plus",size:t})},"add-button")}renderItem=(t,e={})=>{var s=this.props["size"],{base64:r,src:i,loaded:o,total:a}=this.store.items[t];const l=r||i;return createElement(Item,{...e,size:s,key:String(l)+t,img:l,total:a,loaded:o,waitingForUpload:!!this.filesToUpload[t],onRemove:t=>this.remove(t,l),onClick:()=>this.onItemClick(t)})};renderItems(){var{draggable:t,maxCount:e}=this.props;const{items:s,isDragging:r}=this.store;return 0===s.length?this.renderPlusButton():(e=this.isMultiple()&&s.length<e,t?(t=Array.from({length:s.length},(t,e)=>String(e)),jsx(Draggable,{className:S.draggable,itemClassName:S.item,items:t,onDragStart:this.onDragStart,onDragEnd:this.onDragEnd,onChange:this.onReorder,renderItem:t=>this.renderItem(parseInt(t,10),{isDragging:r}),children:e&&this.renderPlusButton()})):(t=s.map((t,e)=>this.renderItem(e,{className:S.item})),e&&t.push(this.renderPlusButton()),t))}render(){var{className:t,size:e,variant:s,draggable:r,label:i,maxCount:o,accept:a,value:l}=this.props,{labelClipPath:n,pickingIndex:p}=this.store,l=!l?.length,t=cn(S.root,t,l&&S.empty,S["size-"+e],S["variant-"+s],r&&S.draggable),l=SCROLL_OFFSET[e];return jsxs("div",{className:t,children:[jsx("div",{className:S.border,suppressHydrationWarning:!0,style:{clipPath:n}}),jsx("input",{ref:this.inputRef,className:S.input,type:"file",multiple:1<o&&"number"!=typeof p,accept:a,onChange:this.onChange}),jsx(Label,{isOnTop:!0,size:e,className:S.label,onClipPathChange:t=>this.store.labelClipPath=t,children:i}),jsx(Scroll,{y:!0,size:"s",className:S.inner,innerClassName:S.items,fadeSize:e,offset:{y:{before:l,after:l}},style:{clipPath:n},children:this.renderItems()})]})}}export{InputFile};
-//# sourceMappingURL=InputFile.js.map
+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 '../Calendar/Calendar.styl.js';
+import 'lodash.omit';
+import '../RequiredStar/RequiredStar.styl.js';
+import 'nanoid';
+import '../Input/Input.styl.js';
+import '../Portal/Portal.js';
+import '../Paranja/Paranja.styl.js';
+import '../../tools/dom.js';
+import '../Popup/Popup.styl.js';
+import '../../tools/queryParams.js';
+import '../Select/Select.styl.js';
+import '../Checkbox/Checkbox.styl.js';
+import '../Container/Container.styl.js';
+import '../DatePicker/DatePicker.styl.js';
+import 'moment';
+import '../DatePickerInput/DatePickerInput.styl.js';
+import { Draggable } from '../Draggable/Draggable.js';
+import '../Expand/Expand.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 '../LightBox/LightBox.styl.js';
+import '../Notifications/Notifications.js';
+import '../PopupMenu/PopupMenu.styl.js';
+import '../Router/Router.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

@@ -1,2 +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:16px}.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:8px}.InputFile_size-s__hsWTE .InputFile_item__qg5I6{height:50px;width:50px}.InputFile_size-m__unA0n{font-size:20px}.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:24px}.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}",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};
-//# sourceMappingURL=InputFile.styl.js.map
+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:16px}.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:8px}.InputFile_size-s__hsWTE .InputFile_item__qg5I6{height:50px;width:50px}.InputFile_size-m__unA0n{font-size:20px}.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:24px}.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

@@ -1,2 +1 @@
 
-//# sourceMappingURL=InputFile.types.js.map

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

@@ -1,2 +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(e){const{className:o,size:s,img:t,total:r,loaded:a,waitingForUpload:n,children:i,onRemove:l,isDragging:m,...c}=e;var e={},d=a===r,g=cn(S.root,S["size-"+s],n&&S.waitingForUpload,!d&&0<a&&S.loading,m&&S.dragging,o);return t&&(e.backgroundImage=`url(${t})`),jsxs("div",{...c,className:g,style:e,children:[i,jsx(Button,{className:S.removeButton,size:"s",variant:"clear",square:!0,onClick:l,children:jsx(Icon,{type:"delete"})}),jsx("div",{className:cn(S.progress,d&&S.complete),style:{left:a/r*100-100+"%"}}),jsx("div",{className:S.overlay})]})}export{Item as default};
-//# sourceMappingURL=Item.js.map
+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

@@ -1,2 +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}",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};
-//# sourceMappingURL=Item.styl.js.map
+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

@@ -1,2 +1,8 @@
-var LABEL_MULTIPLIER=.7,LABEL_PADDING=5,C={LABEL_MULTIPLIER:LABEL_MULTIPLIER,LABEL_PADDING:LABEL_PADDING};export{LABEL_MULTIPLIER,LABEL_PADDING,C as default};
-//# sourceMappingURL=Label.constants.json.js.map
+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

@@ -1,2 +1,35 @@
-import C from"./Label.constants.json.js";function getBottomOffset(t="s"){return"l"===t?4:"m"===t?2:0}function getLabelClipPath(t,p,o="s"){var n=t-C.LABEL_PADDING,t=0===p?0:t+p*C.LABEL_MULTIPLIER+C.LABEL_PADDING,p=5+getBottomOffset(o),o="-10px",x="calc(100% + 10px)";return`polygon(${[[o,o],[o,x],[x,x],[x,o],[t+"px",o],[t+"px",p-1+"px"],[t-1+"px",p+"px"],[1+n+"px",p+"px"],[n+"px",p-1+"px"],[n+"px",o]].map(t=>t.join(" ")).join(", \n")})`}export{getLabelClipPath};
-//# sourceMappingURL=Label.helpers.js.map
+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

@@ -1,2 +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(e){super(e),this.timers=Time.create()}componentDidMount(){this.updateClipPath()}componentDidUpdate(e){var{children:t,isOnTop:s,size:i,onClipPathChange:r}=this.props;!r||t===e.children&&s===e.isOnTop&&i===e.size||this.updateClipPath()}updateClipPath=()=>{var{isOnTop:e,onClipPathChange:t,size:s}=this.props,i=this.gapWrapRef?.current,r=this.gapRef?.current;t&&i&&r&&(i=i["offsetLeft"],r=r["offsetWidth"],this.labelWidth!==(e=e?r:0))&&(this.labelWidth=e,t(getLabelClipPath(i,e,s)))};render(){var{className:e,size:t,isOnTop:s,isError:i,children:r}=this.props,t=cn(S.root,S["size-"+t],s&&S.onTop,i&&S.isError,e);return r?jsxs("div",{className:t,children:[jsx("div",{className:S.view,children:jsx("div",{children:r})}),jsx("div",{className:S.gapWrap,ref:this.gapWrapRef,children:jsx("div",{className:S.gap,ref:this.gapRef,children:r})})]}):null}}export{Label};
-//# sourceMappingURL=Label.js.map
+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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.Label_size-s__CL8do{font-size:16px;padding:0 8px}.Label_size-m__X81DA{font-size:20px;padding:0 12px}.Label_size-l__-2YIE{font-size:24px;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}',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};
-//# sourceMappingURL=Label.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Label_size-s__CL8do{font-size:16px;padding:0 8px}.Label_size-m__X81DA{font-size:20px;padding:0 12px}.Label_size-l__-2YIE{font-size:24px;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

@@ -1,2 +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(e,t){return e?.toString()===t?.toString()}const loaded=new Map;class Lazy extends Component{store;Node;hasNode=!1;clearSpinnerTimeout;static defaultProps={size:"m"};constructor(e){super(e),this.Node=loaded.get(this.props.loader),this.hasNode=Boolean(this.Node),this.store=createStore(this,{loading:!this.hasNode,spinnerTimeout:this.hasNode})}componentDidMount(){this.hasNode||this.update()}componentDidUpdate({loader:e}){compare(this.props.loader,e)||(this.clearSpinnerTimeout?.(),this.update())}update(){const t=this.props["loader"];this.clearSpinnerTimeout=Time.after(500,()=>this.setState({spinnerTimeout:!1})),this.store.loading=!0,t().then(({default:e})=>{compare(this.props.loader,t)&&(this.Node=e,loaded.set(t,e),this.store.loading=!1)})}render(){var e=this["Node"];const{progressElem:t,loader:o,hideSpinner:r,...i}=this.props;var{loading:s,spinnerTimeout:n}=this.store;return e?jsx(e,{...i}):n||!s||r?null:t??jsx(Container,{fullHeight:!0,fullWidth:!0,children:jsx(Spinner,{size:i.size})})}}export{Lazy};
-//# sourceMappingURL=Lazy.js.map
+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

@@ -1,2 +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:e,className:o,onClose:t,blur:s,...n}){const[r,a]=useState(!1),c=useCallback(e=>{r&&"Escape"===e.key&&(e.stopPropagation(),a(!1),t?.())},[r,t]);return useEffect(()=>{a(n.isOpen)},[n.isOpen]),useEffect(()=>(document.addEventListener("keydown",c,!0),()=>document.removeEventListener("keydown",c,!0)),[r]),jsxs(Paranja,{className:cn(S.root,r&&S.open,o),blur:s,children:[e,jsx(Button,{className:S.close,onClick:t,variant:"clear",children:jsx(Icon,{type:"close",size:"l"})})]})}export{LightBox};
-//# sourceMappingURL=LightBox.js.map
+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, className, 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, className), 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

@@ -1,2 +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}}",S={root:"LightBox_root__R-JhJ",open:"LightBox_open__a-qrU",close:"LightBox_close__ts4k1"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=LightBox.styl.js.map
+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

@@ -1,2 +1,6 @@
-var ANIMATION_DURATION=300,C={ANIMATION_DURATION:ANIMATION_DURATION};export{ANIMATION_DURATION,C as default};
-//# sourceMappingURL=Notifications.constants.json.js.map
+var ANIMATION_DURATION = 300;
+var C = {
+	ANIMATION_DURATION: ANIMATION_DURATION
+};
+
+export { ANIMATION_DURATION, C as default };