@alfalab/core-components 34.0.0 → 35.0.0-beta.0

package/textarea/inverted.css

@@ -1,4 +1,4 @@
-/* hash: bf7zt */
+/* hash: 1ipaw */
 :root {
     --color-light-graphic-primary-inverted: #fff;
     --color-light-text-primary-inverted: #fff;
@@ -18,7 +18,7 @@
     --input-inverted-placeholder-color: var(--color-light-text-secondary-inverted);
     --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted);
     --input-inverted-with-label-placeholder-color: var(--color-light-text-tertiary-inverted);
-    --input-inverted-error-icon: url('https://alfabank.servicecdn.ru/icons/glyph_alert-circle_m_negative.svg');
+    --input-inverted-error-icon: none;
     --input-inverted-success-icon: url('https://alfabank.servicecdn.ru/icons/icon_ok_s_color.svg');
     --input-inverted-caret-color: var(--input-inverted-color);
 
@@ -35,70 +35,70 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_vunvx {
+.textarea__input_461am {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_vunvx:-webkit-autofill {
+.textarea__input_461am:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
 }
-.textarea__input_vunvx::placeholder {
+.textarea__input_461am::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasInnerLabel_vunvx::placeholder {
+.textarea__hasInnerLabel_461am::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
-.textarea__clearIcon_vunvx {
+.textarea__clearIcon_461am {
     color: var(--color-light-graphic-primary-inverted);
 }
-.textarea__errorIcon_vunvx {
+.textarea__errorIcon_461am {
     background-image: var(--input-inverted-error-icon);
 }
-.textarea__successIcon_vunvx {
+.textarea__successIcon_461am {
     background-image: var(--input-inverted-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_vunvx:read-only {
+.textarea__input_461am:read-only {
     color: var(--input-inverted-read-only-color)
 }
-.textarea__input_vunvx:read-only:focus::placeholder {
+.textarea__input_461am:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_vunvx:disabled {
+.textarea__input_461am:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_vunvx:focus::placeholder {
+.textarea__input_461am:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_vunvx {
+.textarea__error_461am {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 }
-.textarea__textarea_vunvx {
+.textarea__textarea_461am {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_vunvx::placeholder {
+.textarea__textarea_461am::placeholder {
     color: var(--input-inverted-placeholder-color);
 }
-.textarea__hasInnerLabel_vunvx::placeholder {
+.textarea__hasInnerLabel_461am::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_vunvx:disabled {
+.textarea__textarea_461am:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_vunvx:read-only {
+.textarea__textarea_461am:read-only {
     color: var(--input-inverted-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_vunvx:focus::placeholder {
+.textarea__textarea_461am:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
 }

package/textarea/modern/Component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { TextareaHTMLAttributes, ChangeEvent, ReactNode } from "react";
+import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
 type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
 type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & {
     /**
@@ -115,7 +115,7 @@ type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValu
     nativeScrollbar?: boolean;
 };
 declare const getDefaultCounterText: (textLength: number, maxLength?: number) => string;
-declare const Textarea: React.ForwardRefExoticComponent<Pick<NativeProps, "className" | "children" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "disabled" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "maxLength" | "minLength" | "name" | "readOnly" | "required" | "rows" | "wrap"> & {
+declare const Textarea: React.ForwardRefExoticComponent<Omit<NativeProps, "size" | "defaultValue" | "style" | "onChange" | "value"> & {
     /**
      * Значение поля ввода
      */
@@ -139,11 +139,11 @@ declare const Textarea: React.ForwardRefExoticComponent<Pick<NativeProps, "class
     /**
      * Отображение ошибки
      */
-    error?: React.ReactNode;
+    error?: ReactNode | boolean;
     /**
      * Текст подсказки
      */
-    hint?: React.ReactNode;
+    hint?: ReactNode;
     /**
      * Лейбл компонента
      */
@@ -199,7 +199,7 @@ declare const Textarea: React.ForwardRefExoticComponent<Pick<NativeProps, "class
     /**
      * Обработчик ввода
      */
-    onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>, payload: {
+    onChange?: ((event: ChangeEvent<HTMLTextAreaElement>, payload: {
         value: string;
     }) => void) | undefined;
     /**

package/textarea/modern/Component.js

@@ -1,18 +1,18 @@
 import React, { forwardRef, useRef, useState, useEffect } from 'react';
-import cn from 'classnames';
-import TextareaAutosize from 'react-textarea-autosize';
 import mergeRefs from 'react-merge-refs';
+import TextareaAutosize from 'react-textarea-autosize';
+import cn from 'classnames';
 import { useMedia, useFocus } from '@alfalab/hooks';
-import { Scrollbar } from '../../scrollbar/modern';
 import { FormControl } from '../../form-control/modern';
+import { Scrollbar } from '../../scrollbar/modern';
 
-var styles = {"scrollable":"textarea__scrollable_1y63j","scrollableWrapper":"textarea__scrollableWrapper_1y63j","textarea":"textarea__textarea_1y63j","s":"textarea__s_1y63j","m":"textarea__m_1y63j","l":"textarea__l_1y63j","xl":"textarea__xl_1y63j","textareaHidden":"textarea__textareaHidden_1y63j","hasInnerLabel":"textarea__hasInnerLabel_1y63j","resizeVertical":"textarea__resizeVertical_1y63j","scrollableWithLabel":"textarea__scrollableWithLabel_1y63j","focusVisible":"textarea__focusVisible_1y63j","filled":"textarea__filled_1y63j"};
-require('./index.css');
-
-var defaultColors = {"input":"textarea__input_14qju","hasInnerLabel":"textarea__hasInnerLabel_14qju","clearIcon":"textarea__clearIcon_14qju","errorIcon":"textarea__errorIcon_14qju","successIcon":"textarea__successIcon_14qju","error":"textarea__error_14qju","textarea":"textarea__textarea_14qju"};
+var defaultColors = {"input":"textarea__input_18h80","hasInnerLabel":"textarea__hasInnerLabel_18h80","clearIcon":"textarea__clearIcon_18h80","errorIcon":"textarea__errorIcon_18h80","successIcon":"textarea__successIcon_18h80","error":"textarea__error_18h80","textarea":"textarea__textarea_18h80"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_vunvx","hasInnerLabel":"textarea__hasInnerLabel_vunvx","clearIcon":"textarea__clearIcon_vunvx","errorIcon":"textarea__errorIcon_vunvx","successIcon":"textarea__successIcon_vunvx","error":"textarea__error_vunvx","textarea":"textarea__textarea_vunvx"};
+var styles = {"scrollable":"textarea__scrollable_1lxds","scrollableWrapper":"textarea__scrollableWrapper_1lxds","textarea":"textarea__textarea_1lxds","s":"textarea__s_1lxds","m":"textarea__m_1lxds","l":"textarea__l_1lxds","xl":"textarea__xl_1lxds","textareaHidden":"textarea__textareaHidden_1lxds","hasInnerLabel":"textarea__hasInnerLabel_1lxds","resizeVertical":"textarea__resizeVertical_1lxds","scrollableWithLabel":"textarea__scrollableWithLabel_1lxds","focusVisible":"textarea__focusVisible_1lxds","filled":"textarea__filled_1lxds"};
+require('./index.css');
+
+var invertedColors = {"input":"textarea__input_461am","hasInnerLabel":"textarea__hasInnerLabel_461am","clearIcon":"textarea__clearIcon_461am","errorIcon":"textarea__errorIcon_461am","successIcon":"textarea__successIcon_461am","error":"textarea__error_461am","textarea":"textarea__textarea_461am"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -97,17 +97,15 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         'data-test-id': dataTestId,
         maxLength,
     };
-    const renderWithNativeScrollbar = () => {
-        return autosize ? (React.createElement(TextareaAutosize, Object.assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React.createElement("textarea", Object.assign({}, textareaProps, { style: { maxHeight } })));
-    };
+    const renderWithNativeScrollbar = () => autosize ? (React.createElement(TextareaAutosize, { ...textareaProps, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange })) : (React.createElement("textarea", { ...textareaProps, style: { maxHeight } }));
     const renderWithCustomScrollbar = () => {
         const minRowsValue = autosize ? minRows : rows;
         return (React.createElement(Scrollbar, { style: { maxHeight, height: scrollableHeight, padding: 0 }, className: cn(styles.scrollable, styles[size], {
                 [styles.scrollableWithLabel]: label,
                 [styles.filled]: filled,
             }), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles.scrollableWrapper } },
-            React.createElement(TextareaAutosize, Object.assign({}, textareaProps, { minRows: minRowsValue })),
-            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: height => {
+            React.createElement(TextareaAutosize, { ...textareaProps, minRows: minRowsValue }),
+            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: (height) => {
                     if (autosize) {
                         setScrollableHeight(height);
                         if (onHeightChange) {
@@ -120,15 +118,5 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
             [styles.focusVisible]: focusVisible,
         }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: getHint(), leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons }, nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()));
 });
-/**
- * Для отображения в сторибуке
- */
-Textarea.defaultProps = {
-    autoComplete: 'on',
-    autosize: true,
-    size: 's',
-    block: false,
-    resize: 'none',
-};
 
 export { Textarea, getDefaultCounterText };

package/textarea/modern/default.css

@@ -1,4 +1,4 @@
-/* hash: 1bigl */
+/* hash: kkg3y */
 :root {
     --color-light-graphic-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
@@ -18,7 +18,7 @@
     --input-placeholder-color: var(--color-light-text-secondary);
     --input-focus-placeholder-color: var(--color-light-text-tertiary);
     --input-with-label-placeholder-color: var(--color-light-text-tertiary);
-    --input-error-icon: url('https://alfabank.servicecdn.ru/icons/glyph_alert-circle_m_negative.svg');
+    --input-error-icon: none;
     --input-success-icon: url('https://alfabank.servicecdn.ru/icons/icon_ok_s_color.svg');
     --input-caret-color: var(--input-color);
 
@@ -35,70 +35,70 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_14qju {
+.textarea__input_18h80 {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_14qju:-webkit-autofill {
+.textarea__input_18h80:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_14qju::placeholder {
+.textarea__input_18h80::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_14qju::placeholder {
+.textarea__hasInnerLabel_18h80::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_14qju {
+.textarea__clearIcon_18h80 {
     color: var(--color-light-graphic-primary);
 }
-.textarea__errorIcon_14qju {
+.textarea__errorIcon_18h80 {
     background-image: var(--input-error-icon);
 }
-.textarea__successIcon_14qju {
+.textarea__successIcon_18h80 {
     background-image: var(--input-success-icon);
 }
 /* READ-ONLY STATE */
-.textarea__input_14qju:read-only {
+.textarea__input_18h80:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_14qju:read-only:focus::placeholder {
+.textarea__input_18h80:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_14qju:disabled {
+.textarea__input_18h80:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_14qju:focus::placeholder {
+.textarea__input_18h80:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_14qju {
+.textarea__error_18h80 {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_14qju {
+.textarea__textarea_18h80 {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_14qju::placeholder {
+.textarea__textarea_18h80::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_14qju::placeholder {
+.textarea__hasInnerLabel_18h80::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_14qju:disabled {
+.textarea__textarea_18h80:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_14qju:read-only {
+.textarea__textarea_18h80:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_14qju:focus::placeholder {
+.textarea__textarea_18h80:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }

package/textarea/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 3pdw8 */
+/* hash: 1flrj */
 :root {
     --color-light-border-link: #007aff;
 }
@@ -50,6 +50,8 @@
     /* disabled */
 
     /* font */
+
+    /* border-radius */
 }
 :root {
     /* min-height */
@@ -84,19 +86,19 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__scrollable_1y63j {
+.textarea__scrollable_1lxds {
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
 }
-.textarea__scrollableWrapper_1y63j {
+.textarea__scrollableWrapper_1lxds {
     box-sizing: border-box
 }
-.textarea__scrollableWrapper_1y63j > * {
+.textarea__scrollableWrapper_1lxds > * {
         font-family: var(--font-family);
     }
-.textarea__textarea_1y63j {
+.textarea__textarea_1lxds {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -113,139 +115,139 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_1y63j.textarea__s_1y63j {
+.textarea__textarea_1lxds.textarea__s_1lxds {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_1y63j.textarea__m_1y63j {
+.textarea__textarea_1lxds.textarea__m_1lxds {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_1y63j.textarea__l_1y63j {
+.textarea__textarea_1lxds.textarea__l_1lxds {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_1y63j.textarea__xl_1y63j {
+.textarea__textarea_1lxds.textarea__xl_1lxds {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_1y63j.textarea__textareaHidden_1y63j {
+.textarea__textarea_1lxds.textarea__textareaHidden_1lxds {
         position: absolute;
         transform: translateX(-10000px);
     }
-.textarea__textarea_1y63j::placeholder {
+.textarea__textarea_1lxds::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasInnerLabel_1y63j::placeholder {
+.textarea__hasInnerLabel_1lxds::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_1y63j {
+.textarea__resizeVertical_1lxds {
     resize: vertical;
 }
 /* SIZES */
-.textarea__textarea_1y63j.textarea__s_1y63j, .textarea__scrollable_1y63j.textarea__s_1y63j {
+.textarea__textarea_1lxds.textarea__s_1lxds, .textarea__scrollable_1lxds.textarea__s_1lxds {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_1y63j.textarea__m_1y63j, .textarea__scrollable_1y63j.textarea__m_1y63j {
+.textarea__textarea_1lxds.textarea__m_1lxds, .textarea__scrollable_1lxds.textarea__m_1lxds {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_1y63j.textarea__l_1y63j, .textarea__scrollable_1y63j.textarea__l_1y63j {
+.textarea__textarea_1lxds.textarea__l_1lxds, .textarea__scrollable_1lxds.textarea__l_1lxds {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_1y63j.textarea__xl_1y63j, .textarea__scrollable_1y63j.textarea__xl_1y63j {
+.textarea__textarea_1lxds.textarea__xl_1lxds, .textarea__scrollable_1lxds.textarea__xl_1lxds {
         min-height: var(--textarea-xl-min-height);
     }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollable_1y63j.textarea__s_1y63j .textarea__textarea_1y63j, .textarea__scrollable_1y63j.textarea__m_1y63j .textarea__textarea_1y63j, .textarea__scrollable_1y63j.textarea__l_1y63j .textarea__textarea_1y63j {
+.textarea__scrollable_1lxds.textarea__s_1lxds .textarea__textarea_1lxds, .textarea__scrollable_1lxds.textarea__m_1lxds .textarea__textarea_1lxds, .textarea__scrollable_1lxds.textarea__l_1lxds .textarea__textarea_1lxds {
             padding-left: var(--gap-s);
             padding-right: var(--gap-s);
         }
-.textarea__scrollable_1y63j.textarea__xl_1y63j .textarea__textarea_1y63j {
+.textarea__scrollable_1lxds.textarea__xl_1lxds .textarea__textarea_1lxds {
             padding-left: var(--gap-m);
             padding-right: var(--gap-m);
         }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollableWithLabel_1y63j.textarea__s_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__s_1lxds .textarea__textarea_1lxds {
         padding: var(--form-control-labeled-s-paddings);
     }
-.textarea__scrollableWithLabel_1y63j.textarea__m_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__m_1lxds .textarea__textarea_1lxds {
         padding: var(--form-control-labeled-m-paddings);
     }
-.textarea__scrollableWithLabel_1y63j.textarea__l_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__l_1lxds .textarea__textarea_1lxds {
         padding: var(--form-control-labeled-l-paddings);
     }
-.textarea__scrollableWithLabel_1y63j.textarea__xl_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__xl_1lxds .textarea__textarea_1lxds {
         padding: var(--form-control-labeled-xl-paddings);
     }
 /* DISABLED STATE */
-.textarea__textarea_1y63j:disabled {
+.textarea__textarea_1lxds:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1y63j:read-only {
+.textarea__textarea_1lxds:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_1y63j:focus.textarea__hasInnerLabel_1y63j::placeholder {
+.textarea__textarea_1lxds:focus.textarea__hasInnerLabel_1lxds::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_1y63j {
+.textarea__focusVisible_1lxds {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_1y63j.textarea__filled_1y63j.textarea__hasInnerLabel_1y63j {
+.textarea__textarea_1lxds.textarea__filled_1lxds.textarea__hasInnerLabel_1lxds {
     padding-top: 0
 }
-.textarea__textarea_1y63j.textarea__filled_1y63j.textarea__hasInnerLabel_1y63j.textarea__s_1y63j {
+.textarea__textarea_1lxds.textarea__filled_1lxds.textarea__hasInnerLabel_1lxds.textarea__s_1lxds {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height);
         height: var(--textarea-s-filled-min-height);
     }
-.textarea__textarea_1y63j.textarea__filled_1y63j.textarea__hasInnerLabel_1y63j.textarea__m_1y63j {
+.textarea__textarea_1lxds.textarea__filled_1lxds.textarea__hasInnerLabel_1lxds.textarea__m_1lxds {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height);
         height: var(--textarea-m-filled-min-height);
     }
-.textarea__textarea_1y63j.textarea__filled_1y63j.textarea__hasInnerLabel_1y63j.textarea__l_1y63j {
+.textarea__textarea_1lxds.textarea__filled_1lxds.textarea__hasInnerLabel_1lxds.textarea__l_1lxds {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height);
         height: var(--textarea-l-filled-min-height);
     }
-.textarea__textarea_1y63j.textarea__filled_1y63j.textarea__hasInnerLabel_1y63j.textarea__xl_1y63j {
+.textarea__textarea_1lxds.textarea__filled_1lxds.textarea__hasInnerLabel_1lxds.textarea__xl_1lxds {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height);
         height: var(--textarea-xl-filled-min-height);
     }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds .textarea__textarea_1lxds {
         padding-top: 0;
     }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__s_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__s_1lxds {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height)
     }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__s_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__s_1lxds .textarea__textarea_1lxds {
             min-height: var(--textarea-s-filled-min-height);
         }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__m_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__m_1lxds {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height)
     }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__m_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__m_1lxds .textarea__textarea_1lxds {
             min-height: var(--textarea-m-filled-min-height);
         }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__l_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__l_1lxds {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height)
     }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__l_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__l_1lxds .textarea__textarea_1lxds {
             min-height: var(--textarea-l-filled-min-height);
         }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__xl_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__xl_1lxds {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height)
     }
-.textarea__scrollableWithLabel_1y63j.textarea__filled_1y63j.textarea__xl_1y63j .textarea__textarea_1y63j {
+.textarea__scrollableWithLabel_1lxds.textarea__filled_1lxds.textarea__xl_1lxds .textarea__textarea_1lxds {
             min-height: var(--textarea-xl-filled-min-height);
         }

package/textarea/modern/index.js

@@ -1,8 +1,8 @@
 import 'react';
-import 'classnames';
-import 'react-textarea-autosize';
 import 'react-merge-refs';
+import 'react-textarea-autosize';
+import 'classnames';
 import '@alfalab/hooks';
-import '../../scrollbar/modern';
 import '../../form-control/modern';
+import '../../scrollbar/modern';
 export { Textarea, getDefaultCounterText } from './Component.js';