@alfalab/core-components 47.26.0-beta.0 → 47.26.0-beta.191

package/textarea/cssm/typings.d.ts

@@ -0,0 +1,133 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
+type NativeProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+type TextareaProps = Omit<NativeProps, 'size' | 'style' | 'value' | 'defaultValue' | 'onChange'> & TextareaIncomeProps;
+type TextareaIncomeProps = {
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Начальное значение поля
+     */
+    defaultValue?: string;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Размер компонента
+     * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 48 | 56 | 64 | 72;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: React.ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
+    /**
+     * Слот слева
+     */
+    leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: React.ReactNode;
+    /**
+     * Слот под компонентом
+     */
+    bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс textarea
+     */
+    textareaClassName?: string;
+    /**
+     * Управление возможностью подстраивать высоту компонента под высоту текста
+     */
+    autosize?: boolean;
+    /**
+     * Максимальное количество отображаемых строк (работает только вместе с autosize)
+     */
+    maxRows?: number;
+    /**
+     * Минимальное количество отображаемых строк (работает только вместе c autosize)
+     */
+    minRows?: number;
+    /**
+     * Максимальная высота элемента
+     */
+    maxHeight?: number;
+    /**
+     * Управление возможностью изменения размеров компонента (не работает вместе c autosize)
+     */
+    resize?: 'vertical' | 'none';
+    /**
+     * Обработчик ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик события изменения высоты компонента (работает только вместе c autosize)
+     */
+    onHeightChange?: (height?: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для FormControl используется модификатор -form-control
+     */
+    dataTestId?: string;
+    /**
+     * Максимальное количество символов (native prop)
+     */
+    maxLength?: number;
+    /**
+     * Показывать счетчик введенных символов
+     */
+    showCounter?: boolean;
+    /**
+     * Функция, возвращающая текст для счетчика
+     */
+    getCounterText?: (textLength: number, maxLength?: number) => string;
+    /**
+     * Нужно ли использовать нативный скроллбар.
+     */
+    nativeScrollbar?: boolean;
+    /**
+     * Разрешить переполнение, если количество символов превышает maxLength
+     */
+    allowOverflow?: boolean;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Ref для обертки textarea
+     */
+    wrapperRef?: React.Ref<HTMLDivElement> | null;
+};
+export { TextareaProps, TextareaIncomeProps };

package/textarea/cssm/utils.d.ts

@@ -0,0 +1,10 @@
+declare function getTextareaTestIds(dataTestId: string): {
+    textarea: string;
+    inputWrapper: string;
+    inputWrapperInner: string;
+    leftAddons: string;
+    rightAddons: string;
+    error: string;
+    hint: string;
+};
+export { getTextareaTestIds };

package/textarea/default.css

@@ -42,26 +42,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_1gz63 {
+} .textarea__input_1ssnm {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_1gz63:-webkit-autofill {
+} .textarea__input_1ssnm:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .textarea__input_1gz63::placeholder {
+} .textarea__input_1ssnm::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_1gz63::placeholder {
+} .textarea__hasInnerLabel_1ssnm::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_1gz63:read-only:not(.textarea__disableUserInput_1gz63) {
+} /* READ-ONLY STATE */ .textarea__input_1ssnm:read-only:not(.textarea__disableUserInput_1ssnm) {
     color: var(--input-read-only-color)
-} .textarea__input_1gz63:read-only:not(.textarea__disableUserInput_1gz63):focus::placeholder {
+} .textarea__input_1ssnm:read-only:not(.textarea__disableUserInput_1ssnm):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_1gz63:disabled {
+    } /* DISABLED STATE */ .textarea__input_1ssnm:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .textarea__input_1gz63:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_1ssnm:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_1gz63 {
+} /* ERROR STATE */ .textarea__error_1ssnm {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 } :root {
@@ -93,22 +93,22 @@
     /* color mobile */
 
     /* error mobile */
-} .textarea__textarea_1gz63 {
+} .textarea__textarea_1ssnm {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_1gz63::placeholder {
+} .textarea__textarea_1ssnm::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_1gz63::placeholder {
+} .textarea__hasInnerLabel_1ssnm::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_1gz63:disabled {
+} /* DISABLED STATE */ .textarea__textarea_1ssnm:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_1gz63:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_1ssnm:read-only {
     color: var(--input-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_1gz63:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_1ssnm:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} .textarea__hint_1gz63 {
+} .textarea__hint_1ssnm {
     color: var(--form-control-hint-color);
-} .textarea__error_1gz63 {
+} .textarea__error_1ssnm {
     color: var(--form-control-error-color);
 }

package/textarea/esm/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/esm/Component.js

@@ -6,13 +6,13 @@ import cn from 'classnames';
 import { FormControl } from '../../form-control/esm';
 import { getDataTestId } from '../../shared/esm';
 import { useMedia, useFocus } from '@alfalab/hooks';
-import { s as styles, P as PseudoTextArea } from './PseudoTextArea-43e55514.js';
+import { s as styles, P as PseudoTextArea } from './PseudoTextArea-403636d3.js';
 import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
 
-var defaultColors = {"input":"textarea__input_1gz63","hasInnerLabel":"textarea__hasInnerLabel_1gz63","disableUserInput":"textarea__disableUserInput_1gz63","error":"textarea__error_1gz63","textarea":"textarea__textarea_1gz63","hint":"textarea__hint_1gz63"};
+var defaultColors = {"input":"textarea__input_1ssnm","hasInnerLabel":"textarea__hasInnerLabel_1ssnm","disableUserInput":"textarea__disableUserInput_1ssnm","error":"textarea__error_1ssnm","textarea":"textarea__textarea_1ssnm","hint":"textarea__hint_1ssnm"};
 require('./default.css');
 
-var invertedColors = {"input":"textarea__input_kl6fl","hasInnerLabel":"textarea__hasInnerLabel_kl6fl","disableUserInput":"textarea__disableUserInput_kl6fl","error":"textarea__error_kl6fl","textarea":"textarea__textarea_kl6fl","hint":"textarea__hint_kl6fl"};
+var invertedColors = {"input":"textarea__input_wenz1","hasInnerLabel":"textarea__hasInnerLabel_wenz1","disableUserInput":"textarea__disableUserInput_wenz1","error":"textarea__error_wenz1","textarea":"textarea__textarea_wenz1","hint":"textarea__hint_wenz1"};
 require('./inverted.css');
 
 var colorStyles = {

package/textarea/esm/PseudoTextArea-403636d3.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { TextareaIncomeProps } from "./typings";
+declare const PseudoTextArea: React.ForwardRefExoticComponent<{
+    /**
+     * Дополнительный класс компонента
+     */
+    pseudoTextareaClassName?: string | undefined;
+    /**
+     * Значение PseudoTextArea, разделяется на 2 части по maxLength
+     */
+    value: string;
+    /**
+     * Максимальное количество символов, символы свыше maxLength будут выделены
+     */
+    maxLength: number;
+} & Pick<TextareaIncomeProps, "size"> & React.RefAttributes<HTMLDivElement>>;
+export { PseudoTextArea };

package/textarea/esm/PseudoTextArea-403636d3.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { SIZE_TO_CLASSNAME_MAP } from './consts.js';
+
+var styles = {"textarea":"textarea__textarea_k5vbh","overflow":"textarea__overflow_k5vbh","overflowHidden":"textarea__overflowHidden_k5vbh","customScrollbar":"textarea__customScrollbar_k5vbh","hasInnerLabel":"textarea__hasInnerLabel_k5vbh","pseudoTextarea":"textarea__pseudoTextarea_k5vbh","sub":"textarea__sub_k5vbh","focusVisible":"textarea__focusVisible_k5vbh","filled":"textarea__filled_k5vbh","size-48":"textarea__size-48_k5vbh","size-56":"textarea__size-56_k5vbh","size-64":"textarea__size-64_k5vbh","size-72":"textarea__size-72_k5vbh","wrapper":"textarea__wrapper_k5vbh","resizeVertical":"textarea__resizeVertical_k5vbh"};
+require('./index.css');
+
+var PseudoTextArea = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 48 : _b, pseudoTextareaClassName = _a.pseudoTextareaClassName, maxLength = _a.maxLength, value = _a.value;
+    return (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/esm/components/PseudoTextArea.js

@@ -1,4 +1,4 @@
 import 'react';
 import 'classnames';
-export { P as PseudoTextArea } from '../PseudoTextArea-43e55514.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-403636d3.js';
 import '../consts.js';

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

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

package/textarea/esm/components/index.js

@@ -1,4 +1,4 @@
-export { P as PseudoTextArea } from '../PseudoTextArea-43e55514.js';
+export { P as PseudoTextArea } from '../PseudoTextArea-403636d3.js';
 import 'react';
 import 'classnames';
 import '../consts.js';

package/textarea/esm/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/esm/default.css

@@ -42,26 +42,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_1gz63 {
+} .textarea__input_1ssnm {
     color: var(--input-color);
     caret-color: var(--input-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_1gz63:-webkit-autofill {
+} .textarea__input_1ssnm:-webkit-autofill {
     -webkit-text-fill-color: var(--input-color);
-} .textarea__input_1gz63::placeholder {
+} .textarea__input_1ssnm::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_1gz63::placeholder {
+} .textarea__hasInnerLabel_1ssnm::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_1gz63:read-only:not(.textarea__disableUserInput_1gz63) {
+} /* READ-ONLY STATE */ .textarea__input_1ssnm:read-only:not(.textarea__disableUserInput_1ssnm) {
     color: var(--input-read-only-color)
-} .textarea__input_1gz63:read-only:not(.textarea__disableUserInput_1gz63):focus::placeholder {
+} .textarea__input_1ssnm:read-only:not(.textarea__disableUserInput_1ssnm):focus::placeholder {
         color: var(--input-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_1gz63:disabled {
+    } /* DISABLED STATE */ .textarea__input_1ssnm:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* FOCUS STATE */ .textarea__input_1gz63:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_1ssnm:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_1gz63 {
+} /* ERROR STATE */ .textarea__error_1ssnm {
     color: var(--input-error-color);
     caret-color: var(--input-error-color);
 } :root {
@@ -93,22 +93,22 @@
     /* color mobile */
 
     /* error mobile */
-} .textarea__textarea_1gz63 {
+} .textarea__textarea_1ssnm {
     color: var(--input-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_1gz63::placeholder {
+} .textarea__textarea_1ssnm::placeholder {
     color: var(--input-placeholder-color);
-} .textarea__hasInnerLabel_1gz63::placeholder {
+} .textarea__hasInnerLabel_1ssnm::placeholder {
     color: var(--input-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_1gz63:disabled {
+} /* DISABLED STATE */ .textarea__textarea_1ssnm:disabled {
     color: var(--input-disabled-color);
     -webkit-text-fill-color: var(--input-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_1gz63:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_1ssnm:read-only {
     color: var(--input-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_1gz63:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_1ssnm:focus::placeholder {
     color: var(--input-focus-placeholder-color);
-} .textarea__hint_1gz63 {
+} .textarea__hint_1ssnm {
     color: var(--form-control-hint-color);
-} .textarea__error_1gz63 {
+} .textarea__error_1ssnm {
     color: var(--form-control-error-color);
 }

package/textarea/esm/index.css

@@ -119,7 +119,7 @@
         var(--textarea-xl-min-height) - var(--textarea-xl-filled-spacer-top) -
             var(--textarea-xl-filled-spacer-bottom)
     );
-} .textarea__textarea_ackqs {
+} .textarea__textarea_k5vbh {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -135,52 +135,52 @@
     resize: none;
     -webkit-appearance: none;
     height: inherit
-} .textarea__textarea_ackqs.textarea__overflow_ackqs {
+} .textarea__textarea_k5vbh.textarea__overflow_k5vbh {
         color: transparent;
         caret-color: var(--input-color);
-    } .textarea__overflowHidden_ackqs.textarea__overflowHidden_ackqs {
+    } .textarea__overflowHidden_k5vbh.textarea__overflowHidden_k5vbh {
     overflow: hidden;
-} .textarea__customScrollbar_ackqs {
+} .textarea__customScrollbar_k5vbh {
     overflow: auto;
     cursor: auto;
-} .textarea__customScrollbar_ackqs::-webkit-scrollbar {
+} .textarea__customScrollbar_k5vbh::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-track {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-track {
         background-color: transparent;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-track-piece {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-thumb {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-thumb:vertical {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-thumb:vertical:hover {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-thumb:horizontal {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-thumb:horizontal {
         border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-thumb:horizontal:hover {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .textarea__customScrollbar_ackqs::-webkit-scrollbar-thumb:active {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .textarea__customScrollbar_ackqs::-webkit-resizer {
+    } .textarea__customScrollbar_k5vbh::-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_ackqs::-webkit-scrollbar-button,
-    .textarea__customScrollbar_ackqs::-webkit-scrollbar-corner {
+    } .textarea__customScrollbar_k5vbh::-webkit-scrollbar-button,
+    .textarea__customScrollbar_k5vbh::-webkit-scrollbar-corner {
         display: none;
-    } .textarea__textarea_ackqs::placeholder {
+    } .textarea__textarea_k5vbh::placeholder {
     transition: opacity 0.2s ease, color 0.2s ease;
-} .textarea__hasInnerLabel_ackqs::placeholder {
+} .textarea__hasInnerLabel_k5vbh::placeholder {
     opacity: 0;
-} .textarea__pseudoTextarea_ackqs {
+} .textarea__pseudoTextarea_k5vbh {
     position: absolute;
     top: var(--gap-0);
     left: var(--gap-0);
@@ -191,13 +191,13 @@
     z-index: -1;
     overflow: auto;
     max-height: 100%
-} .textarea__pseudoTextarea_ackqs span {
+} .textarea__pseudoTextarea_k5vbh span {
         color: var(--input-color);
-    } .textarea__pseudoTextarea_ackqs .textarea__overflow_ackqs {
+    } .textarea__pseudoTextarea_k5vbh .textarea__overflow_k5vbh {
         color: var(--color-light-text-tertiary);
-    } .textarea__pseudoTextarea_ackqs::-webkit-scrollbar-thumb {
+    } .textarea__pseudoTextarea_k5vbh::-webkit-scrollbar-thumb {
         background-color: transparent;
-    } .textarea__sub_ackqs {
+    } .textarea__sub_k5vbh {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -205,62 +205,62 @@
     /* adjusting overall height 👌 */
     margin-top: 6px;
     padding: var(--form-control-sub-paddings);
-} .textarea__textarea_ackqs.textarea__hasInnerLabel_ackqs.textarea__hasInnerLabel_ackqs {
+} .textarea__textarea_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__hasInnerLabel_k5vbh {
     padding-top: var(--gap-0);
     padding-bottom: var(--gap-0);
-} /* DISABLED STATE */ .textarea__textarea_ackqs:disabled {
+} /* DISABLED STATE */ .textarea__textarea_k5vbh:disabled {
     cursor: var(--disabled-cursor);
     opacity: 1;
-} /* READ-ONLY STATE */ .textarea__textarea_ackqs:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_k5vbh:read-only {
     cursor: var(--disabled-cursor);
-} /* FOCUS STATE */ .textarea__textarea_ackqs:focus.textarea__hasInnerLabel_ackqs::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_k5vbh:focus.textarea__hasInnerLabel_k5vbh::placeholder {
     opacity: 1;
-} .textarea__focusVisible_ackqs {
+} .textarea__focusVisible_k5vbh {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} /* FILLED STATE */ .textarea__textarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs {
+} /* FILLED STATE */ .textarea__textarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh {
     padding-top: var(--gap-0)
-} .textarea__textarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-48_ackqs {
+} .textarea__textarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-48_k5vbh {
         min-height: var(--textarea-s-filled-min-height);
-    } .textarea__textarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-56_ackqs {
+    } .textarea__textarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-56_k5vbh {
         min-height: var(--textarea-m-filled-min-height);
-    } .textarea__textarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-64_ackqs {
+    } .textarea__textarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-64_k5vbh {
         min-height: var(--textarea-l-filled-min-height);
-    } .textarea__textarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-72_ackqs {
+    } .textarea__textarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-72_k5vbh {
         min-height: var(--textarea-xl-filled-min-height);
-    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-48_ackqs {
+    } /* Correct pseudoTextarea size */ .textarea__pseudoTextarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-48_k5vbh {
         min-height: calc(100% - var(--textarea-s-filled-spacer-top));
-    } .textarea__pseudoTextarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-56_ackqs {
+    } .textarea__pseudoTextarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-56_k5vbh {
         min-height: calc(100% - var(--textarea-m-filled-spacer-top));
-    } .textarea__pseudoTextarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-64_ackqs {
+    } .textarea__pseudoTextarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-64_k5vbh {
         min-height: calc(100% - var(--textarea-l-filled-spacer-top));
-    } .textarea__pseudoTextarea_ackqs.textarea__filled_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-72_ackqs {
+    } .textarea__pseudoTextarea_k5vbh.textarea__filled_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-72_k5vbh {
         min-height: calc(100% - var(--textarea-xl-filled-spacer-top));
-    } .textarea__wrapper_ackqs.textarea__resizeVertical_ackqs {
+    } .textarea__wrapper_k5vbh.textarea__resizeVertical_k5vbh {
         resize: vertical;
         min-height: 48px;
-    } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_ackqs.textarea__size-48_ackqs {
+    } /* Border нужен для того чтобы растянуть textarea на всю высоту FormControl , если заменить на padding, то лейбл не будет кликабельный */ .textarea__textarea_k5vbh.textarea__size-48_k5vbh {
         border-top: var(--textarea-s-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-s-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_ackqs.textarea__size-56_ackqs {
+    } .textarea__textarea_k5vbh.textarea__size-56_k5vbh {
         border-top: var(--textarea-m-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-m-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_ackqs.textarea__size-64_ackqs {
+    } .textarea__textarea_k5vbh.textarea__size-64_k5vbh {
         border-top: var(--textarea-l-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-l-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_ackqs.textarea__size-72_ackqs {
+    } .textarea__textarea_k5vbh.textarea__size-72_k5vbh {
         border-top: var(--textarea-xl-spacer) var(--textarea-spacer-style);
         border-bottom: var(--textarea-xl-spacer) var(--textarea-spacer-style);
-    } .textarea__textarea_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-48_ackqs {
+    } .textarea__textarea_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-48_k5vbh {
             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_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-56_ackqs {
+        } .textarea__textarea_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-56_k5vbh {
             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_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-64_ackqs {
+        } .textarea__textarea_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-64_k5vbh {
             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_ackqs.textarea__hasInnerLabel_ackqs.textarea__size-72_ackqs {
+        } .textarea__textarea_k5vbh.textarea__hasInnerLabel_k5vbh.textarea__size-72_k5vbh {
             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/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export type { TextareaProps } from "./typings";

package/textarea/esm/index.js

@@ -7,5 +7,5 @@ import 'classnames';
 import '../../form-control/esm';
 import '../../shared/esm';
 import '@alfalab/hooks';
-import './PseudoTextArea-43e55514.js';
+import './PseudoTextArea-403636d3.js';
 import './consts.js';

package/textarea/esm/inverted.css

@@ -43,26 +43,26 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-} .textarea__input_kl6fl {
+} .textarea__input_wenz1 {
     color: var(--input-inverted-color);
     caret-color: var(--input-inverted-caret-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__input_kl6fl:-webkit-autofill {
+} .textarea__input_wenz1:-webkit-autofill {
     -webkit-text-fill-color: var(--input-inverted-color);
-} .textarea__input_kl6fl::placeholder {
+} .textarea__input_wenz1::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_kl6fl::placeholder {
+} .textarea__hasInnerLabel_wenz1::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* READ-ONLY STATE */ .textarea__input_kl6fl:read-only:not(.textarea__disableUserInput_kl6fl) {
+} /* READ-ONLY STATE */ .textarea__input_wenz1:read-only:not(.textarea__disableUserInput_wenz1) {
     color: var(--input-inverted-read-only-color)
-} .textarea__input_kl6fl:read-only:not(.textarea__disableUserInput_kl6fl):focus::placeholder {
+} .textarea__input_wenz1:read-only:not(.textarea__disableUserInput_wenz1):focus::placeholder {
         color: var(--input-inverted-placeholder-color);
-    } /* DISABLED STATE */ .textarea__input_kl6fl:disabled {
+    } /* DISABLED STATE */ .textarea__input_wenz1:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* FOCUS STATE */ .textarea__input_kl6fl:focus::placeholder {
+} /* FOCUS STATE */ .textarea__input_wenz1:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} /* ERROR STATE */ .textarea__error_kl6fl {
+} /* ERROR STATE */ .textarea__error_wenz1 {
     color: var(--input-inverted-error-color);
     caret-color: var(--input-inverted-error-color);
 } :root {
@@ -94,22 +94,22 @@
     /* color mobile */
 
     /* error mobile */
-} .textarea__textarea_kl6fl {
+} .textarea__textarea_wenz1 {
     color: var(--input-inverted-color);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .textarea__textarea_kl6fl::placeholder {
+} .textarea__textarea_wenz1::placeholder {
     color: var(--input-inverted-placeholder-color);
-} .textarea__hasInnerLabel_kl6fl::placeholder {
+} .textarea__hasInnerLabel_wenz1::placeholder {
     color: var(--input-inverted-with-label-placeholder-color);
-} /* DISABLED STATE */ .textarea__textarea_kl6fl:disabled {
+} /* DISABLED STATE */ .textarea__textarea_wenz1:disabled {
     color: var(--input-inverted-disabled-color);
     -webkit-text-fill-color: var(--input-inverted-disabled-color);
-} /* READ-ONLY STATE */ .textarea__textarea_kl6fl:read-only {
+} /* READ-ONLY STATE */ .textarea__textarea_wenz1:read-only {
     color: var(--input-inverted-read-only-color);
-} /* FOCUS STATE */ .textarea__textarea_kl6fl:focus::placeholder {
+} /* FOCUS STATE */ .textarea__textarea_wenz1:focus::placeholder {
     color: var(--input-inverted-focus-placeholder-color);
-} .textarea__hint_kl6fl {
+} .textarea__hint_wenz1 {
     color: var(--form-control-hint-color);
-} .textarea__error_kl6fl {
+} .textarea__error_wenz1 {
     color: var(--form-control-error-color);
 }