@cloud-ru/uikit-product-site-section 0.25.5 → 0.26.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.26.0 (2025-12-18)
+
+
+### Features
+
+* **SITE-10338:** update gap site components ([9afded2](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/9afded24fb470672c8f92be51ecb3fa147ba7bf1))
+
+
+
+
+
 ## 0.25.5 (2025-12-17)
 
 ### Only dependencies have been changed

package/README.md

@@ -46,7 +46,7 @@
 | content* | `ContentBasicTab[] \| CardBasicArray \| ContentInfoTab[] \| CardInfoArray \| ContentNumericTab[] \| CardNumericArray \| ContentProductTab[] \| CardProductArray` | - |  |
 | type* | "basic" \| "info" \| "numeric" \| "product" | - |  |
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| columnsConfig* | `ColumnsConfig` | - | Конфигурация настройки колонок для разных layoutType |
+| columnsConfig* | `GridProps` | - | Конфигурация настройки колонок для разных layoutType |
 | id | `string` | - | id секции |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Название подзаголовка секции |
@@ -78,8 +78,8 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | items* | `BlogCarouselItem[]` | - | Массив айтемов |
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
 | description | `string` | - | Описание секции |
@@ -88,8 +88,8 @@
 | subtitleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег подзаголовка |
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
-| className | `string` | - | CSS - класснейм |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| className | `string` | - | CSS - класснейм |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
@@ -97,8 +97,8 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | items* | `CaseItem[]` | - | Массив айтемов |
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
 | titleSectionSize | enum Size: `"s"`, `"m"`, `"l"` | - | Размер шрифтов заголовка и подзаголовка |
@@ -106,8 +106,8 @@
 | subtitleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег подзаголовка |
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
-| className | `string` | - | CSS - класснейм |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| className | `string` | - | CSS - класснейм |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
@@ -128,8 +128,8 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | items* | `CardClientProps[]` | - | Массив айтемов |
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
 | titleSectionSize | enum Size: `"s"`, `"m"`, `"l"` | - | Размер шрифтов заголовка и подзаголовка |
@@ -137,8 +137,8 @@
 | subtitleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег подзаголовка |
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
-| className | `string` | - | CSS - класснейм |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| className | `string` | - | CSS - класснейм |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
@@ -154,9 +154,9 @@
 | button | `Omit<ButtonFilledProps, "size" \| "fullWidth">` | - | Кнопка действия |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | neutral-background1-level | Цвет фона |
 | contentPosition | "left" \| "right" | left | Местоположение контента в секции |
-| video | `ReactNode \| VideoPlayerProps` | - |  |
-| onPlay | `() => void` | - |  |
-| onError | `ReactEventHandler<HTMLVideoElement>` | - |  |
+| video | `any` | - |  |
+| onPlay | `any` | - |  |
+| onError | `any` | - |  |
 | image | `{ src: string; alt?: string; }` | - | Ссылка на изображение |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 ## SectionContentList
@@ -171,9 +171,9 @@
 | items | `Item[]` | - | Список элементов |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
 | contentPosition | "left" \| "right" | left | Местоположение контента в секции |
-| video | `ReactNode \| VideoPlayerProps` | - |  |
-| onPlay | `() => void` | - |  |
-| onError | `ReactEventHandler<HTMLVideoElement>` | - |  |
+| video | `any` | - |  |
+| onPlay | `any` | - |  |
+| onError | `any` | - |  |
 | image | `{ src: string; alt?: string; }` | - | Ссылка на изображение |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 ## SectionContentTabs
@@ -194,8 +194,8 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | items* | `ExpertDetails[]` | - | Массив айтемов |
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
 | titleSectionSize | enum Size: `"s"`, `"m"`, `"l"` | - | Размер шрифтов заголовка и подзаголовка |
@@ -203,8 +203,8 @@
 | subtitleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег подзаголовка |
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
-| className | `string` | - | CSS - класснейм |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| className | `string` | - | CSS - класснейм |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
@@ -227,8 +227,8 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | items* | `CardMarketplaceProps[]` | - | Массив айтемов |
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
 | description | `string` | - | Описание секции |
