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

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.23.5 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@15.1.3](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-fields@0.11.26](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-fields/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-cards@0.11.5](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-cards/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-case-card@0.4.4](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-case-card/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-grid@0.1.5](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-grid/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-layout@0.2.4](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-layout/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-media@0.1.34](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-media/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-rich-text@0.2.12](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-rich-text/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-table@0.2.13](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-table/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.23.4 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.23.3 (2025-11-12)
 
 ### Only dependencies have been changed

package/dist/cjs/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/cjs/components/SectionAccordion/SectionAccordion.js

@@ -0,0 +1,29 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionAccordion = SectionAccordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_site_rich_text_1 = require("@sbercloud/uikit-product-site-rich-text");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const accordion_1 = require("@snack-uikit/accordion");
+const typography_1 = require("@snack-uikit/typography");
+const SectionBasic_1 = require("../SectionBasic");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+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 ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, layoutType: layoutType, backgroundColor: backgroundColor }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary, { selectionMode: selectionMode, expandedDefault: expandedDefault, onExpandedChange: onExpandedChange, className: styles_module_scss_1.default.accordion, children: items.map(({ title, description, onClick }, index) => ((0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary.CollapseBlock, { id: index.toString(), header: (0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, (0, utils_1.getBlockTitleProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), className: className, removeContentFromDOM: false, outline: outline, onClick: onClick, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', tag: 'div', size: (0, utils_1.getBlockDescriptionSize)(layoutType), className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }) }, index))) }) })));
+}

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

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

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

@@ -0,0 +1,17 @@
+"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("./SectionAccordion"), exports);

package/dist/cjs/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/cjs/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/cjs/components/SectionAccordion/types.js

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

package/dist/cjs/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/cjs/components/SectionAccordion/utils.js

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

package/dist/cjs/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/cjs/components/SectionBasic/SectionBasic.js

@@ -0,0 +1,45 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionBasic = SectionBasic;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_fields_1 = require("@sbercloud/uikit-product-mobile-fields");
+const uikit_product_site_layout_1 = require("@sbercloud/uikit-product-site-layout");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const button_1 = require("@snack-uikit/button");
+const pagination_1 = require("@snack-uikit/pagination");
+const tabs_1 = require("@snack-uikit/tabs");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const getInitialTab = (tabBarItems) => {
+    if (!tabBarItems || tabBarItems.length < 1) {
+        return undefined;
+    }
+    const [firstTab] = tabBarItems;
+    return firstTab.value;
+};
+function SectionBasic(_a) {
+    var _b, _c;
+    var { id, children, title, subtitle, description, titleSectionSize = 'm', titleTag, subtitleTag, tabBarItems, filterItems, moreButton, className, pagination, backgroundColor = constants_1.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] = (0, react_1.useState)(getInitialTab(tabBarItems));
+    const { t } = (0, uikit_product_locale_1.useLocale)('SiteSection');
+    const showFooter = Boolean(pagination || moreButton);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, Object.assign({ id: id, layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.wrapper), "data-section-background": backgroundColor }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionBasic, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(helperComponents_1.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) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sectionTabs, children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: currentTab, onChange: setCurrentTab, children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { children: tabBarItems.map(tabProps => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, Object.assign({}, tabProps), tabProps.value))) }) }) })), (filterItems === null || filterItems === void 0 ? void 0 : filterItems.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sectionFilters, "data-layout-type": layoutType, children: filterItems.map(filterProps => ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldSelect, Object.assign({}, filterProps, { className: (0, classnames_1.default)(filterProps.className, styles_module_scss_1.default.filter), layoutType: layoutType, size: 'l' }), filterProps.id))) })), children, showFooter && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, "data-layout-type": layoutType, children: [pagination && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, Object.assign({}, pagination)), moreButton && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { className: styles_module_scss_1.default.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/cjs/components/SectionBasic/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"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("./SectionBasic"), exports);

package/dist/cjs/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/cjs/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/cjs/components/SectionBenefits/SectionBenefits.js

@@ -0,0 +1,56 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionBenefits = SectionBenefits;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_site_cards_1 = require("@sbercloud/uikit-product-site-cards");
+const uikit_product_site_grid_1 = require("@sbercloud/uikit-product-site-grid");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const typography_1 = require("@snack-uikit/typography");
+const helperComponents_1 = require("../../helperComponents");
+const SectionBasic_1 = require("../SectionBasic");
+const components_1 = require("./components");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+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] = (0, react_1.useState)(tabBarItems && tabBarItems[0].value);
+    const tabs = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, titleTag: titleTag, subtitle: subtitle, subtitleTag: subtitleTag, description: description, layoutType: layoutType, backgroundColor: backgroundColor || backgroundColorSection, tabBarItems: tabs }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [!tabBarItems && ((0, jsx_runtime_1.jsxs)(uikit_product_site_grid_1.Grid, { layoutType: layoutType, columnsConfig: columnsConfig, gap: gap, children: [type === 'info' &&
+                        content.map((item, index) => (0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardInfo, Object.assign({}, item, { outline: outline, layoutType: layoutType }), index)), type === 'numeric' &&
+                        content.map((item, index) => ((0, jsx_runtime_1.jsx)(components_1.CardNumeric, Object.assign({}, item, { number: index + 1, layoutType: layoutType }), index))), type === 'product' &&
+                        content.map((item, index) => (0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardProduct, Object.assign({}, item, { layoutType: layoutType }), index)), type === 'basic' &&
+                        content.map((item, index) => (0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardBasic, Object.assign({}, item, { layoutType: layoutType }), index))] })), tabBarItems && ((0, jsx_runtime_1.jsxs)(uikit_product_site_grid_1.Grid, { layoutType: layoutType, columnsConfig: columnsConfig, gap: gap, children: [type === 'info' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardInfo, Object.assign({ layoutType: layoutType }, card, { outline: outline }), index)))), type === 'numeric' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => ((0, jsx_runtime_1.jsx)(components_1.CardNumeric, Object.assign({ layoutType: layoutType }, card, { number: index + 1 }), index)))), type === 'product' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => (0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardProduct, Object.assign({ layoutType: layoutType }, card), index))), type === 'basic' &&
+                        content
+                            .filter(({ tabValue }) => tabValue === activeTab)
+                            .map(({ cards }) => cards.map((card, index) => (0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardBasic, Object.assign({ layoutType: layoutType }, card), index)))] })), note && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.note, children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: note } }) })), buttons && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.buttons, "data-buttons-align": buttonsAlign, children: buttons.map(button => (0, helperComponents_1.SectionButton)(button)) }))] })));
+}

package/dist/cjs/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/cjs/components/SectionBenefits/components/CardNumeric/CardNumeric.js

@@ -0,0 +1,25 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardNumeric = CardNumeric;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_site_cards_1 = require("@sbercloud/uikit-product-site-cards");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function CardNumeric(_a) {
+    var { number } = _a, props = __rest(_a, ["number"]);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardInfo, Object.assign({}, props, { icon: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansHeadlineM, { className: styles_module_scss_1.default.number, children: number }) })));
+}

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

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

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

@@ -0,0 +1,17 @@
+"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("./CardNumeric"), exports);

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

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

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

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

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

@@ -0,0 +1,17 @@
+"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("./CardNumeric"), exports);

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

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

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

@@ -0,0 +1,17 @@
+"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("./SectionBenefits"), exports);

package/dist/cjs/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);
+}