@cloud-ru/uikit-product-site-section 0.23.3 → 0.23.4

package/dist/cjs/helperComponents/SectionTitle/styles.module.css

@@ -0,0 +1,31 @@
+.sectionTitle,
+.titlesWrapper{
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+  text-align:left;
+}
+.sectionTitle[data-align=center],
+.titlesWrapper[data-align=center]{
+  text-align:center;
+}
+
+.sectionTitle{
+  flex-direction:column;
+}
+
+.titlesWrapper{
+  flex-direction:column-reverse;
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  white-space:pre-line;
+}
+
+.subtitle{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}

package/dist/cjs/helperComponents/SectionTitle/types.d.ts

@@ -0,0 +1,5 @@
+import { Tag } from '@snack-uikit/typography';
+import { ValueOf } from '@snack-uikit/utils';
+import { SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type SectionTag = Extract<Tag, 'h2' | 'h3' | 'h4'>;

package/dist/cjs/helperComponents/SectionTitle/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/helperComponents/SectionTitle/utils.d.ts

@@ -0,0 +1,8 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+import { Size } from './types';
+type Props = WithLayoutType<{
+    titleSectionSize: Size;
+}>;
+export declare const getTitleTypographyProps: ({ layoutType, titleSectionSize, }: Props) => Pick<TypographyProps, "size" | "purpose">;
+export {};

package/dist/cjs/helperComponents/SectionTitle/utils.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTitleTypographyProps = void 0;
+const getTitleTypographyProps = ({ layoutType, titleSectionSize, }) => {
+    switch (layoutType) {
+        case 'tablet':
+            switch (titleSectionSize) {
+                case 'l':
+                    return {
+                        purpose: 'headline',
+                        size: 'l',
+                    };
+                case 's':
+                    return {
+                        purpose: 'title',
+                        size: 'l',
+                    };
+                case 'm':
+                default:
+                    return {
+                        purpose: 'headline',
+                        size: 'm',
+                    };
+            }
+        case 'mobile':
+            switch (titleSectionSize) {
+                case 'l':
+                    return {
+                        purpose: 'headline',
+                        size: 'm',
+                    };
+                case 's':
+                    return {
+                        purpose: 'title',
+                        size: 'm',
+                    };
+                case 'm':
+                default:
+                    return {
+                        purpose: 'headline',
+                        size: 's',
+                    };
+            }
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            switch (titleSectionSize) {
+                case 'l':
+                    return {
+                        purpose: 'display',
+                        size: 'm',
+                    };
+                case 's':
+                    return {
+                        purpose: 'headline',
+                        size: 's',
+                    };
+                case 'm':
+                default:
+                    return {
+                        purpose: 'headline',
+                        size: 'l',
+                    };
+            }
+    }
+};
+exports.getTitleTypographyProps = getTitleTypographyProps;

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1,10 @@
+export * from './CardLeading';
+export * from './CardSocial';
+export * from './Expert';
+export * from './PromoList';
+export * from './SectionCatalogFooter';
+export * from './SectionTitle';
+export * from './SectionCarousel';
+export * from './CardClient';
+export * from './BenefitItem';
+export * from './SectionButton';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CardLeading"), exports);
+__exportStar(require("./CardSocial"), exports);
+__exportStar(require("./Expert"), exports);
+__exportStar(require("./PromoList"), exports);
+__exportStar(require("./SectionCatalogFooter"), exports);
+__exportStar(require("./SectionTitle"), exports);
+__exportStar(require("./SectionCarousel"), exports);
+__exportStar(require("./CardClient"), exports);
+__exportStar(require("./BenefitItem"), exports);
+__exportStar(require("./SectionButton"), exports);

package/dist/cjs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './helperComponents/SectionCarousel';

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./helperComponents/SectionCarousel"), exports);

package/dist/cjs/types.d.ts

@@ -0,0 +1,19 @@
+import { SiteVideoProps } from '@sbercloud/uikit-product-site-media';
+import { ValueOf } from '@snack-uikit/utils';
+import { SECTION_COLORS } from './constants';
+export type SectionColor = ValueOf<typeof SECTION_COLORS>;
+type MediaVideoProps = Pick<SiteVideoProps, 'video' | 'onPlay' | 'onError'> & {
+    image?: never;
+};
+type MediaImageProps = {
+    video?: never;
+    onPlay?: never;
+    onError?: never;
+    /** Ссылка на изображение */
+    image: {
+        src: string;
+        alt?: string;
+    };
+};
+export type MediaContentProps = MediaImageProps | MediaVideoProps;
+export {};

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/SectionAccordion/SectionAccordion.d.ts

@@ -0,0 +1,28 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { SectionColor } from '../../types';
+import { AccordionItem } from './types';
+type AccordionPropsCopy = {
+    selectionMode: 'single';
+    expandedDefault?: string;
+    onExpandedChange?(value?: string): void;
+} | {
+    selectionMode: 'multiple';
+    expandedDefault?: string[];
+    onExpandedChange?(value?: string[]): void;
+};
+export type SectionAccordionProps = WithSupportProps<AccordionPropsCopy & WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** Название секции */
+    title: string;
+    /** Массив айтемов */
+    items: AccordionItem[];
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Внешний бордер для блоков */
+    outline?: boolean;
+    /** CSS-класс */
+    className?: string;
+}>>;
+export declare function SectionAccordion({ id, title, items, selectionMode, layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className, ...rest }: SectionAccordionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/SectionAccordion/SectionAccordion.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichText } from '@sbercloud/uikit-product-site-rich-text';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { AccordionPrimary } from '@snack-uikit/accordion';
+import { Typography } from '@snack-uikit/typography';
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.css';
+import { getBlockDescriptionSize, getBlockTitleProps } from './utils';
+export function SectionAccordion(_a) {
+    var { id, title, items, selectionMode = 'multiple', layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className } = _a, rest = __rest(_a, ["id", "title", "items", "selectionMode", "layoutType", "backgroundColor", "outline", "onExpandedChange", "expandedDefault", "className"]);
+    return (_jsx(SectionBasic, Object.assign({ id: id, title: title, layoutType: layoutType, backgroundColor: backgroundColor }, extractSupportProps(rest), { children: _jsx(AccordionPrimary, { selectionMode: selectionMode, expandedDefault: expandedDefault, onExpandedChange: onExpandedChange, className: styles.accordion, children: items.map(({ title, description, onClick }, index) => (_jsx(AccordionPrimary.CollapseBlock, { id: index.toString(), header: _jsx(Typography, Object.assign({ family: 'sans' }, getBlockTitleProps(layoutType), { className: styles.title, children: _jsx(RichText, { richText: title }) })), className: className, removeContentFromDOM: false, outline: outline, onClick: onClick, children: _jsx(Typography, { family: 'sans', purpose: 'body', tag: 'div', size: getBlockDescriptionSize(layoutType), className: styles.description, children: _jsx(RichText, { richText: description }) }) }, index))) }) })));
+}