@@ -237,8 +237,8 @@
 | subtitleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег подзаголовка |
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
-| className | `string` | - | CSS - класснейм |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| className | `string` | - | CSS - класснейм |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
@@ -252,9 +252,9 @@
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 | id | `string` | - | id секции |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
-| video | `ReactNode \| VideoPlayerProps` | - |  |
-| onPlay | `() => void` | - |  |
-| onError | `ReactEventHandler<HTMLVideoElement>` | - |  |
+| video | `any` | - |  |
+| onPlay | `any` | - |  |
+| onError | `any` | - |  |
 | image | `{ src: string; alt?: string; }` | - | Ссылка на изображение |
 ## SectionPersonalManager
 ### Props
@@ -294,20 +294,11 @@
 | id | `string` | - | id секции |
 | className | `string` | - | CSS-класс |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
-| gap | "s" \| "m" \| "l" \| "xs" | s | Размер отступов сетки |
+| gap | `GridProps` | s | Размер отступов сетки |
 ## SectionTable
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
-| rows* | `Cell[][]` | - |  |
-| id | `string` | - | id секции |
-| className | `string` | - | CSS-класс |
-| title | `string` | - | Заголовок |
-| subtitle | `string` | - | Подзаголовок |
-| description | `string` | - | Описание |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Фон подложки |
-| withHeader | `boolean` | - |  |
 ## SectionCarousel
 ### Props
 | name | type | default value | description |
@@ -318,7 +309,7 @@
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
-| titleLink | `PickLinkProps<(<T extends ElementType = "a">({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>) => Element), "onClick" \| "appearance" \| "href" \| "target" \| "textMode">` | - | Ссылка в названии |
+| titleLink | `PickLinkProps<(<T extends ElementType = "a">({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>) => Element), "onClick" \| "href" \| "target" \| "appearance" \| "textMode">` | - | Ссылка в названии |
 | description | `string` | - | Описание секции |
 | titleSectionSize | enum Size: `"s"`, `"m"`, `"l"` | - | Размер шрифтов заголовка и подзаголовка |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |

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

@@ -1,5 +1,5 @@
 .accordion{
-  gap:1px;
+  gap:2px !important;
 }
 
 .description{

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

@@ -44,15 +44,13 @@
 .sectionFilters{
   display:grid;
   grid-template-columns:repeat(3, 1fr);
-  gap:var(--dimension-4m, 32px);
+  gap:var(--dimension-1m, 8px);
 }
 .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{

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

@@ -34,7 +34,7 @@ function SectionBenefits(_a) {
             (_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 gap = type === 'basic' ? 'l' : 'xs';
     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' &&

package/dist/cjs/components/SectionCaseCarousel/SectionCaseCarousel.js

@@ -20,5 +20,5 @@ const utils_1 = require("./utils");
 function SectionCaseCarousel(_a) {
     var { items, layoutType } = _a, props = __rest(_a, ["items", "layoutType"]);
     const carouselProps = (0, react_1.useMemo)(() => (0, utils_1.getCarouselProps)(layoutType), [layoutType]);
-    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, carouselProps, { layoutType: layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_case_card_1.CaseCard, Object.assign({}, item, { layoutType: layoutType }), item.description))) })));
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, carouselProps, { layoutType: layoutType, gap: '2px', children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_case_card_1.CaseCard, Object.assign({}, item, { layoutType: layoutType }), item.description))) })));
 }

package/dist/cjs/components/SectionCatalog/SectionCatalog.js

