@alfalab/core-components 36.1.2 → 36.3.0

package/textarea/modern/Component.js

@@ -5,14 +5,12 @@ import cn from 'classnames';
 import { useMedia, useFocus } from '@alfalab/hooks';
 import { FormControl } from '../../form-control/modern';
 import { Scrollbar } from '../../scrollbar/modern';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-6ac86ce7.js';
 
-var defaultColors = {"input":"textarea__input_1a636","hasInnerLabel":"textarea__hasInnerLabel_1a636","clearIcon":"textarea__clearIcon_1a636","error":"textarea__error_1a636","textarea":"textarea__textarea_1a636"};
+var defaultColors = {"input":"textarea__input_1m0s6","hasInnerLabel":"textarea__hasInnerLabel_1m0s6","clearIcon":"textarea__clearIcon_1m0s6","error":"textarea__error_1m0s6","textarea":"textarea__textarea_1m0s6","hint":"textarea__hint_1m0s6"};
 require('./default.css');
 
-var styles = {"scrollable":"textarea__scrollable_13pv2","scrollableWrapper":"textarea__scrollableWrapper_13pv2","textarea":"textarea__textarea_13pv2","s":"textarea__s_13pv2","m":"textarea__m_13pv2","l":"textarea__l_13pv2","xl":"textarea__xl_13pv2","textareaHidden":"textarea__textareaHidden_13pv2","hasInnerLabel":"textarea__hasInnerLabel_13pv2","resizeVertical":"textarea__resizeVertical_13pv2","scrollableWithLabel":"textarea__scrollableWithLabel_13pv2","focusVisible":"textarea__focusVisible_13pv2","filled":"textarea__filled_13pv2"};
-require('./index.css');
-
-var invertedColors = {"input":"textarea__input_5uwgd","hasInnerLabel":"textarea__hasInnerLabel_5uwgd","clearIcon":"textarea__clearIcon_5uwgd","error":"textarea__error_5uwgd","textarea":"textarea__textarea_5uwgd"};
+var invertedColors = {"input":"textarea__input_hplgo","hasInnerLabel":"textarea__hasInnerLabel_hplgo","clearIcon":"textarea__clearIcon_hplgo","error":"textarea__error_hplgo","textarea":"textarea__textarea_hplgo","hint":"textarea__hint_hplgo"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -25,12 +23,21 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
     let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
     nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp ?? nativeScrollbar);
     const textareaRef = useRef(null);
+    const pseudoTextareaRef = useRef(null);
     const [focused, setFocused] = useState(false);
     const [stateValue, setStateValue] = useState(defaultValue || '');
     const [scrollableHeight, setScrollableHeight] = useState();
+    const [scrollPosition, setScrollPosition] = useState(0);
     const [focusVisible] = useFocus(textareaRef, 'keyboard');
     const filled = Boolean(uncontrolled ? stateValue : value);
     const hasInnerLabel = label && labelView === 'inner';
+    const hasOverflow = Boolean(maxLength && stateValue.slice(maxLength));
+    useEffect(() => {
+        const pseudoNode = pseudoTextareaRef.current;
+        if (pseudoNode) {
+            pseudoNode.scrollTop = scrollPosition;
+        }
+    }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(() => {
         if (autosize) {
@@ -59,11 +66,18 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         }
     };
     const handleTextareaChange = (event) => {
+        const { target: { value }, } = event;
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(value);
+        }
+    };
+    const handleTeaxtareaScroll = (event) => {
+        if (maxLength) {
+            const value = event.target.scrollTop;
+            setScrollPosition(value);
         }
     };
     const getValueLength = () => {
@@ -72,20 +86,15 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         }
         return value.length;
     };