package/dist/esm/components/SectionAccordion/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionAccordion';

package/dist/esm/components/SectionAccordion/index.js

@@ -0,0 +1 @@
+export * from './SectionAccordion';

package/dist/esm/components/SectionAccordion/styles.module.css

@@ -0,0 +1,11 @@
+.accordion{
+  gap:1px;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+}

package/dist/esm/components/SectionAccordion/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { CollapseBlockPrimaryProps } from '@snack-uikit/accordion';
+/** Элемент аккордиона */
+export type AccordionItem = Pick<CollapseBlockPrimaryProps, 'onClick'> & {
+    /** Заголовок блока */
+    title: string;
+    /** Описание блока (rich text) */
+    description: string | ReactNode;
+};

package/dist/esm/components/SectionAccordion/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SectionAccordion/utils.d.ts

@@ -0,0 +1,4 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+export declare const getBlockTitleProps: (layoutType: LayoutType) => Pick<TypographyProps, "purpose" | "size">;
+export declare const getBlockDescriptionSize: (layoutType: LayoutType) => TypographyProps["size"];

package/dist/esm/components/SectionAccordion/utils.js

@@ -0,0 +1,24 @@
+export const getBlockTitleProps = (layoutType) => {
+    switch (layoutType) {
+        case 'tablet':
+        case 'mobile':
+            return {
+                purpose: 'title',
+                size: 'm',
+            };
+        default:
+            return {
+                purpose: 'headline',
+                size: 's',
+            };
+    }
+};
+export const getBlockDescriptionSize = (layoutType) => {
+    switch (layoutType) {
+        case 'tablet':
+        case 'mobile':
+            return 'm';
+        default:
+            return 'l';
+    }
+};

package/dist/esm/components/SectionBasic/SectionBasic.d.ts

