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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCarouselProps = void 0;
+const getCarouselProps = (layoutType) => {
+    switch (layoutType) {
+        case 'mobile':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 1,
+            };
+        case 'tablet':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 2,
+            };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return {
+                itemMinWidth: 300,
+                maxItemsPerPage: 4,
+            };
+    }
+};
+exports.getCarouselProps = getCarouselProps;

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

@@ -0,0 +1,21 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonFilledProps } from '@snack-uikit/button';
+import { SectionTitleProps } from '../../helperComponents';
+import { MediaContentProps, SectionColor } from '../../types';
+export type SectionContentProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    description?: string;
+    /** Кнопка действия */
+    button?: Omit<ButtonFilledProps, 'fullWidth' | 'size'>;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Местоположение контента в секции */
+    contentPosition: 'left' | 'right';
+} & MediaContentProps & Pick<SectionTitleProps, 'titleTag'>>>;
+export declare function SectionContent({ id, title, description, button, className, layoutType, backgroundColor, contentPosition, image, video, onPlay, titleTag, 'data-test-id': dataTestId, ...rest }: SectionContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionContent/SectionContent.js

@@ -0,0 +1,31 @@
+"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.SectionContent = SectionContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_site_layout_1 = require("@sbercloud/uikit-product-site-layout");
+const uikit_product_site_media_1 = require("@sbercloud/uikit-product-site-media");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const button_1 = require("@snack-uikit/button");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SectionContent(_a) {
+    var { id, title, description, button, className, layoutType, backgroundColor = constants_1.SECTION_COLORS.NeutralBackground1Level, contentPosition = 'left', image, video, onPlay, titleTag, 'data-test-id': dataTestId = 'section-content' } = _a, rest = __rest(_a, ["id", "title", "description", "button", "className", "layoutType", "backgroundColor", "contentPosition", "image", "video", "onPlay", "titleTag", 'data-test-id']);
+    const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, Object.assign({ id: id, layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.wrapper), "data-section-background": backgroundColor, "data-test-id": dataTestId }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionContent, "data-layout-type": layoutType, "data-content-position": contentPosition, children: [Boolean(title || description || button) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [Boolean(title || description) && ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { layoutType: layoutType, title: title, description: description, titleSectionSize: 'm', titleTag: titleTag })), Boolean(button) && ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, button, { fullWidth: !isDesktop, size: 'l', "data-test-id": `${dataTestId}__button` })))] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.mediaWrapper, children: [image && ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: image.alt || title || 'section-content-image', "data-test-id": `${dataTestId}__image` })), video && ((0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { video: video, onPlay: onPlay, layoutType: layoutType, "data-test-id": `${dataTestId}__video` }))] })] }) })));
+}

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

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

package/dist/cjs/components/SectionContent/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("./SectionContent"), exports);

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

@@ -0,0 +1,59 @@
+.wrapper[data-section-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.wrapper[data-section-background=neutral-background]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+
+.sectionContent{
+  display:flex;
+  flex-direction:row;
+  align-items:flex-start;
+  gap:var(--dimension-4m, 32px);
+  padding:var(--dimension-7m, 56px) 0;
+}
+.sectionContent[data-content-position=right]{
+  flex-direction:row-reverse;
+}
+.sectionContent[data-layout-type=tablet]{
+  flex-direction:column;
+  padding:var(--dimension-5m, 40px) 0;
+  align-items:center;
+}
+.sectionContent[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+  padding:var(--dimension-4m, 32px) 0;
+  flex-direction:column;
+  align-items:center;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+  width:384px;
+  flex-shrink:0;
+}
+[data-layout-type=tablet] .content, [data-layout-type=mobile] .content{
+  width:100%;
+}
+
+.mediaWrapper{
+  flex-grow:1;
+}
+[data-layout-type=tablet] .mediaWrapper{
+  width:100%;
+  max-width:704px;
+}
+[data-layout-type=mobile] .mediaWrapper{
+  width:100%;
+}
+
+.image{
+  width:100%;
+  height:100%;
+  -o-object-fit:contain;
+     object-fit:contain;
+  -o-object-position:top left;
+     object-position:top left;
+}

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

@@ -0,0 +1,26 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { SectionTitleProps } from '../../helperComponents';
+import { MediaContentProps, SectionColor } from '../../types';
+import { SectionBasicProps } from '../SectionBasic';
+type Item = {
+    title: string;
+    description: string;
+} & Pick<SectionTitleProps, 'titleLink'>;
+export type SectionContentListProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    description?: string;
+    /** Список элементов */
+    items?: Item[];
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Местоположение контента в секции */
+    contentPosition: 'left' | 'right';
+} & MediaContentProps & Pick<SectionBasicProps, 'titleTag'>>>;
+export declare function SectionContentList({ id, title, description, items, className, layoutType, backgroundColor, contentPosition, image, video, onPlay, titleTag, 'data-test-id': dataTestId, ...rest }: SectionContentListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/SectionContentList/SectionContentList.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.SectionContentList = SectionContentList;
+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 helperComponents_1 = require("../../helperComponents");
+const SectionBasic_1 = require("../SectionBasic");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SectionContentList(_a) {
+    var { id, title, description, items, className, layoutType, backgroundColor, contentPosition = 'left', image, video, onPlay, titleTag, 'data-test-id': dataTestId = 'section-content-list' } = _a, rest = __rest(_a, ["id", "title", "description", "items", "className", "layoutType", "backgroundColor", "contentPosition", "image", "video", "onPlay", "titleTag", 'data-test-id']);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, description: description, className: className, backgroundColor: backgroundColor, "data-test-id": dataTestId, titleTag: titleTag }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionContent, "data-layout-type": layoutType, "data-content-position": contentPosition, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.mediaWrapper, children: [image && ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: image.alt || title || 'section-content-image', "data-test-id": `${dataTestId}__image` })), video && ((0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { video: video, onPlay: onPlay, layoutType: layoutType, "data-test-id": `${dataTestId}__video` }))] }), items && items.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: styles_module_scss_1.default.list, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("li", { className: styles_module_scss_1.default.item, children: (0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { layoutType: layoutType, title: item.title, titleLink: item.titleLink, description: item.description, titleSectionSize: 's', titleTag: 'h3' }) }, `${title}__${index}`))) }))] }) })));
+}

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

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