@@ -31,5 +31,5 @@ function SectionCatalog(_a) {
     const [selectedCategory, setSelectedCategory] = (0, uncontrollable_1.useUncontrolledProp)(selectedCategoryProp, categories[0].id, onCategorySelect);
     const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
     const isOutlineCard = backgroundColor === 'neutral-background1-level';
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor, layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionCatalog) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.body, children: [(0, jsx_runtime_1.jsxs)(tabs_1.Tabs, { value: selectedCategory, onChange: setSelectedCategory, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.categoryList, { [styles_module_scss_1.default.desktopCategoryList]: isDesktop }), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { type: 'primary', orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: (0, classnames_1.default)({ [styles_module_scss_1.default.desktopTabs]: isDesktop }), children: categories.map(({ id, label }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, { value: id, label: label }, id))) }), footer && isDesktop && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionCatalogFooter, { items: footer, layoutType: layoutType })] }), categories.map(({ id, items }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabContent, { value: id, className: styles_module_scss_1.default.tabContent, children: (0, jsx_runtime_1.jsx)(uikit_product_site_grid_1.Grid, { columnsConfig: constants_1.GRID_CONFIG, gap: 's', layoutType: layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardProduct, Object.assign({ layoutType: layoutType, outline: isOutlineCard }, item), item.title))) }) }, id)))] }), footer && !isDesktop && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionCatalogFooter, { items: footer, layoutType: layoutType })] }) })));
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor, layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionCatalog) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.body, children: [(0, jsx_runtime_1.jsxs)(tabs_1.Tabs, { value: selectedCategory, onChange: setSelectedCategory, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.categoryList, { [styles_module_scss_1.default.desktopCategoryList]: isDesktop }), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { type: 'primary', orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: (0, classnames_1.default)({ [styles_module_scss_1.default.desktopTabs]: isDesktop }), children: categories.map(({ id, label }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, { value: id, label: label }, id))) }), footer && isDesktop && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionCatalogFooter, { items: footer, layoutType: layoutType })] }), categories.map(({ id, items }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabContent, { value: id, className: styles_module_scss_1.default.tabContent, children: (0, jsx_runtime_1.jsx)(uikit_product_site_grid_1.Grid, { columnsConfig: constants_1.GRID_CONFIG, gap: 'xs', layoutType: layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardProduct, Object.assign({ layoutType: layoutType, outline: isOutlineCard }, item), item.title))) }) }, id)))] }), footer && !isDesktop && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionCatalogFooter, { items: footer, layoutType: layoutType })] }) })));
 }

package/dist/cjs/components/SectionClientsCarousel/SectionClientsCarousel.js

@@ -20,5 +20,5 @@ const utils_1 = require("./utils");
 function SectionClientsCarousel(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
     const carouselProps = (0, react_1.useMemo)(() => (0, utils_1.getCarouselProps)(props.layoutType), [props.layoutType]);
-    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: figma_tokens_1.themeVars.dimension['1m'], children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardClient, Object.assign({}, item), item.alt))) })));
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: figma_tokens_1.themeVars.dimension['025m'], children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardClient, Object.assign({}, item), item.alt))) })));
 }

package/dist/cjs/components/SectionExpertsCarousel/SectionExpertsCarousel.js

@@ -17,5 +17,5 @@ const helperComponents_1 = require("../../helperComponents");
 const constants_1 = require("./constants");
 function SectionExpertsCarousel(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
-    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, { itemMinWidth: constants_1.EXPERT_MINIMAL_WIDTH, maxItemsPerPage: constants_1.MAX_PER_PAGE, children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.Expert, Object.assign({}, item), item.name))) })));
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, { itemMinWidth: constants_1.EXPERT_MINIMAL_WIDTH, maxItemsPerPage: constants_1.MAX_PER_PAGE, gap: '2px', children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.Expert, Object.assign({}, item), item.name))) })));
 }

package/dist/cjs/components/SectionLeading/SectionLeading.js

