@alfalab/core-components 45.5.0 → 45.6.0-beta.1

package/textarea/modern/default.css

@@ -38,26 +38,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_12sh6 {
+} .textarea__input_1nsv7 {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_12sh6:-webkit-autofill {
+} .textarea__input_1nsv7:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .textarea__input_12sh6::placeholder {
+} .textarea__input_1nsv7::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_12sh6::placeholder {
+} .textarea__hasInnerLabel_1nsv7::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_12sh6:read-only:not(.textarea__disableUserInput_12sh6) {
+} /* READ-ONLY STATE */ .textarea__input_1nsv7:read-only:not(.textarea__disableUserInput_1nsv7) {
     color: var(--input-read-only-color)
-} .textarea__input_12sh6:read-only:not(.textarea__disableUserInput_12sh6):focus::placeholder {
+} .textarea__input_1nsv7:read-only:not(.textarea__disableUserInput_1nsv7):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_12sh6:disabled {
+    } /* DISABLED STATE */ .textarea__input_1nsv7:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .textarea__input_12sh6:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_1nsv7:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_12sh6 {
+} /* ERROR STATE */ .textarea__error_1nsv7 {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 } :root {
@@ -89,22 +89,22 @@
     /* color mobile */
 
     /* error mobile */
-} .textarea__textarea_12sh6 {
+} .textarea__textarea_1nsv7 {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_12sh6::placeholder {
+} .textarea__textarea_1nsv7::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_12sh6::placeholder {
+} .textarea__hasInnerLabel_1nsv7::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_12sh6:disabled {
+} /* DISABLED STATE */ .textarea__textarea_1nsv7:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_12sh6:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_1nsv7:read-only {
     color: var(--input-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_12sh6:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_1nsv7:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} .textarea__hint_12sh6 {
+} .textarea__hint_1nsv7 {
     color: var(--form-control-hint-color);
-} .textarea__error_12sh6 {
+} .textarea__error_1nsv7 {
     color: var(--form-control-error-color);
 }

package/textarea/modern/index.css

@@ -100,7 +100,7 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-spacer-top) -
             var(--textarea-xl-filled-spacer-bottom)
     );
-} .textarea__textarea_1ckij {
+} .textarea__textarea_16s22 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -116,49 +116,49 @@
     resize: none;
     -webkit-appearance: none;
     height: inherit;
