@alfalab/core-components 21.3.0-beta.1 → 21.3.2

package/date-input/modern/Component.js

@@ -1,10 +1,11 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import 'date-fns';
-import { Input } from '../../input/modern';
-import { format, validate, parseDateString, NATIVE_DATE_FORMAT, formatDate } from './utils/format.js';
+import { MaskedInput } from '../../masked-input/modern';
+import { parseDateString, NATIVE_DATE_FORMAT, formatDate } from './utils/format.js';
+import { createAutoCorrectedDatePipe, mask } from './utils/date-correction-pipe.js';
 import { SUPPORTS_INPUT_TYPE_DATE } from './utils/native-supports.js';
 
-var styles = {"nativeInput":"date-input__nativeInput_19kgp"};
+var styles = {"nativeInput":"date-input__nativeInput_1jjku"};
 require('./index.css');
 
 const DateInput = React.forwardRef(({ maxYear, minYear, mobileMode = 'input', value, defaultValue, rightAddons, onChange, ...restProps }, ref) => {
@@ -12,6 +13,10 @@ const DateInput = React.forwardRef(({ maxYear, minYear, mobileMode = 'input', va
     const shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
     const [stateValue, setStateValue] = useState(defaultValue);
     const inputValue = uncontrolled ? stateValue : value;
+    const pipe = useMemo(() => createAutoCorrectedDatePipe({
+        maxYear,
+        minYear,
+    }), [maxYear, minYear]);
     const changeHandler = useCallback((event, newValue, newDate) => {
         if (uncontrolled) {
             setStateValue(newValue);
@@ -21,22 +26,16 @@ const DateInput = React.forwardRef(({ maxYear, minYear, mobileMode = 'input', va
         }
     }, [onChange, uncontrolled]);
     const handleChange = useCallback((event) => {
-        const { value: newValue } = event.target;
-        if (/[^\d.]/.test(newValue)) {
-            return;
-        }
-        const formattedValue = format(newValue);
-        if (validate(formattedValue)) {
-            changeHandler(event, formattedValue, parseDateString(formattedValue));
-        }
-        // TODO: handle caret position
+        const newValue = event.target.value;
+        const newDate = parseDateString(newValue);
+        changeHandler(event, newValue, newDate);
     }, [changeHandler]);
     const handleNativeInputChange = useCallback((event) => {
         const newDate = parseDateString(event.target.value, NATIVE_DATE_FORMAT);
         const newValue = event.target.value === '' ? '' : formatDate(newDate);
         changeHandler(event, newValue, newDate);
     }, [changeHandler]);
-    return (React.createElement(Input, Object.assign({}, restProps, { ref: ref, defaultValue: defaultValue, value: inputValue, onChange: handleChange, rightAddons: React.createElement(React.Fragment, null,
+    return (React.createElement(MaskedInput, Object.assign({}, restProps, { ref: ref, mask: mask, keepCharPositions: true, defaultValue: defaultValue, value: inputValue, onBeforeDisplay: pipe, onChange: handleChange, rightAddons: React.createElement(React.Fragment, null,
             rightAddons,
             shouldRenderNative && (React.createElement("input", { type: 'date', ref: ref, defaultValue: defaultValue, onChange: handleNativeInputChange, className: styles.nativeInput }))) })));
 });

package/date-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1emnt */
+/* hash: 18acn */
 :root {
 
     /* Hard */
@@ -7,7 +7,7 @@
 
     /* Hard up */
 }
-.date-input__nativeInput_19kgp {
+.date-input__nativeInput_1jjku {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -18,9 +18,9 @@
             appearance: none;
     z-index: 1
 }
-.date-input__nativeInput_19kgp::-webkit-calendar-picker-indicator {
+.date-input__nativeInput_1jjku::-webkit-calendar-picker-indicator {
         display: none;
     }
-.date-input__nativeInput_19kgp::-webkit-inner-spin-button {
+.date-input__nativeInput_1jjku::-webkit-inner-spin-button {
         display: none;
     }

package/date-input/modern/index.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'date-fns';
-import '../../input/modern';
-export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, format, formatDate, isCompleteDateInput, parseDateString, validate } from './utils/format.js';
+import '../../masked-input/modern';
+export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, formatDate, isCompleteDateInput, parseDateString } from './utils/format.js';
+export { createAutoCorrectedDatePipe, mask } from './utils/date-correction-pipe.js';
 export { IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, isInputDateSupported } from './utils/native-supports.js';
 export { DateInput } from './Component.js';
-export { createAutoCorrectedDatePipe, mask } from './utils/date-correction-pipe.js';

package/date-input/modern/utils/format.d.ts

@@ -4,6 +4,4 @@ declare const DATE_MASK: (string | RegExp)[];
 declare const isCompleteDateInput: (input: string) => boolean;
 declare const formatDate: (date: number | Date, dateFormat?: string) => string;
 declare const parseDateString: (value: string, dateFormat?: string) => Date;
-declare const format: (value: string) => string;
-declare const validate: (value: string) => boolean;
-export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, isCompleteDateInput, formatDate, parseDateString, format, validate };
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, isCompleteDateInput, formatDate, parseDateString };

package/date-input/modern/utils/format.js

@@ -1,29 +1,10 @@
-import { format as format$1, parse } from 'date-fns';
+import { format, parse } from 'date-fns';
 
 const DATE_FORMAT = 'dd.MM.yyyy';
 const NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
 const DATE_MASK = [/\d/, /\d/, '.', /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/];
 const isCompleteDateInput = (input) => input.length === DATE_MASK.length;
-const formatDate = (date, dateFormat = DATE_FORMAT) => format$1(date, dateFormat);
+const formatDate = (date, dateFormat = DATE_FORMAT) => format(date, dateFormat);
 const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
-// TODO: скорее всего, можно сделать проще
-const format = (value) => value
-    .replace(/^(\d\d)(\d)$/, '$1.$2')
-    .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3')
-    .replace(/^(\d\d)\d\.(.*)/, '$1.$2')
-    .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2')
-    .replace(/^(\d\d\.\d\d\.\d\d\d\d).*/, '$1')
-    .replace(/\.$/, '');
-const validate = (value) => {
-    const [d, m, y] = value.split('.');
-    const day = Number(d);
-    const month = Number(m);
-    const year = Number(y);
-    // TODO: сделать более умную валидацию
-    if (day > 31 || month > 12 || year > 2100) {
-        return false;
-    }
-    return true;
-};
 
-export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, format, formatDate, isCompleteDateInput, parseDateString, validate };
+export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, formatDate, isCompleteDateInput, parseDateString };

package/date-input/modern/utils/index.js

@@ -1,4 +1,4 @@
 import 'date-fns';
-export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, format, formatDate, isCompleteDateInput, parseDateString, validate } from './format.js';
-export { IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, isInputDateSupported } from './native-supports.js';
+export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, formatDate, isCompleteDateInput, parseDateString } from './format.js';
 export { createAutoCorrectedDatePipe, mask } from './date-correction-pipe.js';
+export { IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, isInputDateSupported } from './native-supports.js';

package/date-input/utils/format.d.ts

@@ -4,6 +4,4 @@ declare const DATE_MASK: (string | RegExp)[];
 declare const isCompleteDateInput: (input: string) => boolean;
 declare const formatDate: (date: number | Date, dateFormat?: string) => string;
 declare const parseDateString: (value: string, dateFormat?: string) => Date;
-declare const format: (value: string) => string;
-declare const validate: (value: string) => boolean;
-export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, isCompleteDateInput, formatDate, parseDateString, format, validate };
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, isCompleteDateInput, formatDate, parseDateString };

package/date-input/utils/format.js

@@ -14,33 +14,10 @@ var parseDateString = function (value, dateFormat) {
     if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
     return dateFns.parse(value, dateFormat, new Date());
 };
-// TODO: скорее всего, можно сделать проще
-var format = function (value) {
-    return value
-        .replace(/^(\d\d)(\d)$/, '$1.$2')
-        .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3')
-        .replace(/^(\d\d)\d\.(.*)/, '$1.$2')
-        .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2')
-        .replace(/^(\d\d\.\d\d\.\d\d\d\d).*/, '$1')
-        .replace(/\.$/, '');
-};
-var validate = function (value) {
-    var _a = value.split('.'), d = _a[0], m = _a[1], y = _a[2];
-    var day = Number(d);
-    var month = Number(m);
-    var year = Number(y);
-    // TODO: сделать более умную валидацию
-    if (day > 31 || month > 12 || year > 2100) {
-        return false;
-    }
-    return true;
-};
 
 exports.DATE_FORMAT = DATE_FORMAT;
 exports.DATE_MASK = DATE_MASK;
 exports.NATIVE_DATE_FORMAT = NATIVE_DATE_FORMAT;
-exports.format = format;
 exports.formatDate = formatDate;
 exports.isCompleteDateInput = isCompleteDateInput;
 exports.parseDateString = parseDateString;
-exports.validate = validate;

package/date-input/utils/index.js

@@ -10,11 +10,9 @@ var utils_nativeSupports = require('./native-supports.js');
 exports.DATE_FORMAT = utils_format.DATE_FORMAT;
 exports.DATE_MASK = utils_format.DATE_MASK;
 exports.NATIVE_DATE_FORMAT = utils_format.NATIVE_DATE_FORMAT;
-exports.format = utils_format.format;
 exports.formatDate = utils_format.formatDate;
 exports.isCompleteDateInput = utils_format.isCompleteDateInput;
 exports.parseDateString = utils_format.parseDateString;
-exports.validate = utils_format.validate;
 exports.createAutoCorrectedDatePipe = utils_dateCorrectionPipe.createAutoCorrectedDatePipe;
 exports.mask = utils_dateCorrectionPipe.mask;
 exports.IS_BROWSER = utils_nativeSupports.IS_BROWSER;

package/divider/Component.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"divider__component_154yv"};
+var styles = {"component":"divider__component_1jl5y"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"divider__component_154yv"};
+var styles = {"component":"divider__component_1jl5y"};
 require('./index.css');
 
 var Divider = function (_a) {

package/divider/esm/index.css

@@ -13,7 +13,7 @@
 :root {
     --divider-color: var(--color-light-border-primary);
 }
-.divider__component_154yv {
+.divider__component_1jl5y {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/index.css

@@ -13,7 +13,7 @@
 :root {
     --divider-color: var(--color-light-border-primary);
 }
-.divider__component_154yv {
+.divider__component_1jl5y {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/divider/modern/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"divider__component_154yv"};
+var styles = {"component":"divider__component_1jl5y"};
 require('./index.css');
 
 const Divider = ({ className, dataTestId }) => (React.createElement("hr", { className: cn(styles.component, className), "data-test-id": dataTestId }));

package/divider/modern/index.css

@@ -13,7 +13,7 @@
 :root {
     --divider-color: var(--color-light-border-primary);
 }
-.divider__component_154yv {
+.divider__component_1jl5y {
     border: none;
     border-bottom: 1px solid var(--divider-color);
     margin: 0;

package/drawer/Component.js

@@ -49,7 +49,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"drawer__component_e5xl9","content":"drawer__content_e5xl9","enter":"drawer__enter_e5xl9","contentEnter":"drawer__contentEnter_e5xl9","backdropEnter":"drawer__backdropEnter_e5xl9","enterActive":"drawer__enterActive_e5xl9","backdropEnterActive":"drawer__backdropEnterActive_e5xl9","backdropEnterDone":"drawer__backdropEnterDone_e5xl9","contentEnterActive":"drawer__contentEnterActive_e5xl9","exit":"drawer__exit_e5xl9","backdropExit":"drawer__backdropExit_e5xl9","contentExit":"drawer__contentExit_e5xl9","exitActive":"drawer__exitActive_e5xl9","backdropExitActive":"drawer__backdropExitActive_e5xl9","backdropExitDone":"drawer__backdropExitDone_e5xl9","contentExitActive":"drawer__contentExitActive_e5xl9"};
+var styles = {"component":"drawer__component_184qu","content":"drawer__content_184qu","enter":"drawer__enter_184qu","contentEnter":"drawer__contentEnter_184qu","backdropEnter":"drawer__backdropEnter_184qu","enterActive":"drawer__enterActive_184qu","backdropEnterActive":"drawer__backdropEnterActive_184qu","backdropEnterDone":"drawer__backdropEnterDone_184qu","contentEnterActive":"drawer__contentEnterActive_184qu","exit":"drawer__exit_184qu","backdropExit":"drawer__backdropExit_184qu","contentExit":"drawer__contentExit_184qu","exitActive":"drawer__exitActive_184qu","backdropExitActive":"drawer__backdropExitActive_184qu","backdropExitDone":"drawer__backdropExitDone_184qu","contentExitActive":"drawer__contentExitActive_184qu"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/Component.js

@@ -42,7 +42,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"drawer__component_e5xl9","content":"drawer__content_e5xl9","enter":"drawer__enter_e5xl9","contentEnter":"drawer__contentEnter_e5xl9","backdropEnter":"drawer__backdropEnter_e5xl9","enterActive":"drawer__enterActive_e5xl9","backdropEnterActive":"drawer__backdropEnterActive_e5xl9","backdropEnterDone":"drawer__backdropEnterDone_e5xl9","contentEnterActive":"drawer__contentEnterActive_e5xl9","exit":"drawer__exit_e5xl9","backdropExit":"drawer__backdropExit_e5xl9","contentExit":"drawer__contentExit_e5xl9","exitActive":"drawer__exitActive_e5xl9","backdropExitActive":"drawer__backdropExitActive_e5xl9","backdropExitDone":"drawer__backdropExitDone_e5xl9","contentExitActive":"drawer__contentExitActive_e5xl9"};
+var styles = {"component":"drawer__component_184qu","content":"drawer__content_184qu","enter":"drawer__enter_184qu","contentEnter":"drawer__contentEnter_184qu","backdropEnter":"drawer__backdropEnter_184qu","enterActive":"drawer__enterActive_184qu","backdropEnterActive":"drawer__backdropEnterActive_184qu","backdropEnterDone":"drawer__backdropEnterDone_184qu","contentEnterActive":"drawer__contentEnterActive_184qu","exit":"drawer__exit_184qu","backdropExit":"drawer__backdropExit_184qu","contentExit":"drawer__contentExit_184qu","exitActive":"drawer__exitActive_184qu","backdropExitActive":"drawer__backdropExitActive_184qu","backdropExitDone":"drawer__backdropExitDone_184qu","contentExitActive":"drawer__contentExitActive_184qu"};
 require('./index.css');
 
 var ANIMATION_DURATION = 600;

package/drawer/esm/index.css

@@ -17,7 +17,7 @@
 :root {
     --drawer-width: 500px;
 }
-.drawer__component_e5xl9 {
+.drawer__component_184qu {
     position: fixed;
     top: 0;
     right: 0;
@@ -28,55 +28,55 @@
     overflow: auto;
     will-change: transform;
 }
-.drawer__content_e5xl9 {
+.drawer__content_184qu {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
 /* enter */
-.drawer__enter_e5xl9 {
+.drawer__enter_184qu {
     transform: translateX(100%);
 }
-.drawer__contentEnter_e5xl9 {
+.drawer__contentEnter_184qu {
     opacity: 0;
 }
-.drawer__backdropEnter_e5xl9 {
+.drawer__backdropEnter_184qu {
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__enterActive_e5xl9 {
+.drawer__enterActive_184qu {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
 }
-.drawer__backdropEnterActive_e5xl9,
-.drawer__backdropEnterDone_e5xl9 {
+.drawer__backdropEnterActive_184qu,
+.drawer__backdropEnterDone_184qu {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentEnterActive_e5xl9 {
+.drawer__contentEnterActive_184qu {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
 }
 /* exit */
-.drawer__exit_e5xl9 {
+.drawer__exit_184qu {
     transform: translateX(0);
 }
-.drawer__backdropExit_e5xl9 {
+.drawer__backdropExit_184qu {
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentExit_e5xl9 {
+.drawer__contentExit_184qu {
     opacity: 1;
 }
-.drawer__exitActive_e5xl9 {
+.drawer__exitActive_184qu {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
 }
-.drawer__backdropExitActive_e5xl9,
-.drawer__backdropExitDone_e5xl9 {
+.drawer__backdropExitActive_184qu,
+.drawer__backdropExitDone_184qu {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__contentExitActive_e5xl9 {
+.drawer__contentExitActive_184qu {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/drawer/index.css

@@ -17,7 +17,7 @@
 :root {
     --drawer-width: 500px;
 }
-.drawer__component_e5xl9 {
+.drawer__component_184qu {
     position: fixed;
     top: 0;
     right: 0;
@@ -28,55 +28,55 @@
     overflow: auto;
     will-change: transform;
 }
-.drawer__content_e5xl9 {
+.drawer__content_184qu {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
 /* enter */
-.drawer__enter_e5xl9 {
+.drawer__enter_184qu {
     transform: translateX(100%);
 }
-.drawer__contentEnter_e5xl9 {
+.drawer__contentEnter_184qu {
     opacity: 0;
 }
-.drawer__backdropEnter_e5xl9 {
+.drawer__backdropEnter_184qu {
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__enterActive_e5xl9 {
+.drawer__enterActive_184qu {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
 }
-.drawer__backdropEnterActive_e5xl9,
-.drawer__backdropEnterDone_e5xl9 {
+.drawer__backdropEnterActive_184qu,
+.drawer__backdropEnterDone_184qu {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentEnterActive_e5xl9 {
+.drawer__contentEnterActive_184qu {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
 }
 /* exit */
-.drawer__exit_e5xl9 {
+.drawer__exit_184qu {
     transform: translateX(0);
 }
-.drawer__backdropExit_e5xl9 {
+.drawer__backdropExit_184qu {
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentExit_e5xl9 {
+.drawer__contentExit_184qu {
     opacity: 1;
 }
-.drawer__exitActive_e5xl9 {
+.drawer__exitActive_184qu {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
 }
-.drawer__backdropExitActive_e5xl9,
-.drawer__backdropExitDone_e5xl9 {
+.drawer__backdropExitActive_184qu,
+.drawer__backdropExitDone_184qu {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__contentExitActive_e5xl9 {
+.drawer__contentExitActive_184qu {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/drawer/modern/Component.js

@@ -3,7 +3,7 @@ import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
 import { BaseModalContext, BaseModal } from '../../base-modal/modern';
 
-var styles = {"component":"drawer__component_e5xl9","content":"drawer__content_e5xl9","enter":"drawer__enter_e5xl9","contentEnter":"drawer__contentEnter_e5xl9","backdropEnter":"drawer__backdropEnter_e5xl9","enterActive":"drawer__enterActive_e5xl9","backdropEnterActive":"drawer__backdropEnterActive_e5xl9","backdropEnterDone":"drawer__backdropEnterDone_e5xl9","contentEnterActive":"drawer__contentEnterActive_e5xl9","exit":"drawer__exit_e5xl9","backdropExit":"drawer__backdropExit_e5xl9","contentExit":"drawer__contentExit_e5xl9","exitActive":"drawer__exitActive_e5xl9","backdropExitActive":"drawer__backdropExitActive_e5xl9","backdropExitDone":"drawer__backdropExitDone_e5xl9","contentExitActive":"drawer__contentExitActive_e5xl9"};
+var styles = {"component":"drawer__component_184qu","content":"drawer__content_184qu","enter":"drawer__enter_184qu","contentEnter":"drawer__contentEnter_184qu","backdropEnter":"drawer__backdropEnter_184qu","enterActive":"drawer__enterActive_184qu","backdropEnterActive":"drawer__backdropEnterActive_184qu","backdropEnterDone":"drawer__backdropEnterDone_184qu","contentEnterActive":"drawer__contentEnterActive_184qu","exit":"drawer__exit_184qu","backdropExit":"drawer__backdropExit_184qu","contentExit":"drawer__contentExit_184qu","exitActive":"drawer__exitActive_184qu","backdropExitActive":"drawer__backdropExitActive_184qu","backdropExitDone":"drawer__backdropExitDone_184qu","contentExitActive":"drawer__contentExitActive_184qu"};
 require('./index.css');
 
 const ANIMATION_DURATION = 600;

package/drawer/modern/index.css

@@ -17,7 +17,7 @@
 :root {
     --drawer-width: 500px;
 }
-.drawer__component_e5xl9 {
+.drawer__component_184qu {
     position: fixed;
     top: 0;
     right: 0;
@@ -28,55 +28,55 @@
     overflow: auto;
     will-change: transform;
 }
-.drawer__content_e5xl9 {
+.drawer__content_184qu {
     width: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
 /* enter */
-.drawer__enter_e5xl9 {
+.drawer__enter_184qu {
     transform: translateX(100%);
 }
-.drawer__contentEnter_e5xl9 {
+.drawer__contentEnter_184qu {
     opacity: 0;
 }
-.drawer__backdropEnter_e5xl9 {
+.drawer__backdropEnter_184qu {
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__enterActive_e5xl9 {
+.drawer__enterActive_184qu {
     transition: transform 0.3s ease-in-out;
     transform: translateX(0);
 }
-.drawer__backdropEnterActive_e5xl9,
-.drawer__backdropEnterDone_e5xl9 {
+.drawer__backdropEnterActive_184qu,
+.drawer__backdropEnterDone_184qu {
     transition: background 0.3s ease-in-out;
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentEnterActive_e5xl9 {
+.drawer__contentEnterActive_184qu {
     transition: opacity 0.2s ease-in-out 0.3s;
     opacity: 1;
 }
 /* exit */
-.drawer__exit_e5xl9 {
+.drawer__exit_184qu {
     transform: translateX(0);
 }
-.drawer__backdropExit_e5xl9 {
+.drawer__backdropExit_184qu {
     background-color: var(--backdrop-visible-background);
 }
-.drawer__contentExit_e5xl9 {
+.drawer__contentExit_184qu {
     opacity: 1;
 }
-.drawer__exitActive_e5xl9 {
+.drawer__exitActive_184qu {
     transition: transform 0.25s ease-in-out 0.1s;
     transform: translateX(100%);
 }
-.drawer__backdropExitActive_e5xl9,
-.drawer__backdropExitDone_e5xl9 {
+.drawer__backdropExitActive_184qu,
+.drawer__backdropExitDone_184qu {
     transition: background 0.25s ease-in-out 0.1s;
     background-color: var(--backdrop-hidden-background);
 }
-.drawer__contentExitActive_e5xl9 {
+.drawer__contentExitActive_184qu {
     opacity: 0;
     transition: opacity 0.12s ease-in-out;
 }

package/dropzone/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"dropzone__component_1wlb9","disabled":"dropzone__disabled_1wlb9","block":"dropzone__block_1wlb9","dragOver":"dropzone__dragOver_1wlb9","error":"dropzone__error_1wlb9"};
+var styles = {"component":"dropzone__component_e9f9h","disabled":"dropzone__disabled_e9f9h","block":"dropzone__block_e9f9h","dragOver":"dropzone__dragOver_e9f9h","error":"dropzone__error_e9f9h"};
 require('./index.css');
 
 var Dropzone = function (_a) {

package/dropzone/components/overlay/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"overlay":"dropzone__overlay_i8djy","visible":"dropzone__visible_i8djy","text":"dropzone__text_i8djy"};
+var styles = {"overlay":"dropzone__overlay_1ytd4","visible":"dropzone__visible_1ytd4","text":"dropzone__text_1ytd4"};
 require('./index.css');
 
 var Overlay = function (_a) {

package/dropzone/components/overlay/index.css

@@ -1,4 +1,4 @@
-/* hash: 19nhg */
+/* hash: 17noc */
 :root {
     --color-light-bg-secondary: #f3f4f5;
     --color-light-text-primary: #0b1f35;
@@ -17,7 +17,7 @@
 :root {
     --border-radius-s: 4px;
 }
-.dropzone__overlay_i8djy {
+.dropzone__overlay_1ytd4 {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -36,10 +36,10 @@
     transition: opacity 0.2s ease;
     pointer-events: none;
 }
-.dropzone__visible_i8djy {
+.dropzone__visible_1ytd4 {
     opacity: 1;
 }
-.dropzone__text_i8djy {
+.dropzone__text_1ytd4 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;

package/dropzone/esm/Component.js

@@ -4,7 +4,7 @@ import { preventAndStopEvent } from './utils.js';
 import '@alfalab/icons-glyph';
 import { Overlay } from './components/overlay/Component.js';
 
-var styles = {"component":"dropzone__component_1wlb9","disabled":"dropzone__disabled_1wlb9","block":"dropzone__block_1wlb9","dragOver":"dropzone__dragOver_1wlb9","error":"dropzone__error_1wlb9"};
+var styles = {"component":"dropzone__component_e9f9h","disabled":"dropzone__disabled_e9f9h","block":"dropzone__block_e9f9h","dragOver":"dropzone__dragOver_e9f9h","error":"dropzone__error_e9f9h"};
 require('./index.css');
 
 var Dropzone = function (_a) {

package/dropzone/esm/components/overlay/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { ContainerMIcon } from '@alfalab/icons-glyph';
 
-var styles = {"overlay":"dropzone__overlay_i8djy","visible":"dropzone__visible_i8djy","text":"dropzone__text_i8djy"};
+var styles = {"overlay":"dropzone__overlay_1ytd4","visible":"dropzone__visible_1ytd4","text":"dropzone__text_1ytd4"};
 require('./index.css');
 
 var Overlay = function (_a) {

package/dropzone/esm/components/overlay/index.css

@@ -1,4 +1,4 @@
-/* hash: 19nhg */
+/* hash: 17noc */
 :root {
     --color-light-bg-secondary: #f3f4f5;
     --color-light-text-primary: #0b1f35;
@@ -17,7 +17,7 @@
 :root {
     --border-radius-s: 4px;
 }
-.dropzone__overlay_i8djy {
+.dropzone__overlay_1ytd4 {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -36,10 +36,10 @@
     transition: opacity 0.2s ease;
     pointer-events: none;
 }
-.dropzone__visible_i8djy {
+.dropzone__visible_1ytd4 {
     opacity: 1;
 }
-.dropzone__text_i8djy {
+.dropzone__text_1ytd4 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;