@@ -53,5 +53,5 @@ function SectionLeading(_a) {
         }
         return items.length > itemsPerPageAmount;
     }, [items.length, itemsPerPageAmount, layoutType]);
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: styles_module_scss_1.default.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && ((0, jsx_runtime_1.jsx)(carousel_1.Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerDescription, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { className: styles_module_scss_1.default.footerDescriptionText, children: footerDescription }) }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: styles_module_scss_1.default.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && ((0, jsx_runtime_1.jsx)(carousel_1.Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, gap: '2px', children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerDescription, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { className: styles_module_scss_1.default.footerDescriptionText, children: footerDescription }) }))] }) })));
 }

package/dist/cjs/components/SectionMarketplaceCarousel/SectionMarketplaceCarousel.js

@@ -20,5 +20,5 @@ const utils_1 = require("./utils");
 function SectionMarketplaceCarousel(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
     const carouselProps = (0, react_1.useMemo)(() => (0, utils_1.getCarouselProps)(props.layoutType), [props]);
-    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, carouselProps, { children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardMarketplace, Object.assign({}, item), item.title))) })));
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, carouselProps, { gap: '2px', children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardMarketplace, Object.assign({}, item), item.title))) })));
 }

package/dist/cjs/components/SectionPersonalManager/styles.module.css

@@ -7,15 +7,15 @@
   display:flex;
   box-sizing:border-box;
   flex-direction:row;
-  gap:var(--dimension-4m, 32px);
+  gap:var(--dimension-025m, 2px);
 }
 .content[data-layout-type=tablet]{
   flex-direction:column;
-  gap:var(--dimension-2m, 16px);
+  gap:var(--dimension-025m, 2px);
 }
 .content[data-layout-type=mobile]{
   flex-direction:column;
-  gap:var(--dimension-2m, 16px);
+  gap:var(--dimension-025m, 2px);
 }
 
 .card{

package/dist/cjs/components/SectionPromoList/styles.module.css

@@ -5,7 +5,7 @@
 
 .cards{
   display:flex;
-  gap:8px;
+  gap:2px;
 }
 .cards[data-layout-type=tablet], .cards[data-layout-type=mobile]{
   flex-direction:column;

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

@@ -1,5 +1,5 @@
 .accordion{
-  gap:1px;
+  gap:2px !important;
 }
 
 .description{

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

@@ -44,15 +44,13 @@
 .sectionFilters{
   display:grid;
   grid-template-columns:repeat(3, 1fr);
-  gap:var(--dimension-4m, 32px);
+  gap:var(--dimension-1m, 8px);
 }
 .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{

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

@@ -28,7 +28,7 @@ export function SectionBenefits(_a) {
             (_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 gap = type === 'basic' ? 'l' : 'xs';
     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' &&

package/dist/esm/components/SectionCaseCarousel/SectionCaseCarousel.js

@@ -17,5 +17,5 @@ import { getCarouselProps } from './utils';
 export function SectionCaseCarousel(_a) {
     var { items, layoutType } = _a, props = __rest(_a, ["items", "layoutType"]);
     const carouselProps = useMemo(() => getCarouselProps(layoutType), [layoutType]);
-    return (_jsx(SectionCarousel, Object.assign({}, props, carouselProps, { layoutType: layoutType, children: items.map(item => (_jsx(CaseCard, Object.assign({}, item, { layoutType: layoutType }), item.description))) })));
+    return (_jsx(SectionCarousel, Object.assign({}, props, carouselProps, { layoutType: layoutType, gap: '2px', children: items.map(item => (_jsx(CaseCard, Object.assign({}, item, { layoutType: layoutType }), item.description))) })));
 }

package/dist/esm/components/SectionCatalog/SectionCatalog.js

@@ -25,5 +25,5 @@ export function SectionCatalog(_a) {
     const [selectedCategory, setSelectedCategory] = useUncontrolledProp(selectedCategoryProp, categories[0].id, onCategorySelect);
     const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
     const isOutlineCard = backgroundColor === 'neutral-background1-level';
-    return (_jsx(SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor, layoutType: layoutType, className: cn(className, styles.sectionCatalog) }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.body, children: [_jsxs(Tabs, { value: selectedCategory, onChange: setSelectedCategory, children: [_jsxs("div", { className: cn(styles.categoryList, { [styles.desktopCategoryList]: isDesktop }), children: [_jsx(Tabs.TabBar, { type: 'primary', orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: cn({ [styles.desktopTabs]: isDesktop }), children: categories.map(({ id, label }) => (_jsx(Tabs.Tab, { value: id, label: label }, id))) }), footer && isDesktop && _jsx(SectionCatalogFooter, { items: footer, layoutType: layoutType })] }), categories.map(({ id, items }) => (_jsx(Tabs.TabContent, { value: id, className: styles.tabContent, children: _jsx(Grid, { columnsConfig: GRID_CONFIG, gap: 's', layoutType: layoutType, children: items.map(item => (_jsx(CardProduct, Object.assign({ layoutType: layoutType, outline: isOutlineCard }, item), item.title))) }) }, id)))] }), footer && !isDesktop && _jsx(SectionCatalogFooter, { items: footer, layoutType: layoutType })] }) })));
+    return (_jsx(SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor, layoutType: layoutType, className: cn(className, styles.sectionCatalog) }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.body, children: [_jsxs(Tabs, { value: selectedCategory, onChange: setSelectedCategory, children: [_jsxs("div", { className: cn(styles.categoryList, { [styles.desktopCategoryList]: isDesktop }), children: [_jsx(Tabs.TabBar, { type: 'primary', orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: cn({ [styles.desktopTabs]: isDesktop }), children: categories.map(({ id, label }) => (_jsx(Tabs.Tab, { value: id, label: label }, id))) }), footer && isDesktop && _jsx(SectionCatalogFooter, { items: footer, layoutType: layoutType })] }), categories.map(({ id, items }) => (_jsx(Tabs.TabContent, { value: id, className: styles.tabContent, children: _jsx(Grid, { columnsConfig: GRID_CONFIG, gap: 'xs', layoutType: layoutType, children: items.map(item => (_jsx(CardProduct, Object.assign({ layoutType: layoutType, outline: isOutlineCard }, item), item.title))) }) }, id)))] }), footer && !isDesktop && _jsx(SectionCatalogFooter, { items: footer, layoutType: layoutType })] }) })));
 }

