From 47a2061dcffcf12dade856b58711edeb664c3fd5 Mon Sep 17 00:00:00 2001
From: Vladislav Denisov <deni.vladislav@gmail.com>
Date: Sat, 22 Jun 2024 13:11:44 +0300
Subject: [PATCH 1/4] feat(plasma-b2c, plasma-web): set resize prop as
 deprecated

---
 .../src/components/TextArea/TextArea.stories.tsx       |  1 +
 .../plasma-b2c/src/components/TextArea/TextArea.tsx    |  5 +++--
 packages/plasma-b2c/src/components/TextArea/index.ts   | 10 +++++++++-
 .../src/components/TextArea/TextArea.stories.tsx       |  1 +
 .../plasma-web/src/components/TextArea/TextArea.tsx    |  5 +++--
 packages/plasma-web/src/components/TextArea/index.ts   | 10 +++++++++-
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx
index 71c1ba8c2e..913f47e5fe 100644
--- a/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx
+++ b/packages/plasma-b2c/src/components/TextArea/TextArea.stories.tsx
@@ -77,6 +77,7 @@ const StoryDefault = ({ status, enableContentRight, ...rest }: StoryProps) => {
 
     return (
         <TextArea
+            resize="none"
             value={value}
             contentRight={enableContentRight ? <IconPlaceholder /> : undefined}
             status={status || undefined}
diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.tsx b/packages/plasma-b2c/src/components/TextArea/TextArea.tsx
index c161547908..b6a48f06ab 100644
--- a/packages/plasma-b2c/src/components/TextArea/TextArea.tsx
+++ b/packages/plasma-b2c/src/components/TextArea/TextArea.tsx
@@ -1,12 +1,13 @@
 import { textAreaConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 import { config } from './TextArea.config';
 
 import type { TextAreaProps } from '.';
 
 const mergedConfig = mergeConfig(textAreaConfig, config);
-const TextAreaComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
-    TextAreaProps & React.RefAttributes<HTMLTextAreaElement>
+const TextAreaComponent = component(mergedConfig) as ForwardRefExoticComponent<
+    TextAreaProps & RefAttributes<HTMLTextAreaElement>
 >;
 
 /**
diff --git a/packages/plasma-b2c/src/components/TextArea/index.ts b/packages/plasma-b2c/src/components/TextArea/index.ts
index 214b94faa9..dbea2b2c71 100644
--- a/packages/plasma-b2c/src/components/TextArea/index.ts
+++ b/packages/plasma-b2c/src/components/TextArea/index.ts
@@ -1,2 +1,10 @@
+import type { TextAreaProps as TextAreaPropsBase } from '@salutejs/plasma-hope';
+
 export { TextArea } from './TextArea';
-export type { TextAreaProps } from '@salutejs/plasma-hope';
+
+export interface TextAreaProps extends TextAreaPropsBase {
+    /**
+     * @deprecated не используется в компоненте
+     */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+}
diff --git a/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx b/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx
index d8e351ed7d..3e6306451f 100644
--- a/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx
+++ b/packages/plasma-web/src/components/TextArea/TextArea.stories.tsx
@@ -74,6 +74,7 @@ const StoryDefault = ({ enableContentRight, status, ...rest }: StoryProps) => {
 
     return (
         <TextArea
+            resize="none"
             value={value}
             contentRight={enableContentRight ? <IconPlaceholder /> : undefined}
             status={status || undefined}
diff --git a/packages/plasma-web/src/components/TextArea/TextArea.tsx b/packages/plasma-web/src/components/TextArea/TextArea.tsx
index c161547908..b6a48f06ab 100644
--- a/packages/plasma-web/src/components/TextArea/TextArea.tsx
+++ b/packages/plasma-web/src/components/TextArea/TextArea.tsx
@@ -1,12 +1,13 @@
 import { textAreaConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 import { config } from './TextArea.config';
 
 import type { TextAreaProps } from '.';
 
 const mergedConfig = mergeConfig(textAreaConfig, config);
-const TextAreaComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
-    TextAreaProps & React.RefAttributes<HTMLTextAreaElement>
+const TextAreaComponent = component(mergedConfig) as ForwardRefExoticComponent<
+    TextAreaProps & RefAttributes<HTMLTextAreaElement>
 >;
 
 /**
diff --git a/packages/plasma-web/src/components/TextArea/index.ts b/packages/plasma-web/src/components/TextArea/index.ts
index 214b94faa9..dbea2b2c71 100644
--- a/packages/plasma-web/src/components/TextArea/index.ts
+++ b/packages/plasma-web/src/components/TextArea/index.ts
@@ -1,2 +1,10 @@
+import type { TextAreaProps as TextAreaPropsBase } from '@salutejs/plasma-hope';
+
 export { TextArea } from './TextArea';
-export type { TextAreaProps } from '@salutejs/plasma-hope';
+
+export interface TextAreaProps extends TextAreaPropsBase {
+    /**
+     * @deprecated не используется в компоненте
+     */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+}

From 529f11d33f16c142a553c2b29a7c616c0183e649 Mon Sep 17 00:00:00 2001
From: Vladislav Denisov <deni.vladislav@gmail.com>
Date: Mon, 24 Jun 2024 13:15:50 +0300
Subject: [PATCH 2/4] feat(sdds-serv): TextArea added

---
 .../components/TextArea/TextArea.types.tsx    |   2 +-
 .../src/components/TextArea/index.ts          |   1 +
 .../src/types/TextareaHTMLAttributes.ts       |  55 ++++
 packages/plasma-new-hope/src/types/index.ts   |   1 +
 .../components/TextArea/TextArea.config.tsx   | 274 ++++++++++++++++++
 .../components/TextArea/TextArea.stories.tsx  | 131 +++++++++
 .../src/components/TextArea/TextArea.tsx      |  11 +
 .../src/components/TextArea/index.ts          |   1 +
 packages/sdds-serv/src/index.ts               |   1 +
 9 files changed, 476 insertions(+), 1 deletion(-)
 create mode 100644 packages/plasma-new-hope/src/types/TextareaHTMLAttributes.ts
 create mode 100644 packages/sdds-serv/src/components/TextArea/TextArea.config.tsx
 create mode 100644 packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx
 create mode 100644 packages/sdds-serv/src/components/TextArea/TextArea.tsx
 create mode 100644 packages/sdds-serv/src/components/TextArea/index.ts

diff --git a/packages/plasma-new-hope/src/components/TextArea/TextArea.types.tsx b/packages/plasma-new-hope/src/components/TextArea/TextArea.types.tsx
index 16f7e9558f..ffd74b6d69 100644
--- a/packages/plasma-new-hope/src/components/TextArea/TextArea.types.tsx
+++ b/packages/plasma-new-hope/src/components/TextArea/TextArea.types.tsx
@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes } from '@salutejs/plasma-core';
+import { TextareaHTMLAttributes } from '../../types';
 
 export interface TextAreaPropsBase {
     /**
diff --git a/packages/plasma-new-hope/src/components/TextArea/index.ts b/packages/plasma-new-hope/src/components/TextArea/index.ts
index ab94bb2554..9853f29917 100644
--- a/packages/plasma-new-hope/src/components/TextArea/index.ts
+++ b/packages/plasma-new-hope/src/components/TextArea/index.ts
@@ -1,2 +1,3 @@
 export { textAreaRoot, textAreaConfig } from './TextArea';
 export { tokens as textAreaTokens } from './TextArea.tokens';
+export type { TextAreaProps } from './TextArea.types';
diff --git a/packages/plasma-new-hope/src/types/TextareaHTMLAttributes.ts b/packages/plasma-new-hope/src/types/TextareaHTMLAttributes.ts
new file mode 100644
index 0000000000..9530e0a8f4
--- /dev/null
+++ b/packages/plasma-new-hope/src/types/TextareaHTMLAttributes.ts
@@ -0,0 +1,55 @@
+// INFO: Issue об этом решении - https://github.com/salute-developers/plasma/issues/1219
+
+import React from 'react';
+
+import { DisabledProps } from '../mixins';
+
+export interface TextareaHTMLAttributes<T> extends DisabledProps, React.TextareaHTMLAttributes<T> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    cols?: number;
+    dirName?: string;
+    form?: string;
+    /**
+     * Минимальная длина значения поля
+     */
+    minLength?: number;
+    /**
+     * Максимальная длина значения поля
+     */
+    maxLength?: number;
+    /**
+     * Определяет уникальное имя элемента формы
+     */
+    name?: string;
+    /**
+     * Выводит текст внутри поля формы, который исчезает при получении фокуса
+     */
+    placeholder?: string;
+    /**
+     * Элемент формы не может изменяться пользователем
+     */
+    readOnly?: boolean;
+    /**
+     * Флаг обязательности поля
+     */
+    required?: boolean;
+    rows?: number;
+    /**
+     * Определяет значение элемента формы
+     */
+    value?: string | ReadonlyArray<string> | number;
+    wrap?: string;
+    /**
+     * Обработчик изменения элемента формы
+     */
+    onChange?: React.TextareaHTMLAttributes<T>['onChange'];
+    /**
+     * Обработчик фокуса на элементе формы
+     */
+    onFocus?: React.TextareaHTMLAttributes<T>['onFocus'];
+    /**
+     * Обработчик блюра на элементе формы
+     */
+    onBlur?: React.TextareaHTMLAttributes<T>['onBlur'];
+}
diff --git a/packages/plasma-new-hope/src/types/index.ts b/packages/plasma-new-hope/src/types/index.ts
index 3c29b104c0..a03da0f856 100644
--- a/packages/plasma-new-hope/src/types/index.ts
+++ b/packages/plasma-new-hope/src/types/index.ts
@@ -1,3 +1,4 @@
 export type { AsProps } from './AsProps';
 export type { NumericRange, CreateArrayWithLengthX } from './Range';
 export type { InputHTMLAttributes } from './InputHTMLAttributes';
+export type { TextareaHTMLAttributes } from './TextareaHTMLAttributes';
diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.config.tsx b/packages/sdds-serv/src/components/TextArea/TextArea.config.tsx
new file mode 100644
index 0000000000..b2bf6562e9
--- /dev/null
+++ b/packages/sdds-serv/src/components/TextArea/TextArea.config.tsx
@@ -0,0 +1,274 @@
+import { css, textAreaTokens } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        focused: 'true',
+    },
+    variations: {
+        size: {
+            xs: css`
+                ${textAreaTokens.inputWidth}: 100%;
+                ${textAreaTokens.inputHeight}: 7.312rem;
+                ${textAreaTokens.inputMinHeight}: 0.625rem;
+                ${textAreaTokens.borderRadius}: 0.5rem;
+                ${textAreaTokens.borderRadiusWithHelpers}: 0.5rem 0.5rem 0 0;
+                ${textAreaTokens.inputPaddingTop}: 0.563rem;
+                ${textAreaTokens.inputPaddingRight}: 0.625rem;
+                ${textAreaTokens.inputPaddingRightWithRightContent}: 2.125rem;
+                ${textAreaTokens.inputPaddingBottom}: 0.563rem;
+                ${textAreaTokens.inputPaddingLeft}: 0.625rem;
+                ${textAreaTokens.helpersPaddingTop}: 0.5rem;
+                ${textAreaTokens.helpersPaddingRight}: 0.625rem;
+                ${textAreaTokens.helpersPaddingBottom}: 0.563rem;
+                ${textAreaTokens.helpersPaddingLeft}: 0.625rem;
+                ${textAreaTokens.helpersOffset}: 0rem;
+                ${textAreaTokens.rightContentTop}: 0.563rem;
+                ${textAreaTokens.rightContentRight}: 0.5rem;
+                ${textAreaTokens.rightContentHeight}: 1.25rem;
+                ${textAreaTokens.labelMarginBottom}: 0.375rem;
+                ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family);
+                ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size);
+                ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style);
+                ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight);
+                ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
+                ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0rem;
+                ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+            `,
+            s: css`
+                ${textAreaTokens.inputWidth}: 100%;
+                ${textAreaTokens.inputHeight}: 7.187rem;
+                ${textAreaTokens.inputMinHeight}: 0.625rem;
+                ${textAreaTokens.borderRadius}: 0.625rem;
+                ${textAreaTokens.borderRadiusWithHelpers}: 0.625rem 0.625rem 0 0;
+                ${textAreaTokens.inputPaddingTop}: 0.688rem;
+                ${textAreaTokens.inputPaddingRight}: 0.875rem;
+                ${textAreaTokens.inputPaddingRightWithRightContent}: 3.125rem;
+                ${textAreaTokens.inputPaddingBottom}: 0.75rem;
+                ${textAreaTokens.inputPaddingLeft}: 0.875rem;
+                ${textAreaTokens.helpersPaddingTop}: 0.75rem;
+                ${textAreaTokens.helpersPaddingRight}: 0.875rem;
+                ${textAreaTokens.helpersPaddingBottom}: 0.75rem;
+                ${textAreaTokens.helpersPaddingLeft}: 0.875rem;
+                ${textAreaTokens.helpersOffset}: 0rem;
+                ${textAreaTokens.rightContentTop}: 0.688rem;
+                ${textAreaTokens.rightContentRight}: 0.75rem;
+                ${textAreaTokens.rightContentHeight}: 1.25rem;
+                ${textAreaTokens.labelMarginBottom}: 0.5rem;
+                ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
+                ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-s-font-family);
+                ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-s-font-size);
+                ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-s-font-style);
+                ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+            `,
+            m: css`
+                ${textAreaTokens.inputWidth}: 100%;
+                ${textAreaTokens.inputHeight}: 7rem;
+                ${textAreaTokens.inputMinHeight}: 1.125rem;
+                ${textAreaTokens.borderRadius}: 0.75rem;
+                ${textAreaTokens.borderRadiusWithHelpers}: 0.75rem 0.75rem 0 0;
+                ${textAreaTokens.inputPaddingTop}: 0.875rem;
+                ${textAreaTokens.inputPaddingRight}: 1rem;
+                ${textAreaTokens.inputPaddingRightWithRightContent}: 3.375rem;
+                ${textAreaTokens.inputPaddingBottom}: 0.75rem;
+                ${textAreaTokens.inputPaddingLeft}: 1rem;
+                ${textAreaTokens.helpersPaddingTop}: 0.75rem;
+                ${textAreaTokens.helpersPaddingRight}: 1rem;
+                ${textAreaTokens.helpersPaddingBottom}: 0.75rem;
+                ${textAreaTokens.helpersPaddingLeft}: 1rem;
+                ${textAreaTokens.helpersOffset}: 0rem;
+                ${textAreaTokens.rightContentTop}: 0.875rem;
+                ${textAreaTokens.rightContentRight}: 0.875rem;
+                ${textAreaTokens.rightContentHeight}: 1.25rem;
+                ${textAreaTokens.labelMarginBottom}: 0.625rem;
+                ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${textAreaTokens.labelInnerTop}: 0.375rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
+                ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-m-font-family);
+                ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-m-font-size);
+                ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-m-font-style);
+                ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight);
+                ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+            `,
+            l: css`
+                ${textAreaTokens.inputWidth}: 100%;
+                ${textAreaTokens.inputHeight}: 6.812rem;
+                ${textAreaTokens.inputMinHeight}: 1.625rem;
+                ${textAreaTokens.borderRadius}: 0.875rem;
+                ${textAreaTokens.borderRadiusWithHelpers}: 0.875rem 0.875rem 0 0;
+                ${textAreaTokens.inputPaddingTop}: 1.063rem;
+                ${textAreaTokens.inputPaddingRight}: 1.125rem;
+                ${textAreaTokens.inputPaddingRightWithRightContent}: 3.625rem;
+                ${textAreaTokens.inputPaddingBottom}: 0.75rem;
+                ${textAreaTokens.inputPaddingLeft}: 1.125rem;
+                ${textAreaTokens.helpersPaddingTop}: 0.75rem;
+                ${textAreaTokens.helpersPaddingRight}: 1.125rem;
+                ${textAreaTokens.helpersPaddingBottom}: 0.75rem;
+                ${textAreaTokens.helpersPaddingLeft}: 1.125rem;
+                ${textAreaTokens.helpersOffset}: 0rem;
+                ${textAreaTokens.rightContentTop}: 1.063rem;
+                ${textAreaTokens.rightContentRight}: 1rem;
+                ${textAreaTokens.rightContentHeight}: 1.25rem;
+                ${textAreaTokens.labelMarginBottom}: 0.75rem;
+                ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                /* stylelint-disable-next-line number-max-precision */
+                ${textAreaTokens.labelInnerTop}: 0.5625rem;
+                ${textAreaTokens.labelInnerMarginBottom}: 0.125rem;
+                ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family);
+                ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size);
+                ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style);
+                ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight);
+                ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family);
+                ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size);
+                ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height);
+            `,
+        },
+        view: {
+            default: css`
+                ${textAreaTokens.inputBackgroundColor}: var(--surface-transparent-primary);
+                ${textAreaTokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover);
+                ${textAreaTokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active);
+                ${textAreaTokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary);
+                ${textAreaTokens.helpersBackgroundColor}: var(--surface-transparent-primary);
+                ${textAreaTokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover);
+                ${textAreaTokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active);
+                ${textAreaTokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary);
+                ${textAreaTokens.inputColor}: var(--text-primary);
+                ${textAreaTokens.inputColorFocus}: var(--text-primary);
+                ${textAreaTokens.inputCaretColor}: var(--text-accent);
+                ${textAreaTokens.placeholderColor}: var(--text-secondary);
+                ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
+                ${textAreaTokens.leftHelperColor}: var(--text-secondary);
+                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
+            `,
+            /**
+             * @deprecated
+             * использовать `default`
+             */
+            primary: css`
+                ${textAreaTokens.inputBackgroundColor}: var(--surface-transparent-primary);
+                ${textAreaTokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover);
+                ${textAreaTokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active);
+                ${textAreaTokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary);
+                ${textAreaTokens.helpersBackgroundColor}: var(--surface-transparent-primary);
+                ${textAreaTokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover);
+                ${textAreaTokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active);
+                ${textAreaTokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary);
+                ${textAreaTokens.inputColor}: var(--text-primary);
+                ${textAreaTokens.inputColorFocus}: var(--text-primary);
+                ${textAreaTokens.inputCaretColor}: var(--text-accent);
+                ${textAreaTokens.placeholderColor}: var(--text-secondary);
+                ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
+                ${textAreaTokens.leftHelperColor}: var(--text-secondary);
+                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
+            `,
+            positive: css`
+                ${textAreaTokens.inputBackgroundColor}: var(--surface-transparent-positive);
+                ${textAreaTokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover);
+                ${textAreaTokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active);
+                ${textAreaTokens.inputBackgroundColorFocus}: var(--surface-transparent-positive);
+                ${textAreaTokens.helpersBackgroundColor}: var(--surface-transparent-positive);
+                ${textAreaTokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover);
+                ${textAreaTokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active);
+                ${textAreaTokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive);
+                ${textAreaTokens.inputColor}: var(--text-primary);
+                ${textAreaTokens.inputColorFocus}: var(--text-primary);
+                ${textAreaTokens.inputCaretColor}: var(--text-positive);
+                ${textAreaTokens.placeholderColor}: var(--text-secondary);
+                ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
+                ${textAreaTokens.leftHelperColor}: var(--text-positive);
+                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
+            `,
+            warning: css`
+                ${textAreaTokens.inputBackgroundColor}: var(--surface-transparent-warning);
+                ${textAreaTokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover);
+                ${textAreaTokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active);
+                ${textAreaTokens.inputBackgroundColorFocus}: var(--surface-transparent-warning);
+                ${textAreaTokens.helpersBackgroundColor}: var(--surface-transparent-warning);
+                ${textAreaTokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover);
+                ${textAreaTokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active);
+                ${textAreaTokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning);
+                ${textAreaTokens.inputColor}: var(--text-primary);
+                ${textAreaTokens.inputColorFocus}: var(--text-primary);
+                ${textAreaTokens.inputCaretColor}: var(--text-warning);
+                ${textAreaTokens.placeholderColor}: var(--text-secondary);
+                ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
+                ${textAreaTokens.leftHelperColor}: var(--text-warning);
+                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
+            `,
+            negative: css`
+                ${textAreaTokens.inputBackgroundColor}: var(--surface-transparent-negative);
+                ${textAreaTokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover);
+                ${textAreaTokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active);
+                ${textAreaTokens.inputBackgroundColorFocus}: var(--surface-transparent-negative);
+                ${textAreaTokens.helpersBackgroundColor}: var(--surface-transparent-negative);
+                ${textAreaTokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover);
+                ${textAreaTokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active);
+                ${textAreaTokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative);
+                ${textAreaTokens.inputColor}: var(--text-primary);
+                ${textAreaTokens.inputColorFocus}: var(--text-primary);
+                ${textAreaTokens.inputCaretColor}: var(--text-negative);
+                ${textAreaTokens.placeholderColor}: var(--text-secondary);
+                ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary);
+                ${textAreaTokens.leftHelperColor}: var(--text-negative);
+                ${textAreaTokens.rightHelperColor}: var(--text-secondary);
+            `,
+        },
+        disabled: {
+            true: css`
+                ${textAreaTokens.disabledOpacity}: 0.4;
+                ${textAreaTokens.inputColorDisabled}: var(--text-secondary);
+            `,
+        },
+    },
+};
diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx b/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx
new file mode 100644
index 0000000000..87aef56f75
--- /dev/null
+++ b/packages/sdds-serv/src/components/TextArea/TextArea.stories.tsx
@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { tertiary } from '@salutejs/plasma-core';
+import styled from 'styled-components';
+import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
+
+import { TextArea } from './TextArea';
+
+const labelPlacements = ['inner', 'outer'];
+
+type StoryTextAreaPropsCustom = {
+    enableContentRight?: boolean;
+};
+
+type StoryTextAreaProps = ComponentProps<typeof TextArea> & StoryTextAreaPropsCustom;
+
+const sizes = ['xs', 's', 'm', 'l'];
+const views = ['default', 'positive', 'warning', 'negative'];
+
+const meta: Meta<StoryTextAreaProps> = {
+    title: 'Controls/TextArea',
+    decorators: [InSpacingDecorator],
+    component: TextArea,
+    argTypes: {
+        rows: {
+            control: {
+                type: 'number',
+            },
+        },
+        cols: {
+            control: {
+                type: 'number',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            defaultValue: 'm',
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps([
+            'helperBlock',
+            '$isFocused',
+            'contentRight',
+            'autoComplete',
+            'autoFocus',
+            'dirName',
+            'form',
+            'minLength',
+            'maxLength',
+            'name',
+            'required',
+            'value',
+            'wrap',
+            'theme',
+            'as',
+            'forwardedAs',
+            'onChange',
+            'onFocus',
+            'onBlur',
+            'status',
+            'resize',
+            'height',
+            'width',
+            'helperText',
+        ]),
+    },
+    args: {
+        id: 'example-textarea',
+        enableContentRight: true,
+        label: 'Подсказка',
+        placeholder: 'Заполните многострочное поле',
+        leftHelper: 'Подсказка к полю слева',
+        rightHelper: 'Подсказка к полю справа',
+        disabled: false,
+        readOnly: false,
+        autoResize: false,
+        minAuto: 0,
+        maxAuto: 0,
+    },
+};
+
+export default meta;
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+
+const IconPlaceholder = styled.div`
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: ${tertiary};
+`;
+
+const StoryDefault = (props: StoryTextAreaProps) => {
+    const [value, setValue] = useState('Значение поля');
+
+    return (
+        <TextArea
+            value={value}
+            contentRight={props.enableContentRight ? <IconPlaceholder /> : undefined}
+            onChange={(e) => {
+                setValue(e.target.value);
+                onChange(e);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            {...props}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryTextAreaProps> = {
+    render: (args) => <StoryDefault {...args} />,
+};
diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.tsx b/packages/sdds-serv/src/components/TextArea/TextArea.tsx
new file mode 100644
index 0000000000..6252934bc0
--- /dev/null
+++ b/packages/sdds-serv/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,11 @@
+import { textAreaConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './TextArea.config';
+
+const mergedConfig = mergeConfig(textAreaConfig, config);
+const TextAreaComponent = component(mergedConfig);
+
+/**
+ * Поле ввода многострочного текста.
+ */
+export const TextArea = TextAreaComponent;
diff --git a/packages/sdds-serv/src/components/TextArea/index.ts b/packages/sdds-serv/src/components/TextArea/index.ts
new file mode 100644
index 0000000000..fdf76b35f2
--- /dev/null
+++ b/packages/sdds-serv/src/components/TextArea/index.ts
@@ -0,0 +1 @@
+export { TextArea } from './TextArea';
diff --git a/packages/sdds-serv/src/index.ts b/packages/sdds-serv/src/index.ts
index 96d02722bc..8702d71fe5 100644
--- a/packages/sdds-serv/src/index.ts
+++ b/packages/sdds-serv/src/index.ts
@@ -31,6 +31,7 @@ export * from './components/Slider';
 export * from './components/SSRProvider';
 export * from './components/Switch';
 export * from './components/Tabs';
+export * from './components/TextArea';
 export * from './components/TextField';
 export * from './components/Toast';
 export * from './components/Toolbar';

From 918ab32322cfa52682ddd17401ce5bb108090aa5 Mon Sep 17 00:00:00 2001
From: Vladislav Denisov <deni.vladislav@gmail.com>
Date: Mon, 24 Jun 2024 13:16:06 +0300
Subject: [PATCH 3/4] docs(sdds-serv): TextArea docs added

---
 .../docs/components/TextArea.mdx              | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 website/sdds-serv-docs/docs/components/TextArea.mdx

diff --git a/website/sdds-serv-docs/docs/components/TextArea.mdx b/website/sdds-serv-docs/docs/components/TextArea.mdx
new file mode 100644
index 0000000000..e043b93278
--- /dev/null
+++ b/website/sdds-serv-docs/docs/components/TextArea.mdx
@@ -0,0 +1,87 @@
+---
+id: textarea
+title: TextArea
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# TextArea
+<Description name="TextArea" />
+<PropsTable name="TextArea" exclude={['$isFocused']} />
+
+## Использование
+Компонент `TextArea` может содержать иконку (или кнопку) справа.
+Для этого используйте свойство `contentRight`:
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/sdds-serv';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Положение иконки"
+                defaultValue="Справа"
+                contentRight={<IconDownload />}
+            />
+        </div>
+    );
+}
+```
+
+Также можно регулировать высоту и ширину, используя свойства `height` и `width`, 
+указав значения в `rem` или соответствующие свойствам css значения.
+
+## Autoresize
+Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
+Для этого необходимо использовать свойство `autoResize`.
+
+В этом режиме можно указать крайние значения высоты поля ввода, используя свойства `autoMin`, `autoMax`,
+указав их в `rem`.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/sdds-serv';
+
+export function App() {
+    const [value, setValue] = React.useState('Значение');
+
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                value={value}
+                onChange={(e) => {
+                    setValue(e.target.value);
+                }}
+                autoResize
+                minAuto={3}
+                maxAuto={5}
+            />
+        </div>
+    );
+}
+```
+
+### Подсказка
+Для вывода подсказки снизу от поля используйте свойство `leftHelper` и/или `rightHelper`.
+
+```tsx live
+import React from 'react';
+import { TextArea } from '@salutejs/sdds-serv';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                defaultValue="Значение"
+                leftHelper="Подсказка снизу слева"
+                rightHelper="Подсказка снизу справа"
+            />
+        </div>
+    );
+}
+```

From 0b2112e2bdec639ce3bd9c262763851c2d3af2a7 Mon Sep 17 00:00:00 2001
From: Vladislav Denisov <deni.vladislav@gmail.com>
Date: Mon, 24 Jun 2024 13:17:07 +0300
Subject: [PATCH 4/4] docs(plasma-b2c, plasma-web, sdds-serv): api reports
 regenerated

---
 packages/plasma-b2c/api/plasma-b2c.api.md |  8 ++++++--
 packages/plasma-web/api/plasma-web.api.md |  8 ++++++--
 packages/sdds-serv/api/sdds-serv.api.md   | 22 ++++++++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
index 37e1aec675..2532578c8e 100644
--- a/packages/plasma-b2c/api/plasma-b2c.api.md
+++ b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -240,7 +240,7 @@ import { TabsContext } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsControllerProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TextareaHTMLAttributes } from '@salutejs/plasma-core';
-import { TextAreaProps } from '@salutejs/plasma-hope';
+import type { TextAreaProps as TextAreaProps_2 } from '@salutejs/plasma-hope';
 import { TextareaResize } from '@salutejs/plasma-core';
 import { TextFieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types';
 import { TextfieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
@@ -1993,7 +1993,11 @@ export const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<H
 
 export { TextareaHTMLAttributes }
 
-export { TextAreaProps }
+// @public (undocumented)
+export interface TextAreaProps extends TextAreaProps_2 {
+    // @deprecated (undocumented)
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+}
 
 export { TextareaResize }
 
diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md
index babc11911c..c4459c8883 100644
--- a/packages/plasma-web/api/plasma-web.api.md
+++ b/packages/plasma-web/api/plasma-web.api.md
@@ -240,7 +240,7 @@ import { TabsContext } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsControllerProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TextareaHTMLAttributes } from '@salutejs/plasma-core';
-import { TextAreaProps } from '@salutejs/plasma-hope';
+import type { TextAreaProps as TextAreaProps_2 } from '@salutejs/plasma-hope';
 import { TextareaResize } from '@salutejs/plasma-core';
 import { TextFieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types';
 import { TextfieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
@@ -1995,7 +1995,11 @@ export const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<H
 
 export { TextareaHTMLAttributes }
 
-export { TextAreaProps }
+// @public (undocumented)
+export interface TextAreaProps extends TextAreaProps_2 {
+    // @deprecated (undocumented)
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+}
 
 export { TextareaResize }
 
diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md
index 03b34f6f6b..df0220a23d 100644
--- a/packages/sdds-serv/api/sdds-serv.api.md
+++ b/packages/sdds-serv/api/sdds-serv.api.md
@@ -139,6 +139,8 @@ import { TabItemRefs } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsContext } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsControllerProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TabsProps } from '@salutejs/plasma-new-hope/styled-components';
+import { TextareaHTMLAttributes } from '@salutejs/plasma-new-hope/types/types';
+import { TextAreaPropsExtends } from '@salutejs/plasma-new-hope/types/components/TextArea/TextArea.types';
 import { TextFieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types';
 import { TextfieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { TextFieldProps } from '@salutejs/plasma-new-hope/styled-components';
@@ -1478,6 +1480,26 @@ export { TabsControllerProps }
 
 export { TabsProps }
 
+// @public
+export const TextArea: FunctionComponent<PropsType<    {
+size: {
+xs: string;
+s: string;
+m: string;
+l: string;
+};
+view: {
+default: string;
+primary: string;
+positive: string;
+warning: string;
+negative: string;
+};
+disabled: {
+true: string;
+};
+}> & TextareaHTMLAttributes<HTMLTextAreaElement> & TextAreaPropsExtends & RefAttributes<HTMLTextAreaElement>>;
+
 // @public
 export const TextField: FunctionComponent<PropsType<    {
 view: {