@salutejs/plasma-new-hope 0.321.1-canary.1931.14570122322.0 → 0.321.1-canary.1937.14653374486.0

package/emotion/cjs/components/TextField/TextField.template-doc.mdx

@@ -37,7 +37,7 @@ export function App() {
 ```
 
 ### Размер поля
-Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l" | "m" | "s" | "xs"`:
+Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l"` и `"m"`:
 
 ```tsx live
 import React from 'react';
@@ -53,8 +53,8 @@ export function App() {
             />
             <TextField
                 placeholder="Размер"
-                size="s"
-                defaultValue="S40"
+                size="m"
+                defaultValue="M48"
             />
         </div>
     );
@@ -62,9 +62,9 @@ export function App() {
 ```
 
 ### Статус поля
-Статус поля задается с помощью свойства `view`.
-
-Возможные значения свойства: `"positive" | "warning" | "negative"`
+Статус поля задается с помощью свойства `status`.
+Возможные значения свойства: `success`, `warning` и `error`.
+На отображение TextField так же влияют свойства `clear` и `hasDivider`:
 
 ```tsx live
 import React from 'react';
@@ -75,61 +75,46 @@ export function App() {
         <div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <div style=\{{ display: "flex", gap: "0.5rem" }}>
                 <TextField
-                    placeholder="Статус positive"
-                    view="positive"
+                    placeholder="Статус"
+                    status="success"
                     size="m"
-                    defaultValue="Positive"
+                    defaultValue="Успех"
                 />
                 <TextField
-                    placeholder="Статус warning"
-                    view="warning"
+                    placeholder="Статус"
+                    status="warning"
                     size="m"
-                    defaultValue="Warning"
+                    defaultValue="Предупреждение"
                 />
                 <TextField
-                    placeholder="Статус Ошибка"
-                    view="negative"
+                    placeholder="Статус"
+                    status="error"
                     size="m"
-                    defaultValue="Negative"
+                    defaultValue="Ошибка"
                 />
             </div>
-        </div>
-    );
-}
-```
-
-### Вариация Clear
-На отображение компонента так же влияют свойства `clear` и `hasDivider`:
-
-```tsx live
-import React from 'react';
-import { TextField } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <div style=\{{ display: "flex", gap: "0.5rem" }}>
                 <TextField
-                    placeholder="Статус positive"
-                    view="positive"
+                    placeholder="Статус"
+                    status="success"
                     size="m"
-                    defaultValue="Positive"
+                    defaultValue="Успех"
                     clear
                     hasDivider
                 />
                 <TextField
-                    placeholder="Статус warning"
-                    view="warning"
+                    placeholder="Статус"
+                    status="warning"
                     size="m"
-                    defaultValue="Warning"
+                    defaultValue="Предупреждение"
                     clear
                     hasDivider
                 />
                 <TextField
-                    placeholder="Статус negative"
-                    view="negative"
+                    placeholder="Статус"
+                    status="error"
                     size="m"
-                    defaultValue="Negative"
+                    defaultValue="Ошибка"
                     clear
                     hasDivider
                 />
@@ -140,11 +125,8 @@ export function App() {
 ```
 
 ### Подсказка
-Для вывода подсказок:
-
-- `leftHelper` внизу слева под компонентом
-- `titleCaption` сверху справа над компонентом
-- `hintText` для подсказки в виде `Tooltip`
+Для вывода подсказки снизу от поля используйте свойство `helperText`,
+для подсказки в виде Tooltip - `hintText`, для подсказки сверху справа - `titleCaption`:
 
 ```tsx live
 import React from 'react';
@@ -156,7 +138,7 @@ export function App() {
             <TextField
                 placeholder="Введите значение"
                 defaultValue="Значение"
-                leftHelper="Подсказка снизу"
+                helperText="Подсказка снизу"
                 titleCaption="Подсказка сверху"
                 hintText="Подсказка в виде Tooltip"
                 hintView="default"
@@ -169,9 +151,7 @@ export function App() {
 
 ### Режим ввода
 С помощью свойства `enumerationType` можно вводить элементы как теги. Свойство `chipType` изменяет внешний вид чипа.
-
-С помощью `chipView` можно задать общий вид `Chip`. Валидация `Chip` происходит с помощью функции `chipValidator`.
-
+С помощью `chipView` можно задать общий вид Chip. Валидация Chip происходит с помощью функции chipValidator.
 По нажатию Enter, после ввода нужного текста, он преобразуется в Chip.
 
 ```tsx live
@@ -188,7 +168,7 @@ export function App() {
                 defaultValue="Значение"
                 size="l"
                 enumerationType="chip"
-                leftHelper="Подсказка снизу"
+                helperText="Подсказка снизу"
                 chips={["Значение 1", "Значение 2"]}
                 chipView="positive"
                 chipValidator={validateChip}
@@ -199,7 +179,7 @@ export function App() {
                 defaultValue="Значение"
                 size="l"
                 enumerationType="chip"
-                leftHelper="Подсказка снизу"
+                helperText="Подсказка снизу"
                 chips={["Значение 1"]}
                 chipType="text"
             />
@@ -208,15 +188,9 @@ export function App() {
 }
 ```
 
-### Обязательность поля
-
-:::tip
-Наличие индикатора регулируется свойством `hasRequiredIndicator`.
-:::
-
-Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`.
 
-Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+### Обязательность поля
+Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
 
 ```tsx live
 import React from 'react';
@@ -235,66 +209,7 @@ export function App() {
                 required
                 requiredPlacement="right"
             />
-            <TextField
-                placeholder="Введите значение"
-                label="Поле обязательное, но не имеет визуального индикатора"
-                required
-                requiredPlacement="right"
-                hasRequiredIndicator={false}
-            />
         </div>
     );
 }
 ```
-
-## Примеры
-
-### TextField + очистка поля
-
-```tsx live
-import React, { useState } from "react";
-import { TextField } from "@salutejs/{{ package }}";
-import { IconClose } from "@salutejs/plasma-icons";
-
-export function App() {
-  const [value, setValue] = useState("");
-
-  const ControlClear = (props: { onClick: () => void }) => {
-      return (
-        <div {...props}>
-          <IconClose size="xs" color="inherit" />
-        </div>
-      );
-  };
-
-  return (
-    <div>
-      <TextField
-        placeholder="Положение иконки"
-        value={value}
-        onChange={(e) => {
-          setValue(e.target.value);
-        }}
-        contentRight={
-          <ControlClear
-            onClick={() => {
-              setValue("");
-            }}
-          />
-        }
-      />
-    </div>
-  );
-}
-```
-
-## Клавиатурная навигация
-
-Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
--  по нажатию `Tab` фокусируемся на input
--  если enumeratinType=`chip` после ввода текста, по нажатию `Enter`, input очистится и появится Chip
--  если введен текст в input по нажатию `ArrowLeft` или `ArrowRight` каретка передвигается по тексту
--  при достижении левой границы текста или отсутствии текста в input, при нажатии `Backspace` удаляем последний Chip, если он есть
--  при достижении левой границы текста или отсутствии текста в input, при нажатии `ArrowLeft` переключаемся на последний Chip, если он есть
--  при фокусе на Chip работает переключение фокуса на другие Chip по нажатию `ArrowLeft`, `ArrowRight`; если же Chip крайний правый, при нажатии `ArrowRight` фокус переходит на input
-

package/emotion/cjs/components/Toast/Toast.template-doc.mdx

@@ -9,11 +9,6 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="Toast" />
 <PropsTable name="Toast" />
 
-:::caution Устаревшие значения свойства `view`
-Значения `dark` и `light` являются устаревшими.<br/>
-Для изменения фона `Toast` используйте компонент `ViewContainer` (см. <a href="#пример-использования">пример использования</a>)
-:::
-
 ## Система подсказок
 Существует готовая система текстовых подсказок, для использования которой необходимо обернуть приложение в `ToastProvider`:
 
@@ -125,6 +120,7 @@ export interface ShowToastArgs {
 ```
 
 ## Пример использования
+
 Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
 
 ```jsx live
@@ -134,7 +130,7 @@ import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/{{ pac
 export function App() {
 
     const ToastExample = () => {
-        const { showToast } = useToast()
+        const { showToast, hideToast } = useToast()
 
         const onShow = () => {}
         const onHide = () => {}
@@ -172,45 +168,3 @@ export function App() {
     )
 }
 ```
-
-## Вид иконки
-Значения `positive` и `negative` свойства `view` изменяют цвет иконки.<br/>
-Чтобы цвет применился, установите в иконке свойство `color` со значением `inherit`:
-
-```jsx live
-import React from 'react'
-import { IconBell } from '@salutejs/plasma-icons';
-import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
-
-export function App() {
-    const Icon = () => <IconBell color="inherit" size="xs" />;
-
-    const ToastExample = () => {
-        const { showToast } = useToast()
-
-        const onShow = () => {}
-        const onHide = () => {}
-        const toastData = {
-            contentLeft: <Icon />,
-            text: 'Подсказка c иконкой',
-            position: 'bottom',
-            role: 'status',
-            hasClose: true,
-            fade: false,
-            size: 'm',
-            view: 'positive',
-            timeout: 3000,
-            onShow,
-            onHide
-        }
-
-        return <Button onClick={() => showToast(toastData)} text="Вызвать подсказку" />
-    }
-
-    return (
-        <ToastProvider>
-            <ToastExample />
-        </ToastProvider>
-    )
-}
-```

package/emotion/cjs/components/Tooltip/Tooltip.template-doc.mdx

@@ -17,28 +17,13 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Tooltip, Button } from '@salutejs/{{ package }}';
+import { Tooltip } from '@salutejs/{{ package }}';
+import { IconApps } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div style=\{{display: 'grid', gridTemplateColumns: 'repeat(3, max-content)', gridGap: '1rem 3.5rem', padding: '3.5rem'}}>
-            <Tooltip
-                target={<Tooltip target={<Button>Btn</Button>} placement="left" opened text="left" />}
-                placement="top-start"
-                opened
-                text="top-start"
-                view="default"
-            />
-            <Tooltip target={<Button>Btn</Button>} placement="top" opened text="top" />
-            <Tooltip
-                target={<Tooltip target={<Button>Btn</Button>} placement="right" opened text="right" />}
-                placement="top-end"
-                opened
-                text="top-end"
-            />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom-start" opened text="bottom-start" />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom" opened text="bottom" />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom-end" opened text="bottom-end" />
+        <div style=\{{marginLeft: '100px',marginBottom: '35px'}}>
+            <Tooltip target={( <IconApps />)} text="Высокое качество воспроизведения" placement="bottom" hasArrow opened />
         </div>
     );
 }

package/emotion/cjs/components/Tree/Tree.template-doc.mdx

@@ -218,3 +218,4 @@ type TreeItem = {
         ```
     </TabItem>
 </Tabs>
+

package/emotion/es/components/Accordion/Accordion.template-doc.mdx

@@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem';
 Компонент выпадающей информации
 <PropsTable name="AccordionItem" exclude={['value']} />
 
-Компонент представляет собой заголовок и контент, который раскрывается при нажатии.
+Компонент представляет собой заголовок и контент, который раскрывается при нажатии. 
 
 ## Примеры Accordion
 
@@ -35,10 +35,10 @@ import TabItem from '@theme/TabItem';
                     </Accordion>
                 </div>
             );
-    }
+        }
         ```
     </TabItem>
-    <TabItem value="view" label="View">
+     <TabItem value="view" label="View">
         ```tsx live
         import React from 'react';
         import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
@@ -61,106 +61,78 @@ import TabItem from '@theme/TabItem';
                         </Accordion>
                     </div>
                 </div>
-        );
-    }
-    ```
-</TabItem>
-<TabItem value="size" label="Size">
-    ```tsx live
-    import React from 'react';
-    import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="size" label="Size">
+        ```tsx live
+        import React from 'react';
+        import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
 
-    export function App() {
-        return (
-            <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="xs">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="s">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="m">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="l">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="h2">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="h3">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="h4">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion size="h5">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
+        export function App() {
+            return (
+                <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
+                    <div style=\{{"width": "100%"}}>
+                        <Accordion size="xs">
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        </Accordion>
+                    </div>
+                    <div style=\{{"width": "100%"}}>
+                        <Accordion size="s">
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        </Accordion>
+                    </div>
+                    <div style=\{{"width": "100%"}}>
+                        <Accordion size="m">
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        </Accordion>
+                    </div>
+                    <div style=\{{"width": "100%"}}>
+                        <Accordion size="l">
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        </Accordion>
+                    </div>
                 </div>
-        </div>
-    );
-}
-```
-</TabItem>
-<TabItem value="stretching" label="Stretching">
-    ```tsx live
-    import React from 'react';
-    import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="stretching" label="Stretching">
+        ```tsx live
+        import React from 'react';
+        import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
 
-    export function App() {
-        return (
-            <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
-                </div>
-                <div style=\{{"width": "100%"}}>
-                    <Accordion stretching="fixed">
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
-                    </Accordion>
+        export function App() {
+            return (
+                <div style=\{{"width": "100%", "display": "flex", "flex-direction": "column"}}>
+                    <div style=\{{"width": "100%"}}>
+                        <Accordion>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        </Accordion>
+                    </div>
+                    <div style=\{{"width": "100%"}}>
+                        <Accordion stretching="fixed">
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                            <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        </Accordion>
+                    </div>
                 </div>
-        </div>
-    );
-}
-```
-</TabItem>
+            );
+        }
+        ```
+    </TabItem>
 </Tabs>
 
 ### Использование Accordion в Controlled варианте