package/dist/esm/components/SectionClientsCarousel/SectionClientsCarousel.js

@@ -17,5 +17,5 @@ import { getCarouselProps } from './utils';
 export function SectionClientsCarousel(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
     const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props.layoutType]);
-    return (_jsx(SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: themeVars.dimension['1m'], children: items.map(item => (_jsx(CardClient, Object.assign({}, item), item.alt))) })));
+    return (_jsx(SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: themeVars.dimension['025m'], children: items.map(item => (_jsx(CardClient, Object.assign({}, item), item.alt))) })));
 }

package/dist/esm/components/SectionExpertsCarousel/SectionExpertsCarousel.js

@@ -14,5 +14,5 @@ import { Expert, SectionCarousel } from '../../helperComponents';
 import { EXPERT_MINIMAL_WIDTH, MAX_PER_PAGE } from './constants';
 export function SectionExpertsCarousel(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
-    return (_jsx(SectionCarousel, Object.assign({}, props, { itemMinWidth: EXPERT_MINIMAL_WIDTH, maxItemsPerPage: MAX_PER_PAGE, children: items.map(item => (_jsx(Expert, Object.assign({}, item), item.name))) })));
+    return (_jsx(SectionCarousel, Object.assign({}, props, { itemMinWidth: EXPERT_MINIMAL_WIDTH, maxItemsPerPage: MAX_PER_PAGE, gap: '2px', children: items.map(item => (_jsx(Expert, Object.assign({}, item), item.name))) })));
 }

package/dist/esm/components/SectionLeading/SectionLeading.js

@@ -47,5 +47,5 @@ export function SectionLeading(_a) {
         }
         return items.length > itemsPerPageAmount;
     }, [items.length, itemsPerPageAmount, layoutType]);