@@ -0,0 +1,38 @@
+import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { FieldSelectProps } from '@sbercloud/uikit-product-mobile-fields';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { PaginationProps } from '@snack-uikit/pagination';
+import { SectionTitleProps } from '../../helperComponents';
+import { SectionColor } from '../../types';
+type TabBarItem = WithSupportProps<{
+    value: string;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    counter?: number;
+    onClick?(event: MouseEvent<HTMLButtonElement>): void;
+}>;
+export type SectionBasicProps = WithLayoutType<WithSupportProps<Pick<SectionTitleProps, 'title' | 'subtitle' | 'description' | 'titleSectionSize' | 'titleTag' | 'subtitleTag' | 'titleAlign'> & {
+    /** id секции */
+    id?: string;
+    children: ReactNode;
+    /** Массив табов */
+    tabBarItems?: TabBarItem[];
+    /** Массив фильтров */
+    filterItems?: FieldSelectProps[];
+    /** Настройки пагинации */
+    pagination?: PaginationProps;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** CSS-класс */
+    className?: string;
+    /** Кнопка внизу секции */
+    moreButton?: {
+        label?: string;
+        href?: string;
+        onClick: MouseEventHandler<HTMLElement>;
+        'data-test-id'?: string;
+    };
+}>>;
+export declare function SectionBasic({ id, children, title, subtitle, description, titleSectionSize, titleTag, subtitleTag, tabBarItems, filterItems, moreButton, className, pagination, backgroundColor, layoutType, titleAlign, ...rest }: SectionBasicProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/SectionBasic/SectionBasic.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useState } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { AdaptiveFieldSelect } from '@sbercloud/uikit-product-mobile-fields';
+import { Layout } from '@sbercloud/uikit-product-site-layout';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonOutline } from '@snack-uikit/button';
+import { Pagination } from '@snack-uikit/pagination';
+import { Tabs } from '@snack-uikit/tabs';
+import { SECTION_COLORS } from '../../constants';
+import { SectionTitle } from '../../helperComponents';
+import styles from './styles.module.css';
+const getInitialTab = (tabBarItems) => {
+    if (!tabBarItems || tabBarItems.length < 1) {
+        return undefined;
+    }
+    const [firstTab] = tabBarItems;
+    return firstTab.value;
+};
+export function SectionBasic(_a) {
+    var _b, _c;
+    var { id, children, title, subtitle, description, titleSectionSize = 'm', titleTag, subtitleTag, tabBarItems, filterItems, moreButton, className, pagination, backgroundColor = SECTION_COLORS.NeutralBackground1Level, layoutType, titleAlign } = _a, rest = __rest(_a, ["id", "children", "title", "subtitle", "description", "titleSectionSize", "titleTag", "subtitleTag", "tabBarItems", "filterItems", "moreButton", "className", "pagination", "backgroundColor", "layoutType", "titleAlign"]);
+    const [currentTab, setCurrentTab] = useState(getInitialTab(tabBarItems));
+    const { t } = useLocale('SiteSection');
+    const showFooter = Boolean(pagination || moreButton);
+    return (_jsx(Layout.SectionWrapper, Object.assign({ id: id, layoutType: layoutType, className: cn(className, styles.wrapper), "data-section-background": backgroundColor }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.sectionBasic, "data-layout-type": layoutType, children: [_jsx(SectionTitle, { layoutType: layoutType, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, titleAlign: titleAlign, subtitle: subtitle, subtitleTag: subtitleTag }), (tabBarItems === null || tabBarItems === void 0 ? void 0 : tabBarItems.length) && (_jsx("div", { className: styles.sectionTabs, children: _jsx(Tabs, { value: currentTab, onChange: setCurrentTab, children: _jsx(Tabs.TabBar, { children: tabBarItems.map(tabProps => (_jsx(Tabs.Tab, Object.assign({}, tabProps), tabProps.value))) }) }) })), (filterItems === null || filterItems === void 0 ? void 0 : filterItems.length) && (_jsx("div", { className: styles.sectionFilters, "data-layout-type": layoutType, children: filterItems.map(filterProps => (_jsx(AdaptiveFieldSelect, Object.assign({}, filterProps, { className: cn(filterProps.className, styles.filter), layoutType: layoutType, size: 'l' }), filterProps.id))) })), children, showFooter && (_jsxs("div", { className: styles.footer, "data-layout-type": layoutType, children: [pagination && _jsx(Pagination, Object.assign({}, pagination)), moreButton && (_jsx(ButtonOutline, { className: styles.showMoreButton, label: (_b = moreButton.label) !== null && _b !== void 0 ? _b : t('Basic.showMore'), onClick: moreButton.onClick, href: moreButton.href, "data-test-id": (_c = moreButton['data-test-id']) !== null && _c !== void 0 ? _c : 'section__more-btn', appearance: 'neutral', size: 'l', type: 'button', "data-layout-type": layoutType }))] }))] }) })));
+}

