@salutejs/plasma-new-hope 0.322.0-canary.1932.14643424261.0 → 0.322.0-canary.1932.14660991122.0

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

@@ -7,12 +7,12 @@ import { PropsTable, Description } from '@site/src/components';
 
 # Checkbox
 <Description name="Checkbox" />
-<PropsTable name="Checkbox" exclude={['css', 'focused']} />
+<PropsTable name="Checkbox" exclude={['css', 'focused']} include={['defaultChecked']} />
 
 :::caution Устаревшие значения для свойства view
-Актуальным значением для свойства `view` - является `accent`. 
+Актуальным значением для свойства `view` - является `accent`.
 
-Все остальные значения `deprecated` и будут удалены в ближайшее время! 
+Все остальные значения `deprecated` и будут удалены в ближайшее время!
 :::
 
 ## Использование

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

@@ -26,7 +26,7 @@ type Items = Array<{
          */
         label: string;
         /**
-        * Сторона открытия вложенного дропдауна относительно текущего элемента
+        * Сторона открытия вложенного dropdown относительно текущего элемента
         * @default right
         */
         placement?: Placement;
@@ -49,7 +49,7 @@ type Items = Array<{
     }>;
 ```
 
-Тип выбора комбобокса - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
+Тип выбора Combobox - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
 
 
 ## Примеры
@@ -85,8 +85,8 @@ type Items = Array<{
             ];
 
             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" }}>
                         <Combobox
                             items={items}
                             value={value}
@@ -131,8 +131,8 @@ type Items = Array<{
             ];
 
             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" }}>
                         <Combobox
                             multiple
                             items={items}
@@ -180,8 +180,8 @@ type Items = Array<{
             ];
 
             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" }}>
                         <Combobox
                             multiple
                             items={items}
@@ -200,9 +200,9 @@ type Items = Array<{
         ```
     </TabItem>
     <TabItem value="portal" label="Portal">
-        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
+        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется scroll, и список будет обрезаться, чего хотелось бы избежать.\
         Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
-        Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
+        Также нужно прокинуть свойство `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
 
         ```tsx live
         import React, { useRef } from 'react';
@@ -232,11 +232,11 @@ type Items = Array<{
                 },
             ];
 
-            const ref = useRef(null)
+            const ref = useRef(null);
 
             return (
-                <div style={{ height: "300px" }} ref={ref}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }} ref={ref}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             value={value}
@@ -283,8 +283,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             placeholder="Placeholder"
@@ -329,9 +329,9 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{width: "300px" }}>
-                        <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style={{ marginBottom: '1rem' }} />
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{width: "300px" }}>
+                        <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style=\{{ marginBottom: '1rem' }} />
                         <Combobox
                             items={items}
                             placeholder="Placeholder"
@@ -345,6 +345,37 @@ type Items = Array<{
         }
         ```
     </TabItem>
+    <TabItem value="virtual" label="Virtual">
+        :::caution
+            Работает только в одно-уровневых списках.
+        :::
+
+        Свойство `virtual` позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство `listMaxHeight`.
+
+       ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
+
+            return (
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{width: "300px" }}>
+                        <Combobox
+                            items={items}
+                            virtual
+                            listMaxHeight="200px"
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                        />
+                    </div>
+                </div>
+            );
+        }
+    ```
+    </TabItem>
     <TabItem value="infinite" label="Infinite Loading">
         Пример с бесконечной загрузкой элементов в списке.
 
@@ -388,8 +419,8 @@ type Items = Array<{
             };
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             listMaxHeight="200px"
@@ -411,7 +442,7 @@ type Items = Array<{
 ## Использование с React Hook Form и нативной формой
 
 :::caution Использование атрибута `name`
-Используйте  свойство `name` только когда это необходимо. Оно влияет на выходной тип в `onChange`.
+Используйте свойство `name` только когда это необходимо. Оно влияет на выходной тип в `onChange`.
 :::
 
 <Tabs>
@@ -462,8 +493,8 @@ type Items = Array<{
             ];
 
             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' }}>
                         <Combobox
                             items={items}
                             {...register('combobox')}
@@ -525,8 +556,8 @@ type Items = Array<{
             ];
 
             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="combobox"
@@ -598,8 +629,8 @@ type Items = Array<{
             ];
 
             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' }}>
                         <Combobox label="Combobox" name="combobox" defaultValue={"brazil"} items={items} />
                         <Combobox label="Combobox" name="comboboxMulti" defaultValue={["brazil"]} items={items} multiple />
                         <Button type="submit">Отправить</Button>

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

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

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}