@alfalab/core-components 39.4.0 → 40.1.0

package/textarea/inverted.css

@@ -1,12 +1,12 @@
-/* hash: 180bx */
+/* hash: otlv2 */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary-inverted: #fff;
     --color-light-text-negative: #d91d0b;
     --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-    --color-light-text-secondary-inverted: rgba(255, 255, 255, 0.7);
-    --color-light-text-tertiary-inverted: rgba(255, 255, 255, 0.4); /* 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 */
+    --color-light-text-secondary: rgba(60, 60, 67, 0.66);
+    --color-light-text-secondary-inverted: rgba(235, 235, 245, 0.54);
+    --color-light-text-tertiary-inverted: rgba(235, 235, 245, 0.32); /* 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 {
@@ -39,28 +39,28 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_fpqgd {
+} .textarea__input_zu45c {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_fpqgd:-webkit-autofill {
+} .textarea__input_zu45c:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .textarea__input_fpqgd::placeholder {
+} .textarea__input_zu45c::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_fpqgd::placeholder {
+} .textarea__hasInnerLabel_zu45c::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} .textarea__clearIcon_fpqgd {
+} .textarea__clearIcon_zu45c {
     color: var(--color-light-graphic-primary-inverted);
-} /* READ-ONLY STATE */ .textarea__input_fpqgd:read-only {
+} /* READ-ONLY STATE */ .textarea__input_zu45c:read-only {
     color: var(--input-inverted-read-only-color)
-} .textarea__input_fpqgd:read-only:focus::placeholder {
+} .textarea__input_zu45c:read-only:focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_fpqgd:disabled {
+    } /* DISABLED STATE */ .textarea__input_zu45c:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .textarea__input_fpqgd:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_zu45c:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_fpqgd {
+} /* ERROR STATE */ .textarea__error_zu45c {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 } :root {
@@ -84,22 +84,22 @@
     /* font */
 
     /* border-radius */
-} .textarea__textarea_fpqgd {
+} .textarea__textarea_zu45c {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_fpqgd::placeholder {
+} .textarea__textarea_zu45c::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_fpqgd::placeholder {
+} .textarea__hasInnerLabel_zu45c::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_fpqgd:disabled {
+} /* DISABLED STATE */ .textarea__textarea_zu45c:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_fpqgd:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_zu45c:read-only {
     color: var(--input-inverted-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_fpqgd:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_zu45c:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} .textarea__hint_fpqgd {
+} .textarea__hint_zu45c {
     color: var(--form-control-hint-color);
-} .textarea__error_fpqgd {
+} .textarea__error_zu45c {
     color: var(--form-control-error-color);
 }

package/textarea/modern/Component.js

@@ -3,14 +3,13 @@ import mergeRefs from 'react-merge-refs';
 import TextareaAutosize from 'react-textarea-autosize';
 import cn from 'classnames';
 import { FormControl } from '../../form-control/modern';
-import { Scrollbar } from '../../scrollbar/modern';
 import { useMedia, useFocus } from '@alfalab/hooks';
-import { s as styles, P as PseudoTextArea } from './PseudoTextArea-bc9275a7.js';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-35ad54ca.js';
 
-const defaultColors = {"input":"textarea__input_pbkq2","hasInnerLabel":"textarea__hasInnerLabel_pbkq2","clearIcon":"textarea__clearIcon_pbkq2","error":"textarea__error_pbkq2","textarea":"textarea__textarea_pbkq2","hint":"textarea__hint_pbkq2"};
+const defaultColors = {"input":"textarea__input_546ta","hasInnerLabel":"textarea__hasInnerLabel_546ta","clearIcon":"textarea__clearIcon_546ta","error":"textarea__error_546ta","textarea":"textarea__textarea_546ta","hint":"textarea__hint_546ta"};
 require('./default.css');
 
-const invertedColors = {"input":"textarea__input_fpqgd","hasInnerLabel":"textarea__hasInnerLabel_fpqgd","clearIcon":"textarea__clearIcon_fpqgd","error":"textarea__error_fpqgd","textarea":"textarea__textarea_fpqgd","hint":"textarea__hint_fpqgd"};
+const invertedColors = {"input":"textarea__input_zu45c","hasInnerLabel":"textarea__hasInnerLabel_zu45c","clearIcon":"textarea__clearIcon_zu45c","error":"textarea__error_zu45c","textarea":"textarea__textarea_zu45c","hint":"textarea__hint_zu45c"};
 require('./inverted.css');
 
 const colorStyles = {
@@ -18,20 +17,19 @@ const colorStyles = {
     inverted: invertedColors,
 };
 const getDefaultCounterText = (textLength, maxLength = 0) => `${textLength}/${maxLength} символов`;
-const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's', 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, nativeScrollbar: nativeScrollbarProp, ...restProps }, ref) => {
+const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's', 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, ...restProps }, ref) => {
     const uncontrolled = value === undefined;
     let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
-    nativeScrollbar = resize !== 'none' || Boolean(nativeScrollbarProp ?? nativeScrollbar);
+    nativeScrollbar = 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 && value?.slice(maxLength)) || (maxLength && stateValue.slice(maxLength)));
+    const hasOverflow = Boolean(maxLength && allowOverflow && (value?.slice(maxLength) || stateValue.slice(maxLength)));
     useEffect(() => {
         const pseudoNode = pseudoTextareaRef.current;
         if (pseudoNode) {
@@ -40,19 +38,10 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
     }, [scrollPosition, stateValue]);
     // Хак, так как react-textarea-autosize перестал поддерживать maxHeight
     useEffect(() => {
-        if (autosize) {
-            if (nativeScrollbar &&
-                maxHeight &&
-                textareaRef.current &&
-                textareaRef.current.style) {
-                textareaRef.current.style.maxHeight = `${maxHeight}px`;
-            }
+        if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) {
+            textareaRef.current.style.maxHeight = `${maxHeight}px`;
         }
-        else if (!nativeScrollbar && textareaRef.current) {
-            const textareaHeight = textareaRef.current.scrollHeight;
-            setScrollableHeight(textareaHeight);
-        }
-    }, [autosize, maxHeight, nativeScrollbar]);
+    }, [autosize, maxHeight]);
     const handleTextareaFocus = (event) => {
         setFocused(true);
         if (onFocus) {
@@ -87,9 +76,10 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         return value.length;
     };
     const textareaClassNameCalc = cn(styles.textarea, colorStyles[colors].textarea, styles[size], {
-        [styles.hasInnerLabel]: nativeScrollbar && hasInnerLabel,
+        [styles.customScrollbar]: !nativeScrollbar,
+        [styles.hasInnerLabel]: hasInnerLabel,
         [colorStyles[colors].hasInnerLabel]: hasInnerLabel,
-        [styles.filled]: nativeScrollbar && filled,
+        [styles.filled]: filled,
         [styles.resizeVertical]: resize === 'vertical',
     }, textareaClassName);
     const textareaProps = {
@@ -97,6 +87,7 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         className: textareaClassNameCalc,
         autoComplete,
         disabled,
+        maxLength: allowOverflow ? undefined : maxLength,
         onBlur: handleTextareaBlur,
         onFocus: handleTextareaFocus,
         onChange: handleTextareaChange,
@@ -106,24 +97,6 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
         'data-test-id': dataTestId,
         onScroll: handleTeaxtareaScroll,
     };
-    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 } },
-            hasOverflow && (React.createElement(PseudoTextArea, { value: value ?? stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.customScrollbar), ref: pseudoTextareaRef })),
-            React.createElement(TextareaAutosize, { ...textareaProps, minRows: minRowsValue, style: { overflow: 'hidden' } }),
-            React.createElement(TextareaAutosize, { className: cn(textareaProps.className, styles.textareaHidden), rows: textareaProps.rows, maxRows: maxRows, minRows: minRowsValue, value: textareaProps.value, role: 'none', onHeightChange: (height) => {
-                    if (autosize) {
-                        setScrollableHeight(height);
-                        if (onHeightChange) {
-                            onHeightChange(height);
-                        }
-                    }
-                } })));
-    };
     const getBottomAddons = () => {
         const counterIsVisible = Boolean(maxLength && showCounter);
         return (React.createElement(React.Fragment, null,
@@ -135,9 +108,12 @@ const Textarea = forwardRef(({ autoComplete = 'on', autosize = true, size = 's',
     };
     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: hint, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: getBottomAddons() }, nativeScrollbar ? (React.createElement(React.Fragment, null,
-        hasOverflow && (React.createElement(PseudoTextArea, { value: value ?? stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, styles.nativeScrollbar), ref: pseudoTextareaRef })),
-        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() },
+        React.createElement(React.Fragment, null,
+            hasOverflow && (React.createElement(PseudoTextArea, { value: value ?? stateValue, size: size, maxLength: maxLength, pseudoTextareaClassName: cn(textareaClassNameCalc, {
+                    [styles.nativeScrollbar]: nativeScrollbar,
+                }), 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/PseudoTextArea-35ad54ca.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+
+const styles = {"textarea":"textarea__textarea_jyj9r","s":"textarea__s_jyj9r","m":"textarea__m_jyj9r","l":"textarea__l_jyj9r","xl":"textarea__xl_jyj9r","customScrollbar":"textarea__customScrollbar_jyj9r","hasInnerLabel":"textarea__hasInnerLabel_jyj9r","resizeVertical":"textarea__resizeVertical_jyj9r","pseudoTextarea":"textarea__pseudoTextarea_jyj9r","overflow":"textarea__overflow_jyj9r","nativeScrollbar":"textarea__nativeScrollbar_jyj9r","sub":"textarea__sub_jyj9r","focusVisible":"textarea__focusVisible_jyj9r","filled":"textarea__filled_jyj9r"};
+require('./index.css');
+
+const PseudoTextArea = forwardRef(({ size = 's', pseudoTextareaClassName, maxLength, value }, ref) => (React.createElement("div", { className: cn(styles.pseudoTextarea, styles[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/components/PseudoTextArea.js

@@ -1,3 +1,3 @@
 import 'react';
 import 'classnames';
-export { P as PseudoTextArea } from '../PseudoTextArea-bc9275a7.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-35ad54ca.js';

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

@@ -1 +1 @@
-export * from "../PseudoTextArea-bc9275a7";
+export * from "../PseudoTextArea-35ad54ca";

package/textarea/modern/components/index.js

@@ -1,3 +1,3 @@
-export { P as PseudoTextArea } from '../PseudoTextArea-bc9275a7.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-35ad54ca.js';
 import 'react';
 import 'classnames';

package/textarea/modern/default.css

@@ -1,11 +1,11 @@
-/* hash: 9vh4z */
+/* hash: 1ppv4 */
 :root {
 } /* deprecated */ :root {
-    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary: #0e0e0e;
     --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); /* 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 */
+    --color-light-text-primary: #0e0e0e;
+    --color-light-text-secondary: rgba(60, 60, 67, 0.66);
+    --color-light-text-tertiary: rgba(60, 60, 67, 0.4); /* 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 {
@@ -38,28 +38,28 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_pbkq2 {
+} .textarea__input_546ta {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_pbkq2:-webkit-autofill {
+} .textarea__input_546ta:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .textarea__input_pbkq2::placeholder {
+} .textarea__input_546ta::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_pbkq2::placeholder {
+} .textarea__hasInnerLabel_546ta::placeholder {
     color: var(--input-with-label-placeholder-color);
-} .textarea__clearIcon_pbkq2 {
+} .textarea__clearIcon_546ta {
     color: var(--color-light-graphic-primary);
-} /* READ-ONLY STATE */ .textarea__input_pbkq2:read-only {
+} /* READ-ONLY STATE */ .textarea__input_546ta:read-only {
     color: var(--input-read-only-color)
-} .textarea__input_pbkq2:read-only:focus::placeholder {
+} .textarea__input_546ta:read-only:focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_pbkq2:disabled {
+    } /* DISABLED STATE */ .textarea__input_546ta:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .textarea__input_pbkq2:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_546ta:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_pbkq2 {
+} /* ERROR STATE */ .textarea__error_546ta {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 } :root {
@@ -83,22 +83,22 @@
     /* font */
 
     /* border-radius */
-} .textarea__textarea_pbkq2 {
+} .textarea__textarea_546ta {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_pbkq2::placeholder {
+} .textarea__textarea_546ta::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_pbkq2::placeholder {
+} .textarea__hasInnerLabel_546ta::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_pbkq2:disabled {
+} /* DISABLED STATE */ .textarea__textarea_546ta:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_pbkq2:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_546ta:read-only {
     color: var(--input-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_pbkq2:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_546ta:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} .textarea__hint_pbkq2 {
+} .textarea__hint_546ta {
     color: var(--form-control-hint-color);
-} .textarea__error_pbkq2 {
+} .textarea__error_546ta {
     color: var(--form-control-error-color);
 }

package/textarea/modern/index.css

@@ -1,8 +1,10 @@
-/* hash: 1l4do */
+/* hash: 1hgit */
 :root {
 } /* deprecated */ :root {
-    --color-light-border-link: #007aff; /* 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 */
+    --color-light-border-link: #0072ef; /* 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 */
     --color-light-graphic-negative-alpha-40: rgba(241, 80, 69, 0.4);
+    --color-light-graphic-primary-alpha-30: rgba(14, 14, 14, 0.3);
+    --color-light-graphic-primary-alpha-60: rgba(14, 14, 14, 0.6);
 } :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 {
@@ -13,15 +15,12 @@
 
     /* Hard up */
 } :root {
+    --border-radius-circle: 50%;
 } :root {
     --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-    --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
     --disabled-cursor: not-allowed;
     --size-s-height: 48px;
     --size-m-height: 56px;
@@ -44,10 +43,6 @@
     --form-control-xl-min-height: var(--size-xl-height);
 
     /* paddings */
-    --form-control-labeled-s-paddings: 24px var(--gap-s) 4px;
-    --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 */
@@ -87,16 +82,7 @@
     --textarea-xl-filled-min-height: calc(
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-margin-top)
     );
-} .textarea__scrollable_nbto0 {
-    position: relative;
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-} .textarea__scrollableWrapper_nbto0 {
-    box-sizing: border-box
-} .textarea__scrollableWrapper_nbto0 > * {
-        font-family: var(--font-family);
-    } .textarea__textarea_nbto0 {
+} .textarea__textarea_jyj9r {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -111,28 +97,54 @@
     box-sizing: border-box;
     resize: none;
     -webkit-appearance: none
-} .textarea__textarea_nbto0.textarea__s_nbto0 {
+} .textarea__textarea_jyj9r.textarea__s_jyj9r {
         padding-top: var(--textarea-s-padding-top);
         padding-bottom: var(--gap-xs);
-    } .textarea__textarea_nbto0.textarea__m_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__m_jyj9r {
         padding-top: var(--textarea-m-padding-top);
         padding-bottom: var(--gap-xs);
-    } .textarea__textarea_nbto0.textarea__l_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__l_jyj9r {
         padding-top: var(--textarea-l-padding-top);
         padding-bottom: var(--gap-xs);
-    } .textarea__textarea_nbto0.textarea__xl_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__xl_jyj9r {
         padding-top: var(--textarea-xl-padding-top);
         padding-bottom: var(--gap-xs);
-    } .textarea__textarea_nbto0.textarea__textareaHidden_nbto0 {
-        position: absolute;
-        transform: translateX(-10000px);
-    } .textarea__textarea_nbto0::placeholder {
+    } .textarea__customScrollbar_jyj9r {
+    overflow: auto;
+    overflow: overlay;
+    cursor: auto;
+} .textarea__customScrollbar_jyj9r::-webkit-scrollbar {
+        width: 12px;
+    } .textarea__customScrollbar_jyj9r::-webkit-scrollbar-track {
+        background-color: transparent;
+    } .textarea__customScrollbar_jyj9r::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+    } .textarea__customScrollbar_jyj9r::-webkit-scrollbar-thumb {
+        background-color: var(--color-light-graphic-primary-alpha-30);
+        border-radius: var(--border-radius-circle) / 6px;
+        border-color: transparent;
+        border-style: solid;
+        border-width: 4px;
+        background-clip: padding-box;
+        min-height: 40px;
+    } .textarea__customScrollbar_jyj9r::-webkit-scrollbar-thumb:hover {
+        border-radius: var(--border-radius-circle) / 7px;
+        border-width: 4px 3px;
+    } .textarea__customScrollbar_jyj9r::-webkit-scrollbar-thumb:active {
+        background-color: var(--color-light-graphic-primary-alpha-60);
+    } .textarea__customScrollbar_jyj9r::-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_jyj9r::-webkit-scrollbar-button,
+    .textarea__customScrollbar_jyj9r::-webkit-scrollbar-corner {
+        display: none;
+    } .textarea__textarea_jyj9r::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .textarea__hasInnerLabel_nbto0::placeholder {
+} .textarea__hasInnerLabel_jyj9r::placeholder {
     opacity: 0;
-} .textarea__resizeVertical_nbto0 {
+} .textarea__resizeVertical_jyj9r {
     resize: vertical;
-} .textarea__pseudoTextarea_nbto0 {
+} .textarea__pseudoTextarea_jyj9r {
     position: absolute;
     top: 0;
     left: 0;
@@ -143,15 +155,13 @@
     z-index: -1;
     overflow: hidden;
     max-height: 100%
-} .textarea__pseudoTextarea_nbto0 span {
+} .textarea__pseudoTextarea_jyj9r span {
         color: transparent;
-    } .textarea__pseudoTextarea_nbto0 .textarea__overflow_nbto0 {
+    } .textarea__pseudoTextarea_jyj9r .textarea__overflow_jyj9r {
         background-color: var(--color-light-graphic-negative-alpha-40);
-    } .textarea__pseudoTextarea_nbto0.textarea__nativeScrollbar_nbto0 {
+    } .textarea__pseudoTextarea_jyj9r.textarea__nativeScrollbar_jyj9r {
         overflow: auto;
-    } .textarea__pseudoTextarea_nbto0.textarea__customScrollbar_nbto0 {
-        max-height: none;
-    } .textarea__sub_nbto0 {
+    } .textarea__sub_jyj9r {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -159,84 +169,48 @@
     /* adjusting overall height 👌 */
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
-} /* SIZES */ .textarea__textarea_nbto0.textarea__s_nbto0, .textarea__scrollable_nbto0.textarea__s_nbto0 {
+} /* SIZES */ .textarea__textarea_jyj9r.textarea__s_jyj9r {
         min-height: var(--textarea-s-min-height);
-    } .textarea__textarea_nbto0.textarea__m_nbto0, .textarea__scrollable_nbto0.textarea__m_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__m_jyj9r {
         min-height: var(--textarea-m-min-height);
-    } .textarea__textarea_nbto0.textarea__l_nbto0, .textarea__scrollable_nbto0.textarea__l_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__l_jyj9r {
         min-height: var(--textarea-l-min-height);
-    } .textarea__textarea_nbto0.textarea__xl_nbto0, .textarea__scrollable_nbto0.textarea__xl_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__xl_jyj9r {
         min-height: var(--textarea-xl-min-height);
-    } /* Паддинги взяты из стилей form-control */ .textarea__scrollable_nbto0.textarea__s_nbto0 .textarea__textarea_nbto0, .textarea__scrollable_nbto0.textarea__m_nbto0 .textarea__textarea_nbto0, .textarea__scrollable_nbto0.textarea__l_nbto0 .textarea__textarea_nbto0 {
-            padding-left: var(--gap-s);
-            padding-right: var(--gap-s);
-        } .textarea__scrollable_nbto0.textarea__xl_nbto0 .textarea__textarea_nbto0 {
-            padding-left: var(--gap-m);
-            padding-right: var(--gap-m);
-        } /* Паддинги взяты из стилей form-control */ .textarea__scrollableWithLabel_nbto0.textarea__s_nbto0 .textarea__textarea_nbto0 {
-        padding: var(--form-control-labeled-s-paddings);
-    } .textarea__scrollableWithLabel_nbto0.textarea__m_nbto0 .textarea__textarea_nbto0 {
-        padding: var(--form-control-labeled-m-paddings);
-    } .textarea__scrollableWithLabel_nbto0.textarea__l_nbto0 .textarea__textarea_nbto0 {
-        padding: var(--form-control-labeled-l-paddings);
-    } .textarea__scrollableWithLabel_nbto0.textarea__xl_nbto0 .textarea__textarea_nbto0 {
-        padding: var(--form-control-labeled-xl-paddings);
-    } /* DISABLED STATE */ .textarea__textarea_nbto0:disabled {
+    } /* DISABLED STATE */ .textarea__textarea_jyj9r:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* READ-ONLY STATE */ .textarea__textarea_nbto0:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_jyj9r:read-only {
     cursor: var(--disabled-cursor);
-} /* FOCUS STATE */ .textarea__textarea_nbto0:focus.textarea__hasInnerLabel_nbto0::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_jyj9r:focus.textarea__hasInnerLabel_jyj9r::placeholder {
     opacity: 1;
-} .textarea__focusVisible_nbto0 {
+} .textarea__focusVisible_jyj9r {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* FILLED STATE */ .textarea__textarea_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0 {
+} /* FILLED STATE */ .textarea__textarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r {
     padding-top: 0
-} .textarea__textarea_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__s_nbto0 {
+} .textarea__textarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__s_jyj9r {
         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_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__m_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__m_jyj9r {
         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_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__l_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__l_jyj9r {
         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_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__xl_nbto0 {
+    } .textarea__textarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__xl_jyj9r {
         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_nbto0.textarea__filled_nbto0 .textarea__textarea_nbto0 {
-        padding-top: 0;
-    } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__s_nbto0 {
-        margin-top: var(--textarea-s-filled-margin-top);
-        min-height: var(--textarea-s-filled-min-height)
-    } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__s_nbto0 .textarea__textarea_nbto0 {
-            min-height: var(--textarea-s-filled-min-height);
-        } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__m_nbto0 {
-        margin-top: var(--textarea-m-filled-margin-top);
-        min-height: var(--textarea-m-filled-min-height)
-    } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__m_nbto0 .textarea__textarea_nbto0 {
-            min-height: var(--textarea-m-filled-min-height);
-        } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__l_nbto0 {
-        margin-top: var(--textarea-l-filled-margin-top);
-        min-height: var(--textarea-l-filled-min-height)
-    } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__l_nbto0 .textarea__textarea_nbto0 {
-            min-height: var(--textarea-l-filled-min-height);
-        } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__xl_nbto0 {
-        margin-top: var(--textarea-xl-filled-margin-top);
-        min-height: var(--textarea-xl-filled-min-height)
-    } .textarea__scrollableWithLabel_nbto0.textarea__filled_nbto0.textarea__xl_nbto0 .textarea__textarea_nbto0 {
-            min-height: var(--textarea-xl-filled-min-height);
-        } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__s_nbto0 {
+    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__s_jyj9r {
         height: calc(100% - var(--textarea-s-filled-margin-top));
-    } .textarea__pseudoTextarea_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__m_nbto0 {
+    } .textarea__pseudoTextarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__m_jyj9r {
         height: calc(100% - var(--textarea-m-filled-margin-top));
-    } .textarea__pseudoTextarea_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__l_nbto0 {
+    } .textarea__pseudoTextarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__l_jyj9r {
         height: calc(100% - var(--textarea-l-filled-margin-top));
-    } .textarea__pseudoTextarea_nbto0.textarea__filled_nbto0.textarea__hasInnerLabel_nbto0.textarea__xl_nbto0 {
+    } .textarea__pseudoTextarea_jyj9r.textarea__filled_jyj9r.textarea__hasInnerLabel_jyj9r.textarea__xl_jyj9r {
         height: calc(100% - var(--textarea-xl-filled-margin-top));
     }

package/textarea/modern/index.js

@@ -4,6 +4,5 @@ import 'react-merge-refs';
 import 'react-textarea-autosize';
 import 'classnames';
 import '../../form-control/modern';
-import '../../scrollbar/modern';
 import '@alfalab/hooks';
-import './PseudoTextArea-bc9275a7.js';
+import './PseudoTextArea-35ad54ca.js';