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

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.27.0 (2025-12-24)
+
+
+### Features
+
+* **SITE-10441:** add border radius & fix padding bottom ([786639b](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/786639b497ad7de71551f6dbbaab1b5b81facb85))
+
+
+
+
+
+# 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/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/SectionContent/styles.module.css

@@ -40,6 +40,8 @@
 
 .mediaWrapper{
   flex-grow:1;
+  border-radius:4px;
+  overflow:hidden;
 }
 [data-layout-type=tablet] .mediaWrapper{
   width:100%;

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

@@ -54,8 +54,10 @@
   width:100%;
   height:100%;
   display:flex;
-  padding-bottom:56.5%;
+  padding-bottom:56.25%;
   border:0;
+  border-radius:4px;
+  overflow:hidden;
 }
 
 .image{

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/SectionMedia/styles.module.css

@@ -1,5 +1,7 @@
 .content{
   display:flex;
+  border-radius:4px;
+  overflow:hidden;
 }
 
 .image{

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

@@ -7,21 +7,22 @@
   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{
   box-sizing:border-box;
   background-color:var(--sys-neutral-background, #eeeff3);
   padding:var(--dimension-4m, 32px);
+  border-radius:4px;
 }
 .card[data-layout-type=tablet], .card[data-layout-type=mobile]{
   padding:var(--dimension-3m, 24px);

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;
@@ -40,4 +40,9 @@
 
 .rightSectionText[data-layout-type=mobile]{
   padding:32px 32px 0;
+}
+
+.left,
+.right{
+  border-radius:4px;
 }

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

@@ -1,5 +1,6 @@
 .cardLeading{
   overflow:hidden;
+  border-radius:4px;
 }
 
 .wrapper{

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

@@ -3,6 +3,7 @@
   flex-direction:column;
   gap:var(--dimension-1m, 8px);
   overflow:hidden;
+  border-radius:4px;
 }
 
 .imageWrapper{

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/SectionContent/styles.module.css

@@ -40,6 +40,8 @@
 
 .mediaWrapper{
   flex-grow:1;
+  border-radius:4px;
+  overflow:hidden;
 }
 [data-layout-type=tablet] .mediaWrapper{
   width:100%;

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

@@ -54,8 +54,10 @@
   width:100%;
   height:100%;
   display:flex;
-  padding-bottom:56.5%;
+  padding-bottom:56.25%;
   border:0;
+  border-radius:4px;
+  overflow:hidden;
 }
 
 .image{

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/SectionMedia/styles.module.css

@@ -1,5 +1,7 @@
 .content{
   display:flex;
+  border-radius:4px;
+  overflow:hidden;
 }
 
 .image{

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

@@ -7,21 +7,22 @@
   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{
   box-sizing:border-box;
   background-color:var(--sys-neutral-background, #eeeff3);
   padding:var(--dimension-4m, 32px);
+  border-radius:4px;
 }
 .card[data-layout-type=tablet], .card[data-layout-type=mobile]{
   padding:var(--dimension-3m, 24px);

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;
@@ -40,4 +40,9 @@
 
 .rightSectionText[data-layout-type=mobile]{
   padding:32px 32px 0;
+}
+
+.left,
+.right{
+  border-radius:4px;
 }

package/dist/esm/helperComponents/CardLeading/styles.module.css

@@ -1,5 +1,6 @@
 .cardLeading{
   overflow:hidden;
+  border-radius:4px;
 }
 
 .wrapper{

package/dist/esm/helperComponents/Expert/styles.module.css

@@ -3,6 +3,7 @@
   flex-direction:column;
   gap:var(--dimension-1m, 8px);
   overflow:hidden;
+  border-radius:4px;
 }
 
 .imageWrapper{

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "0.25.5",
+  "version": "0.27.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,11 +38,11 @@
   "dependencies": {
     "@cloud-ru/uikit-product-icons": "16.1.1",
     "@cloud-ru/uikit-product-mobile-fields": "0.12.3",
-    "@cloud-ru/uikit-product-site-cards": "0.12.1",
+    "@cloud-ru/uikit-product-site-cards": "0.13.0",
     "@cloud-ru/uikit-product-site-case-card": "0.5.1",
     "@cloud-ru/uikit-product-site-grid": "0.1.10",
     "@cloud-ru/uikit-product-site-layout": "0.5.2",
-    "@cloud-ru/uikit-product-site-media": "0.2.1",
+    "@cloud-ru/uikit-product-site-media": "0.3.0",
     "@cloud-ru/uikit-product-site-rich-text": "0.2.17",
     "@cloud-ru/uikit-product-site-table": "0.2.18",
     "@cloud-ru/uikit-product-utils": "8.1.0",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "1a98d6d9bff32edcbb3f9b0be0a14dce3f2abe5d"
+  "gitHead": "5f09d9ce6c82845090013f9b4f00f46cb160e59c"
 }

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/SectionContent/styles.module.scss

@@ -51,6 +51,8 @@
 
 .mediaWrapper {
   flex-grow: 1;
+  border-radius: 4px;
+  overflow: hidden;
 
   [data-layout-type='tablet'] & {
     width: 100%;
@@ -67,4 +69,4 @@
   height: 100%;
   object-fit: contain;
   object-position: top left;
-}
+}

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

@@ -64,8 +64,10 @@ $tabs-width: 280px;
   width: 100%;
   height: 100%;
   display: flex;
-  padding-bottom: 56.5%;
+  padding-bottom: 56.25%;
   border: 0;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
 .image {

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/SectionMedia/styles.module.scss

@@ -1,5 +1,7 @@
 .content {
   display: flex;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
 .image {

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;
   }
 }
 
@@ -28,6 +28,7 @@
   background-color: var.$sys-neutral-background;
 
   padding: var.$dimension-4m;
+  border-radius: 4px;
 
   &[data-layout-type='tablet'],
   &[data-layout-type='mobile'] {
@@ -100,7 +101,7 @@
   gap: var.$dimension-4m;
 
   &[data-layout-type='tablet'],
-  &[data-layout-type='mobile']{
+  &[data-layout-type='mobile'] {
     flex-direction: column;
     gap: var.$dimension-2m;
   }

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'] {
@@ -30,7 +30,8 @@
   background-image: var(--image);
   background-repeat: no-repeat;
   background-size: var(--image-size);
-  background-position: calc(100% + var(--image-size) - var(--image-visible-size)) calc(100% + var(--image-size) - var(--image-visible-size));
+  background-position: calc(100% + var(--image-size) - var(--image-visible-size))
+    calc(100% + var(--image-size) - var(--image-visible-size));
 
   &[data-layout-type='tablet'] {
     --image-visible-size: 300px;
@@ -50,3 +51,8 @@
     padding: 32px 32px 0;
   }
 }
+
+.left,
+.right {
+  border-radius: 4px;
+}

package/src/helperComponents/CardLeading/styles.module.scss

@@ -2,6 +2,7 @@
 
 .cardLeading {
   overflow: hidden;
+  border-radius: 4px;
 }
 
 .wrapper {

package/src/helperComponents/Expert/styles.module.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   gap: var.$dimension-1m;
   overflow: hidden;
+  border-radius: 4px;
 }
 
 .imageWrapper {