package/dist/cjs/components/SectionContentList/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("./SectionContentList"), exports);

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

@@ -0,0 +1,49 @@
+.sectionContent{
+  display:flex;
+  flex-direction:row;
+  align-items:flex-start;
+  gap:var(--dimension-4m, 32px);
+}
+.sectionContent[data-content-position=left]{
+  flex-direction:row-reverse;
+}
+.sectionContent[data-layout-type=tablet]{
+  flex-direction:column;
+}
+.sectionContent[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+
+.mediaWrapper{
+  width:50%;
+}
+[data-layout-type=tablet] .mediaWrapper, [data-layout-type=mobile] .mediaWrapper{
+  width:100%;
+}
+
+.image{
+  width:100%;
+  height:100%;
+  -o-object-fit:contain;
+     object-fit:contain;
+  -o-object-position:top left;
+     object-position:top left;
+}
+
+.list{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  margin:0;
+  padding:0;
+  gap:var(--dimension-3m, 24px);
+  width:50%;
+}
+[data-layout-type=tablet] .list, [data-layout-type=mobile] .list{
+  width:100%;
+}
+
+.item{
+  list-style:none;
+}

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonFilledProps } from '@snack-uikit/button';
+import { MediaContentProps, SectionColor } from '../../types';
+import { SectionBasicProps } from '../SectionBasic';
+type TabItem = {
+    id: string;
+    title: string;
+    mediaTitle?: string;
+    mediaSubtitle?: string;
+    mediaDescription?: string;
+    onClick?: () => void;
+    href?: string;
+    disabled?: boolean;
+    icon?: string | ReactNode;
+} & MediaContentProps;
+export type SectionContentTabsProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title?: string;
+    /** Список вкладок */
+    tabs: TabItem[];
+    /** Выбранная вкладок */
+    activeTab?: string;
+    /** колбэк на смену вкладки */
+    onActiveTabChange?: () => void;
+    /** Кнопка действия */
+    button?: Omit<ButtonFilledProps, 'fullWidth' | 'size'>;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+} & Pick<SectionBasicProps, 'titleTag'>>>;
+export declare function SectionContentTabs({ id, title, tabs, activeTab: activeTabProp, onActiveTabChange, button, className, layoutType, backgroundColor, titleTag, 'data-test-id': dataTestId, ...rest }: SectionContentTabsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/SectionContentTabs/SectionContentTabs.js

@@ -0,0 +1,43 @@
+"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.SectionContentTabs = SectionContentTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_site_media_1 = require("@sbercloud/uikit-product-site-media");
+const uikit_product_site_rich_text_1 = require("@sbercloud/uikit-product-site-rich-text");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const button_1 = require("@snack-uikit/button");
+const tabs_1 = require("@snack-uikit/tabs");
+const helperComponents_1 = require("../../helperComponents");
+const SectionBasic_1 = require("../SectionBasic");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TabIcon({ icon }) {
+    if (icon && typeof icon === 'string') {
+        return (0, jsx_runtime_1.jsx)("img", { src: icon, alt: '', className: styles_module_scss_1.default.tabIconImage });
+    }
+    return icon;
+}
+function SectionContentTabs(_a) {
+    var { id, title, tabs, activeTab: activeTabProp, onActiveTabChange, button, className, layoutType, backgroundColor, titleTag, 'data-test-id': dataTestId = 'section-content-tabs' } = _a, rest = __rest(_a, ["id", "title", "tabs", "activeTab", "onActiveTabChange", "button", "className", "layoutType", "backgroundColor", "titleTag", 'data-test-id']);
+    const [activeTab, setActiveTab] = (0, uncontrollable_1.useUncontrolledProp)(activeTabProp, tabs[0].id, onActiveTabChange);
+    const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, title: title, className: className, backgroundColor: backgroundColor, "data-test-id": dataTestId, titleTag: titleTag }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: activeTab, onChange: setActiveTab, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabsWrapper, { [styles_module_scss_1.default.desktopTabsWrapper]: isDesktop }), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: (0, classnames_1.default)({ [styles_module_scss_1.default.desktopTabs]: isDesktop }), children: tabs.map(({ id, title, disabled, icon }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, { value: id, 
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                    // @ts-ignore
+                                    label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }), (0, jsx_runtime_1.jsx)(TabIcon, { icon: icon })] }), disabled: disabled }, id))) }), Boolean(button) && ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, button, { fullWidth: !isDesktop, size: 'l', "data-test-id": `${dataTestId}__button` })))] }), tabs.map(({ id, mediaTitle, mediaSubtitle, mediaDescription, image, video, onPlay }) => ((0, jsx_runtime_1.jsxs)(tabs_1.Tabs.TabContent, { value: id, className: styles_module_scss_1.default.mediaWrapper, children: [image && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: image.alt || title || 'section-content-image', "data-test-id": `${dataTestId}__image` }) })), video && ((0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { video: video, onPlay: onPlay, layoutType: layoutType, "data-test-id": `${dataTestId}__video` })), (mediaTitle || mediaSubtitle) && ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { titleSectionSize: 's', layoutType: layoutType, title: mediaTitle, description: mediaSubtitle })), mediaDescription && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { layoutType: layoutType, description: mediaDescription })] }, id)))] }) }) })));
+}

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

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