-    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag }, extractSupportProps(rest), { children: _jsxs("div", { ref: wrapperRef, className: styles.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && (_jsx(Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, children: items.map(item => (_jsx(CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && (_jsx("div", { className: styles.footerDescription, "data-layout-type": layoutType, children: _jsx(Typography.SansBodyL, { className: styles.footerDescriptionText, children: footerDescription }) }))] }) })));
+    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag }, extractSupportProps(rest), { children: _jsxs("div", { ref: wrapperRef, className: styles.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && (_jsx(Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, gap: '2px', children: items.map(item => (_jsx(CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && (_jsx("div", { className: styles.footerDescription, "data-layout-type": layoutType, children: _jsx(Typography.SansBodyL, { className: styles.footerDescriptionText, children: footerDescription }) }))] }) })));
 }

package/dist/esm/components/SectionMarketplaceCarousel/SectionMarketplaceCarousel.js

@@ -17,5 +17,5 @@ import { getCarouselProps } from './utils';
 export function SectionMarketplaceCarousel(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
     const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props]);
-    return (_jsx(SectionCarousel, Object.assign({}, props, carouselProps, { children: items.map(item => (_jsx(CardMarketplace, Object.assign({}, item), item.title))) })));
+    return (_jsx(SectionCarousel, Object.assign({}, props, carouselProps, { gap: '2px', children: items.map(item => (_jsx(CardMarketplace, Object.assign({}, item), item.title))) })));
 }

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

@@ -7,15 +7,15 @@
   display:flex;
   box-sizing:border-box;
   flex-direction:row;