package/dist/esm/components/SectionBasic/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionBasic';

package/dist/esm/components/SectionBasic/index.js

@@ -0,0 +1 @@
+export * from './SectionBasic';

package/dist/esm/components/SectionBasic/styles.module.css

@@ -0,0 +1,73 @@
+.sectionBasic{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-5m, 40px);
+  padding:var(--dimension-7m, 56px) 0;
+}
+.sectionBasic[data-layout-type=tablet]{
+  gap:var(--dimension-4m, 32px);
+  padding:var(--dimension-5m, 40px) 0;
+}
+.sectionBasic[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+  padding:var(--dimension-4m, 32px) 0;
+}
+
+.wrapper[data-section-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.wrapper[data-section-background=neutral-background]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+
+.sectionTitle{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.sectionTabs{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.sectionFilters{
+  display:grid;
+  grid-template-columns:repeat(3, 1fr);
+  gap:var(--dimension-4m, 32px);
+}
+.sectionFilters[data-layout-type=tablet]{
+  grid-template-columns:repeat(2, 1fr);
+  gap:var(--dimension-2m, 16px);
+}
+.sectionFilters[data-layout-type=mobile]{
+  grid-template-columns:repeat(1, 1fr);
+  gap:var(--dimension-3m, 24px);
+}
+
+.footer{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:var(--dimension-5m, 40px);
+}
+.footer[data-layout-type=tablet]{
+  gap:var(--dimension-4m, 32px);
+}
+.footer[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+}
+
+.showMoreButton[data-layout-type=mobile]{
+  width:100%;
+}

package/dist/esm/components/SectionBenefits/SectionBenefits.d.ts

@@ -0,0 +1,33 @@
+import { GridProps } from '@sbercloud/uikit-product-site-grid';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { SectionTitleProps } from '../../helperComponents';
+import { SectionButtonProps } from '../../helperComponents/SectionButton/types';
+import { SectionColor } from '../../types';
+import { ContentBasic, ContentInfo, ContentNumeric, ContentProduct } from './types';
+export type SectionBenefitsProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** Название секции */
+    title?: string;
+    /** Название подзаголовка секции */
+    subtitle?: string;
+    /** Цвет фона секции */
+    backgroundColor?: SectionColor;
+    /** Тег заголовка */
+    titleTag?: SectionTitleProps['titleTag'];
+    /** Тег заголовка */
+    subtitleTag?: SectionTitleProps['subtitleTag'];
+    /** Описание секции */
+    description?: string;
+    /** Конфигурация настройки колонок для разных layoutType */
+    columnsConfig: GridProps['columnsConfig'];
+    /** Текст нижней сноски */
+    note?: string;
+    buttons?: SectionButtonProps[];
+    /**
+     * Выравнивание кнопок по горизонтали
+     * @default 'left'
+     */
+    buttonsAlign?: 'left' | 'center';
+}>> & (ContentBasic | ContentInfo | ContentNumeric | ContentProduct);
+export declare function SectionBenefits({ id, title, titleTag, subtitle, subtitleTag, description, type, content, tabBarItems, columnsConfig, layoutType, buttons, note, backgroundColor, buttonsAlign, ...rest }: SectionBenefitsProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionBenefits/SectionBenefits.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { CardBasic, CardInfo, CardProduct } from '@sbercloud/uikit-product-site-cards';
+import { Grid } from '@sbercloud/uikit-product-site-grid';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+import { SectionButton } from '../../helperComponents';
+import { SectionBasic } from '../SectionBasic';
+import { CardNumeric } from './components';
+import styles from './styles.module.css';
+export function SectionBenefits(_a) {
+    var { id, title, titleTag, subtitle, subtitleTag, description, type, content, tabBarItems, columnsConfig, layoutType, buttons, note, backgroundColor, buttonsAlign = 'left' } = _a, rest = __rest(_a, ["id", "title", "titleTag", "subtitle", "subtitleTag", "description", "type", "content", "tabBarItems", "columnsConfig", "layoutType", "buttons", "note", "backgroundColor", "buttonsAlign"]);
+    const [activeTab, setActiveTab] = useState(tabBarItems && tabBarItems[0].value);
+    const tabs = useMemo(() => tabBarItems === null || tabBarItems === void 0 ? void 0 : tabBarItems.map(tab => (Object.assign(Object.assign({}, tab), { onClick: (e) => {
+            var _a;
+            setActiveTab(tab.value);
+            (_a = tab.onClick) === null || _a === void 0 ? void 0 : _a.call(tab, e);
+        } }))), [tabBarItems]);
+    const outline = rest.outline;
+    const gap = type === 'basic' ? 'l' : 's';
+    const backgroundColorSection = type === 'basic' || outline ? 'neutral-background1-level' : 'neutral-background';
+    return (_jsxs(SectionBasic, Object.assign({ id: id, title: title, titleTag: titleTag, subtitle: subtitle, subtitleTag: subtitleTag, description: description, layoutType: layoutType, backgroundColor: backgroundColor || backgroundColorSection, tabBarItems: tabs }, extractSupportProps(rest), { children: [!tabBarItems && (_jsxs(Grid, { layoutType: layoutType, columnsConfig: columnsConfig, gap: gap, children: [type === 'info' &&
+                        content.map((item, index) => _jsx(CardInfo, Object.assign({}, item, { outline: outline, layoutType: layoutType }), index)), type === 'numeric' &&
+                        content.map((item, index) => (_jsx(CardNumeric, Object.assign({}, item, { number: index + 1, layoutType: layoutType }), index))), type === 'product' &&
+                        content.map((item, index) => _jsx(CardProduct, Object.assign({}, item, { layoutType: layoutType }), index)), type === 'basic' &&
+                        content.map((item, index) => _jsx(CardBasic, Object.assign({}, item, { layoutType: layoutType }), index))] })), tabBarItems && (_jsxs(Grid, { layoutType: layoutType, columnsConfig: columnsConfig, gap: gap, children: [type === 'info' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => (_jsx(CardInfo, Object.assign({ layoutType: layoutType }, card, { outline: outline }), index)))), type === 'numeric' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => (_jsx(CardNumeric, Object.assign({ layoutType: layoutType }, card, { number: index + 1 }), index)))), type === 'product' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => _jsx(CardProduct, Object.assign({ layoutType: layoutType }, card), index))), type === 'basic' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => _jsx(CardBasic, Object.assign({ layoutType: layoutType }, card), index)))] })), note && (_jsx(Typography.SansBodyM, { className: styles.note, children: _jsx("span", { dangerouslySetInnerHTML: { __html: note } }) })), buttons && (_jsx("div", { className: styles.buttons, "data-buttons-align": buttonsAlign, children: buttons.map(button => SectionButton(button)) }))] })));
+}