-    const getHint = () => {
-        if (showCounter) {
-            return getCounterText(getValueLength(), maxLength);
-        }
-        return hint;
-    };
+    const textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[size], {
+        [styles.hasInnerLabel]: nativeScrollbar && hasInnerLabel,
+        [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
+        [styles.filled]: nativeScrollbar && filled,
+        [styles.resizeVertical]: resize === 'vertical',
+    }, textareaClassName);
     const textareaProps = {
         ...restProps,
-        className: cn(styles.textarea, colorStyles[colors].textarea, styles[size], {
-            [styles.hasInnerLabel]: nativeScrollbar && hasInnerLabel,
-            [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
-            [styles.filled]: nativeScrollbar && filled,
-            [styles.resizeVertical]: resize === 'vertical',
-        }, textareaClassName),
+        className: textareaClassNameCalc,
         autoComplete,
         disabled,
         onBlur: handleTextareaBlur,
@@ -95,7 +104,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         rows,
         ref: mergeRefs([ref, textareaRef]),
         'data-test-id': dataTestId,
-        maxLength,
+        onScroll: handleTeaxtareaScroll,
     };
     const renderWithNativeScrollbar = () => autosize ? (React.createElement(TextareaAutosize, { ...textareaProps, maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange })) : (React.createElement("textarea", { ...textareaProps, style: { maxHeight } }));
     const renderWithCustomScrollbar = () => {
@@ -104,6 +113,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
                 [styles.scrollableWithLabel]: label,
                 [styles.filled]: filled,
             }), horizontalAutoStretch: !block, widthPropName: 'width', contentNodeProps: { className: styles.scrollableWrapper } },
+            hasOverflow && (React.createElement(PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.customScrollbar), ref: pseudoTextareaRef })),
             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) {
@@ -114,9 +124,20 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
                     }
                 } })));
     };
+    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,
-        }), 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()));
+        }), 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() }, nativeScrollbar ? (React.createElement(React.Fragment, null,
+        hasOverflow && (React.createElement(PseudoTextArea, { stateValue: stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.nativeScrollbar), ref: pseudoTextareaRef })),
+        renderWithNativeScrollbar())) : (renderWithCustomScrollbar())));
 });
 
 export { Textarea, getDefaultCounterText };

package/textarea/modern/PseudoTextArea-6ac86ce7.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import React from 'react';
+import { TextareaIncomeProps } from "./typings";
+declare const PseudoTextArea: React.ForwardRefExoticComponent<{
+    pseudoTextareaClassName: string;
+    stateValue: string;
+} & TextareaIncomeProps & React.RefAttributes<HTMLDivElement>>;
+export { PseudoTextArea };

package/textarea/modern/PseudoTextArea-6ac86ce7.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+var styles = {"scrollable":"textarea__scrollable_vdk59","scrollableWrapper":"textarea__scrollableWrapper_vdk59","textarea":"textarea__textarea_vdk59","s":"textarea__s_vdk59","m":"textarea__m_vdk59","l":"textarea__l_vdk59","xl":"textarea__xl_vdk59","textareaHidden":"textarea__textareaHidden_vdk59","hasInnerLabel":"textarea__hasInnerLabel_vdk59","resizeVertical":"textarea__resizeVertical_vdk59","pseudoTextarea":"textarea__pseudoTextarea_vdk59","overflow":"textarea__overflow_vdk59","nativeScrollbar":"textarea__nativeScrollbar_vdk59","customScrollbar":"textarea__customScrollbar_vdk59","sub":"textarea__sub_vdk59","scrollableWithLabel":"textarea__scrollableWithLabel_vdk59","focusVisible":"textarea__focusVisible_vdk59","filled":"textarea__filled_vdk59"};
+require('./index.css');
+
+const PseudoTextArea = forwardRef(({ size = 's', pseudoTextareaClassName = '', maxLength, stateValue }, ref) => (React.createElement("div", { className: cn(styles.pseudoTextarea, styles[size], pseudoTextareaClassName), ref: ref, hidden: true },
+    React.createElement("span", null, stateValue.slice(0, maxLength)),
+    React.createElement("span", { className: cn(styles.overflow) }, stateValue.slice(maxLength)),
+    "\u00A0")));
+
+export { PseudoTextArea as P, styles as s };