package/dist/cjs/components/SectionContentTabs/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("./SectionContentTabs"), exports);

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

@@ -0,0 +1,76 @@
+.sectionContent{
+  display:flex;
+  flex-direction:row;
+  align-items:flex-start;
+  gap:var(--dimension-4m, 32px);
+}
+.sectionContent[data-layout-type=tablet]{
+  flex-direction:column;
+}
+.sectionContent[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+
+.tabsWrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+  width:280px;
+  flex-shrink:0;
+}
+[data-layout-type=tablet] .tabsWrapper, [data-layout-type=mobile] .tabsWrapper{
+  width:100%;
+}
+
+.desktopTabs button{
+  text-wrap:auto;
+  text-align:left;
+  box-sizing:border-box;
+  padding-top:12px;
+  padding-bottom:12px;
+}
+
+.desktopTabsWrapper,
+.desktopTabs,
+.desktopTabs button{
+  max-width:280px;
+  flex-shrink:0;
+}
+
+.mediaWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:var(--dimension-4m, 32px);
+}
+[data-layout-type=tablet] .mediaWrapper, [data-layout-type=mobile] .mediaWrapper{
+  width:100%;
+}
+
+.imageWrapper{
+  box-sizing:border-box;
+  position:relative;
+  width:100%;
+  height:100%;
+  display:flex;
+  padding-bottom:56.5%;
+  border:0;
+}
+
+.image{
+  position:absolute;
+  top:0;
+  left:0;
+  height:100%;
+  width:100%;
+  border:0;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  -o-object-fit:contain;
+     object-fit:contain;
+}
+
+.tabIconImage{
+  width:20px;
+  height:20px;
+}

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

@@ -0,0 +1,4 @@
+import { LimitedSectionCarouselProps } from '../../helperComponents';
+import { ExpertDetails } from './types';
+export type SectionExpertsCarouselProps = Omit<LimitedSectionCarouselProps<ExpertDetails>, 'description' | 'gap' | 'titleLink'>;
+export declare function SectionExpertsCarousel({ items, ...props }: SectionExpertsCarouselProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"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.SectionExpertsCarousel = SectionExpertsCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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))) })));
+}

package/dist/cjs/components/SectionExpertsCarousel/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const EXPERT_MINIMAL_WIDTH = 240;
+export declare const MAX_PER_PAGE = 4;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_PER_PAGE = exports.EXPERT_MINIMAL_WIDTH = void 0;
+exports.EXPERT_MINIMAL_WIDTH = 240;
+exports.MAX_PER_PAGE = 4;

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

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

package/dist/cjs/components/SectionExpertsCarousel/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("./SectionExpertsCarousel"), exports);

package/dist/cjs/components/SectionExpertsCarousel/types.d.ts

@@ -0,0 +1,6 @@
+export type ExpertDetails = {
+    image: string;
+    name: string;
+    surname: string;
+    jobTitle: string;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,15 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { CarouselProps } from '@snack-uikit/carousel';
+import { CardLeadingItem } from '../../helperComponents';
+import { SectionBasicProps } from '../SectionBasic';
+export type SectionLeadingProps = WithSupportProps<WithLayoutType<Pick<SectionBasicProps, 'title' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor'> & Pick<CarouselProps, 'autoSwipe'> & {
+    /** id секции */
+    id?: string;
+    /** Массив айтемов */
+    items: CardLeadingItem[];
+    /** Описание секции */
+    footerDescription?: string;
+    /** CSS - класснейм */
+    className?: string;
+}>>;
+export declare function SectionLeading({ id, title, description, titleSectionSize, titleTag, items, footerDescription, backgroundColor, className, layoutType, autoSwipe, ...rest }: SectionLeadingProps): import("react/jsx-runtime").JSX.Element;

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);