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

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

@@ -0,0 +1,20 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SiteVideo } from '@sbercloud/uikit-product-site-media';
+import { extractSupportProps } from '@sbercloud/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` }))] }) })));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/SectionPersonalManager/SectionPersonalManager.js

@@ -0,0 +1,47 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { CloudMoveSVG, HeadphonesSVG, UsersSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { CardBasic } from '@sbercloud/uikit-product-site-cards';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonFilled } from '@snack-uikit/button';
+import { Typography } from '@snack-uikit/typography';
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.css';
+import { getCardTitleTypographyProps } from './utils';
+export 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 } = useLocale('SiteSection');
+    const benefitsCards = useMemo(() => {
+        if (benefits) {
+            return benefits;
+        }
+        return [
+            {
+                title: t('PersonalManager.argumentAmountOfExperts'),
+                icon: UsersSVG,
+            },
+            {
+                title: t('PersonalManager.argumentMethodologies'),
+                icon: CloudMoveSVG,
+            },
+            {
+                title: t('PersonalManager.argumentPersonalManager'),
+                icon: HeadphonesSVG,
+            },
+        ];
+    }, [benefits, t]);
+    return (_jsxs(SectionBasic, Object.assign({ id: id, title: title || t('PersonalManager.title'), description: description || t('PersonalManager.subtitle'), backgroundColor: 'neutral-background1-level', layoutType: layoutType, className: cn(className, styles.sectionPersonalManager) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.content, "data-layout-type": layoutType, children: [_jsxs("div", { className: cn(styles.card, styles.leftSide), "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.approachTextWrapper, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.cardTextContent, children: [_jsx(Typography, Object.assign({ family: 'sans' }, getCardTitleTypographyProps(layoutType), { children: manager.title || t('PersonalManager.individualApproachTitle') })), _jsx(Typography, { family: 'sans', purpose: 'body', size: 'l', className: styles.cardDescription, children: manager.text || t('PersonalManager.individualApproachDescription') })] }), _jsx(ButtonFilled, { className: styles.consultationButton, size: 'l', appearance: 'primary', label: t('PersonalManager.consultationButton'), onClick: onGetConsultationClick, "data-layout-type": layoutType, "data-test-id": 'personal-manager_get-consultation-button' })] }), _jsxs("div", { className: styles.imageWrapper, "data-layout-type": layoutType, children: [_jsx("div", { className: styles.imageBackground }), _jsx("img", { src: manager.img, alt: 'personal_manager', className: styles.approachManager, "data-layout-type": layoutType })] })] }), _jsxs("div", { className: cn(styles.card, styles.cardTextContent, styles.rightSide), "data-layout-type": layoutType, children: [_jsx(Typography, Object.assign({ family: 'sans' }, getCardTitleTypographyProps(layoutType), { children: (card === null || card === void 0 ? void 0 : card.title) || t('PersonalManager.allDaySupportTitle') })), _jsx(Typography, { family: 'sans', purpose: 'body', size: 'l', className: styles.cardDescription, children: (card === null || card === void 0 ? void 0 : card.text) || t('PersonalManager.allDaySupportDescription') })] })] }), !withoutBenefits && (_jsx("div", { className: styles.expertiseCards, "data-layout-type": layoutType, children: benefitsCards === null || benefitsCards === void 0 ? void 0 : benefitsCards.map(card => (_jsx(CardBasic, { title: card.title, icon: card.icon, layoutType: layoutType }, card.title))) }))] })));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/SectionPersonalManager/utils.js

@@ -0,0 +1,11 @@
+export const getCardTitleTypographyProps = (layoutType) => {
+    switch (layoutType) {
+        case 'mobile':
+        case 'tablet':
+            return { purpose: 'title', size: 'm' };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return { purpose: 'headline', size: 's' };
+    }
+};

package/dist/esm/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/esm/components/SectionPromoList/SectionPromoList.js

@@ -0,0 +1,21 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { PromoList } from '../../helperComponents';
+import { SectionBasic } from '../SectionBasic';
+import styles from './styles.module.css';
+export 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 (_jsx(SectionBasic, Object.assign({ id: id, title: title, description: description, backgroundColor: 'neutral-background1-level', layoutType: layoutType, className: cn(className, styles.sectionPromoList) }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.cards, "data-layout-type": layoutType, children: [_jsx("div", { className: styles.left, "data-test-id": 'promo-list__card', children: _jsx(PromoList, Object.assign({}, leftList, { layoutType: layoutType })) }), _jsx("div", { className: styles.right, "data-layout-type": layoutType, "data-test-id": 'promo-list__card', style: { '--image': `url(${image})` }, children: _jsx("div", { className: styles.rightSectionText, "data-layout-type": layoutType, children: _jsx(PromoList, Object.assign({}, rightList, { layoutType: layoutType })) }) })] }) })));
+}

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { GridProps } from '@sbercloud/uikit-product-site-grid';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { CardSocialProps } from '../../helperComponents';
+import { SectionColor } from '../../types';
+import { SectionBasicProps } from '../SectionBasic';
+export type SectionSocialProps = WithSupportProps<WithLayoutType<Pick<SectionBasicProps, 'title' | 'subtitle' | 'titleAlign'> & {
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Заголовок */
+    title?: string;
+    /** Размер отступов сетки */
+    gap?: GridProps['gap'];
+    cards: Omit<CardSocialProps, 'layoutType'>[];
+}>>;
+export declare function SectionSocial({ id, layoutType, title, subtitle, backgroundColor, className, cards, titleAlign, gap, ...rest }: SectionSocialProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionSocial/SectionSocial.js

@@ -0,0 +1,27 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import cn from 'classnames';
+import { Grid } from '@sbercloud/uikit-product-site-grid';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { CardSocial } from '../../helperComponents';
+import { SectionBasic } from '../SectionBasic';
+import { GRID_CONFIG } from './constants';
+import styles from './styles.module.css';
+export function SectionSocial(_a) {
+    var { id, layoutType, title, subtitle, backgroundColor, className, cards, titleAlign, gap = 's' } = _a, rest = __rest(_a, ["id", "layoutType", "title", "subtitle", "backgroundColor", "className", "cards", "titleAlign", "gap"]);
+    return (_jsx(SectionBasic, Object.assign({ id: id, title: title, subtitle: subtitle, titleAlign: titleAlign, backgroundColor: backgroundColor, layoutType: layoutType, className: cn(className, styles.sectionSocial) }, extractSupportProps(rest), { children: _jsx(Grid, { columnsConfig: GRID_CONFIG, layoutType: layoutType, gap: gap, children: cards.map((card, index) => {
+                var _a;
+                return (_createElement(CardSocial, Object.assign({}, card, { key: card.title, layoutType: layoutType, "data-test-id": (_a = card['data-test-id']) !== null && _a !== void 0 ? _a : `section-social__card-${index}` })));
+            }) }) })));
+}

package/dist/esm/components/SectionSocial/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const GRID_CONFIG: {
+    desktop: {
+        amount: number;
+        minWidth: number;
+    };
+    tablet: {
+        amount: number;
+        minWidth: number;
+    };
+    mobile: {
+        amount: number;
+        minWidth: number;
+    };
+};

package/dist/esm/components/SectionSocial/constants.js

@@ -0,0 +1,5 @@
+export const GRID_CONFIG = {
+    desktop: { amount: 2, minWidth: 464 },
+    tablet: { amount: 2, minWidth: 328 },
+    mobile: { amount: 1, minWidth: 328 },
+};

package/dist/esm/components/SectionSocial/index.d.ts

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

package/dist/esm/components/SectionSocial/index.js

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

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

@@ -0,0 +1,4 @@
+.sectionSocial{
+  width:100%;
+  position:relative;
+}

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

@@ -0,0 +1,15 @@
+import { TableProps } from '@sbercloud/uikit-product-site-table';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type SectionTableProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title?: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Описание */
+    description?: string;
+} & TableProps>>;
+export declare function SectionTable({ id, layoutType, className, title, subtitle, description, ...rest }: SectionTableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { RichText } from '@sbercloud/uikit-product-site-rich-text';
+import { Table } from '@sbercloud/uikit-product-site-table';
+import { extractSupportProps } from '@sbercloud/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' }))] })));
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+.sectionTable{
+  width:100%;
+  position:relative;
+}
+
+.subtitle{
+  font-family:var(--sans-title-m-font-family, SB Sans Display);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.description{
+  font-family:var(--sans-body-l-font-family, SB Sans Text);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  color:var(--sys-neutral-text-support, #656774);
+  word-break:break-word;
+}

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

@@ -0,0 +1,19 @@
+export * from './SectionAccordion';
+export * from './SectionBasic';
+export * from './SectionBenefits';
+export * from './SectionBenefitsBanner';
+export * from './SectionBlogCarousel';
+export * from './SectionCaseCarousel';
+export * from './SectionCatalog';
+export * from './SectionClientsCarousel';
+export * from './SectionContent';
+export * from './SectionContentList';
+export * from './SectionContentTabs';
+export * from './SectionExpertsCarousel';
+export * from './SectionLeading';
+export * from './SectionMarketplaceCarousel';
+export * from './SectionMedia';
+export * from './SectionPersonalManager';
+export * from './SectionPromoList';
+export * from './SectionSocial';
+export * from './SectionTable';

package/dist/esm/components/index.js

@@ -0,0 +1,19 @@
+export * from './SectionAccordion';
+export * from './SectionBasic';
+export * from './SectionBenefits';
+export * from './SectionBenefitsBanner';
+export * from './SectionBlogCarousel';
+export * from './SectionCaseCarousel';
+export * from './SectionCatalog';
+export * from './SectionClientsCarousel';
+export * from './SectionContent';
+export * from './SectionContentList';
+export * from './SectionContentTabs';
+export * from './SectionExpertsCarousel';
+export * from './SectionLeading';
+export * from './SectionMarketplaceCarousel';
+export * from './SectionMedia';
+export * from './SectionPersonalManager';
+export * from './SectionPromoList';
+export * from './SectionSocial';
+export * from './SectionTable';

package/dist/esm/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SECTION_COLORS: {
+    readonly NeutralBackground1Level: "neutral-background1-level";
+    readonly NeutralBackground: "neutral-background";
+};

package/dist/esm/constants.js

@@ -0,0 +1,4 @@
+export const SECTION_COLORS = {
+    NeutralBackground1Level: 'neutral-background1-level',
+    NeutralBackground: 'neutral-background',
+};

package/dist/esm/helperComponents/BenefitItem/BenefitItem.d.ts

@@ -0,0 +1,8 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type BenefitItemProps = WithLayoutType<{
+    title: string;
+    subtitle: string;
+    description: string;
+    paddingLeftItem?: number;
+}>;
+export declare function BenefitItem({ title, subtitle, description, paddingLeftItem, layoutType }: BenefitItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/BenefitItem/BenefitItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RichText } from '@sbercloud/uikit-product-site-rich-text';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+import { getValueTypographyProps, getValueTypographySubtitleProps } from './utils';
+export function BenefitItem({ title, subtitle, description, paddingLeftItem, layoutType }) {
+    const paddingItem = (layoutType === 'desktop' || layoutType === 'desktopSmall') && paddingLeftItem ? paddingLeftItem : 0;
+    return (_jsxs("div", { className: styles.benefitItem, style: { paddingLeft: `${paddingItem}px` }, "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.benefitsTitles, children: [_jsx(Typography, Object.assign({ family: 'sans', tag: 'div' }, getValueTypographyProps(layoutType), { children: _jsx(RichText, { richText: title }) })), _jsx(Typography, Object.assign({ family: 'sans', tag: 'div' }, getValueTypographySubtitleProps(layoutType), { children: _jsx(RichText, { richText: subtitle, className: styles.subtitleText, "data-layout-type": layoutType }) }))] }), _jsx(Typography, { family: 'sans', tag: 'div', purpose: 'body', size: 'm', children: _jsx(RichText, { richText: description }) })] }));
+}

package/dist/esm/helperComponents/BenefitItem/index.d.ts

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

package/dist/esm/helperComponents/BenefitItem/index.js

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

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

@@ -0,0 +1,27 @@
+.benefitItem{
+  display:flex;
+  color:inherit;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+.benefitItem[data-layout-type=tablet]{
+  gap:calc(var(--dimension-1m, 8px) + var(--dimension-050m, 4px));
+  max-width:unset;
+}
+.benefitItem[data-layout-type=mobile]{
+  gap:unset;
+  max-width:unset;
+}
+
+.benefitsTitles{
+  display:flex;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-end;
+}
+
+.subtitleText{
+  padding-bottom:8px;
+}
+.subtitleText[data-layout-type=tablet], .subtitleText[data-layout-type=mobile]{
+  padding-bottom:5px;
+}

package/dist/esm/helperComponents/BenefitItem/utils.d.ts

@@ -0,0 +1,4 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+export declare function getValueTypographyProps(layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'>;
+export declare function getValueTypographySubtitleProps(layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'>;