@alfalab/core-components 36.2.0 → 36.3.1

package/textarea/esm/Component.js

@@ -5,6 +5,7 @@ import cn from 'classnames';
 import { FormControl } from '../../form-control/esm';
 import { Scrollbar } from '../../scrollbar/esm';
 import { useMedia, useFocus } from '@alfalab/hooks';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-2570e442.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -45,13 +46,10 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"input":"textarea__input_vnnvh","hasInnerLabel":"textarea__hasInnerLabel_vnnvh","clearIcon":"textarea__clearIcon_vnnvh","error":"textarea__error_vnnvh","textarea":"textarea__textarea_vnnvh"};
+var defaultColors = {"input":"textarea__input_1c4xt","hasInnerLabel":"textarea__hasInnerLabel_1c4xt","clearIcon":"textarea__clearIcon_1c4xt","error":"textarea__error_1c4xt","textarea":"textarea__textarea_1c4xt","hint":"textarea__hint_1c4xt"};
 require('./default.css');
 
-var styles = {"scrollable":"textarea__scrollable_tq9dn","scrollableWrapper":"textarea__scrollableWrapper_tq9dn","textarea":"textarea__textarea_tq9dn","s":"textarea__s_tq9dn","m":"textarea__m_tq9dn","l":"textarea__l_tq9dn","xl":"textarea__xl_tq9dn","textareaHidden":"textarea__textareaHidden_tq9dn","hasInnerLabel":"textarea__hasInnerLabel_tq9dn","resizeVertical":"textarea__resizeVertical_tq9dn","scrollableWithLabel":"textarea__scrollableWithLabel_tq9dn","focusVisible":"textarea__focusVisible_tq9dn","filled":"textarea__filled_tq9dn"};
-require('./index.css');
-
-var invertedColors = {"input":"textarea__input_1qdl7","hasInnerLabel":"textarea__hasInnerLabel_1qdl7","clearIcon":"textarea__clearIcon_1qdl7","error":"textarea__error_1qdl7","textarea":"textarea__textarea_1qdl7"};
+var invertedColors = {"input":"textarea__input_7tr43","hasInnerLabel":"textarea__hasInnerLabel_7tr43","clearIcon":"textarea__clearIcon_7tr43","error":"textarea__error_7tr43","textarea":"textarea__textarea_7tr43","hint":"textarea__hint_7tr43"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -69,12 +67,21 @@ var Textarea = forwardRef(function (_a, ref) {
     var nativeScrollbar = useMedia([[true, '(max-width: 1023px)']], false)[0];
     nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var textareaRef = useRef(null);
+    var pseudoTextareaRef = useRef(null);
     var _p = useState(false), focused = _p[0], setFocused = _p[1];
     var _q = useState(defaultValue || ''), stateValue = _q[0], setStateValue = _q[1];
     var _r = useState(), scrollableHeight = _r[0], setScrollableHeight = _r[1];
+    var _s = useState(0), scrollPosition = _s[0], setScrollPosition = _s[1];
     var focusVisible = useFocus(textareaRef, 'keyboard')[0];
     var filled = Boolean(uncontrolled ? stateValue : value);
     var hasInnerLabel = label && labelView === 'inner';
+    var hasOverflow = Boolean(maxLength && stateValue.slice(maxLength));
+    useEffect(function () {
+        var pseudoNode = pseudoTextareaRef.current;
+        if (pseudoNode) {
+            pseudoNode.scrollTop = scrollPosition;
+        }
+    }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(function () {
         if (autosize) {
@@ -103,11 +110,18 @@ var Textarea = forwardRef(function (_a, ref) {
         }
     };
     var handleTextareaChange = function (event) {
+        var value = event.target.value;
         if (onChange) {
-            onChange(event, { value: event.target.value });
+            onChange(event, { value: value });
         }
         if (uncontrolled) {
-            setStateValue(event.target.value);
+            setStateValue(value);
+        }
+    };
+    var handleTeaxtareaScroll = function (event) {
+        if (maxLength) {
+            var value_1 = event.target.scrollTop;
+            setScrollPosition(value_1);
         }
     };
     var getValueLength = function () {
@@ -116,18 +130,13 @@ var Textarea = forwardRef(function (_a, ref) {
         }
         return value.length;
     };
-    var getHint = function () {
-        if (showCounter) {
-            return getCounterText(getValueLength(), maxLength);
-        }
-        return hint;
-    };
-    var textareaProps = __assign(__assign({}, restProps), { className: cn(styles.textarea, colorStyles[colors].textarea, styles[size], (_b = {},
-            _b[styles.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
-            _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
-            _b[styles.filled] = nativeScrollbar && filled,
-            _b[styles.resizeVertical] = resize === 'vertical',
-            _b), textareaClassName), autoComplete: autoComplete, disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs([ref, textareaRef]), 'data-test-id': dataTestId, maxLength: maxLength });
+    var textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[size], (_b = {},
+        _b[styles.hasInnerLabel] = nativeScrollbar && hasInnerLabel,
+        _b[colorStyles[colors].hasInnerLabel] = hasInnerLabel,
+        _b[styles.filled] = nativeScrollbar && filled,
+        _b[styles.resizeVertical] = resize === 'vertical',
+        _b), textareaClassName);
+    var textareaProps = __assign(__assign({}, restProps), { className: textareaClassNameCalc, autoComplete: autoComplete, disabled: disabled, onBlur: handleTextareaBlur, onFocus: handleTextareaFocus, onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows: rows, ref: mergeRefs([ref, textareaRef]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll });
     var renderWithNativeScrollbar = function () {
         return autosize ? (React.createElement(TextareaAutosize, __assign({}, textareaProps, { maxRows: maxRows, minRows: minRows, onHeightChange: onHeightChange }))) : (React.createElement("textarea", __assign({}, textareaProps, { style: { maxHeight: maxHeight } })));
     };
@@ -138,6 +147,7 @@ var Textarea = forwardRef(function (_a, ref) {
                 _a[styles.scrollableWithLabel] = label,
                 _a[styles.filled] = filled,
                 _a)), 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, __assign({}, textareaProps, { minRows: minRowsValue })),
             React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, onHeightChange: function (height) {
                     if (autosize) {
@@ -148,9 +158,21 @@ var Textarea = forwardRef(function (_a, ref) {
                     }
                 } })));
     };
+    var getBottomAddons = function () {
+        var _a;
+        var counterIsVisible = Boolean(maxLength && showCounter);
+        return (React.createElement(React.Fragment, null,
+            counterIsVisible && (React.createElement("span", { className: cn(styles.sub, (_a = {},
+                    _a[colorStyles[colors].error] = hasOverflow,
+                    _a[colorStyles[colors].hint] = !hasOverflow,
+                    _a)) }, getCounterText(getValueLength(), maxLength))),
+            bottomAddons));
+    };
     return (React.createElement(FormControl, { className: cn(className), fieldClassName: cn(fieldClassName, (_c = {},
             _c[styles.focusVisible] = focusVisible,
-            _c)), 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()));
+            _c)), 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/esm/PseudoTextArea-2570e442.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/esm/PseudoTextArea-2570e442.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+var styles = {"scrollable":"textarea__scrollable_1a7jc","scrollableWrapper":"textarea__scrollableWrapper_1a7jc","textarea":"textarea__textarea_1a7jc","s":"textarea__s_1a7jc","m":"textarea__m_1a7jc","l":"textarea__l_1a7jc","xl":"textarea__xl_1a7jc","textareaHidden":"textarea__textareaHidden_1a7jc","hasInnerLabel":"textarea__hasInnerLabel_1a7jc","resizeVertical":"textarea__resizeVertical_1a7jc","pseudoTextarea":"textarea__pseudoTextarea_1a7jc","overflow":"textarea__overflow_1a7jc","nativeScrollbar":"textarea__nativeScrollbar_1a7jc","customScrollbar":"textarea__customScrollbar_1a7jc","sub":"textarea__sub_1a7jc","scrollableWithLabel":"textarea__scrollableWithLabel_1a7jc","focusVisible":"textarea__focusVisible_1a7jc","filled":"textarea__filled_1a7jc"};
+require('./index.css');
+
+var PseudoTextArea = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, _c = _a.pseudoTextareaClassName, pseudoTextareaClassName = _c === void 0 ? '' : _c, maxLength = _a.maxLength, stateValue = _a.stateValue;
+    return (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/esm/components/PseudoTextArea.js

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

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

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

package/textarea/esm/components/index.js

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

package/textarea/esm/default.css

@@ -1,6 +1,7 @@
-/* hash: 2ex7r */
+/* hash: 1e2bf */
 :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_vnnvh {
+.textarea__input_1c4xt {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__input_vnnvh:-webkit-autofill {
+.textarea__input_1c4xt:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
 }
-.textarea__input_vnnvh::placeholder {
+.textarea__input_1c4xt::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_vnnvh::placeholder {
+.textarea__hasInnerLabel_1c4xt::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
-.textarea__clearIcon_vnnvh {
+.textarea__clearIcon_1c4xt {
     color: var(--color-light-graphic-primary);
 }
 /* READ-ONLY STATE */
-.textarea__input_vnnvh:read-only {
+.textarea__input_1c4xt:read-only {
     color: var(--input-read-only-color)
 }
-.textarea__input_vnnvh:read-only:focus::placeholder {
+.textarea__input_1c4xt:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
     }
 /* DISABLED STATE */
-.textarea__input_vnnvh:disabled {
+.textarea__input_1c4xt:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* FOCUS STATE */
-.textarea__input_vnnvh:focus::placeholder {
+.textarea__input_1c4xt:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
 /* ERROR STATE */
-.textarea__error_vnnvh {
+.textarea__error_1c4xt {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 }
-.textarea__textarea_vnnvh {
+: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_1c4xt {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.textarea__textarea_vnnvh::placeholder {
+.textarea__textarea_1c4xt::placeholder {
     color: var(--input-placeholder-color);
 }
-.textarea__hasInnerLabel_vnnvh::placeholder {
+.textarea__hasInnerLabel_1c4xt::placeholder {
     color: var(--input-with-label-placeholder-color);
 }
 /* DISABLED STATE */
-.textarea__textarea_vnnvh:disabled {
+.textarea__textarea_1c4xt:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
 }
 /* READ-ONLY STATE */
-.textarea__textarea_vnnvh:read-only {
+.textarea__textarea_1c4xt:read-only {
     color: var(--input-read-only-color);
 }
 /* FOCUS STATE */
-.textarea__textarea_vnnvh:focus::placeholder {
+.textarea__textarea_1c4xt:focus::placeholder {
     color: var(--input-focus-placeholder-color);
 }
+.textarea__hint_1c4xt {
+    color: var(--form-control-hint-color);
+}
+.textarea__error_1c4xt {
+    color: var(--form-control-error-color);
+}

package/textarea/esm/index.css

@@ -1,6 +1,7 @@
-/* hash: akchg */
+/* hash: 1wfjg */
 :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_tq9dn {
+.textarea__scrollable_1a7jc {
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 100%;
 }
-.textarea__scrollableWrapper_tq9dn {
+.textarea__scrollableWrapper_1a7jc {
     box-sizing: border-box
 }
-.textarea__scrollableWrapper_tq9dn > * {
+.textarea__scrollableWrapper_1a7jc > * {
         font-family: var(--font-family);
     }
-.textarea__textarea_tq9dn {
+.textarea__textarea_1a7jc {
     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_tq9dn.textarea__s_tq9dn {
+.textarea__textarea_1a7jc.textarea__s_1a7jc {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__m_tq9dn {
+.textarea__textarea_1a7jc.textarea__m_1a7jc {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__l_tq9dn {
+.textarea__textarea_1a7jc.textarea__l_1a7jc {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__xl_tq9dn {
+.textarea__textarea_1a7jc.textarea__xl_1a7jc {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
     }
-.textarea__textarea_tq9dn.textarea__textareaHidden_tq9dn {
+.textarea__textarea_1a7jc.textarea__textareaHidden_1a7jc {
         position: absolute;
         transform: translateX(-10000px);
     }
-.textarea__textarea_tq9dn::placeholder {
+.textarea__textarea_1a7jc::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
 }
-.textarea__hasInnerLabel_tq9dn::placeholder {
+.textarea__hasInnerLabel_1a7jc::placeholder {
     opacity: 0;
 }
-.textarea__resizeVertical_tq9dn {
+.textarea__resizeVertical_1a7jc {
     resize: vertical;
 }
+.textarea__pseudoTextarea_1a7jc {
+    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_1a7jc span {
+        color: transparent;
+    }
+.textarea__pseudoTextarea_1a7jc .textarea__overflow_1a7jc {
+        background-color: var(--color-light-graphic-negative-alpha-40);
+    }
+.textarea__pseudoTextarea_1a7jc.textarea__nativeScrollbar_1a7jc {
+        overflow: auto;
+    }
+.textarea__pseudoTextarea_1a7jc.textarea__customScrollbar_1a7jc {
+        max-height: none;
+    }
+.textarea__sub_1a7jc {
+    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_tq9dn.textarea__s_tq9dn, .textarea__scrollable_tq9dn.textarea__s_tq9dn {
+.textarea__textarea_1a7jc.textarea__s_1a7jc, .textarea__scrollable_1a7jc.textarea__s_1a7jc {
         min-height: var(--textarea-s-min-height);
     }
-.textarea__textarea_tq9dn.textarea__m_tq9dn, .textarea__scrollable_tq9dn.textarea__m_tq9dn {
+.textarea__textarea_1a7jc.textarea__m_1a7jc, .textarea__scrollable_1a7jc.textarea__m_1a7jc {
         min-height: var(--textarea-m-min-height);
     }
-.textarea__textarea_tq9dn.textarea__l_tq9dn, .textarea__scrollable_tq9dn.textarea__l_tq9dn {
+.textarea__textarea_1a7jc.textarea__l_1a7jc, .textarea__scrollable_1a7jc.textarea__l_1a7jc {
         min-height: var(--textarea-l-min-height);
     }
-.textarea__textarea_tq9dn.textarea__xl_tq9dn, .textarea__scrollable_tq9dn.textarea__xl_tq9dn {
+.textarea__textarea_1a7jc.textarea__xl_1a7jc, .textarea__scrollable_1a7jc.textarea__xl_1a7jc {
         min-height: var(--textarea-xl-min-height);
     }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollable_tq9dn.textarea__s_tq9dn .textarea__textarea_tq9dn, .textarea__scrollable_tq9dn.textarea__m_tq9dn .textarea__textarea_tq9dn, .textarea__scrollable_tq9dn.textarea__l_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollable_1a7jc.textarea__s_1a7jc .textarea__textarea_1a7jc, .textarea__scrollable_1a7jc.textarea__m_1a7jc .textarea__textarea_1a7jc, .textarea__scrollable_1a7jc.textarea__l_1a7jc .textarea__textarea_1a7jc {
             padding-left: var(--gap-s);
             padding-right: var(--gap-s);
         }
-.textarea__scrollable_tq9dn.textarea__xl_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollable_1a7jc.textarea__xl_1a7jc .textarea__textarea_1a7jc {
             padding-left: var(--gap-m);
             padding-right: var(--gap-m);
         }
 /* Паддинги взяты из стилей form-control */
-.textarea__scrollableWithLabel_tq9dn.textarea__s_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__s_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-s-paddings);
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__m_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__m_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-m-paddings);
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__l_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__l_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-l-paddings);
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__xl_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__xl_1a7jc .textarea__textarea_1a7jc {
         padding: var(--form-control-labeled-xl-paddings);
     }
 /* DISABLED STATE */
-.textarea__textarea_tq9dn:disabled {
+.textarea__textarea_1a7jc:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
 }
 /* READ-ONLY STATE */
-.textarea__textarea_tq9dn:read-only {
+.textarea__textarea_1a7jc:read-only {
     cursor: var(--disabled-cursor);
 }
 /* FOCUS STATE */
-.textarea__textarea_tq9dn:focus.textarea__hasInnerLabel_tq9dn::placeholder {
+.textarea__textarea_1a7jc:focus.textarea__hasInnerLabel_1a7jc::placeholder {
     opacity: 1;
 }
-.textarea__focusVisible_tq9dn {
+.textarea__focusVisible_1a7jc {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
 /* FILLED STATE */
-.textarea__textarea_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc {
     padding-top: 0
 }
-.textarea__textarea_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__s_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__s_1a7jc {
         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_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__m_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__m_1a7jc {
         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_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__l_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__l_1a7jc {
         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_tq9dn.textarea__filled_tq9dn.textarea__hasInnerLabel_tq9dn.textarea__xl_tq9dn {
+.textarea__textarea_1a7jc.textarea__filled_1a7jc.textarea__hasInnerLabel_1a7jc.textarea__xl_1a7jc {
         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_tq9dn.textarea__filled_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc .textarea__textarea_1a7jc {
         padding-top: 0;
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__s_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__s_1a7jc {
         margin-top: var(--textarea-s-filled-margin-top);
         min-height: var(--textarea-s-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__s_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__s_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-s-filled-min-height);
         }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__m_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__m_1a7jc {
         margin-top: var(--textarea-m-filled-margin-top);
         min-height: var(--textarea-m-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__m_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__m_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-m-filled-min-height);
         }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__l_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__l_1a7jc {
         margin-top: var(--textarea-l-filled-margin-top);
         min-height: var(--textarea-l-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__l_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__l_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-l-filled-min-height);
         }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__xl_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__xl_1a7jc {
         margin-top: var(--textarea-xl-filled-margin-top);
         min-height: var(--textarea-xl-filled-min-height)
     }
-.textarea__scrollableWithLabel_tq9dn.textarea__filled_tq9dn.textarea__xl_tq9dn .textarea__textarea_tq9dn {
+.textarea__scrollableWithLabel_1a7jc.textarea__filled_1a7jc.textarea__xl_1a7jc .textarea__textarea_1a7jc {
             min-height: var(--textarea-xl-filled-min-height);
         }

package/textarea/esm/index.js

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