@homecode/ui 4.19.8 → 4.20.0-beta-0

package/dist/esm/index.js

@@ -28,6 +28,7 @@ export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
 export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
 export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
 export { Select, SelectHelpers } from './src/components/Select/Select.js';
+export { Select2 } from './src/components/Select/Select2.js';
 export { Scroll } from './src/components/Scroll/Scroll.js';
 export { Shimmer } from './src/components/Shimmer/Shimmer.js';
 export { Spinner } from './src/components/Spinner/Spinner.js';

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

@@ -45,7 +45,8 @@ import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
 import '../LightBox/LightBox.styl.js';
 import { Menu } from '../Menu/Menu.js';
-import '../Notifications/Notifications.js';
+import '../Notifications/store.js';
+import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
@@ -63,6 +64,7 @@ function Autocomplete(props) {
     const [isLoading, setIsLoading] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const currentRequest = useRef('');
+    // @ts-ignore
     const inputRef = useRef(null);
     const isOpen = options.length > 0;
     const classes = cn(S.root, className);

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

@@ -129,7 +129,7 @@ class Draggable extends Component {
     render() {
         const { items, className, itemClassName, renderItem, children } = this.props;
         const { draggingId, underId, underOffset } = this.store;
-        return (jsxs("div", { className: cn(S.root, draggingId && S.dragging, className), children: [items.map((id, index) => (jsx("div", { className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
+        return (jsxs("div", { className: cn(S.root, draggingId && S.isDragging, className), children: [items.map((id, index) => (jsx("div", { "data-id": id, className: cn(S.item, itemClassName, id === draggingId && S.active), onPointerDown: this.onPointerDown, children: jsx("div", { className: S.inner, style: underId === id ? { transform: underOffset } : null, children: renderItem(id, index, id === draggingId) }) }, id))), children] }));
     }
 }
 

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Draggable_root__S1BgI{display:flex;flex-wrap:wrap;position:relative;touch-action:none}.Draggable_item__Z1pXk{display:flex}.Draggable_inner__c4syM{height:100%;transition:transform .2s ease-out;width:100%}.Draggable_dragging__M8qhF .Draggable_active__XcFM3,.Draggable_dragging__M8qhF .Draggable_inner__c4syM{pointer-events:none}.Draggable_dragging__M8qhF .Draggable_active__XcFM3 .Draggable_inner__c4syM{transition-duration:0s;z-index:1}";
-var S = {"root":"Draggable_root__S1BgI","item":"Draggable_item__Z1pXk","inner":"Draggable_inner__c4syM","dragging":"Draggable_dragging__M8qhF","active":"Draggable_active__XcFM3"};
+var css_248z = ".Draggable_root__S1BgI{display:flex;flex-wrap:wrap;position:relative;touch-action:none}.Draggable_item__Z1pXk{display:flex}.Draggable_inner__c4syM{height:100%;transition:transform .2s ease-out;width:100%}.Draggable_isDragging__YTPu5 .Draggable_inner__c4syM{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Draggable_isDragging__YTPu5 .Draggable_active__XcFM3{pointer-events:none}.Draggable_isDragging__YTPu5 .Draggable_active__XcFM3 .Draggable_inner__c4syM{transition-duration:0s;z-index:1}";
+var S = {"root":"Draggable_root__S1BgI","item":"Draggable_item__Z1pXk","inner":"Draggable_inner__c4syM","isDragging":"Draggable_isDragging__YTPu5","active":"Draggable_active__XcFM3"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -1,7 +1,6 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Component, createRef, createElement } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect, createElement } from 'react';
 import cn from 'classnames';
-import { createStore } from 'justorm/react';
 import omit from 'lodash.omit';
 import { Label } from '../Label/Label.js';
 import { RequiredStar } from '../RequiredStar/RequiredStar.js';
@@ -26,6 +25,7 @@ import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
 import '../Popup/Popup.styl.js';
 import '../Select/Select.styl.js';
+import 'justorm/react';
 import '../Checkbox/Checkbox.styl.js';
 import '../Container/Container.styl.js';
 import '../DatePicker/DatePicker.styl.js';
@@ -43,7 +43,8 @@ import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
 import '../LightBox/LightBox.styl.js';
 import '../Menu/Menu.js';
-import '../Notifications/Notifications.js';
+import '../Notifications/store.js';
+import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
@@ -59,216 +60,154 @@ const TEXTAREA_SCROLL_TOP_OFFSET = {
     m: 40,
     l: 50,
 };
-class Input extends Component {
-    inputRef = createRef();
-    isClearPressed = false;
-    cursorPos = 0;
-    prevLabelText = '';
-    store;
-    uid = generateUID();
-    static defaultProps = {
-        type: 'text',
-        size: 'm',
-        variant: 'default',
-    };
-    constructor(props) {
-        super(props);
-        const inputValue = props.value ?? props.defaultValue ?? '';
-        const hasValue = this.hasValue(inputValue);
-        this.store = createStore(this, {
-            isFocused: false,
-            isLabelOnTop: this.isLabelOnTop(hasValue),
-            inputValue,
-            hasValue,
-            labelClipPath: '',
-            autoComplete: null,
-        });
-    }
-    componentDidMount() {
-        document.addEventListener('keyup', this.onDocKeyUp, true);
-        if (this.isTextArea()) {
-            this.inputRef.current.innerText = this.store.inputValue;
-            document.addEventListener('paste', this.onTextareaPaste, true);
-        }
-    }
-    componentDidUpdate(prevProps) {
-        const { value } = this.props;
-        this.updateSelection();
-        this.updateAutoComplete();
-        if (value !== prevProps.value && value !== this.store.inputValue) {
-            this.store.inputValue = value;
-            // @ts-ignore
-            if (this.isTextArea())
-                this.inputRef.current.innerText = value;
-            this.updateHasValue();
-            this.updateLabelPosition();
-        }
-    }
-    updateAutoComplete() {
-        const form = this.inputRef.current?.closest('form');
+const Input = (props) => {
+    const { type = 'text', size = 'm', variant = 'default', value, defaultValue = '', onChange, onFocus, onBlur, onClear, onInput, changeOnEnd, checkAutofill, hasClear, required, hideRequiredStar, disabled, error, label, placeholder, addonLeft, addonRight, forceLabelOnTop, scrollProps, step = 1, round, className, } = props;
+    const updateAutoComplete = () => {
+        const form = inputRef.current?.closest('form');
         const val = form?.getAttribute('autocomplete');
-        if (this.store.autoComplete !== val)
-            this.store.autoComplete = val;
-    }
-    updateSelection() {
-        const { type } = this.props;
-        const { isFocused } = this.store;
-        const elem = this.inputRef.current;
+        if (autoComplete !== val)
+            setAutoComplete(val);
+    };
+    const updateSelection = () => {
+        const { type } = props;
+        const elem = inputRef.current;
         if (!isFocused || !elem || type !== 'text')
             return;
-        elem.selectionStart = this.cursorPos;
-        elem.selectionEnd = this.cursorPos;
-    }
-    updateLabelPosition() {
-        this.store.isLabelOnTop = this.isLabelOnTop();
-    }
-    updateHasValue() {
-        this.store.hasValue = this.hasValue();
-    }
-    hasValue(value = this.store.inputValue) {
-        const { type, defaultValue } = this.props;
-        return type === 'number' || Boolean(value || defaultValue);
-    }
-    isTextArea = () => this.props.type === 'textarea';
-    isNumber = () => this.props.type === 'number';
-    isLabelOnTop(hasValue = this.store?.hasValue) {
-        const { forceLabelOnTop, addonLeft } = this.props;
-        return (forceLabelOnTop || Boolean(addonLeft) || hasValue || this.store?.isFocused);
-    }
-    getValue(val = this.store.inputValue) {
-        const { type } = this.props;
+        elem.selectionStart = cursorPos.current;
+        elem.selectionEnd = cursorPos.current;
+    };
+    const inputRef = useRef(null);
+    const isFocusedRef = useRef(false);
+    const [isFocused, _setIsFocused] = useState(false);
+    const setIsFocused = (val) => {
+        isFocusedRef.current = val;
+        _setIsFocused(val);
+    };
+    const [inputValue, setInputValue] = useState((value ?? defaultValue ?? ''));
+    const [labelClipPath, setLabelClipPath] = useState('');
+    const [autoComplete, setAutoComplete] = useState('');
+    const uid = generateUID();
+    const isTextArea = type === 'textarea';
+    const isNumber = type === 'number';
+    const hasValue = isNumber || Boolean(value || inputValue || defaultValue);
+    const isLabelOnTop = forceLabelOnTop || Boolean(addonLeft) || hasValue || isFocused;
+    const cursorPos = useRef(0);
+    const getValue = (val = inputValue) => {
         if (type === 'number') {
             if (val)
                 return parseFloat(val);
             return 0;
         }
-        if (this.isTextArea())
-            return this.inputRef.current.innerText.replace('/n', '');
+        if (isTextArea)
+            return inputRef.current.innerText.replace(/\n/g, '');
         return val;
-    }
-    onTextareaPaste = e => {
-        if (!this.store.isFocused)
+    };
+    const onTextareaPaste = e => {
+        if (!isFocusedRef.current)
             return;
         e.preventDefault();
         e.stopPropagation();
-        this.pasteToTextarea(e.clipboardData.getData('text/plain'));
+        pasteToTextarea(e.clipboardData.getData('text/plain'));
+    };
+    const setTextareaValue = (value) => {
+        // @ts-ignore
+        if (inputRef.current)
+            inputRef.current.innerText = value;
     };
-    pasteToTextarea = debounce((text) => {
-        console.log('onTextareaPaste');
+    const pasteToTextarea = debounce((text) => {
         const sel = window.getSelection();
-        const textarea = this.inputRef.current;
+        const textarea = inputRef.current;
         const prevText = textarea.innerText;
-        // @ts-ignore
-        const startPos = sel.extentOffset;
+        const startPos = sel.getRangeAt(0).startOffset;
         const nextText = prevText.substring(0, startPos) + text + prevText.substring(startPos);
         textarea.innerText = nextText;
-        sel.setPosition(textarea.firstChild, startPos + text.length);
+        onChangeValue(nextText);
+        setTimeout(() => {
+            try {
+                window
+                    .getSelection()
+                    .setPosition(textarea.firstChild, startPos + text.length);
+            }
+            catch (e) { }
+        }, 100);
     }, 100);
-    onClearPress = e => {
-        const { onChange, onClear } = this.props;
-        this.isTextArea();
+    const onClearPress = e => {
         e.preventDefault();
         e.stopPropagation();
         onClear?.();
-        if (this.isTextArea()) {
-            this.inputRef.current.innerText = '';
+        if (isTextArea) {
+            inputRef.current.innerText = '';
         }
         if (onChange) {
-            this.onChange('');
+            onChangeValue('');
         }
         else {
-            if (!this.isTextArea) {
-                this.inputRef.current.value = '';
+            if (!isTextArea) {
+                inputRef.current.value = '';
             }
         }
-        this.inputRef.current?.focus();
+        inputRef.current?.focus();
     };
-    onDocKeyUp = (e) => {
-        const { changeOnEnd } = this.props;
-        const { isFocused } = this.store;
+    const onDocKeyUp = (e) => {
+        const { changeOnEnd } = props;
         if (changeOnEnd && e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
-            this.onTypingEnd();
+            onTypingEnd();
         }
         if (isFocused && e.key === 'Escape') {
             e.preventDefault();
             e.stopPropagation();
-            this.inputRef.current?.blur();
+            inputRef.current?.blur();
         }
     };
-    handleChange = (e) => {
-        const value = this.getValue(e.target.value);
-        this.onChange(value, e);
+    const handleChange = (e) => {
+        const val = getValue(e.target.value);
+        onChangeValue(val, e);
     };
-    onChange = (value, e) => {
-        const { onChange, changeOnEnd, type } = this.props;
-        const isNumber = type === 'number';
-        if (!isNumber)
-            this.cursorPos = this.inputRef.current.selectionStart;
-        if (changeOnEnd) {
-            this.store.inputValue = value;
-            this.updateHasValue();
-        }
-        else if (onChange) {
-            onChange(e, value);
-        }
-        else {
-            this.store.inputValue = value;
+    const onChangeValue = (value, e) => {
+        if (!isNumber && inputRef.current) {
+            cursorPos.current = inputRef.current.selectionStart;
         }
+        setInputValue(value);
+        onChange?.(e, value);
     };
-    onNumberWheel = delta => {
-        const { onChange, step = 1 } = this.props;
-        const value = this.getValue() + step * delta;
-        this.onChange(value);
+    const onNumberWheel = delta => {
+        const value = getValue() + step * delta;
+        onChangeValue(value);
         onChange?.(null, value);
     };
-    onTextAreaInput = e => {
-        const { onInput } = this.props;
-        this.store.inputValue = e.target.innerText;
-        this.updateHasValue();
-        this.handleChange(e);
+    const onTextAreaInput = e => {
+        setInputValue(e.target.innerText);
+        handleChange(e);
         onInput?.(e);
     };
-    onLabelClipPathChange = (clipPath) => (this.store.labelClipPath = clipPath);
-    onTypingEnd = () => {
-        const { onChange } = this.props;
-        onChange?.(null, this.getValue());
+    const onLabelClipPathChange = (clipPath) => setLabelClipPath(clipPath);
+    const onTypingEnd = () => {
+        onChange?.(null, getValue());
     };
-    onFocus = e => {
-        const { onFocus } = this.props;
-        this.store.isFocused = true;
-        this.updateLabelPosition();
+    const handleFocus = e => {
+        setIsFocused(true);
         onFocus?.(e);
     };
-    onBlur = e => {
-        if (this.props.changeOnEnd)
-            this.onTypingEnd();
-        if (this.isClearPressed) {
-            e.preventDefault();
-            return;
-        }
-        // @ts-ignore
-        const val = this.getValue(e?.target?.value);
-        const { onBlur, onChange, value, checkAutofill } = this.props;
-        this.store.isFocused = false;
-        this.updateLabelPosition();
-        // some browsers not fire `onchange` after autofill
+    const handleBlur = e => {
+        if (changeOnEnd)
+            onTypingEnd();
+        const val = getValue(e?.target?.value);
+        setIsFocused(false);
         if (checkAutofill && onChange && !value && val)
             onChange(null, val);
         if (onBlur)
             onBlur(e);
     };
-    getControlProps() {
-        const { value, label, controlProps, placeholder, ...rest } = this.props;
-        const { autoComplete, isLabelOnTop, inputValue } = this.store;
-        const props = {
-            ...omit(rest, [
+    const controlProps = useMemo(() => {
+        const controlProps = {
+            ...omit(props, [
                 'className',
                 'clear',
                 'onClear',
                 'hasClear',
-                // 'required',
+                'placeholder',
                 'hideRequiredStar',
                 'size',
                 'error',
@@ -280,31 +219,30 @@ class Input extends Component {
                 'scrollProps',
             ]),
             value: inputValue,
-            ...controlProps,
-            onChange: this.handleChange,
-            onFocus: this.onFocus,
-            onBlur: this.onBlur,
+            ...props.controlProps,
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
         };
-        if (this.isTextArea()) {
-            props.contentEditable = true;
-            props.onInput = this.onTextAreaInput;
+        if (isTextArea) {
+            controlProps.contentEditable = true;
+            controlProps.onInput = onTextAreaInput;
         }
-        if (placeholder && !value && (!label || isLabelOnTop)) {
-            props.placeholder = placeholder;
+        if (placeholder && !inputValue && (!label || isLabelOnTop)) {
+            controlProps.placeholder = placeholder;
         }
         if (!autoComplete) {
-            props.suppressHydrationWarning = true;
-            props.autoComplete = this.uid;
-            delete props.name;
+            controlProps.suppressHydrationWarning = true;
+            controlProps.autoComplete = uid;
+            delete controlProps.name;
         }
-        if (props.value === undefined)
-            props.value = ' ';
-        return props;
-    }
-    wrapControll(control) {
-        if (this.isTextArea()) {
-            const { size, scrollProps } = this.props;
-            const { labelClipPath } = this.store;
+        if (controlProps.value === undefined)
+            controlProps.value = ' ';
+        return controlProps;
+    }, [value, isLabelOnTop, inputValue]);
+    const wrapControl = control => {
+        if (isTextArea) {
+            const { size } = props;
             return (createElement(Scroll, { y: true, size: size, fadeSize: "s", className: cn(S.scroller, S.controlWrapper, scrollProps?.className), offset: {
                     y: { before: TEXTAREA_SCROLL_TOP_OFFSET[size], after: 20 },
                 }, ...scrollProps, innerProps: {
@@ -313,36 +251,48 @@ class Input extends Component {
                 }, key: "scroller" }, control));
         }
         return jsx("div", { className: S.controlWrapper, children: control });
-    }
-    renderAddon(type) {
+    };
+    const renderAddon = (type) => {
         const name = `addon${capitalize(type)}`;
-        const content = this.props[name];
+        const content = props[name];
         if (!content)
             return null;
-        const props = {
-            // @ts-ignore
-            className: cn(S[name], this.props[`${name}ClassName`]),
+        const addonProps = {
+            className: cn(S[name], props[`${name}ClassName`]),
             key: name,
         };
         const isString = typeof content === 'string';
         const elem = isString ? jsx("span", { children: content }) : content;
         // @ts-ignore
         if (isString)
-            props.title = content;
-        return jsx("div", { ...props, children: elem });
-    }
-    render() {
-        const { className, size, label, value, variant, error, hasClear, round, required, hideRequiredStar, disabled, addonRight, } = this.props;
-        const { isFocused, hasValue, labelClipPath, isLabelOnTop } = this.store;
-        const isNumber = this.isNumber();
-        const isTextArea = this.isTextArea();
-        const Control = isTextArea ? 'span' : 'input';
-        const controlProps = this.getControlProps();
-        const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, className);
-        return (
-        // @ts-ignore
-        jsxs("div", { className: classes, title: value, children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), this.renderAddon('left'), this.wrapControll(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: this.inputRef, key: "control" }), isTextArea && controlProps.placeholder && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder }))] })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(1), tabIndex: -1, children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(-1), tabIndex: -1, children: jsx(Icon, { type: "chevronDown", size: size }) })] })), jsx(Label, { className: cn(S.label, addonRight && S.hasAddonRight), size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: this.onLabelClipPathChange, children: label }, "label"), this.renderAddon('right'), required && !hideRequiredStar && (jsx(RequiredStar, { size: size }, "required-star"))] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: this.onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
-    }
-}
+            addonProps.title = content;
+        return jsx("div", { ...addonProps, children: elem });
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', onDocKeyUp);
+        if (isTextArea) {
+            inputRef.current.addEventListener('paste', onTextareaPaste);
+        }
+        return () => {
+            document.removeEventListener('keydown', onDocKeyUp);
+            inputRef.current?.removeEventListener('paste', onTextareaPaste);
+        };
+    }, [isTextArea]);
+    useEffect(() => {
+        updateSelection();
+        updateAutoComplete();
+        if (value !== inputValue) {
+            setInputValue(value);
+            // setTextareaValue(String(value));
+        }
+    }, [value]);
+    useEffect(() => {
+        if (isTextArea)
+            setTextareaValue(String(value));
+    }, []);
+    const Control = isTextArea ? 'span' : 'input';
+    const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, round && S.round, className);
+    return (jsxs("div", { className: classes, title: String(value), children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), renderAddon('left'), wrapControl(jsxs(Fragment, { children: [createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: inputRef, key: "control" }), isTextArea && controlProps.placeholder && !controlProps.value && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder }))] })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => onNumberWheel(1), tabIndex: -1, children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => onNumberWheel(-1), tabIndex: -1, children: jsx(Icon, { type: "chevronDown", size: size }) })] })), jsx(Label, { className: cn(S.label, addonRight && S.hasAddonRight), size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: onLabelClipPathChange, children: label }, "label"), renderAddon('right'), required && !hideRequiredStar && (jsx(RequiredStar, { size: size }, "required-star"))] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
+};
 
 export { Input };

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Input_root__kj4vQ{color:var(--accent-color);position:relative}.Input_root__kj4vQ.Input_isTextArea__1a6n1{max-height:10em}.Input_main__M6Qxb,.Input_root__kj4vQ{width:100%}.Input_controlWrapper__WgrZL,.Input_root__kj4vQ{max-width:100%}.Input_main__M6Qxb{border-radius:inherit;display:flex;max-width:100%;position:relative}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{height:auto;max-height:inherit!important}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:5px!important}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:7px!important}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:11px!important}.Input_border__01i-B{background-color:var(--accent-color-alpha-100);border-radius:inherit;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.15s ease-out;transition-property:box-shadow,border-color,background-color;z-index:0}.Input_root__kj4vQ:hover .Input_border__01i-B{background-color:var(--active-color-alpha-100)}.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:transparent}.Input_isFocused__9jtFN.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--accent-color-alpha-100)}.Input_isFocused__9jtFN.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Input_isFocused__9jtFN.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Input_hasError__5iS2M .Input_variant-outlined__qKjnJ .Input_border__01i-B,.Input_hasError__5iS2M:hover .Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:inset 0 0 0 2px var(--danger-color)}.Input_isDisabled__e7J10.Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:none}.Input_size-s__-U0r-{font-size:16px}.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:4px;font-size:16px;min-height:30px;min-width:30px;padding:0 14px}.Input_round__yJr-2.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:15px}.Input_size-m__jTEMl{font-size:20px}.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:6px;font-size:20px;min-height:40px;min-width:40px;padding:0 16px}.Input_round__yJr-2.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:20px}.Input_size-l__BR-zg{font-size:24px}.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:8px;font-size:24px;min-height:50px;min-width:50px;padding:0 18px}.Input_round__yJr-2.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:25px}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-left:0}.Input_isDisabled__e7J10{color:var(--accent-color-alpha-500);opacity:.4}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht,.Input_control__wZcMD{font-size:inherit;font-weight:400}.Input_labelGap__T6fAj{opacity:0;pointer-events:none;position:absolute}.Input_label__FT90l.Input_hasAddonRight__ckzfA{padding-right:2em}.Input_isTextArea__1a6n1 .Input_label__FT90l{max-height:40px}.Input_scroller__OBm8M{max-height:100%;width:100%}.Input_controlWrapper__WgrZL{flex:1}.Input_control__wZcMD{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;box-shadow:none;box-shadow:inset 0 0 0 2px none;color:inherit;display:inline-flex;filter:none;flex-grow:1;height:100%;min-width:30px;position:relative;text-overflow:ellipsis;transition:border-color .15s ease-in-out 0s;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD{display:block;height:100%;min-height:100%;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD:hover{cursor:text}.Input_isTextArea__1a6n1 .Input_control__wZcMD:after{content:\"\";display:block}.Input_control__wZcMD[type=number]{-moz-appearance:textfield;margin-right:14px}.Input_control__wZcMD[type=number]::-webkit-inner-spin-button,.Input_control__wZcMD[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.Input_numberArrows__8jveR{display:flex;flex-direction:column;height:100%;position:absolute;right:0}.Input_numberArrows__8jveR>button{background-color:transparent!important;height:50%;max-height:none;min-height:0;min-height:auto;opacity:.5;padding-left:0;padding-right:0;transition:opacity .1s ease-out;width:50%}.Input_numberArrows__8jveR>button:hover{opacity:1}.Input_size-s__-U0r- .Input_numberArrows__8jveR>button{min-width:24px}.Input_size-m__jTEMl .Input_numberArrows__8jveR>button{min-width:32px}.Input_size-l__BR-zg .Input_numberArrows__8jveR>button{min-width:40px}.Input_numberArrows__8jveR>button>svg{transform:scale(.8)}.Input_numberArrows__8jveR>button:first-child>svg{margin-bottom:-5%}.Input_numberArrows__8jveR>button:last-child>svg{margin-top:-5%}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:8px 16px 0 14px}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:8px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:10px 20px 0 16px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:10px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:12px 24px 0 18px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:12px}.Input_control__wZcMD:-internal-autofill-selected,.Input_control__wZcMD:-webkit-autofill{animation-fill-mode:both;animation-name:Input_clearBg__jqI1h}.Input_size-s__-U0r-.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:20px}.Input_size-m__jTEMl.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:24px}.Input_size-l__BR-zg.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:28px}.Input_control__wZcMD::-moz-placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::-moz-selection{background-color:var(--active-color-alpha-300)}.Input_control__wZcMD::selection{background-color:var(--active-color-alpha-300)}.Input_placeholder__DRYLA{display:inline-block;left:0;max-width:100%;opacity:.4;overflow:hidden;padding:inherit;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht{align-items:center;display:inline-flex;flex-shrink:0;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Input_size-s__-U0r- .Input_addonLeft__i1c70,.Input_size-s__-U0r- .Input_addonRight__A9Iht{min-width:calc(var(--indent-s)*2)}.Input_size-m__jTEMl .Input_addonLeft__i1c70,.Input_size-m__jTEMl .Input_addonRight__A9Iht{min-width:calc(var(--indent-m)*2)}.Input_size-l__BR-zg .Input_addonLeft__i1c70,.Input_size-l__BR-zg .Input_addonRight__A9Iht{min-width:calc(var(--indent-l)*2)}.Input_addonLeft__i1c70>span,.Input_addonRight__A9Iht>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Input_size-s__-U0r- .Input_addonLeft__i1c70{margin-right:calc(var(--indent-s)/2)}.Input_size-m__jTEMl .Input_addonLeft__i1c70{margin-right:calc(var(--indent-m)/2)}.Input_size-l__BR-zg .Input_addonLeft__i1c70{margin-right:calc(var(--indent-l)/2)}.Input_size-s__-U0r- .Input_addonRight__A9Iht{margin-left:calc(var(--indent-s)/2)}.Input_size-m__jTEMl .Input_addonRight__A9Iht{margin-left:calc(var(--indent-m)/2)}.Input_size-l__BR-zg .Input_addonRight__A9Iht{margin-left:calc(var(--indent-l)/2)}.Input_requiredStar__6MeQ4{background-color:var(--warning-color);border-radius:50%;height:8px;opacity:.8;pointer-events:none;position:absolute;width:8px}.Input_isDisabled__e7J10 .Input_requiredStar__6MeQ4{display:none}.Input_size-s__-U0r- .Input_requiredStar__6MeQ4{right:4px;top:4px}.Input_size-m__jTEMl .Input_requiredStar__6MeQ4{right:6px;top:6px}.Input_size-l__BR-zg .Input_requiredStar__6MeQ4{right:8px;top:8px}.Input_isDisabled__e7J10{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Input_clearButton__0E-9L{border-bottom-left-radius:0;border-top-left-radius:0;bottom:1px;height:auto;position:absolute;right:0;top:0;z-index:1}.Input_clearButton__0E-9L:hover{background-color:var(--accent-color-alpha-0)!important}.Input_clearIcon__Gi1Nc{flex-shrink:0;opacity:.3;transition:opacity .2s ease-out}.Input_clearButton__0E-9L:hover .Input_clearIcon__Gi1Nc{opacity:.8}.Input_size-s__-U0r- .Input_clearIcon__Gi1Nc{height:10px;width:10px}.Input_size-m__jTEMl .Input_clearIcon__Gi1Nc{height:12px;width:12px}.Input_size-l__BR-zg .Input_clearIcon__Gi1Nc{height:14px;width:14px}.Input_size-xl__o-R-1 .Input_clearIcon__Gi1Nc{height:16px;width:16px}";
-var S = {"root":"Input_root__kj4vQ","isTextArea":"Input_isTextArea__1a6n1","main":"Input_main__M6Qxb","controlWrapper":"Input_controlWrapper__WgrZL","size-s":"Input_size-s__-U0r-","size-m":"Input_size-m__jTEMl","size-l":"Input_size-l__BR-zg","border":"Input_border__01i-B","variant-clean":"Input_variant-clean__yjtdm","isFocused":"Input_isFocused__9jtFN","variant-default":"Input_variant-default__frNbg","variant-outlined":"Input_variant-outlined__qKjnJ","hasError":"Input_hasError__5iS2M","isDisabled":"Input_isDisabled__e7J10","round":"Input_round__yJr-2","control":"Input_control__wZcMD","addonLeft":"Input_addonLeft__i1c70","addonRight":"Input_addonRight__A9Iht","labelGap":"Input_labelGap__T6fAj","label":"Input_label__FT90l","hasAddonRight":"Input_hasAddonRight__ckzfA","scroller":"Input_scroller__OBm8M","numberArrows":"Input_numberArrows__8jveR","placeholder":"Input_placeholder__DRYLA","clearBg":"Input_clearBg__jqI1h","hasClear":"Input_hasClear__5Y3nU","requiredStar":"Input_requiredStar__6MeQ4","clearButton":"Input_clearButton__0E-9L","clearIcon":"Input_clearIcon__Gi1Nc","size-xl":"Input_size-xl__o-R-1"};
+var css_248z = ".Input_root__kj4vQ{color:var(--accent-color);position:relative}.Input_root__kj4vQ.Input_isTextArea__1a6n1{max-height:10em}.Input_main__M6Qxb,.Input_root__kj4vQ{width:100%}.Input_controlWrapper__WgrZL,.Input_root__kj4vQ{max-width:100%}.Input_main__M6Qxb{border-radius:inherit;display:flex;max-width:100%;position:relative}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{height:auto;max-height:inherit!important}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:5px!important}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:7px!important}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:11px!important}.Input_border__01i-B{background-color:var(--accent-color-alpha-100);border-radius:inherit;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.15s ease-out;transition-property:box-shadow,border-color,background-color;z-index:0}.Input_root__kj4vQ:hover .Input_border__01i-B{background-color:var(--active-color-alpha-100)}.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:transparent}.Input_isFocused__9jtFN.Input_variant-clean__yjtdm .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--accent-color-alpha-100)}.Input_isFocused__9jtFN.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Input_isFocused__9jtFN.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Input_hasError__5iS2M .Input_variant-outlined__qKjnJ .Input_border__01i-B,.Input_hasError__5iS2M:hover .Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:inset 0 0 0 2px var(--danger-color)}.Input_isDisabled__e7J10.Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:none}.Input_size-s__-U0r-{font-size:16px}.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:4px;font-size:16px;min-height:30px;min-width:30px;padding:0 14px}.Input_round__yJr-2.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:15px}.Input_size-m__jTEMl{font-size:20px}.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:6px;font-size:20px;min-height:40px;min-width:40px;padding:0 16px}.Input_round__yJr-2.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:20px}.Input_size-l__BR-zg{font-size:24px}.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:8px;font-size:24px;min-height:50px;min-width:50px;padding:0 18px}.Input_round__yJr-2.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:25px}.Input_isDisabled__e7J10{color:var(--accent-color-alpha-500);opacity:.4}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht,.Input_control__wZcMD{font-size:inherit;font-weight:400}.Input_labelGap__T6fAj{opacity:0;pointer-events:none;position:absolute}.Input_label__FT90l.Input_hasAddonRight__ckzfA{padding-right:2em}.Input_isTextArea__1a6n1 .Input_label__FT90l{max-height:40px}.Input_scroller__OBm8M{max-height:100%;width:100%}.Input_controlWrapper__WgrZL{flex:1}.Input_control__wZcMD{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;box-shadow:none;box-shadow:inset 0 0 0 2px none;color:inherit;display:inline-flex;filter:none;flex-grow:1;height:100%;min-width:30px;position:relative;text-overflow:ellipsis;transition:border-color .15s ease-in-out 0s;width:100%}.Input_control__wZcMD:-internal-autofill-selected,.Input_control__wZcMD:-webkit-autofill{animation-fill-mode:both;animation-name:Input_clearBg__jqI1h}.Input_size-s__-U0r-.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:20px}.Input_size-m__jTEMl.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:24px}.Input_size-l__BR-zg.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:28px}.Input_control__wZcMD::-moz-placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::-moz-selection{background-color:var(--active-color-alpha-300)}.Input_control__wZcMD::selection{background-color:var(--active-color-alpha-300)}.Input_isTextArea__1a6n1 .Input_control__wZcMD{display:block;height:100%;min-height:100%;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD:hover{cursor:text}.Input_isTextArea__1a6n1 .Input_control__wZcMD:after{content:\"\";display:block}.Input_control__wZcMD[type=number]{-moz-appearance:textfield;margin-right:14px}.Input_control__wZcMD[type=number]::-webkit-inner-spin-button,.Input_control__wZcMD[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.Input_numberArrows__8jveR{display:flex;flex-direction:column;height:100%;position:absolute;right:0}.Input_numberArrows__8jveR>button{background-color:transparent!important;height:50%;max-height:none;min-height:0;min-height:auto;opacity:.5;padding-left:0;padding-right:0;transition:opacity .1s ease-out;width:50%}.Input_numberArrows__8jveR>button:hover{opacity:1}.Input_size-s__-U0r- .Input_numberArrows__8jveR>button{min-width:24px}.Input_size-m__jTEMl .Input_numberArrows__8jveR>button{min-width:32px}.Input_size-l__BR-zg .Input_numberArrows__8jveR>button{min-width:40px}.Input_numberArrows__8jveR>button>svg{transform:scale(.8)}.Input_numberArrows__8jveR>button:first-child>svg{margin-bottom:-5%}.Input_numberArrows__8jveR>button:last-child>svg{margin-top:-5%}.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding-left:0!important}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:8px 16px 0 14px}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:8px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:10px 20px 0 16px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:10px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:12px 24px 0 18px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:12px}.Input_placeholder__DRYLA{display:inline-block;left:0;max-width:100%;opacity:.4;overflow:hidden;padding:inherit;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht{align-items:center;display:inline-flex;flex-shrink:0;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Input_addonLeft__i1c70>span,.Input_addonRight__A9Iht>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Input_size-s__-U0r- .Input_addonLeft__i1c70{margin-right:calc(var(--indent-s)/2)}.Input_size-m__jTEMl .Input_addonLeft__i1c70{margin-right:calc(var(--indent-m)/2)}.Input_size-l__BR-zg .Input_addonLeft__i1c70{margin-right:calc(var(--indent-l)/2)}.Input_size-s__-U0r- .Input_addonRight__A9Iht{margin-left:calc(var(--indent-s)/2)}.Input_size-m__jTEMl .Input_addonRight__A9Iht{margin-left:calc(var(--indent-m)/2)}.Input_size-l__BR-zg .Input_addonRight__A9Iht{margin-left:calc(var(--indent-l)/2)}.Input_requiredStar__6MeQ4{background-color:var(--warning-color);border-radius:50%;height:8px;opacity:.8;pointer-events:none;position:absolute;width:8px}.Input_isDisabled__e7J10 .Input_requiredStar__6MeQ4{display:none}.Input_size-s__-U0r- .Input_requiredStar__6MeQ4{right:4px;top:4px}.Input_size-m__jTEMl .Input_requiredStar__6MeQ4{right:6px;top:6px}.Input_size-l__BR-zg .Input_requiredStar__6MeQ4{right:8px;top:8px}.Input_isDisabled__e7J10{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Input_clearButton__0E-9L{border-bottom-left-radius:0;border-top-left-radius:0;bottom:1px;height:auto;position:absolute;right:0;top:0;z-index:1}.Input_clearButton__0E-9L:hover{background-color:var(--accent-color-alpha-0)!important}.Input_clearIcon__Gi1Nc{flex-shrink:0;opacity:.3;transition:opacity .2s ease-out}.Input_clearButton__0E-9L:hover .Input_clearIcon__Gi1Nc{opacity:.8}.Input_size-s__-U0r- .Input_clearIcon__Gi1Nc{height:10px;width:10px}.Input_size-m__jTEMl .Input_clearIcon__Gi1Nc{height:12px;width:12px}.Input_size-l__BR-zg .Input_clearIcon__Gi1Nc{height:14px;width:14px}.Input_size-xl__o-R-1 .Input_clearIcon__Gi1Nc{height:16px;width:16px}";
+var S = {"root":"Input_root__kj4vQ","isTextArea":"Input_isTextArea__1a6n1","main":"Input_main__M6Qxb","controlWrapper":"Input_controlWrapper__WgrZL","size-s":"Input_size-s__-U0r-","size-m":"Input_size-m__jTEMl","size-l":"Input_size-l__BR-zg","border":"Input_border__01i-B","variant-clean":"Input_variant-clean__yjtdm","isFocused":"Input_isFocused__9jtFN","variant-default":"Input_variant-default__frNbg","variant-outlined":"Input_variant-outlined__qKjnJ","hasError":"Input_hasError__5iS2M","isDisabled":"Input_isDisabled__e7J10","round":"Input_round__yJr-2","control":"Input_control__wZcMD","addonLeft":"Input_addonLeft__i1c70","addonRight":"Input_addonRight__A9Iht","labelGap":"Input_labelGap__T6fAj","label":"Input_label__FT90l","hasAddonRight":"Input_hasAddonRight__ckzfA","scroller":"Input_scroller__OBm8M","clearBg":"Input_clearBg__jqI1h","hasClear":"Input_hasClear__5Y3nU","numberArrows":"Input_numberArrows__8jveR","placeholder":"Input_placeholder__DRYLA","requiredStar":"Input_requiredStar__6MeQ4","clearButton":"Input_clearButton__0E-9L","clearIcon":"Input_clearIcon__Gi1Nc","size-xl":"Input_size-xl__o-R-1"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -43,7 +43,8 @@ import '../Gallery/Gallery.styl.js';
 import '../Heading/Heading.js';
 import '../LightBox/LightBox.styl.js';
 import '../Menu/Menu.js';
-import '../Notifications/Notifications.js';
+import '../Notifications/store.js';
+import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';

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

@@ -1,7 +1,7 @@
 import { createElement, Component } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
-import { withStore } from 'justorm/react';
+import { useStore } from 'justorm/react';
 import { Icon } from '../Icon/Icon.js';
 import { Button } from '../Button/Button.js';
 import { Scroll } from '../Scroll/Scroll.js';
@@ -54,14 +54,14 @@ class Item extends Component {
     }
 }
 const NotificationsStore = STORE;
-const Notifications = withStore({
-    notifications: ['items', 'data'],
-})(function Notifications({ store, ...rest }) {
-    const { notifications } = store;
+const Notifications = function Notifications(props) {
+    const { notifications } = useStore({
+        notifications: ['items', 'data'],
+    });
     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 }))) }));
-});
+    return (jsx(Scroll, { ...props, 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 };