package/textarea/modern/components/PseudoTextArea.js

@@ -0,0 +1,3 @@
+import 'react';
+import 'classnames';
+export { P as PseudoTextArea } from '../PseudoTextArea-6ac86ce7.js';

package/textarea/modern/components/index.d.ts

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

package/textarea/modern/components/index.js

@@ -0,0 +1,3 @@
+import 'react';
+import 'classnames';
+export { P as PseudoTextArea } from '../PseudoTextArea-6ac86ce7.js';

package/textarea/modern/default.css

@@ -1,6 +1,7 @@
 /* hash: 2ex7r */
 :root {
     --color-light-graphic-primary: #0b1f35;
+    --color-light-text-negative: #d91d0b;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: rgba(11, 31, 53, 0.7);
     --color-light-text-tertiary: rgba(11, 31, 53, 0.3);
@@ -33,64 +34,92 @@
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
 }
-.textarea__input_1a636 {
+.textarea__input_1m0s6 {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_1a636:-webkit-autofill {
+.textarea__input_1m0s6:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_1a636::placeholder {
+.textarea__input_1m0s6::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_1a636::placeholder {
+.textarea__hasInnerLabel_1m0s6::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_1a636 {
+.textarea__clearIcon_1m0s6 {
     color: var(--color-light-graphic-primary);
 }
 /* READ-ONLY STATE */
-.textarea__input_1a636:read-only {
+.textarea__input_1m0s6:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_1a636:read-only:focus::placeholder {
+.textarea__input_1m0s6:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_1a636:disabled {
+.textarea__input_1m0s6:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_1a636:focus::placeholder {
+.textarea__input_1m0s6:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_1a636 {
+.textarea__error_1m0s6 {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_1a636 {
+: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 */
+}
+.textarea__textarea_1m0s6 {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_1a636::placeholder {
+.textarea__textarea_1m0s6::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_1a636::placeholder {
+.textarea__hasInnerLabel_1m0s6::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_1a636:disabled {
+.textarea__textarea_1m0s6:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_1a636:read-only {
+.textarea__textarea_1m0s6:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_1a636:focus::placeholder {
+.textarea__textarea_1m0s6:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
+.textarea__hint_1m0s6 {
+    color: var(--form-control-hint-color);
+}
+.textarea__error_1m0s6 {
+    color: var(--form-control-error-color);
+}

package/textarea/modern/index.css

@@ -1,6 +1,7 @@
 /* hash: akchg */
 :root {
     --color-light-border-link: #007aff;
+    --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
 }
 :root {
 
@@ -46,6 +47,7 @@
     --form-control-labeled-m-paddings: 28px var(--gap-s) 8px;
     --form-control-labeled-l-paddings: 32px var(--gap-s) 12px;
     --form-control-labeled-xl-paddings: 38px var(--gap-m) 14px;
+    --form-control-sub-paddings: 0;
 
     /* disabled */
 
@@ -86,27 +88,26 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
 }
-.textarea__scrollable_13pv2 {
+.textarea__scrollable_vdk59 {
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
 }
-.textarea__scrollableWrapper_13pv2 {
+.textarea__scrollableWrapper_vdk59 {
     box-sizing: border-box
 }
-.textarea__scrollableWrapper_13pv2 > * {
+.textarea__scrollableWrapper_vdk59 > * {
         font-family: var(--font-family);
     }
-.textarea__textarea_13pv2 {
+.textarea__textarea_vdk59 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
-
     position: relative;
     display: block;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     background: none;
     border: none;
     margin: 0;
@@ -115,139 +116,172 @@
     resize: none;
     -webkit-appearance: none
 }
-.textarea__textarea_13pv2.textarea__s_13pv2 {
+.textarea__textarea_vdk59.textarea__s_vdk59 {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_13pv2.textarea__m_13pv2 {
+.textarea__textarea_vdk59.textarea__m_vdk59 {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_13pv2.textarea__l_13pv2 {
+.textarea__textarea_vdk59.textarea__l_vdk59 {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_13pv2.textarea__xl_13pv2 {
+.textarea__textarea_vdk59.textarea__xl_vdk59 {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_13pv2.textarea__textareaHidden_13pv2 {
+.textarea__textarea_vdk59.textarea__textareaHidden_vdk59 {
         position: absolute;
         transform: translateX(-10000px);
     }
-.textarea__textarea_13pv2::placeholder {
+.textarea__textarea_vdk59::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasInnerLabel_13pv2::placeholder {
+.textarea__hasInnerLabel_vdk59::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_13pv2 {
+.textarea__resizeVertical_vdk59 {
     resize: vertical;
 }
+.textarea__pseudoTextarea_vdk59 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    z-index: -1;
+    overflow: hidden;
+    max-height: 100%
+}
+.textarea__pseudoTextarea_vdk59 span {
+        color: transparent;
+    }
+.textarea__pseudoTextarea_vdk59 .textarea__overflow_vdk59 {
+        background-color: var(--color-light-graphic-negative-alpha-40);
+    }
+.textarea__pseudoTextarea_vdk59.textarea__nativeScrollbar_vdk59 {
+        overflow: auto;
+    }
+.textarea__pseudoTextarea_vdk59.textarea__customScrollbar_vdk59 {
+        max-height: none;
+    }
+.textarea__sub_vdk59 {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    display: block;
+    /* adjusting overall height 👌 */
+    margin-top: 6px;
+    padding: var(--form-control-sub-paddings);
+}
 /* SIZES */
-.textarea__textarea_13pv2.textarea__s_13pv2, .textarea__scrollable_13pv2.textarea__s_13pv2 {
+.textarea__textarea_vdk59.textarea__s_vdk59, .textarea__scrollable_vdk59.textarea__s_vdk59 {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_13pv2.textarea__m_13pv2, .textarea__scrollable_13pv2.textarea__m_13pv2 {
+.textarea__textarea_vdk59.textarea__m_vdk59, .textarea__scrollable_vdk59.textarea__m_vdk59 {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_13pv2.textarea__l_13pv2, .textarea__scrollable_13pv2.textarea__l_13pv2 {
+.textarea__textarea_vdk59.textarea__l_vdk59, .textarea__scrollable_vdk59.textarea__l_vdk59 {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_13pv2.textarea__xl_13pv2, .textarea__scrollable_13pv2.textarea__xl_13pv2 {
+.textarea__textarea_vdk59.textarea__xl_vdk59, .textarea__scrollable_vdk59.textarea__xl_vdk59 {
         min-height: var(--textarea-xl-min-height);
     }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollable_13pv2.textarea__s_13pv2 .textarea__textarea_13pv2, .textarea__scrollable_13pv2.textarea__m_13pv2 .textarea__textarea_13pv2, .textarea__scrollable_13pv2.textarea__l_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollable_vdk59.textarea__s_vdk59 .textarea__textarea_vdk59, .textarea__scrollable_vdk59.textarea__m_vdk59 .textarea__textarea_vdk59, .textarea__scrollable_vdk59.textarea__l_vdk59 .textarea__textarea_vdk59 {
             padding-left: var(--gap-s);
             padding-right: var(--gap-s);
         }
-.textarea__scrollable_13pv2.textarea__xl_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollable_vdk59.textarea__xl_vdk59 .textarea__textarea_vdk59 {
             padding-left: var(--gap-m);
             padding-right: var(--gap-m);
         }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollableWithLabel_13pv2.textarea__s_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__s_vdk59 .textarea__textarea_vdk59 {
         padding: var(--form-control-labeled-s-paddings);
     }
-.textarea__scrollableWithLabel_13pv2.textarea__m_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__m_vdk59 .textarea__textarea_vdk59 {
         padding: var(--form-control-labeled-m-paddings);
     }
-.textarea__scrollableWithLabel_13pv2.textarea__l_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__l_vdk59 .textarea__textarea_vdk59 {
         padding: var(--form-control-labeled-l-paddings);
     }
-.textarea__scrollableWithLabel_13pv2.textarea__xl_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__xl_vdk59 .textarea__textarea_vdk59 {
         padding: var(--form-control-labeled-xl-paddings);
     }
 /* DISABLED STATE */
-.textarea__textarea_13pv2:disabled {
+.textarea__textarea_vdk59:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_13pv2:read-only {
+.textarea__textarea_vdk59:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_13pv2:focus.textarea__hasInnerLabel_13pv2::placeholder {
+.textarea__textarea_vdk59:focus.textarea__hasInnerLabel_vdk59::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_13pv2 {
+.textarea__focusVisible_vdk59 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_13pv2.textarea__filled_13pv2.textarea__hasInnerLabel_13pv2 {
+.textarea__textarea_vdk59.textarea__filled_vdk59.textarea__hasInnerLabel_vdk59 {
     padding-top: 0
 }
-.textarea__textarea_13pv2.textarea__filled_13pv2.textarea__hasInnerLabel_13pv2.textarea__s_13pv2 {
+.textarea__textarea_vdk59.textarea__filled_vdk59.textarea__hasInnerLabel_vdk59.textarea__s_vdk59 {
         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_13pv2.textarea__filled_13pv2.textarea__hasInnerLabel_13pv2.textarea__m_13pv2 {
+.textarea__textarea_vdk59.textarea__filled_vdk59.textarea__hasInnerLabel_vdk59.textarea__m_vdk59 {
         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_13pv2.textarea__filled_13pv2.textarea__hasInnerLabel_13pv2.textarea__l_13pv2 {
+.textarea__textarea_vdk59.textarea__filled_vdk59.textarea__hasInnerLabel_vdk59.textarea__l_vdk59 {
         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_13pv2.textarea__filled_13pv2.textarea__hasInnerLabel_13pv2.textarea__xl_13pv2 {
+.textarea__textarea_vdk59.textarea__filled_vdk59.textarea__hasInnerLabel_vdk59.textarea__xl_vdk59 {
         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_13pv2.textarea__filled_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59 .textarea__textarea_vdk59 {
         padding-top: 0;
     }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__s_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__s_vdk59 {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height)
     }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__s_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__s_vdk59 .textarea__textarea_vdk59 {
             min-height: var(--textarea-s-filled-min-height);
         }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__m_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__m_vdk59 {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height)
     }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__m_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__m_vdk59 .textarea__textarea_vdk59 {
             min-height: var(--textarea-m-filled-min-height);
         }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__l_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__l_vdk59 {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height)
     }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__l_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__l_vdk59 .textarea__textarea_vdk59 {
             min-height: var(--textarea-l-filled-min-height);
         }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__xl_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__xl_vdk59 {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height)
     }
-.textarea__scrollableWithLabel_13pv2.textarea__filled_13pv2.textarea__xl_13pv2 .textarea__textarea_13pv2 {
+.textarea__scrollableWithLabel_vdk59.textarea__filled_vdk59.textarea__xl_vdk59 .textarea__textarea_vdk59 {
             min-height: var(--textarea-xl-filled-min-height);
         }

package/textarea/modern/index.js

@@ -5,4 +5,5 @@ import 'classnames';
 import '@alfalab/hooks';
 import '../../form-control/modern';
 import '../../scrollbar/modern';
+import './PseudoTextArea-6ac86ce7.js';
 export { Textarea, getDefaultCounterText } from './Component.js';