@cloud-ru/uikit-product-site-section 0.23.12 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.25.0 (2025-12-05)
+
+
+### Features
+
+* **SITE-10379:** add background prop ([e05b4fc](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/e05b4fca73fe0c2d8b1285edc7f7bbe82b7586ac))
+
+
+
+
+
+# 0.24.0 (2025-12-05)
+
+
+### Features
+
+* **SITE-10379:** add props backgroundColor ([dfd03f1](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/dfd03f116c8f5037010c5c30427cbcdf383aa9ee))
+
+
+
+
+
+## 0.23.13 (2025-12-04)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-site-layout@0.4.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-layout/CHANGELOG.md)
+
+
+
+
+
 ## 0.23.12 (2025-12-03)
 
 

package/README.md

@@ -69,6 +69,7 @@
 | titleTag | enum Tag: `"span"`, `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`, `"h6"`, `"div"`, `"label"`, `"p"` | h3 | Тэг заголовка |
 | description | `string \| string[]` | - | Описание под баннером |
 | className | `string` | - | CSS класс |
+| backgroundSectionColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Фон подложки |
 | appearance | "decor" \| "brand" \| "graphite" | brand |  |
 | color | enum ColorType: `"neutral"`, `"white"`, `"violet"`, `"blue"` | - |  |
 | backgroundType | "color" \| "image" | color |  |
