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

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

@@ -0,0 +1,57 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionLeading = SectionLeading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const carousel_1 = require("@snack-uikit/carousel");
+const typography_1 = require("@snack-uikit/typography");
+const helperComponents_1 = require("../../helperComponents");
+const SectionBasic_1 = require("../SectionBasic");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+const MOBILE_LAYOUTS = ['tablet', 'mobile'];
+function SectionLeading(_a) {
+    var { id, title, description, titleSectionSize = 'm', titleTag, items, footerDescription, backgroundColor, className, layoutType, autoSwipe = 9 } = _a, rest = __rest(_a, ["id", "title", "description", "titleSectionSize", "titleTag", "items", "footerDescription", "backgroundColor", "className", "layoutType", "autoSwipe"]);
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const [itemsPerPageAmount, setItemsPerPageAmount] = (0, react_1.useState)(0);
+    const wrapperRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const node = wrapperRef.current;
+        if (!node) {
+            return;
+        }
+        const calculateAmountOfItems = () => {
+            const wrapperWidth = node.offsetWidth;
+            if (!wrapperWidth) {
+                return;
+            }
+            setItemsPerPageAmount((0, utils_1.calculateAmountOfItemsPerPage)(wrapperWidth));
+        };
+        const observer = new ResizeObserver((0, lodash_debounce_1.default)(calculateAmountOfItems, 100));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    const showArrows = (0, react_1.useMemo)(() => {
+        if (MOBILE_LAYOUTS.includes(layoutType)) {
+            return false;
+        }
+        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 }) }))] }) })));
+}

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

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

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

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

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

@@ -0,0 +1,23 @@
+.leadingSection{
+  width:100%;
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-5m, 40px) 0;
+}
+.leadingSection[data-layout-type=tablet]{
+  gap:var(--dimension-4m, 32px) 0;
+}
+.leadingSection[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px) 0;
+}
+
+.footerDescription{
+  max-width:704px;
+}
+.footerDescription[data-layout-type=tablet], .footerDescription[data-layout-type=mobile]{
+  max-width:unset;
+}
+
+.footerDescriptionText{
+  color:var(--sys-neutral-text-support, #6d707f);
+}

package/dist/cjs/components/SectionLeading/utils.d.ts

@@ -0,0 +1 @@
+export declare const calculateAmountOfItemsPerPage: (wrapperWidth: number) => number;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateAmountOfItemsPerPage = void 0;
+const CARD_LEADING_MINIMAL_WIDTH = 328;
+const MAX_PER_PAGE = 3;
+const calculateAmountOfItemsPerPage = (wrapperWidth) => {
+    const amount = Math.floor(wrapperWidth / CARD_LEADING_MINIMAL_WIDTH);
+    if (amount < 1) {
+        return 1;
+    }
+    return amount > MAX_PER_PAGE ? MAX_PER_PAGE : amount;
+};
+exports.calculateAmountOfItemsPerPage = calculateAmountOfItemsPerPage;

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

@@ -0,0 +1,4 @@
+import { CardMarketplaceProps } from '@sbercloud/uikit-product-site-cards';
+import { LimitedSectionCarouselProps } from '../../helperComponents';
+export type SectionMarketplaceCarouselProps = Omit<LimitedSectionCarouselProps<CardMarketplaceProps>, 'gap' | 'titleLink'>;
+export declare function SectionMarketplaceCarousel({ items, ...props }: SectionMarketplaceCarouselProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionMarketplaceCarousel = SectionMarketplaceCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_site_cards_1 = require("@sbercloud/uikit-product-site-cards");
+const helperComponents_1 = require("../../helperComponents");
+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))) })));
+}

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

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

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

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

package/dist/cjs/components/SectionMarketplaceCarousel/utils.d.ts

@@ -0,0 +1,3 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { SectionCarouselProps } from '../../helperComponents';
+export declare const getCarouselProps: (layoutType: LayoutType) => Pick<SectionCarouselProps, "itemMinWidth" | "maxItemsPerPage" | "gap">;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCarouselProps = void 0;
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+const getCarouselProps = (layoutType) => {
+    switch (layoutType) {
+        case 'mobile':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 1,
+                gap: figma_tokens_cloud_platform_1.themeVars.dimension['2m'],
+            };
+        case 'tablet':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 2,
+                gap: figma_tokens_cloud_platform_1.themeVars.dimension['2m'],
+            };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return {
+                itemMinWidth: 380,
+                maxItemsPerPage: 3,
+                gap: figma_tokens_cloud_platform_1.themeVars.dimension['3m'],
+            };
+    }
+};
+exports.getCarouselProps = getCarouselProps;

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

@@ -0,0 +1,5 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/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;

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

