@salutejs/plasma-new-hope 0.322.0-canary.1933.14614537450.0 → 0.322.0-canary.1938.14660334712.0

package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { getConfigVariations } from '@salutejs/plasma-sb-utils';
+import { action } from '@storybook/addon-actions';
 
 import { Button } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
@@ -40,6 +41,9 @@ const getNotificationProps = (i: number) => ({
     children: texts[i % 3],
     size: size[i % 2],
     iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
+    onTimeoutClose: () => {
+        action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
+    },
 });
 
 const meta: Meta<NotificationProps> = {

package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { getConfigVariations } from '@salutejs/plasma-sb-utils';
+import { action } from '@storybook/addon-actions';
 
 import { Button } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
@@ -40,6 +41,9 @@ const getNotificationProps = (i: number) => ({
     children: texts[i % 3],
     size: size[i % 2],
     iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
+    onTimeoutClose: () => {
+        action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
+    },
 });
 
 const meta: Meta<NotificationProps> = {

package/es/components/Notification/Notification.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.types.js","sources":["../../../src/components/Notification/Notification.types.ts"],"sourcesContent":["import type { AsProps } from '@salutejs/plasma-core';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nimport { ComponentConfig, PropsType, Variants } from '../../engines/types';\nimport type { PopupPlacement } from '../Popup';\n\nexport const layouts = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n};\n\nexport type NotificationLayout = keyof typeof layouts;\n\nexport const placements = {\n    top: 'top',\n    left: 'left',\n};\n\nexport type NotificationIconPlacement = keyof typeof placements;\nexport type NotificationPlacement = PopupPlacement;\n\nexport type LayoutType = {\n    layout?: NotificationLayout;\n};\n\nexport type IconPlacementType = {\n    iconPlacement?: NotificationIconPlacement;\n};\n\nexport type CloseIconType = {\n    showCloseIcon?: boolean;\n};\n\nexport interface NotificationProps extends AsProps, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n    /**\n     * Заголовок.\n     */\n    title?: ReactNode;\n    /**\n     * Контент под заголовком.\n     */\n    children?: ReactNode;\n    /**\n     *  Кнопки снизу/справа для необходимых действий.\n     */\n    actions?: ReactNode;\n    /**\n     * Схема расположение блоков Notification.\n     */\n    layout?: NotificationLayout;\n    /**\n     * Иконка слева.\n     */\n    icon?: ReactNode;\n    /**\n     * Расположение иконки слева внутри Textbox.\n     */\n    iconPlacement?: NotificationIconPlacement;\n    /**\n     * Показывать ли иконку закрытия справа.\n     * @default\n     * true\n     */\n    showCloseIcon?: boolean;\n    /**\n     * Callback при нажатии на кнопку закрытия.\n     */\n    onCloseButtonClick?: () => void;\n    /**\n     * @deprecated\n     * Не влияет на отображение компонента.\n     * Статус компонента Notification.\n     */\n    status?: string;\n\n    /**\n     * Вид Notification.\n     */\n    view?: string;\n    /**\n     * Размер Notification (необходимо связать с размером используемых Button).\n     */\n    size?: string;\n    /**\n     * Вид закрывающей иконки в Notification.\n     */\n    closeIconType?: 'default' | 'thin';\n    /**\n     * @description Только для применения в рамках SSR.\n     */\n    UNSAFE_SSR_ENABLED?: boolean;\n    /**\n     * Цвет текста (по умолчанию берётся цвет из view)\n     */\n    textColor?: string;\n    /**\n     * Цвет заголовка (по умолчанию берётся цвет из view)\n     */\n    titleColor?: string;\n    /**\n     * Цвет заголовка (по умолчанию берётся цвет из view)\n     */\n    backgroundColor?: string;\n}\n\nexport interface NotificationPortalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n    /**\n     * Конфигурация компонента Notification.\n     */\n    config: ComponentConfig<string, Variants, PropsType<Variants>, NotificationProps & HTMLAttributes<HTMLDivElement>>;\n    /**\n     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.\n     */\n    frame?: string;\n    /**\n     * Расположение компонента Notification во frame\n     * @default bottom-right\n     */\n    placement?: NotificationPlacement;\n    /**\n     * @description Только для применения в рамках SSR.\n     */\n    UNSAFE_SSR_ENABLED?: boolean;\n}\n"],"names":["layouts","horizontal","vertical","placements","top","left"],"mappings":"AAMO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACd,EAAC;AAIM,IAAMC,UAAU,GAAG;AACtBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,IAAI,EAAE,MAAA;AACV;;;;"}
+{"version":3,"file":"Notification.types.js","sources":["../../../src/components/Notification/Notification.types.ts"],"sourcesContent":["import type { AsProps } from '@salutejs/plasma-core';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nimport { ComponentConfig, PropsType, Variants } from '../../engines/types';\nimport type { PopupPlacement } from '../Popup';\n\nexport const layouts = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n};\n\nexport type NotificationLayout = keyof typeof layouts;\n\nexport const placements = {\n    top: 'top',\n    left: 'left',\n};\n\nexport type NotificationIconPlacement = keyof typeof placements;\nexport type NotificationPlacement = PopupPlacement;\n\nexport type LayoutType = {\n    layout?: NotificationLayout;\n};\n\nexport type IconPlacementType = {\n    iconPlacement?: NotificationIconPlacement;\n};\n\nexport type CloseIconType = {\n    showCloseIcon?: boolean;\n};\n\nexport interface NotificationProps extends AsProps, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n    /**\n     * Заголовок.\n     */\n    title?: ReactNode;\n    /**\n     * Контент под заголовком.\n     */\n    children?: ReactNode;\n    /**\n     *  Кнопки снизу/справа для необходимых действий.\n     */\n    actions?: ReactNode;\n    /**\n     * Схема расположение блоков Notification.\n     */\n    layout?: NotificationLayout;\n    /**\n     * Иконка слева.\n     */\n    icon?: ReactNode;\n    /**\n     * Расположение иконки слева внутри Textbox.\n     */\n    iconPlacement?: NotificationIconPlacement;\n    /**\n     * Показывать ли иконку закрытия справа.\n     * @default\n     * true\n     */\n    showCloseIcon?: boolean;\n    /**\n     * Вид Notification.\n     */\n    view?: string;\n    /**\n     * Размер Notification (необходимо связать с размером используемых Button).\n     */\n    size?: string;\n    /**\n     * Вид закрывающей иконки в Notification.\n     */\n    closeIconType?: 'default' | 'thin';\n    /**\n     * @description Только для применения в рамках SSR.\n     */\n    UNSAFE_SSR_ENABLED?: boolean;\n    /**\n     * Цвет текста (по умолчанию берётся цвет из view)\n     */\n    textColor?: string;\n    /**\n     * Цвет заголовка (по умолчанию берётся цвет из view)\n     */\n    titleColor?: string;\n    /**\n     * Цвет заголовка (по умолчанию берётся цвет из view)\n     */\n    backgroundColor?: string;\n    /**\n     * Callback при нажатии на кнопку закрытия.\n     */\n    onCloseButtonClick?: () => void;\n    /**\n     * Callback, вызываемый при автоматическом закрытии по timeout.\n     */\n    onTimeoutClose?: () => void;\n    /**\n     * @deprecated\n     * Не влияет на отображение компонента.\n     * Статус компонента Notification.\n     */\n    status?: string;\n}\n\nexport interface NotificationPortalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n    /**\n     * Конфигурация компонента Notification.\n     */\n    config: ComponentConfig<string, Variants, PropsType<Variants>, NotificationProps & HTMLAttributes<HTMLDivElement>>;\n    /**\n     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.\n     */\n    frame?: string;\n    /**\n     * Расположение компонента Notification во frame\n     * @default bottom-right\n     */\n    placement?: NotificationPlacement;\n    /**\n     * @description Только для применения в рамках SSR.\n     */\n    UNSAFE_SSR_ENABLED?: boolean;\n}\n"],"names":["layouts","horizontal","vertical","placements","top","left"],"mappings":"AAMO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACd,EAAC;AAIM,IAAMC,UAAU,GAAG;AACtBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,IAAI,EAAE,MAAA;AACV;;;;"}