package/dist/esm/components/SectionBenefits/components/CardNumeric/CardNumeric.d.ts

@@ -0,0 +1,6 @@
+import { CardInfoProps } from '@sbercloud/uikit-product-site-cards';
+type CardNumericProps = Omit<CardInfoProps, 'icon'> & {
+    number: number;
+};
+export declare function CardNumeric({ number, ...props }: CardNumericProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/SectionBenefits/components/CardNumeric/CardNumeric.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardInfo } from '@sbercloud/uikit-product-site-cards';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function CardNumeric(_a) {
+    var { number } = _a, props = __rest(_a, ["number"]);
+    return (_jsx(CardInfo, Object.assign({}, props, { icon: _jsx(Typography.SansHeadlineM, { className: styles.number, children: number }) })));
+}

package/dist/esm/components/SectionBenefits/components/CardNumeric/index.d.ts

@@ -0,0 +1 @@
+export * from './CardNumeric';

package/dist/esm/components/SectionBenefits/components/CardNumeric/index.js

@@ -0,0 +1 @@
+export * from './CardNumeric';

package/dist/esm/components/SectionBenefits/components/CardNumeric/styles.module.css

@@ -0,0 +1,4 @@
+.number{
+  color:var(--sys-neutral-text-main, #41424e);
+  min-width:20px;
+}

package/dist/esm/components/SectionBenefits/components/index.d.ts

@@ -0,0 +1 @@
+export * from './CardNumeric';

package/dist/esm/components/SectionBenefits/components/index.js

@@ -0,0 +1 @@
+export * from './CardNumeric';

package/dist/esm/components/SectionBenefits/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionBenefits';

package/dist/esm/components/SectionBenefits/index.js

@@ -0,0 +1 @@
+export * from './SectionBenefits';

package/dist/esm/components/SectionBenefits/styles.module.css

@@ -0,0 +1,12 @@
+.buttons{
+  display:flex;
+  flex-wrap:wrap;
+  gap:8px;
+}
+.buttons[data-buttons-align=center]{
+  justify-content:center;
+}
+
+.note{
+  color:var(--sys-neutral-text-support, #6d707f);
+}