-} .textarea__overflowHidden_1ckij.textarea__overflowHidden_1ckij {
+} .textarea__overflowHidden_16s22.textarea__overflowHidden_16s22 {
     overflow: hidden;
-} .textarea__customScrollbar_1ckij {
+} .textarea__customScrollbar_16s22 {
     overflow: auto;
     cursor: auto;
-} .textarea__customScrollbar_1ckij::-webkit-scrollbar {
+} .textarea__customScrollbar_16s22::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-track {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-track {
         background-color: transparent;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-track-piece {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-thumb {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-thumb {
         background-color: var(--color-light-graphic-primary-alpha-30);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-thumb:vertical {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / 6px;
         min-height: 40px;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-thumb:vertical:hover {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-thumb:horizontal {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-thumb:horizontal {
         border-radius: 6px / var(--border-radius-circle);
         min-width: 40px;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-thumb:horizontal:hover {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-thumb:active {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-graphic-primary-alpha-60);
-    } .textarea__customScrollbar_1ckij::-webkit-resizer {
+    } .textarea__customScrollbar_16s22::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .textarea__customScrollbar_1ckij::-webkit-scrollbar-button,
-    .textarea__customScrollbar_1ckij::-webkit-scrollbar-corner {
+    } .textarea__customScrollbar_16s22::-webkit-scrollbar-button,
+    .textarea__customScrollbar_16s22::-webkit-scrollbar-corner {
         display: none;
-    } .textarea__textarea_1ckij::placeholder {
+    } .textarea__textarea_16s22::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .textarea__hasInnerLabel_1ckij::placeholder {
+} .textarea__hasInnerLabel_16s22::placeholder {
     opacity: 0;
-} .textarea__pseudoTextarea_1ckij {
+} .textarea__pseudoTextarea_16s22 {
     position: absolute;
     top: 0;
     left: 0;
@@ -169,13 +169,13 @@
     z-index: -1;
     overflow: auto;
     max-height: 100%
-} .textarea__pseudoTextarea_1ckij span {
+} .textarea__pseudoTextarea_16s22 span {
         color: transparent;
-    } .textarea__pseudoTextarea_1ckij .textarea__overflow_1ckij {
+    } .textarea__pseudoTextarea_16s22 .textarea__overflow_16s22 {
         background-color: var(--color-light-graphic-negative-alpha-40);
-    } .textarea__pseudoTextarea_1ckij::-webkit-scrollbar-thumb {
+    } .textarea__pseudoTextarea_16s22::-webkit-scrollbar-thumb {
         background-color: transparent;
-    } .textarea__sub_1ckij {
+    } .textarea__sub_16s22 {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -183,62 +183,62 @@
     /* adjusting overall height 👌 */
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
-} .textarea__textarea_1ckij.textarea__hasInnerLabel_1ckij.textarea__hasInnerLabel_1ckij {
+} .textarea__textarea_16s22.textarea__hasInnerLabel_16s22.textarea__hasInnerLabel_16s22 {
     padding-top: 0;
     padding-bottom: 0;
-} /* DISABLED STATE */ .textarea__textarea_1ckij:disabled {
+} /* DISABLED STATE */ .textarea__textarea_16s22:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* READ-ONLY STATE */ .textarea__textarea_1ckij:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_16s22:read-only {
     cursor: var(--disabled-cursor);
-} /* FOCUS STATE */ .textarea__textarea_1ckij:focus.textarea__hasInnerLabel_1ckij::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_16s22:focus.textarea__hasInnerLabel_16s22::placeholder {
     opacity: 1;
-} .textarea__focusVisible_1ckij {
+} .textarea__focusVisible_16s22 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* FILLED STATE */ .textarea__textarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij {
+} /* FILLED STATE */ .textarea__textarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22 {
     padding-top: 0
-} .textarea__textarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-48_1ckij {
+} .textarea__textarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-48_16s22 {
         min-height: var(--textarea-s-filled-min-height);
-    } .textarea__textarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-56_1ckij {
+    } .textarea__textarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-56_16s22 {
         min-height: var(--textarea-m-filled-min-height);
-    } .textarea__textarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-64_1ckij {
+    } .textarea__textarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-64_16s22 {
         min-height: var(--textarea-l-filled-min-height);
-    } .textarea__textarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-72_1ckij {
+    } .textarea__textarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-72_16s22 {
         min-height: var(--textarea-xl-filled-min-height);
-    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-48_1ckij {
+    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-48_16s22 {
         min-height: calc(100% - var(--textarea-s-filled-spacer-top));
-    } .textarea__pseudoTextarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-56_1ckij {
+    } .textarea__pseudoTextarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-56_16s22 {
         min-height: calc(100% - var(--textarea-m-filled-spacer-top));
-    } .textarea__pseudoTextarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-64_1ckij {
+    } .textarea__pseudoTextarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-64_16s22 {
         min-height: calc(100% - var(--textarea-l-filled-spacer-top));
-    } .textarea__pseudoTextarea_1ckij.textarea__filled_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-72_1ckij {
+    } .textarea__pseudoTextarea_16s22.textarea__filled_16s22.textarea__hasInnerLabel_16s22.textarea__size-72_16s22 {
         min-height: calc(100% - var(--textarea-xl-filled-spacer-top));
-    } .textarea__wrapper_1ckij.textarea__resizeVertical_1ckij {
+    } .textarea__wrapper_16s22.textarea__resizeVertical_16s22 {
         resize: vertical;
         min-height: 48px;
-    } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_1ckij.textarea__size-48_1ckij {
+    } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_16s22.textarea__size-48_16s22 {
         border-top: var(--textarea-s-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-s-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_1ckij.textarea__size-56_1ckij {
+    } .textarea__textarea_16s22.textarea__size-56_16s22 {
         border-top: var(--textarea-m-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-m-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_1ckij.textarea__size-64_1ckij {
+    } .textarea__textarea_16s22.textarea__size-64_16s22 {
         border-top: var(--textarea-l-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-l-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_1ckij.textarea__size-72_1ckij {
+    } .textarea__textarea_16s22.textarea__size-72_16s22 {
         border-top: var(--textarea-xl-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-xl-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-48_1ckij {
+    } .textarea__textarea_16s22.textarea__hasInnerLabel_16s22.textarea__size-48_16s22 {
             border-top: var(--textarea-s-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-s-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-56_1ckij {
+        } .textarea__textarea_16s22.textarea__hasInnerLabel_16s22.textarea__size-56_16s22 {
             border-top: var(--textarea-m-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-m-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-64_1ckij {
+        } .textarea__textarea_16s22.textarea__hasInnerLabel_16s22.textarea__size-64_16s22 {
             border-top: var(--textarea-l-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-l-filled-spacer-bottom) var(--textarea-spacer-style);
-        } .textarea__textarea_1ckij.textarea__hasInnerLabel_1ckij.textarea__size-72_1ckij {
+        } .textarea__textarea_16s22.textarea__hasInnerLabel_16s22.textarea__size-72_16s22 {
             border-top: var(--textarea-xl-filled-spacer-top) var(--textarea-spacer-style);
             border-bottom: var(--textarea-xl-filled-spacer-bottom) var(--textarea-spacer-style);
         }

package/textarea/modern/index.js

@@ -6,5 +6,5 @@ import 'classnames';
 import '../../form-control/modern';
 import '../../shared/modern';
 import '@alfalab/hooks';
-import './PseudoTextArea-1f8eb905.js';
+import './PseudoTextArea-e80f9ac0.js';
 import './consts.js';

package/textarea/modern/inverted.css

@@ -39,26 +39,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_1xiei {
+} .textarea__input_jhoht {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_1xiei:-webkit-autofill {
+} .textarea__input_jhoht:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .textarea__input_1xiei::placeholder {
+} .textarea__input_jhoht::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_1xiei::placeholder {
+} .textarea__hasInnerLabel_jhoht::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_1xiei:read-only:not(.textarea__disableUserInput_1xiei) {
+} /* READ-ONLY STATE */ .textarea__input_jhoht:read-only:not(.textarea__disableUserInput_jhoht) {
     color: var(--input-inverted-read-only-color)
-} .textarea__input_1xiei:read-only:not(.textarea__disableUserInput_1xiei):focus::placeholder {
+} .textarea__input_jhoht:read-only:not(.textarea__disableUserInput_jhoht):focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_1xiei:disabled {
+    } /* DISABLED STATE */ .textarea__input_jhoht:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .textarea__input_1xiei:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_jhoht:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_1xiei {
+} /* ERROR STATE */ .textarea__error_jhoht {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 } :root {
@@ -90,22 +90,22 @@
     /* color mobile */
 
     /* error mobile */
-} .textarea__textarea_1xiei {
+} .textarea__textarea_jhoht {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_1xiei::placeholder {
+} .textarea__textarea_jhoht::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_1xiei::placeholder {
+} .textarea__hasInnerLabel_jhoht::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_1xiei:disabled {
+} /* DISABLED STATE */ .textarea__textarea_jhoht:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_1xiei:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_jhoht:read-only {
     color: var(--input-inverted-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_1xiei:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_jhoht:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} .textarea__hint_1xiei {
+} .textarea__hint_jhoht {
     color: var(--form-control-hint-color);
-} .textarea__error_1xiei {
+} .textarea__error_jhoht {
     color: var(--form-control-error-color);
 }

package/textarea/modern-pcss-raw/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+declare const getDefaultCounterText: (textLength: number, maxLength?: number) => string;
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style" | "value" | "size" | "defaultValue" | "onChange"> & import("./typings").TextareaIncomeProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { getDefaultCounterText, Textarea };

package/textarea/modern-pcss-raw/Component.js

@@ -0,0 +1,128 @@
+import React, { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import TextareaAutosize from 'react-textarea-autosize';
+import cn from 'classnames';
+import { FormControl } from '../../form-control/modern-pcss-raw';
+import { getDataTestId } from '../../shared/modern-pcss-raw';
+import { useMedia, useFocus } from '@alfalab/hooks';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-e6a7254f.js';
+import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
+
+const defaultColors = {"input":"input","hasInnerLabel":"hasInnerLabel","disableUserInput":"disableUserInput","error":"error","textarea":"textarea","hint":"hint"};
+require('./default.css');
+
+const invertedColors = {"input":"input","hasInnerLabel":"hasInnerLabel","disableUserInput":"disableUserInput","error":"error","textarea":"textarea","hint":"hint"};
+require('./inverted.css');
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
+const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 48, colors = 'default', block = false, bottomAddons, fieldClassName, className, dataTestId, disabled, error, hint, textareaClassName, label, labelView = 'inner', leftAddons, onFocus, onBlur, onChange, onHeightChange, rightAddons, maxRows, minRows, maxHeight, resize = 'none', value, defaultValue, rows = autosize ? 1 : 3, showCounter = false, getCounterText = getDefaultCounterText, maxLength, allowOverflow = true, nativeScrollbar: nativeScrollbarProp, breakpoint, ...restProps }, ref) => {
+    const uncontrolled = value === undefined;
+    let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
+    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+    const textareaRef = useRef(null);
+    const pseudoTextareaRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const [stateValue, setStateValue] = useState(defaultValue || '');
+    const [scrollPosition, setScrollPosition] = useState(0);
+    const [focusVisible] = useFocus(
+    /*
+     * При первом рендере textareaRef.current === null, то нужно пересоздать реф для корректной работы хука
+     * TODO: исправить хук useFocus, чтобы он поддерживал изменение ноды
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => ({ current: textareaRef.current }), [textareaRef.current]), 'keyboard');
+    const filled = Boolean(uncontrolled ? stateValue : value);
+    const hasInnerLabel = label && labelView === 'inner';
+    const hasOverflow = Boolean(maxLength && allowOverflow && (value?.slice(maxLength) || stateValue.slice(maxLength)));
+    useEffect(() => {
+        const pseudoNode = pseudoTextareaRef.current;
+        if (pseudoNode) {
+            pseudoNode.scrollTop = scrollPosition;
+        }
+    }, [scrollPosition, stateValue, hasOverflow]);
+    // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
+    useEffect(() => {
+        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
+            textareaRef.current.style.maxHeight = `${maxHeight}px`;
+        }
+    }, [autosize, maxHeight]);
+    const handleTextareaFocus = (event) => {
+        setFocused(true);
+        if (onFocus) {
+            onFocus(event);
+        }
+    };
+    const handleTextareaBlur = (event) => {
+        setFocused(false);
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+    const handleTextareaChange = (event) => {
+        const { target: { value: newValue }, } = event;
+        if (onChange) {
+            onChange(event, { value: newValue });
+        }
+        if (uncontrolled) {
+            setStateValue(newValue);
+        }
+    };
+    const handleTeaxtareaScroll = (event) => {
+        if (maxLength) {
+            const val = event.target.scrollTop;
+            setScrollPosition(val);
+        }
+    };
+    const getValueLength = () => {
+        if (uncontrolled) {
+            return stateValue.length;
+        }
+        return value.length;
+    };
+    const textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[SIZE_TO_CLASSNAME_MAP[size]], {
+        [styles.overflowHidden]: autosize && !maxRows,
+        [styles.customScrollbar]: !nativeScrollbar,
+        [styles.hasInnerLabel]: hasInnerLabel,
+        [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
+        [styles.filled]: filled,
+    }, textareaClassName);
+    const textareaProps = {
+        ...restProps,
+        className: textareaClassNameCalc,
+        autoComplete,
+        disabled,
+        maxLength: allowOverflow ? undefined : maxLength,
+        onBlur: handleTextareaBlur,
+        onFocus: handleTextareaFocus,
+        onChange: handleTextareaChange,
+        value: uncontrolled ? stateValue : value,
+        rows,
+        ref: mergeRefs([ref, textareaRef]),
+        'data-test-id': dataTestId,
+        onScroll: handleTeaxtareaScroll,
+    };
+    const getBottomAddons = () => {
+        const counterIsVisible = Boolean(maxLength && showCounter);
+        return (React.createElement(React.Fragment, null,
+            counterIsVisible && (React.createElement("span", { className: cn(styles.sub, {
+                    [colorStyles[colors].error]: hasOverflow,
+                    [colorStyles[colors].hint]: !hasOverflow,
+                }) }, getCounterText(getValueLength(), maxLength))),
+            bottomAddons));
+    };
+    return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, {
+            [styles.focusVisible]: focusVisible,
+        }), inputWrapperClassName: cn(styles.wrapper, styles[SIZE_TO_CLASSNAME_MAP[size]], {
+            [styles.hasInnerLabel]: hasInnerLabel,
+            [styles.resizeVertical]: resize === 'vertical',
+        }), size: size, colors: colors, block: block, disabled: disabled, filled: filled || focused, focused: focused, error: error, label: label, labelView: labelView, hint: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons(), breakpoint: breakpoint, dataTestId: getDataTestId(dataTestId, 'form-control') },
+        React.createElement(React.Fragment, null,
+            hasOverflow && (React.createElement(PseudoTextArea, { value: value ?? stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: textareaClassNameCalc, ref: pseudoTextareaRef })),
+            autosize ? (React.createElement(TextareaAutosize, { ...textareaProps, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange })) : (React.createElement("textarea", { ...textareaProps, style: { maxHeight } })))));
+});
+
+export { Textarea, getDefaultCounterText };

package/textarea/modern-pcss-raw/PseudoTextArea-e6a7254f.js

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
+
+const styles = {"textarea":"textarea","overflowHidden":"overflowHidden","customScrollbar":"customScrollbar","hasInnerLabel":"hasInnerLabel","pseudoTextarea":"pseudoTextarea","overflow":"overflow","sub":"sub","focusVisible":"focusVisible","filled":"filled","size-48":"size-48","size-56":"size-56","size-64":"size-64","size-72":"size-72","wrapper":"wrapper","resizeVertical":"resizeVertical"};
+require('./index.css');
+
+const PseudoTextArea = forwardRef(({ size = 48, pseudoTextareaClassName, maxLength, value }, ref) => (React.createElement("div", { className: cn(styles.pseudoTextarea, styles[SIZE_TO_CLASSNAME_MAP[size]], pseudoTextareaClassName), ref: ref, hidden: true },
+    React.createElement("span", null, value.slice(0, maxLength)),
+    React.createElement("span", { className: cn(styles.overflow) }, value.slice(maxLength)),
+    React.createElement("br", null))));
+
+export { PseudoTextArea as P, styles as s };

package/textarea/modern-pcss-raw/components/PseudoTextArea.js

@@ -0,0 +1,4 @@
+import 'react';
+import 'classnames';
+export { P as PseudoTextArea } from '../PseudoTextArea-e6a7254f.js';
+import '../consts.js';

package/textarea/modern-pcss-raw/components/index.d.ts

@@ -0,0 +1 @@
+export * from "../PseudoTextArea-e6a7254f";

package/textarea/modern-pcss-raw/components/index.js

@@ -0,0 +1,4 @@
+export { P as PseudoTextArea } from '../PseudoTextArea-e6a7254f.js';
+import 'react';
+import 'classnames';
+import '../consts.js';

package/textarea/modern-pcss-raw/consts.d.ts

@@ -0,0 +1,11 @@
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    48: string;
+    56: string;
+    64: string;
+    72: string;
+};
+export { SIZE_TO_CLASSNAME_MAP };

package/textarea/modern-pcss-raw/consts.js

@@ -0,0 +1,12 @@
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+
+export { SIZE_TO_CLASSNAME_MAP };

package/textarea/modern-pcss-raw/default.css

@@ -0,0 +1,110 @@
+/* hash: 6xctt */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-1500: #0e0e0e;
+    --color-light-text-negative: #ec2e14;
+    --color-light-text-primary: #0e0e0e;
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --input-color: var(--color-light-text-primary);
+    --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-caret-color: var(--color-light-neutral-1500);
+
+    /* disabled */
+    --input-disabled-color: var(--color-light-text-tertiary);
+
+    /* read-only */
+    --input-read-only-color: var(--color-light-text-tertiary);
+
+    /* error */
+    --input-error-color: var(--color-light-text-primary);
+
+    /* display */
+
+    /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
+} .input {
+    color: var(--input-color);
+    caret-color: var(--input-caret-color);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+} .input:-webkit-autofill {
+    -webkit-text-fill-color: var(--input-color);
+} .input::placeholder {
+    color: var(--input-placeholder-color);
+} .hasInnerLabel::placeholder {
+    color: var(--input-with-label-placeholder-color);
+} /* READ-ONLY STATE */ .input:read-only:not(.disableUserInput) {
+    color: var(--input-read-only-color)
+} .input:read-only:not(.disableUserInput):focus::placeholder {
+        color: var(--input-placeholder-color);
+    } /* DISABLED STATE */ .input:disabled {
+    color: var(--input-disabled-color);
+    -webkit-text-fill-color: var(--input-disabled-color);
+} /* FOCUS STATE */ .input:focus::placeholder {
+    color: var(--input-focus-placeholder-color);
+} /* ERROR STATE */ .error {
+    color: var(--input-error-color);
+    caret-color: var(--input-error-color);
+} :root {
+    --form-control-hint-color: var(--color-light-text-secondary);
+
+    /* disabled */
+
+    /* focus */
+
+    /* hover */
+
+    /* error */
+    --form-control-error-color: var(--color-light-text-negative);
+
+    /* height */
+
+    /* paddings */
+
+    /* disabled */
+
+    /* font */
+
+    /* border-radius */
+
+    /* paddings mobile */
+
+    /* border-radius mobile */
+
+    /* color mobile */
+
+    /* error mobile */
+} .textarea {
+    color: var(--input-color);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+} .textarea::placeholder {
+    color: var(--input-placeholder-color);
+} .hasInnerLabel::placeholder {
+    color: var(--input-with-label-placeholder-color);
+} /* DISABLED STATE */ .textarea:disabled {
+    color: var(--input-disabled-color);
+    -webkit-text-fill-color: var(--input-disabled-color);
+} /* READ-ONLY STATE */ .textarea:read-only {
+    color: var(--input-read-only-color);
+} /* FOCUS STATE */ .textarea:focus::placeholder {
+    color: var(--input-focus-placeholder-color);
+} .hint {
+    color: var(--form-control-hint-color);
+} .error {
+    color: var(--form-control-error-color);
+}