@@ -0,0 +1,26 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionMedia = SectionMedia;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_site_media_1 = require("@sbercloud/uikit-product-site-media");
+const uikit_product_utils_1 = require("@sbercloud/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` }))] }) })));
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+.content{
+  display:flex;
+}
+
+.image{
+  width:100%;
+  height:100%;
+  -o-object-fit:contain;
+     object-fit:contain;
+}

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

@@ -0,0 +1,24 @@
+import { CardBasicProps } from '@sbercloud/uikit-product-site-cards';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type SectionPersonalManagerProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    title?: string;
+    description?: string;
+    manager: {
+        img: string;
+        title?: string;
+        text?: string;
+    };
+    card?: {
+        title: string;
+        text: string;
+    };
+    benefits?: Pick<CardBasicProps, 'title' | 'icon'>[];
+    withoutBenefits?: boolean;
+    /** CSS-класс */
+    className?: string;
+    /** Хэндлер клика по кнопке "Получить консультацию" */
+    onGetConsultationClick(): void;
+}>>;
+export declare function SectionPersonalManager({ id, layoutType, title, description, manager, card, benefits, withoutBenefits, className, onGetConsultationClick, ...rest }: SectionPersonalManagerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionPersonalManager/SectionPersonalManager.js

@@ -0,0 +1,53 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionPersonalManager = SectionPersonalManager;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_site_cards_1 = require("@sbercloud/uikit-product-site-cards");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const button_1 = require("@snack-uikit/button");
+const typography_1 = require("@snack-uikit/typography");
+const SectionBasic_1 = require("../SectionBasic");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function SectionPersonalManager(_a) {
+    var { id, layoutType, title, description, manager, card, benefits, withoutBenefits, className, onGetConsultationClick } = _a, rest = __rest(_a, ["id", "layoutType", "title", "description", "manager", "card", "benefits", "withoutBenefits", "className", "onGetConsultationClick"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('SiteSection');
+    const benefitsCards = (0, react_1.useMemo)(() => {
+        if (benefits) {
+            return benefits;
+        }
+        return [
+            {
+                title: t('PersonalManager.argumentAmountOfExperts'),
+                icon: uikit_product_icons_1.UsersSVG,
+            },
+            {
+                title: t('PersonalManager.argumentMethodologies'),
+                icon: uikit_product_icons_1.CloudMoveSVG,
+            },
+            {
+                title: t('PersonalManager.argumentPersonalManager'),
+                icon: uikit_product_icons_1.HeadphonesSVG,
+            },
+        ];
+    }, [benefits, t]);
+    return ((0, jsx_runtime_1.jsxs)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title || t('PersonalManager.title'), description: description || t('PersonalManager.subtitle'), backgroundColor: 'neutral-background1-level', layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionPersonalManager) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.card, styles_module_scss_1.default.leftSide), "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.approachTextWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardTextContent, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, (0, utils_1.getCardTitleTypographyProps)(layoutType), { children: manager.title || t('PersonalManager.individualApproachTitle') })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: 'l', className: styles_module_scss_1.default.cardDescription, children: manager.text || t('PersonalManager.individualApproachDescription') })] }), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, { className: styles_module_scss_1.default.consultationButton, size: 'l', appearance: 'primary', label: t('PersonalManager.consultationButton'), onClick: onGetConsultationClick, "data-layout-type": layoutType, "data-test-id": 'personal-manager_get-consultation-button' })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageBackground }), (0, jsx_runtime_1.jsx)("img", { src: manager.img, alt: 'personal_manager', className: styles_module_scss_1.default.approachManager, "data-layout-type": layoutType })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.card, styles_module_scss_1.default.cardTextContent, styles_module_scss_1.default.rightSide), "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, (0, utils_1.getCardTitleTypographyProps)(layoutType), { children: (card === null || card === void 0 ? void 0 : card.title) || t('PersonalManager.allDaySupportTitle') })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: 'l', className: styles_module_scss_1.default.cardDescription, children: (card === null || card === void 0 ? void 0 : card.text) || t('PersonalManager.allDaySupportDescription') })] })] }), !withoutBenefits && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.expertiseCards, "data-layout-type": layoutType, children: benefitsCards === null || benefitsCards === void 0 ? void 0 : benefitsCards.map(card => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardBasic, { title: card.title, icon: card.icon, layoutType: layoutType }, card.title))) }))] })));
+}

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

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

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

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

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