package/es/components/Notification/NotificationsStore.js

@@ -1,7 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createStoreon } from 'storeon';
 
-var _excluded = ["id"];
+var _excluded = ["id", "onTimeoutClose"];
 /**
  * Создает хранилищие с ключем `notifications` к массиву с окнами.
  */
@@ -52,6 +52,7 @@ var closeNotification = function closeNotification(id) {
  */
 function addNotification(_ref4) {
   var externalId = _ref4.id,
+    onTimeoutClose = _ref4.onTimeoutClose,
     rest = _objectWithoutProperties(_ref4, _excluded);
   var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2000;
   var id = externalId || "plasma-notification-".concat(Date.now());
@@ -62,7 +63,8 @@ function addNotification(_ref4) {
   }));
   if (timeout !== 0 && timeout !== null) {
     setTimeout(function () {
-      return closeNotification(id);
+      closeNotification(id);
+      onTimeoutClose === null || onTimeoutClose === void 0 || onTimeoutClose();
     }, timeout);
   }
   return id;

package/es/components/Notification/NotificationsStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsStore.js","sources":["../../../src/components/Notification/NotificationsStore.ts"],"sourcesContent":["import { createStoreon, StoreonStore } from 'storeon';\n\nimport { NotificationProps } from './Notification.types';\n\nexport type NotificationItem = {\n    id: string;\n    isHidden?: boolean;\n};\nexport type NotificationsState = {\n    notifications: NotificationItem[];\n};\nexport type NotificationsEvents = {\n    add: NotificationItem;\n    hide: string;\n    remove: string;\n};\n\n/**\n * Создает хранилищие с ключем `notifications` к массиву с окнами.\n */\nexport const NotificationsStore = createStoreon([\n    (store: StoreonStore<NotificationsState, NotificationsEvents>) => {\n        store.on('@init', () => ({ notifications: [] }));\n\n        store.on('add', ({ notifications }, notif) => {\n            return { notifications: notifications.concat([notif]) };\n        });\n\n        store.on('hide', ({ notifications }, id) => {\n            return {\n                notifications: notifications.map((notif) => (id === notif.id ? { ...notif, isHidden: true } : notif)),\n            };\n        });\n\n        store.on('remove', ({ notifications }, id) => {\n            return { notifications: notifications.filter((notif) => id !== notif.id) };\n        });\n    },\n]);\n\nexport const closeNotification = (id: string, delay = 380) => {\n    const { dispatch } = NotificationsStore;\n\n    dispatch('hide', id);\n    setTimeout(() => dispatch('remove', id), delay);\n};\n\n/**\n * Открыть новое оповещение.\n * @param props Пропсы всплывающего оповещения\n * @return Идентификатор нового оповещения\n */\nexport function addNotification({ id: externalId, ...rest }: NotificationProps, timeout: number | null = 2000) {\n    const id = externalId || `plasma-notification-${Date.now()}`;\n    const { dispatch } = NotificationsStore;\n\n    dispatch('add', {\n        ...rest,\n        id,\n        isHidden: false,\n    });\n\n    if (timeout !== 0 && timeout !== null) {\n        setTimeout(() => closeNotification(id), timeout);\n    }\n\n    return id;\n}\n"],"names":["NotificationsStore","createStoreon","store","on","notifications","_ref","notif","concat","_ref2","id","map","_objectSpread","isHidden","_ref3","filter","closeNotification","delay","arguments","length","undefined","dispatch","setTimeout","addNotification","_ref4","externalId","rest","_objectWithoutProperties","_excluded","timeout","Date","now"],"mappings":"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"}
+{"version":3,"file":"NotificationsStore.js","sources":["../../../src/components/Notification/NotificationsStore.ts"],"sourcesContent":["import { createStoreon, StoreonStore } from 'storeon';\n\nimport { NotificationProps } from './Notification.types';\n\nexport type NotificationItem = {\n    id: string;\n    isHidden?: boolean;\n};\nexport type NotificationsState = {\n    notifications: NotificationItem[];\n};\nexport type NotificationsEvents = {\n    add: NotificationItem;\n    hide: string;\n    remove: string;\n};\n\n/**\n * Создает хранилищие с ключем `notifications` к массиву с окнами.\n */\nexport const NotificationsStore = createStoreon([\n    (store: StoreonStore<NotificationsState, NotificationsEvents>) => {\n        store.on('@init', () => ({ notifications: [] }));\n\n        store.on('add', ({ notifications }, notif) => {\n            return { notifications: notifications.concat([notif]) };\n        });\n\n        store.on('hide', ({ notifications }, id) => {\n            return {\n                notifications: notifications.map((notif) => (id === notif.id ? { ...notif, isHidden: true } : notif)),\n            };\n        });\n\n        store.on('remove', ({ notifications }, id) => {\n            return { notifications: notifications.filter((notif) => id !== notif.id) };\n        });\n    },\n]);\n\nexport const closeNotification = (id: string, delay = 380) => {\n    const { dispatch } = NotificationsStore;\n\n    dispatch('hide', id);\n\n    setTimeout(() => dispatch('remove', id), delay);\n};\n\n/**\n * Открыть новое оповещение.\n * @param props Пропсы всплывающего оповещения\n * @return Идентификатор нового оповещения\n */\nexport function addNotification(\n    { id: externalId, onTimeoutClose, ...rest }: NotificationProps,\n    timeout: number | null = 2000,\n) {\n    const id = externalId || `plasma-notification-${Date.now()}`;\n    const { dispatch } = NotificationsStore;\n\n    dispatch('add', {\n        ...rest,\n        id,\n        isHidden: false,\n    });\n\n    if (timeout !== 0 && timeout !== null) {\n        setTimeout(() => {\n            closeNotification(id);\n\n            onTimeoutClose?.();\n        }, timeout);\n    }\n\n    return id;\n}\n"],"names":["NotificationsStore","createStoreon","store","on","notifications","_ref","notif","concat","_ref2","id","map","_objectSpread","isHidden","_ref3","filter","closeNotification","delay","arguments","length","undefined","dispatch","setTimeout","addNotification","_ref4","externalId","onTimeoutClose","rest","_objectWithoutProperties","_excluded","timeout","Date","now"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.322.0-canary.1933.14614537450.0",
+  "version": "0.322.0-canary.1938.14660334712.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -80,8 +80,8 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.197.0-canary.1933.14614537450.0",
-    "@salutejs/plasma-themes": "0.33.0-canary.1933.14614537450.0",
+    "@salutejs/plasma-sb-utils": "0.197.0-canary.1938.14660334712.0",
+    "@salutejs/plasma-themes": "0.33.0-canary.1938.14660334712.0",
     "@storybook/addon-docs": "8.6.12",
     "@storybook/addon-essentials": "8.6.12",
     "@storybook/manager-api": "8.6.12",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "a039314284be1497f8bc57710d2f939ebaec55ae"
+  "gitHead": "1969be27cb99dd466b7309c8d4235c55a7d203d7"
 }

package/styled-components/cjs/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,78 +61,106 @@ 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>
+    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>
-            );
-        }
-        ```
-    </TabItem>
-    <TabItem value="stretching" label="Stretching">
-        ```tsx live
-        import React from 'react';
-        import { Accordion, AccordionItem } from '@salutejs/{{ package }}';
+                <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>
+                </div>
+        </div>
+    );
+}
+```
+</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>
-                    </div>
+    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>
-            );
-        }
-        ```
-    </TabItem>
+                <div style=\{{"width": "100%"}}>
+                    <Accordion stretching="fixed">
+                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                        <AccordionItem title="Как оплатить заправку бонусами СберСпасибо?">После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива</AccordionItem>
+                    </Accordion>
+                </div>
+        </div>
+    );
+}
+```
+</TabItem>
 </Tabs>
 
 ### Использование Accordion в Controlled варианте