@@ -250,6 +251,7 @@
 | description | `string` | - | Описание секции |
 | 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>` | - |  |
@@ -304,6 +306,7 @@
 | title | `string` | - | Заголовок |
 | subtitle | `string` | - | Подзаголовок |
 | description | `string` | - | Описание |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Фон подложки |
 | withHeader | `boolean` | - |  |
 ## SectionCarousel
 ### Props

package/dist/cjs/components/SectionBenefitsBanner/SectionBenefitsBanner.d.ts

@@ -1,6 +1,7 @@
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { TypographyProps } from '@snack-uikit/typography';
 import { BenefitItemProps } from '../../helperComponents';
+import { SectionBasicProps } from '../SectionBasic';
 import { BackgroundType } from './types';
 type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
 export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
@@ -14,6 +15,8 @@ export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
     description?: string[] | string;
     /** CSS класс */
     className?: string;
+    /** Фон подложки */
+    backgroundSectionColor?: SectionBasicProps['backgroundColor'];
 } & BackgroundType>>;
-export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, backgroundSectionColor, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/SectionBenefitsBanner/SectionBenefitsBanner.js

@@ -24,8 +24,8 @@ const SectionBasic_1 = require("../SectionBasic");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 function SectionBenefitsBanner(_a) {
-    var { title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "description", "className"]);
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ layoutType: layoutType, className: className }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bannerWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.banner, {
+    var { title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, backgroundSectionColor, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "backgroundSectionColor", "description", "className"]);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ layoutType: layoutType, className: className, backgroundColor: backgroundSectionColor !== null && backgroundSectionColor !== void 0 ? backgroundSectionColor : 'neutral-background' }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bannerWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.banner, {
                         [styles_module_scss_1.default.white]: backgroundType && backgroundType === 'image',
                     }), "data-layout-type": layoutType, "data-appearance": appearance, "data-color": color, children: [backgroundImage && ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.illustration, src: backgroundImage, alt: 'benefits-illustration', "data-layout-type": layoutType })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'light', tag: titleTag }, (0, utils_1.getTitleTypographyProps)(layoutType), { children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }))), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.benefitItems, "data-items-amount": items.length, "data-layout-type": layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.BenefitItem, Object.assign({}, item, { layoutType: layoutType }), item.description))) })] })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, "data-attribute": 'no_search_index', children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', children: Array.isArray(description) ? (description.map(item => (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: item }, item))) : ((0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description })) }) }))] }) })));
 }

package/dist/cjs/components/SectionMedia/SectionMedia.d.ts

@@ -1,5 +1,5 @@
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { MediaContentProps } from '../../types';
 import { SectionBasicProps } from '../SectionBasic';
-export type SectionMediaProps = WithLayoutType<WithSupportProps<Pick<SectionBasicProps, 'id' | 'title' | 'titleTag' | 'description'> & MediaContentProps>>;
-export declare function SectionMedia({ id, title, titleTag, layoutType, description, video, onPlay, onError, image, 'data-test-id': dataTestId, ...rest }: SectionMediaProps): import("react/jsx-runtime").JSX.Element;
+export type SectionMediaProps = WithLayoutType<WithSupportProps<Pick<SectionBasicProps, 'id' | 'title' | 'titleTag' | 'description' | 'backgroundColor'> & MediaContentProps>>;
+export declare function SectionMedia({ id, title, titleTag, layoutType, description, video, onPlay, onError, image, backgroundColor, 'data-test-id': dataTestId, ...rest }: SectionMediaProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionMedia/SectionMedia.js

@@ -21,6 +21,6 @@ const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const SectionBasic_1 = require("../SectionBasic");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function SectionMedia(_a) {
-    var { id, title, titleTag, layoutType, description, video, onPlay, onError, image, 'data-test-id': dataTestId = 'section-media' } = _a, rest = __rest(_a, ["id", "title", "titleTag", "layoutType", "description", "video", "onPlay", "onError", "image", 'data-test-id']);
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, titleTag: titleTag, description: description, "data-test-id": dataTestId }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [image && ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: (image === null || image === void 0 ? void 0 : image.alt) || title, "data-test-id": `${dataTestId}__image` })), video && ((0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { video: video, onPlay: onPlay, onError: onError, layoutType: layoutType, "data-test-id": `${dataTestId}__video` }))] }) })));
+    var { id, title, titleTag, layoutType, description, video, onPlay, onError, image, backgroundColor, 'data-test-id': dataTestId = 'section-media' } = _a, rest = __rest(_a, ["id", "title", "titleTag", "layoutType", "description", "video", "onPlay", "onError", "image", "backgroundColor", 'data-test-id']);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, titleTag: titleTag, description: description, "data-test-id": dataTestId, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'neutral-background' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [image && ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: (image === null || image === void 0 ? void 0 : image.alt) || title, "data-test-id": `${dataTestId}__image` })), video && ((0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { video: video, onPlay: onPlay, onError: onError, layoutType: layoutType, "data-test-id": `${dataTestId}__video` }))] }) })));
 }

package/dist/cjs/components/SectionTable/SectionTable.d.ts

@@ -1,5 +1,6 @@
 import { TableProps } from '@cloud-ru/uikit-product-site-table';
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { SectionBasicProps } from '../SectionBasic';
 export type SectionTableProps = WithSupportProps<WithLayoutType<{
     /** id секции */
     id?: string;
@@ -11,5 +12,7 @@ export type SectionTableProps = WithSupportProps<WithLayoutType<{
     subtitle?: string;
     /** Описание */
     description?: string;
+    /** Фон подложки */
+    backgroundColor?: SectionBasicProps['backgroundColor'];
 } & TableProps>>;
-export declare function SectionTable({ id, layoutType, className, title, subtitle, description, ...rest }: SectionTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionTable({ id, layoutType, className, title, subtitle, description, backgroundColor, ...rest }: SectionTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionTable/SectionTable.js

@@ -23,6 +23,6 @@ const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const SectionBasic_1 = require("../SectionBasic");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function SectionTable(_a) {
-    var { id, layoutType, className, title, subtitle, description } = _a, rest = __rest(_a, ["id", "layoutType", "className", "title", "subtitle", "description"]);
-    return ((0, jsx_runtime_1.jsxs)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, backgroundColor: 'neutral-background1-level', layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionTable) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [subtitle && (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: subtitle, className: styles_module_scss_1.default.subtitle, "data-test-id": 'section-table__subtitle' }), (0, jsx_runtime_1.jsx)(uikit_product_site_table_1.Table, Object.assign({}, rest, { "data-test-id": 'section-table__table' })), description && ((0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { className: styles_module_scss_1.default.description, richText: description, "data-test-id": 'section-table__description' }))] })));
+    var { id, layoutType, className, title, subtitle, description, backgroundColor } = _a, rest = __rest(_a, ["id", "layoutType", "className", "title", "subtitle", "description", "backgroundColor"]);
+    return ((0, jsx_runtime_1.jsxs)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'neutral-background', layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionTable) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [subtitle && (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: subtitle, className: styles_module_scss_1.default.subtitle, "data-test-id": 'section-table__subtitle' }), (0, jsx_runtime_1.jsx)(uikit_product_site_table_1.Table, Object.assign({}, rest, { "data-test-id": 'section-table__table' })), description && ((0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { className: styles_module_scss_1.default.description, richText: description, "data-test-id": 'section-table__description' }))] })));
 }

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

@@ -1,6 +1,7 @@
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { TypographyProps } from '@snack-uikit/typography';
 import { BenefitItemProps } from '../../helperComponents';
+import { SectionBasicProps } from '../SectionBasic';
 import { BackgroundType } from './types';
 type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
 export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
@@ -14,6 +15,8 @@ export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
     description?: string[] | string;
     /** CSS класс */
     className?: string;
+    /** Фон подложки */
+    backgroundSectionColor?: SectionBasicProps['backgroundColor'];
 } & BackgroundType>>;
-export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, backgroundSectionColor, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/SectionBenefitsBanner/SectionBenefitsBanner.js

@@ -18,8 +18,8 @@ import { SectionBasic } from '../SectionBasic';
 import styles from './styles.module.css';
 import { getTitleTypographyProps } from './utils';
 export function SectionBenefitsBanner(_a) {
-    var { title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "description", "className"]);
-    return (_jsx(SectionBasic, Object.assign({ layoutType: layoutType, className: className }, rest, { children: _jsxs("div", { className: styles.bannerWrapper, "data-layout-type": layoutType, children: [_jsxs("div", { className: cn(styles.banner, {
+    var { title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, backgroundSectionColor, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "backgroundSectionColor", "description", "className"]);
+    return (_jsx(SectionBasic, Object.assign({ layoutType: layoutType, className: className, backgroundColor: backgroundSectionColor !== null && backgroundSectionColor !== void 0 ? backgroundSectionColor : 'neutral-background' }, rest, { children: _jsxs("div", { className: styles.bannerWrapper, "data-layout-type": layoutType, children: [_jsxs("div", { className: cn(styles.banner, {
                         [styles.white]: backgroundType && backgroundType === 'image',
                     }), "data-layout-type": layoutType, "data-appearance": appearance, "data-color": color, children: [backgroundImage && (_jsx("img", { className: styles.illustration, src: backgroundImage, alt: 'benefits-illustration', "data-layout-type": layoutType })), _jsxs("div", { className: styles.contentWrapper, children: [title && (_jsx(Typography, Object.assign({ family: 'light', tag: titleTag }, getTitleTypographyProps(layoutType), { children: _jsx(RichText, { richText: title }) }))), _jsx("div", { className: styles.benefitItems, "data-items-amount": items.length, "data-layout-type": layoutType, children: items.map(item => (_jsx(BenefitItem, Object.assign({}, item, { layoutType: layoutType }), item.description))) })] })] }), description && (_jsx("div", { className: styles.description, "data-attribute": 'no_search_index', children: _jsx(Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', children: Array.isArray(description) ? (description.map(item => _jsx(RichText, { richText: item }, item))) : (_jsx(RichText, { richText: description })) }) }))] }) })));
 }

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

@@ -1,5 +1,5 @@
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { MediaContentProps } from '../../types';
 import { SectionBasicProps } from '../SectionBasic';
-export type SectionMediaProps = WithLayoutType<WithSupportProps<Pick<SectionBasicProps, 'id' | 'title' | 'titleTag' | 'description'> & MediaContentProps>>;
-export declare function SectionMedia({ id, title, titleTag, layoutType, description, video, onPlay, onError, image, 'data-test-id': dataTestId, ...rest }: SectionMediaProps): import("react/jsx-runtime").JSX.Element;
+export type SectionMediaProps = WithLayoutType<WithSupportProps<Pick<SectionBasicProps, 'id' | 'title' | 'titleTag' | 'description' | 'backgroundColor'> & MediaContentProps>>;
+export declare function SectionMedia({ id, title, titleTag, layoutType, description, video, onPlay, onError, image, backgroundColor, 'data-test-id': dataTestId, ...rest }: SectionMediaProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionMedia/SectionMedia.js

@@ -15,6 +15,6 @@ import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { SectionBasic } from '../SectionBasic';
 import styles from './styles.module.css';
 export function SectionMedia(_a) {
-    var { id, title, titleTag, layoutType, description, video, onPlay, onError, image, 'data-test-id': dataTestId = 'section-media' } = _a, rest = __rest(_a, ["id", "title", "titleTag", "layoutType", "description", "video", "onPlay", "onError", "image", 'data-test-id']);
-    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, titleTag: titleTag, description: description, "data-test-id": dataTestId }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.content, children: [image && (_jsx("img", { className: styles.image, src: image.src, alt: (image === null || image === void 0 ? void 0 : image.alt) || title, "data-test-id": `${dataTestId}__image` })), video && (_jsx(SiteVideo, { video: video, onPlay: onPlay, onError: onError, layoutType: layoutType, "data-test-id": `${dataTestId}__video` }))] }) })));
+    var { id, title, titleTag, layoutType, description, video, onPlay, onError, image, backgroundColor, 'data-test-id': dataTestId = 'section-media' } = _a, rest = __rest(_a, ["id", "title", "titleTag", "layoutType", "description", "video", "onPlay", "onError", "image", "backgroundColor", 'data-test-id']);
+    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, titleTag: titleTag, description: description, "data-test-id": dataTestId, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'neutral-background' }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.content, children: [image && (_jsx("img", { className: styles.image, src: image.src, alt: (image === null || image === void 0 ? void 0 : image.alt) || title, "data-test-id": `${dataTestId}__image` })), video && (_jsx(SiteVideo, { video: video, onPlay: onPlay, onError: onError, layoutType: layoutType, "data-test-id": `${dataTestId}__video` }))] }) })));
 }

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

@@ -1,5 +1,6 @@
 import { TableProps } from '@cloud-ru/uikit-product-site-table';
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { SectionBasicProps } from '../SectionBasic';
 export type SectionTableProps = WithSupportProps<WithLayoutType<{
     /** id секции */
     id?: string;
@@ -11,5 +12,7 @@ export type SectionTableProps = WithSupportProps<WithLayoutType<{
     subtitle?: string;
     /** Описание */
     description?: string;
+    /** Фон подложки */
+    backgroundColor?: SectionBasicProps['backgroundColor'];
 } & TableProps>>;
-export declare function SectionTable({ id, layoutType, className, title, subtitle, description, ...rest }: SectionTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionTable({ id, layoutType, className, title, subtitle, description, backgroundColor, ...rest }: SectionTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionTable/SectionTable.js

@@ -17,6 +17,6 @@ import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import { SectionBasic } from '../SectionBasic';
 import styles from './styles.module.css';
 export function SectionTable(_a) {
-    var { id, layoutType, className, title, subtitle, description } = _a, rest = __rest(_a, ["id", "layoutType", "className", "title", "subtitle", "description"]);
-    return (_jsxs(SectionBasic, Object.assign({ id: id, title: title, backgroundColor: 'neutral-background1-level', layoutType: layoutType, className: cn(className, styles.sectionTable) }, extractSupportProps(rest), { children: [subtitle && _jsx(RichText, { richText: subtitle, className: styles.subtitle, "data-test-id": 'section-table__subtitle' }), _jsx(Table, Object.assign({}, rest, { "data-test-id": 'section-table__table' })), description && (_jsx(RichText, { className: styles.description, richText: description, "data-test-id": 'section-table__description' }))] })));
+    var { id, layoutType, className, title, subtitle, description, backgroundColor } = _a, rest = __rest(_a, ["id", "layoutType", "className", "title", "subtitle", "description", "backgroundColor"]);
+    return (_jsxs(SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'neutral-background', layoutType: layoutType, className: cn(className, styles.sectionTable) }, extractSupportProps(rest), { children: [subtitle && _jsx(RichText, { richText: subtitle, className: styles.subtitle, "data-test-id": 'section-table__subtitle' }), _jsx(Table, Object.assign({}, rest, { "data-test-id": 'section-table__table' })), description && (_jsx(RichText, { className: styles.description, richText: description, "data-test-id": 'section-table__description' }))] })));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "0.23.12",
+  "version": "0.25.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,7 +41,7 @@
     "@cloud-ru/uikit-product-site-cards": "0.11.9",
     "@cloud-ru/uikit-product-site-case-card": "0.4.7",
     "@cloud-ru/uikit-product-site-grid": "0.1.8",
-    "@cloud-ru/uikit-product-site-layout": "0.3.0",
+    "@cloud-ru/uikit-product-site-layout": "0.4.0",
     "@cloud-ru/uikit-product-site-media": "0.1.38",
     "@cloud-ru/uikit-product-site-rich-text": "0.2.15",
     "@cloud-ru/uikit-product-site-table": "0.2.16",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "97f32de112901b4523a7bf7a87bc64aaf21f6c67"
+  "gitHead": "1910eca50a51cb492585a216283ad167c3494a95"
 }

package/src/components/SectionBenefitsBanner/SectionBenefitsBanner.tsx

@@ -5,7 +5,7 @@ import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils'
 import { Typography, TypographyProps } from '@snack-uikit/typography';
 
 import { BenefitItem, BenefitItemProps } from '../../helperComponents';
-import { SectionBasic } from '../SectionBasic';
+import { SectionBasic, SectionBasicProps } from '../SectionBasic';
 import styles from './styles.module.scss';
 import { BackgroundType } from './types';
 import { getTitleTypographyProps } from './utils';
@@ -25,6 +25,8 @@ export type SectionBenefitsBannerProps = WithSupportProps<
       description?: string[] | string;
       /** CSS класс */
       className?: string;
+      /** Фон подложки */
+      backgroundSectionColor?: SectionBasicProps['backgroundColor'];
     } & BackgroundType
   >
 >;
@@ -38,12 +40,18 @@ export function SectionBenefitsBanner({
   appearance = 'brand',
   color,
   backgroundImage,
+  backgroundSectionColor,
   description,
   className,
   ...rest
 }: SectionBenefitsBannerProps) {
   return (
-    <SectionBasic layoutType={layoutType} className={className} {...rest}>
+    <SectionBasic
+      layoutType={layoutType}
+      className={className}
+      backgroundColor={backgroundSectionColor ?? 'neutral-background'}
+      {...rest}
+    >
       <div className={styles.bannerWrapper} data-layout-type={layoutType}>
         <div
           className={cn(styles.banner, {

package/src/components/SectionMedia/SectionMedia.tsx

@@ -6,7 +6,9 @@ import { SectionBasic, SectionBasicProps } from '../SectionBasic';
 import styles from './styles.module.scss';
 
 export type SectionMediaProps = WithLayoutType<
-  WithSupportProps<Pick<SectionBasicProps, 'id' | 'title' | 'titleTag' | 'description'> & MediaContentProps>
+  WithSupportProps<
+    Pick<SectionBasicProps, 'id' | 'title' | 'titleTag' | 'description' | 'backgroundColor'> & MediaContentProps
+  >
 >;
 
 export function SectionMedia({
@@ -19,6 +21,7 @@ export function SectionMedia({
   onPlay,
   onError,
   image,
+  backgroundColor,
   'data-test-id': dataTestId = 'section-media',
   ...rest
 }: SectionMediaProps) {
@@ -30,6 +33,7 @@ export function SectionMedia({
       titleTag={titleTag}
       description={description}
       data-test-id={dataTestId}
+      backgroundColor={backgroundColor ?? 'neutral-background'}
       {...extractSupportProps(rest)}
     >
       <div className={styles.content}>

package/src/components/SectionTable/SectionTable.tsx

@@ -4,7 +4,7 @@ import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
 import { Table, TableProps } from '@cloud-ru/uikit-product-site-table';
 import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 
-import { SectionBasic } from '../SectionBasic';
+import { SectionBasic, SectionBasicProps } from '../SectionBasic';
 import styles from './styles.module.scss';
 
 export type SectionTableProps = WithSupportProps<
@@ -20,16 +20,27 @@ export type SectionTableProps = WithSupportProps<
       subtitle?: string;
       /** Описание */
       description?: string;
+      /** Фон подложки */
+      backgroundColor?: SectionBasicProps['backgroundColor'];
     } & TableProps
   >
 >;
 
-export function SectionTable({ id, layoutType, className, title, subtitle, description, ...rest }: SectionTableProps) {
+export function SectionTable({
+  id,
+  layoutType,
+  className,
+  title,
+  subtitle,
+  description,
+  backgroundColor,
+  ...rest
+}: SectionTableProps) {
   return (
     <SectionBasic
       id={id}
       title={title}
-      backgroundColor='neutral-background1-level'
+      backgroundColor={backgroundColor ?? 'neutral-background'}
       layoutType={layoutType}
       className={cn(className, styles.sectionTable)}
       {...extractSupportProps(rest)}