import { View as TextareaView } from '@yandex-lego/components/Textarea/__examples__/view.tsx'
import textareaViewSource from '!!raw-loader!@yandex-lego/components/Textarea/__examples__/view.tsx'
import { Theme as TextareaTheme } from '@yandex-lego/components/Textarea/__examples__/theme.tsx'
import textareaThemeSource from '!!raw-loader!@yandex-lego/components/Textarea/__examples__/theme.tsx'
import { Size as TextareaSize } from '@yandex-lego/components/Textarea/__examples__/size.tsx'
import textareaSizeSource from '!!raw-loader!@yandex-lego/components/Textarea/__examples__/size.tsx'
import { HasClear as TextareaHasClear } from '@yandex-lego/components/Textarea/__examples__/has-clear.tsx'
import textareaHasClearSource from '!!raw-loader!@yandex-lego/components/Textarea/__examples__/has-clear.tsx'

### Вид поля

Чтобы изменить вид текстового поля, установите свойство `view` в значение `"default"`.

<Example
    component={TextareaView}
    source={textareaViewSource}
/>

### Классический дизайн

Чтобы изменить стилевое оформление текстового поля, установите свойство `theme` в значение `"normal"`.

<Disclaimer>
    <p>
    Важно! Модификаторы <b>view</b> и <b>theme</b> являются взаимоисключающими. Не используйте их вместе. <br />
    Модификатор <b>theme</b>  не кастомизируется с помощью дизайн-токенов.
    </p>
</Disclaimer>

<Example
    component={TextareaTheme}
    source={textareaThemeSource}
/>

### Размер поля

Чтобы изменить размер текстового поля, установите свойство `size` в одно из следующих значений: `"m"`, `"s"`.

<Example
    component={TextareaSize}
    source={textareaSizeSource}
/>

### Крестик для очистки

Чтобы добавить крестик для очистки текстового поля, установите свойство `hasClear`.
Для появления крестика установите не пустое `value` в компоненте (не работает с `defaultValue`).

<Example
    component={TextareaHasClear}
    source={textareaHasClearSource}
/>