-  gap:var(--dimension-4m, 32px);
+  gap:var(--dimension-025m, 2px);
 }
 .content[data-layout-type=tablet]{
   flex-direction:column;
-  gap:var(--dimension-2m, 16px);
+  gap:var(--dimension-025m, 2px);
 }
 .content[data-layout-type=mobile]{
   flex-direction:column;
-  gap:var(--dimension-2m, 16px);
+  gap:var(--dimension-025m, 2px);
 }
 
 .card{

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

@@ -5,7 +5,7 @@
 
 .cards{
   display:flex;
-  gap:8px;
+  gap:2px;
 }
 .cards[data-layout-type=tablet], .cards[data-layout-type=mobile]{
   flex-direction:column;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "0.25.5",
+  "version": "0.26.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "1a98d6d9bff32edcbb3f9b0be0a14dce3f2abe5d"
+  "gitHead": "340f8e4151c606c0bd1d8b3053a2bda085b2861b"
 }

package/src/components/SectionAccordion/styles.module.scss

@@ -1,7 +1,8 @@
 @use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
 
 .accordion {
-  gap: 1px;
+  // Important нужен из-за перезаписи типа
+  gap: 2px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .description {

package/src/components/SectionBasic/styles.module.scss

@@ -52,16 +52,14 @@
 .sectionFilters {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var.$dimension-4m;
+  gap: var.$dimension-1m;
 
   &[data-layout-type='tablet'] {
     grid-template-columns: repeat(2, 1fr);
-    gap: var.$dimension-2m;
   }
 
   &[data-layout-type='mobile'] {
     grid-template-columns: repeat(1, 1fr);
-    gap: var.$dimension-3m;
   }
 }
 

package/src/components/SectionBenefits/SectionBenefits.tsx

@@ -77,7 +77,7 @@ export function SectionBenefits({
   );
 
   const outline = (rest as ContentInfo).outline;
-  const gap = type === 'basic' ? 'l' : 's';
+  const gap = type === 'basic' ? 'l' : 'xs';
   const backgroundColorSection = type === 'basic' || outline ? 'neutral-background1-level' : 'neutral-background';
 
   return (

package/src/components/SectionCaseCarousel/SectionCaseCarousel.tsx

@@ -13,7 +13,7 @@ export function SectionCaseCarousel({ items, layoutType, ...props }: SectionCase
   const carouselProps = useMemo(() => getCarouselProps(layoutType), [layoutType]);
 
   return (
-    <SectionCarousel {...props} {...carouselProps} layoutType={layoutType}>
+    <SectionCarousel {...props} {...carouselProps} layoutType={layoutType} gap='2px'>
       {items.map(item => (
         <CaseCard key={item.description} {...item} layoutType={layoutType} />
       ))}

package/src/components/SectionCatalog/SectionCatalog.tsx

@@ -89,7 +89,7 @@ export function SectionCatalog({
 
           {categories.map(({ id, items }) => (
             <Tabs.TabContent key={id} value={id} className={styles.tabContent}>
-              <Grid columnsConfig={GRID_CONFIG} gap='s' layoutType={layoutType}>
+              <Grid columnsConfig={GRID_CONFIG} gap='xs' layoutType={layoutType}>
                 {items.map(item => (
                   <CardProduct key={item.title} layoutType={layoutType} outline={isOutlineCard} {...item} />
                 ))}

package/src/components/SectionClientsCarousel/SectionClientsCarousel.tsx

@@ -14,7 +14,7 @@ export function SectionClientsCarousel({ items, ...props }: SectionClientsCarous
   const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props.layoutType]);
 
   return (
-    <SectionCarousel autoSwipe={0} {...props} {...carouselProps} gap={themeVars.dimension['1m']}>
+    <SectionCarousel autoSwipe={0} {...props} {...carouselProps} gap={themeVars.dimension['025m']}>
       {items.map(item => (
         <CardClient key={item.alt} {...item} />
       ))}

package/src/components/SectionExpertsCarousel/SectionExpertsCarousel.tsx

@@ -9,7 +9,7 @@ export type SectionExpertsCarouselProps = Omit<
 
 export function SectionExpertsCarousel({ items, ...props }: SectionExpertsCarouselProps) {
   return (
-    <SectionCarousel {...props} itemMinWidth={EXPERT_MINIMAL_WIDTH} maxItemsPerPage={MAX_PER_PAGE}>
+    <SectionCarousel {...props} itemMinWidth={EXPERT_MINIMAL_WIDTH} maxItemsPerPage={MAX_PER_PAGE} gap='2px'>
       {items.map(item => (
         <Expert key={item.name} {...item} />
       ))}

package/src/components/SectionLeading/SectionLeading.tsx

@@ -98,6 +98,7 @@ export function SectionLeading({
             swipe={items.length > itemsPerPageAmount}
             autoSwipe={autoSwipe}
             infiniteScroll
+            gap='2px'
           >
             {items.map(item => (
               <CardLeading key={item.label} {...item} layoutType={layoutType} data-test-id={item['data-test-id']} />

package/src/components/SectionMarketplaceCarousel/SectionMarketplaceCarousel.tsx

@@ -14,7 +14,7 @@ export function SectionMarketplaceCarousel({ items, ...props }: SectionMarketpla
   const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props]);
 
   return (
-    <SectionCarousel {...props} {...carouselProps}>
+    <SectionCarousel {...props} {...carouselProps} gap='2px'>
       {items.map(item => (
         <CardMarketplace key={item.title} {...item} />
       ))}

package/src/components/SectionPersonalManager/styles.module.scss

@@ -10,16 +10,16 @@
   box-sizing: border-box;
 
   flex-direction: row;
-  gap: var.$dimension-4m;
+  gap: var.$dimension-025m;
 
   &[data-layout-type='tablet'] {
     flex-direction: column;
-    gap: var.$dimension-2m;
+    gap: var.$dimension-025m;
   }
 
   &[data-layout-type='mobile'] {
     flex-direction: column;
-    gap: var.$dimension-2m;
+    gap: var.$dimension-025m;
   }
 }
 

package/src/components/SectionPromoList/styles.module.scss

@@ -7,7 +7,7 @@
 
 .cards {
   display: flex;
-  gap: 8px;
+  gap: 2px;
 
   &[data-layout-type='tablet'],
   &[data-layout-type='mobile'] {