@@ -0,0 +1,122 @@
+.sectionPersonalManager{
+  width:100%;
+  box-sizing:border-box;
+}
+
+.content{
+  display:flex;
+  box-sizing:border-box;
+  flex-direction:row;
+  gap:var(--dimension-4m, 32px);
+}
+.content[data-layout-type=tablet]{
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+.content[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.card{
+  box-sizing:border-box;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  padding:var(--dimension-4m, 32px);
+}
+.card[data-layout-type=tablet], .card[data-layout-type=mobile]{
+  padding:var(--dimension-3m, 24px);
+}
+
+.cardDescription{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.cardTextContent{
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.leftSide{
+  box-sizing:border-box;
+  display:flex;
+  gap:var(--dimension-3m, 24px);
+  align-items:flex-start;
+  flex-direction:row;
+}
+.leftSide[data-layout-type=tablet]{
+  justify-content:space-between;
+}
+.leftSide[data-layout-type=mobile]{
+  flex-direction:column-reverse;
+}
+
+.rightSide{
+  box-sizing:border-box;
+}
+.rightSide[data-layout-type=desktop], .rightSide[data-layout-type=desktopSmall]{
+  max-width:384px;
+  flex-shrink:0;
+}
+
+.approachTextWrapper{
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  gap:var(--dimension-3m, 24px);
+}
+.approachTextWrapper[data-layout-type=desktop], .approachTextWrapper[data-layout-type=desktopSmall]{
+  max-width:472px;
+}
+
+.consultationButton[data-layout-type=mobile]{
+  width:100%;
+}
+
+.expertiseCards{
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-4m, 32px);
+}
+.expertiseCards[data-layout-type=tablet], .expertiseCards[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.imageWrapper{
+  box-sizing:border-box;
+  display:flex;
+  justify-content:center;
+  position:relative;
+  max-width:288px;
+}
+.imageWrapper[data-layout-type=desktop], .imageWrapper[data-layout-type=desktopSmall]{
+  min-width:216px;
+}
+.imageWrapper[data-layout-type=tablet]{
+  overflow:hidden;
+  min-width:196px;
+  width:100%;
+}
+.imageWrapper[data-layout-type=mobile]{
+  overflow:hidden;
+}
+
+.imageBackground{
+  position:absolute;
+  width:100%;
+  height:100%;
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+  opacity:0.08;
+}
+
+.approachManager{
+  position:relative;
+  -o-object-fit:cover;
+     object-fit:cover;
+  pointer-events:none;
+  width:100%;
+}

package/dist/cjs/components/SectionPersonalManager/utils.d.ts

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

package/dist/cjs/components/SectionPersonalManager/utils.js

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

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

@@ -0,0 +1,19 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { PromoListProps } from '../../helperComponents';
+export type SectionPromoListProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Описание */
+    description?: string;
+    /** Ссылка на изображение */
+    image: string;
+    /** Элементы левого списка */
+    leftList: PromoListProps;
+    /** Элементы правого списка */
+    rightList: PromoListProps;
+}>>;
+export declare function SectionPromoList({ id, layoutType, className, title, description, image, leftList, rightList, ...rest }: SectionPromoListProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionPromoList/SectionPromoList.js

@@ -0,0 +1,27 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionPromoList = SectionPromoList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const helperComponents_1 = require("../../helperComponents");
+const SectionBasic_1 = require("../SectionBasic");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SectionPromoList(_a) {
+    var { id, layoutType, className, title, description, image, leftList, rightList } = _a, rest = __rest(_a, ["id", "layoutType", "className", "title", "description", "image", "leftList", "rightList"]);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, description: description, backgroundColor: 'neutral-background1-level', layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionPromoList) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cards, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.left, "data-test-id": 'promo-list__card', children: (0, jsx_runtime_1.jsx)(helperComponents_1.PromoList, Object.assign({}, leftList, { layoutType: layoutType })) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, "data-layout-type": layoutType, "data-test-id": 'promo-list__card', style: { '--image': `url(${image})` }, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightSectionText, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(helperComponents_1.PromoList, Object.assign({}, rightList, { layoutType: layoutType })) }) })] }) })));
+}

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

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

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

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

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

@@ -0,0 +1,43 @@
+.sectionPromoList{
+  width:100%;
+  position:relative;
+}
+
+.cards{
+  display:flex;
+  gap:8px;
+}
+.cards[data-layout-type=tablet], .cards[data-layout-type=mobile]{
+  flex-direction:column;
+}
+
+.left{
+  padding:32px;
+  background-color:var(--sys-invert-neutral-background, #30303c);
+}
+
+.right{
+  --image-size:440px;
+  --image-visible-size:304px;
+  padding:32px;
+  position:relative;
+  flex-grow:1;
+  background-color:var(--sys-invert-neutral-background, #30303c);
+  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));
+}
+.right[data-layout-type=tablet]{
+  --image-visible-size:300px;
+}
+.right[data-layout-type=mobile]{
+  --image-visible-size:140px;
+  --image-size:280px;
+  padding:0 0 var(--image-visible-size);
+  background-position-x:center;
+}
+
+.rightSectionText[data-layout-type=mobile]{
+  padding:32px 32px 0;
+}