@salutejs/plasma-new-hope 0.322.0-canary.1939.14616445713.0 → 0.322.0-canary.1939.14664752830.0

package/styled-components/es/components/DatePicker/utils/getOriginalDates.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { customDayjs } from "../../../utils/datejs";
 var initialValueStructure = {
   isoDate: '',
@@ -5,7 +11,7 @@ var initialValueStructure = {
   formattedDate: ''
 };
 export var getOriginalDates = function getOriginalDates(value, lang, format) {
-  if (!value || !lang) {
+  if (!value || !lang || !format) {
     return initialValueStructure;
   }
   customDayjs.locale(lang);
@@ -16,13 +22,6 @@ export var getOriginalDates = function getOriginalDates(value, lang, format) {
       originalDate: new Date(value)
     };
   }
-  if (!format) {
-    return {
-      formattedDate: value,
-      isoDate: '',
-      originalDate: undefined
-    };
-  }
   if (customDayjs(value, format).isValid()) {
     var isoDate = customDayjs(value, format).toISOString();
     var originalDate = customDayjs(value, format).toDate();
@@ -33,9 +32,7 @@ export var getOriginalDates = function getOriginalDates(value, lang, format) {
       originalDate: originalDate
     };
   }
-  return {
-    formattedDate: value,
-    isoDate: '',
-    originalDate: undefined
-  };
+  return _objectSpread(_objectSpread({}, initialValueStructure), {}, {
+    formattedDate: value
+  });
 };

package/styled-components/es/components/DatePicker/utils/normalizeDates.js

@@ -10,11 +10,14 @@ export var normalizeDates = function normalizeDates(_ref) {
   customDayjs.locale(lang);
   if (min && includeEdgeDates && min > originalDate) {
     dateCandidate = min;
-  } else if (min && !includeEdgeDates && min >= originalDate) {
+  }
+  if (min && !includeEdgeDates && min >= originalDate) {
     dateCandidate = customDayjs(min).add(1, 'd').toDate();
-  } else if (max && includeEdgeDates && max < originalDate) {
+  }
+  if (max && includeEdgeDates && max < originalDate) {
     dateCandidate = max;
-  } else if (max && !includeEdgeDates && max <= originalDate) {
+  }
+  if (max && !includeEdgeDates && max <= originalDate) {
     dateCandidate = customDayjs(max).subtract(1, 'd').toDate();
   }
   var formattedDateCandidate = format ? customDayjs(dateCandidate).format(format) : dateCandidate.toString();

package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx

@@ -30,7 +30,7 @@ type Items = Array<{
          */
         label: string;
         /**
-        * Сторона открытия вложенного дропдауна относительно текущего элемента;
+        * Сторона открытия вложенного Dropdown относительно текущего элемента;
         */
         placement?: DropdownPlacement;
         /**
@@ -117,7 +117,7 @@ type Items = Array<{
 
 
             return (
-                <div style={{ height:"300px" }}>
+                <div style=\{{ height:"300px" }}>
                     <Dropdown
                         items={items}
                     >
@@ -170,7 +170,7 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
                     <Dropdown
                         items={items}
                         size="l"
@@ -245,7 +245,7 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
                     <Dropdown
                         items={items}
                     >
@@ -327,7 +327,7 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height:"300px" }}>
+                <div style=\{{ height:"300px" }}>
                     <Dropdown
                         items={items}
                         trigger="hover"
@@ -380,10 +380,10 @@ type Items = Array<{
                 },
             ];
 
-            const ref = useRef(null)
+            const ref = useRef(null);
 
             return (
-                <div style={{ position: "relative", height: "300px" }} ref={ref}>
+                <div style=\{{ position: "relative", height: "300px" }} ref={ref}>
                     <Dropdown items={items} portal={ref}>
                         <Button text="Список стран" />
                     </Dropdown>
@@ -399,13 +399,13 @@ type Items = Array<{
 Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
 
 - `Tab` - закрывает Dropdown. Перемещает фокус на следующий элемент на странице;
-- `Enter` - открывает/закрывает Dropdown. Если на элементе - выбирает его;
-- `Space` - открывает/закрывает Dropdown. Если на элементе - выбирает его;
+- `Enter` - открывает/закрывает Dropdown. Если на элементе — выбирает его;
+- `Space` - открывает/закрывает Dropdown. Если на элементе — выбирает его;
 - `Home` - открывает Dropdown и перемещает фокус на первый элемент;
 - `End` - открывает Dropdown и перемещает фокус на последний элемент;
 - `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
 - `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
 - `ArrowUp` - открывает Dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
 - `ArrowDown` - открывает Dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
-- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
+- `ArrowRight` - если фокус на элементе вложенного списка — открывает его и перемещает фокус на первый элемент;
 - `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;

package/styled-components/es/components/Flow/Flow.template-doc.mdx

@@ -41,7 +41,7 @@ export function App() {
 
     return (
         <div>
-            <Flow mainAxisGap="0.5ch" crossAxisGap="1ch" style={{ width: '15ch' }} >
+            <Flow mainAxisGap="0.5ch" crossAxisGap="1ch" style=\{{ width: '15ch' }} >
                 {Array(6)
                     .fill(0)
                     .map((_, i) => (<div key={i} style={style(i)}>{numbers[i]}</div>))}
@@ -77,7 +77,7 @@ export function App() {
                 orientation="vertical"
                 mainAxisGap="0.5ch"
                 crossAxisGap="1ch"
-                style={{ height: '90px' }}
+                style=\{{ height: '90px' }}
             >
                 {Array(6)
                     .fill(0)

package/styled-components/es/components/Notification/Notification.template-doc.mdx

@@ -20,7 +20,7 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="NotificationsProvider" />
 
 Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна.
-В качестве свойств можно указать контейнер для оповещений через `frame` и расположение в контейнере через свойство `placement`, как `bottom-right` _(по умолчанию)_ или `bottom-left`.
+В качестве свойств можно указать контейнер для оповещений через `frame`.
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
@@ -36,6 +36,15 @@ ReactDOM.render(
 );
 ```
 
+### Позиционирование
+
+Позиционирование компонента регулируется с помощью свойства `placement`.
+
+```ts
+type NotificationPlacement = 'center' | 'top' | 'bottom' | 'right' | 'left';
+````
+И производные комбинации, например `bottom-left` или `top-right`.
+
 ### Вызов уведомления
 После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, который приведет к отображению оповещения.
 Функция принимает значения свойств компонента `Notification`, включая необязательное поле `id`. И возвращает сгенерированный или переданный `id`, по которому можно закрыть оповещение через вызов `closeNotification`.

package/styled-components/es/components/NumberFormat/NumberFormat.template-doc.mdx

@@ -10,8 +10,8 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="NumberFormat" exclude={['css']} />
 
 ## Использование
-Компонент `NumberFormat` представляет собой поле ввода с поле ввода числовых значений.
-Он реализован на компоненте [TextField](https://plasma.sberdevices.ru/b2c/components/textfield/) 
+Компонент `NumberFormat` представляет собой поле ввода числовых значений.
+Он реализован на компоненте [TextField](https://plasma.sberdevices.ru/{{ name }}/components/textfield/)
 и наследует практически все его свойства (`size`, `view`, `disabled`, `label` и тд.)
 
 ### Разделитель тысяч и десятичных знаков
@@ -146,7 +146,7 @@ export function App() {
 ```
 
 ### Ведущие нули
-Чтобы разрешить в числе ведущие нули, нуджно указать свойство `allowLeadingZeros`:
+Чтобы разрешить в числе ведущие нули, нужно указать свойство `allowLeadingZeros`:
 
 ```tsx live
 import React from 'react';
@@ -165,4 +165,4 @@ export function App() {
         </div>
     );
 }
-```
+```

package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx

@@ -7,18 +7,18 @@ import { PropsTable, Description } from '@site/src/components';
 
 # Radiobox
 <Description name="Radiobox" />
-<PropsTable name="Radiobox" exclude={['css', 'focused']} />
+<PropsTable name="Radiobox" exclude={['css', 'focused']} include={['defaultChecked']} />
 
 :::caution Устаревшие значения для свойства view
-Актуальным значением для свойства `view` - является `accent`. 
+Актуальным значением для свойства `view` - является `accent`.
 
-Все остальные значения `deprecated` и будут удалены в ближайшее время! 
+Все остальные значения `deprecated` и будут удалены в ближайшее время!
 :::
 
 ## Использование
 Компонент `Radiobox` может содержать лейбл и описание.
 
-По умолчанию, контент внутри лейбла и описания многострочный. 
+По умолчанию, контент внутри лейбла и описания многострочный.
 
 Для того чтобы стал однострочным, необходимо использовать свойство `singleLine`(по умолчанию `false`).
 
@@ -34,14 +34,13 @@ export function App() {
 ```
 
 ## RadioGroup
+
 Компоненты `Radiobox` следует объединять в `RadioGroup`
 
 ```tsx live
-<div>
-    <RadioGroup aria-labelledby="radiogroup-title-id">
-        <H3 id="radiogroup-title-id" style=\{{"margin-bottom": "12px"}}>Заголовок</H3>
-        <Radiobox name="radio-1" label="Радиокнопка 1" description="Описание 1" defaultChecked />
-        <Radiobox name="radio-1" label="Радиокнопка 2" description="Описание 2" />
-    </RadioGroup>
-</div>
+<RadioGroup aria-labelledby="radiogroup-title-id">
+    <H3 id="radiogroup-title-id">Заголовок</H3>
+    <Radiobox name="radio-1" label="Радиокнопка 1" description="Описание 1" defaultChecked />
+    <Radiobox name="radio-1" label="Радиокнопка 2" description="Описание 2" />
+</RadioGroup>
 ```

package/styled-components/es/components/Range/Range.template-doc.mdx

@@ -323,6 +323,10 @@ export function App() {
 ```
 
 ### Обязательность поля
+:::tip
+Наличие индикатора регулируется свойством `hasRequiredIndicator`.
+:::
+
 Обязательность поля задаётся с помощью свойства `required`. 
 Если поле является обязательным, то у компонента появляется специальный индикатор. 
 Изменить расположение индикатора можно с помощью свойства `requiredPlacement`, которое принимает значения `left` и `right`. 
@@ -356,4 +360,4 @@ export function App() {
         </div>
     );
 }
-```
+```

package/styled-components/es/components/Segment/Segment.template-doc.mdx

@@ -59,7 +59,7 @@ export function App() {
     }
 
     return (
-        <div style={{ display: "block" }} >
+        <div style=\{{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']}>
                 <SegmentTemplate/>
             </SegmentProvider>
@@ -103,7 +103,7 @@ export function App() {
     }
 
     return (
-        <div style={{ display: "block" }} >
+        <div style=\{{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']} singleSelectedRequired>
                 <SegmentTemplate/>
             </SegmentProvider>
@@ -145,7 +145,7 @@ export function App() {
     }
 
     return (
-        <div style={{ display: "block" }} >
+        <div style=\{{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']}>
                 <SegmentTemplate/>
             </SegmentProvider>

package/styled-components/es/components/Select/Select.template-doc.mdx

@@ -104,12 +104,12 @@ Select может выглядеть как Button и как Textfield. За э
             ];
 
             return (
-                <div style={{ display: 'flex', gap: '30px', height: '300px' }}>
-                    <div style={{width: '300px'}}>
+                <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
                         <Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
                     </div>
 
-                    <div style={{width: '300px'}}>
+                    <div style=\{{width: '300px'}}>
                         <Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
                     </div>
                 </div>
@@ -150,12 +150,12 @@ Select может выглядеть как Button и как Textfield. За э
             ];
 
             return (
-                <div style={{ display: 'flex', gap: '30px', height: '300px' }}>
-                    <div style={{width: '300px'}}>
+                <div style=\{{display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
                         <Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
                     </div>
 
-                    <div style={{width: '300px'}}>
+                    <div style=\{{width: '300px'}}>
                         <Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
                     </div>
                 </div>
@@ -195,8 +195,8 @@ Select может выглядеть как Button и как Textfield. За э
             ];
 
             return (
-                <div style={{ display: 'flex', gap: '30px', height: '300px' }}>
-                    <div style={{width: '300px'}}>
+                <div style=\{{display: 'flex', gap: '30px', height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
                         <Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
                     </div>
 
@@ -246,8 +246,8 @@ Select может выглядеть как Button и как Textfield. За э
             };
 
             return (
-                <div style={{ height: '300px' }}>
-                    <div style={{ width: '300px' }}>
+                <div style=\{{ height: '300px' }}>
+                    <div style=\{{ width: '300px' }}>
                         <Select
                             items={items}
                             label="Label"
@@ -290,7 +290,7 @@ Select может выглядеть как Button и как Textfield. За э
                 if (Array.isArray(itemData)) {
                     if (itemData.length === 0) {
                         return (
-                            <div style={{ padding: '0.5rem 0' }}>
+                            <div style=\{{ padding: '0.5rem 0' }}>
                                 <Cell
                                     view="default"
                                     title="Выберите страну"
@@ -304,7 +304,7 @@ Select может выглядеть как Button и как Textfield. За э
                     const title = itemData.map((item) => item.label).join(', ');
 
                     return (
-                        <div style={{ padding: '0.5rem 0.75rem' }}>
+                        <div style=\{{ padding: '0.5rem 0.75rem' }}>
                             <Cell view="default" title={title} subtitle="Subtitle" label="Label" />
                         </div>
                     );
@@ -321,8 +321,8 @@ Select может выглядеть как Button и как Textfield. За э
             )
 
             return (
-                <div style={{ height: '300px' }}>
-                   <div style={{ width: '400px' }}>
+                <div style=\{{ height: '300px' }}>
+                   <div style=\{{ width: '400px' }}>
                         <Select
                             items={items}
                             value={multipleValue}
@@ -373,8 +373,8 @@ Select может выглядеть как Button и как Textfield. За э
             const ref = useRef(null)
 
             return (
-                <div style={{ position: "relative", height: "300px" }} ref={ref}>
-                    <div style={{width: '300px'}}>
+                <div style=\{{ position: "relative", height: "300px" }} ref={ref}>
+                    <div style=\{{width: '300px'}}>
                         <Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
                     </div>
                 </div>
@@ -412,8 +412,8 @@ Select может выглядеть как Button и как Textfield. За э
             ];
 
             return (
-                <div style={{ height: '300px' }}>
-                    <div style={{width: '300px'}}>
+                <div style=\{{ height: '300px' }}>
+                    <div style=\{{width: '300px'}}>
                         <Select items={items} label="Label" placeholder="Placeholder" />
                     </div>
                 </div>
@@ -433,7 +433,7 @@ Select может выглядеть как Button и как Textfield. За э
             const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
 
             return (
-                <div style={{ width: "300px", height: "300px" }}>
+                <div style=\{{ width: "300px", height: "300px" }}>
                     <Select
                         items={items}
                         virtual
@@ -490,8 +490,8 @@ Select может выглядеть как Button и как Textfield. За э
             };
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Select
                             items={items}
                             listMaxHeight="200px"
@@ -565,8 +565,8 @@ Select может выглядеть как Button и как Textfield. За э
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={handleSubmit(onSubmit)} style=\{{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                         <Select
                             items={items}
                             {...register('Select')}
@@ -628,8 +628,8 @@ Select может выглядеть как Button и как Textfield. За э
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={handleSubmit(onSubmit)} style=\{{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                         <Controller
                             control={control}
                             name="Select"
@@ -701,8 +701,8 @@ Select может выглядеть как Button и как Textfield. За э
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={onSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                         <Select label="Select" name="Select" defaultValue={"brazil"} items={items} />
                         <Select label="Select" name="SelectMulti" defaultValue={["brazil"]} items={items} multiselect />
                         <Button type="submit">Отправить</Button>

package/styled-components/es/components/Slider/Slider.template-doc.mdx

@@ -77,7 +77,7 @@ export function App() {
 }
 ```
 
-# Вертикальное отображение
+## Вертикальное отображение
 
 ```tsx live
 import React from 'react';
@@ -86,7 +86,7 @@ import { IconMic } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <section style={{ height: '300px' }}>
+        <section style=\{{ height: '300px' }}>
             <Slider
                 onChangeCommitted={() => {}}
                 min={0}

package/styled-components/es/components/Switch/Switch.template-doc.mdx

@@ -7,7 +7,7 @@ import { PropsTable, Description } from '@site/src/components';
 
 # Switch
 <Description name="Switch" />
-<PropsTable name="Switch" />
+<PropsTable name="Switch" include={['defaultChecked']} />
 
 ## Использование
 Компонент `Switch` может содержать лейбл.
@@ -30,7 +30,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Switch } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
@@ -47,7 +47,7 @@ export function App() {
 
 ```tsx live
 import React from 'react';
-import { Button } from '@salutejs/{{ package }}';
+import { Switch } from '@salutejs/{{ package }}';
 
 export function App() {
     return (

package/styled-components/es/components/Table/Table.template-doc.mdx

@@ -492,7 +492,7 @@ export type TableColumnData = {
             ];
 
             return (
-                <div style={{ display: "block" }}>
+                <div style=\{{ display: "block" }}>
                     <ButtonGroup size="xs" isCommonButtonStyles={false}>
                         <Button text="Очистить выбранные" view="warning" size="xs" onClick={clearSelected} />
                         <Button text="Убрать сортировку" view="warning" size="xs" onClick={clearSorted} />
@@ -504,7 +504,7 @@ export type TableColumnData = {
                     <br />
                     <br />
 
-                    <div style={{ overflow: "scroll" }}>
+                    <div style=\{{ overflow: "scroll" }}>
                         <Table
                             data={data}
                             columns={columns}

package/styled-components/es/components/Tabs/Tabs.template-doc.mdx

@@ -5,6 +5,10 @@ title: Tabs
 
 import { PropsTable, Description } from '@site/src/components';
 
+# Tabs
+Набор компонентов для создания вкладок.
+Структура для вкладок похожа на структуру маркированных списков.
+
 ## Tabs
 
 <Description name="Tabs" />
@@ -16,7 +20,7 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="TabItem" />
 
 :::caution Взаимоисключающие свойства
-Свойство `value` - это значение таба. Оно отображается справа от основного текста.<br/>
+Свойство `value` - это значение Tab. Оно отображается справа от основного текста.<br/>
 `value` и `contentRight` взаимоисключающие: если передано одно, второе передать нельзя.
 :::
 
@@ -61,8 +65,8 @@ export function App() {
 }
 ```
 
-### Расположение табов
-Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
+### Расположение Tabs
+Компонент может быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
 
 ```tsx live
 import React, { useState } from 'react';
@@ -97,11 +101,11 @@ export function App() {
 ```
 
 ### Пример с прокруткой
-При выборе таба происходит прокрутка до выбранного таба.
+При выборе Tab происходит прокрутка до выбранного TabItem.
 
 ```tsx live
 import React, { useState } from 'react';
-import { Tabs, TabItem, Button } from '@salutejs/plasma-web';
+import { Tabs, TabItem, Button } from '@salutejs/{{ package }}';
 import { IconClock } from '@salutejs/plasma-icons';
 
 export function App() {
@@ -189,8 +193,8 @@ export function App() {
 
 ### Подключение клавиатурной навигации
 Для этого необходимо дополнительно прокинуть свойства `index, itemIndex, onIndexChange`.<br/>
-Для горизонтальных табов: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.<br/>
-Для вертикальных табов: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.
+Для горизонтальных Tabs: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.<br/>
+Для вертикальных Tabs: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.
 
 ```tsx live
 import React, { useState } from 'react';

package/styled-components/es/components/TextArea/TextArea.template-doc.mdx

@@ -161,11 +161,18 @@ export function App() {
 
 
 ### Обязательность поля
-Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+
+:::tip
+Наличие индикатора регулируется свойством `hasRequiredIndicator`.
+:::
+
+Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`.
+
+Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
 
 ```tsx live
 import React from 'react';
-import { TextField } from '@salutejs/{{ package }}';
+import { TextArea } from '@salutejs/{{ package }}';
 
 export function App() {
     return (