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

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

@@ -0,0 +1,19 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+import { BenefitItemProps } from '../../helperComponents';
+import { BackgroundType } from './types';
+type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
+export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
+    /** Заголовок */
+    title?: string;
+    /** Тэг заголовка */
+    titleTag?: TypographyProps['tag'];
+    /** Выгоды */
+    items: ItemProps[];
+    /** Описание под баннером */
+    description?: string[] | string;
+    /** CSS класс */
+    className?: string;
+} & BackgroundType>>;
+export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/SectionBenefitsBanner/SectionBenefitsBanner.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.SectionBenefitsBanner = SectionBenefitsBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_site_rich_text_1 = require("@sbercloud/uikit-product-site-rich-text");
+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");
+function SectionBenefitsBanner(_a) {
+    var { title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "description", "className"]);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ layoutType: layoutType, className: className }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bannerWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.banner, {
+                        [styles_module_scss_1.default.white]: backgroundType && backgroundType === 'image',
+                    }), "data-layout-type": layoutType, "data-appearance": appearance, "data-color": color, children: [backgroundImage && ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.illustration, src: backgroundImage, alt: 'benefits-illustration', "data-layout-type": layoutType })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'light', tag: titleTag }, (0, utils_1.getTitleTypographyProps)(layoutType), { children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }))), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.benefitItems, "data-items-amount": items.length, "data-layout-type": layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.BenefitItem, Object.assign({}, item, { layoutType: layoutType }), item.description))) })] })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, "data-attribute": 'no_search_index', children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', children: Array.isArray(description) ? (description.map(item => (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: item }, item))) : ((0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description })) }) }))] }) })));
+}

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

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

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

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

@@ -0,0 +1,91 @@
+.bannerWrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.banner{
+  position:relative;
+  overflow:hidden;
+  color:var(--sys-graphite-text-main, #222222);
+  padding:var(--dimension-5m, 40px);
+}
+.banner[data-layout-type=tablet]{
+  padding:var(--dimension-4m, 32px);
+}
+.banner[data-layout-type=mobile]{
+  padding:var(--dimension-3m, 24px);
+}
+.banner[data-color=neutral][data-appearance=decor]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.banner[data-color=white][data-appearance=decor]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.banner[data-color=violet][data-appearance=decor]{
+  background-color:var(--sys-violet-background, #f7f3ff);
+}
+.banner[data-color=blue][data-appearance=decor]{
+  background-color:var(--sys-blue-background, #eef4fd);
+}
+.banner[data-appearance=graphite]{
+  background-color:var(--sys-graphite-accent-default, #222222);
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.banner[data-appearance=brand]{
+  background-color:var(--sys-primary-accent-default, #26d07c);
+}
+
+.contentWrapper{
+  position:relative;
+  z-index:1;
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+}
+
+.banner.white{
+  color:var(--sys-graphite-on-accent, #ffffff);
+  background:transparent;
+}
+
+.benefitItems{
+  display:grid;
+  grid-template-columns:repeat(4, 1fr);
+  gap:var(--dimension-2m, 16px);
+}
+.benefitItems[data-layout-type=tablet]{
+  grid-template-columns:repeat(2, 1fr);
+  gap:var(--dimension-4m, 32px) var(--dimension-6m, 48px);
+}
+.benefitItems[data-layout-type=mobile]{
+  grid-template-columns:100%;
+  gap:var(--dimension-3m, 24px);
+}
+.benefitItems[data-items-amount="3"]{
+  grid-template-columns:repeat(3, 1fr);
+}
+.benefitItems[data-items-amount="3"][data-layout-type=tablet]{
+  grid-template-columns:repeat(3, 1fr);
+}
+.benefitItems[data-items-amount="3"][data-layout-type=mobile]{
+  grid-template-columns:100%;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656774);
+}
+
+.illustration{
+  position:absolute;
+  pointer-events:none;
+  z-index:0;
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  -o-object-position:center 0;
+     object-position:center 0;
+  top:0;
+  left:0;
+}

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

@@ -0,0 +1,34 @@
+import { ValueOf } from '@snack-uikit/utils';
+export declare const Appearance: {
+    readonly Decor: "decor";
+    readonly Brand: "brand";
+    readonly Graphite: "graphite";
+};
+export declare const Color: {
+    readonly Neutral: "neutral";
+    readonly White: "white";
+    readonly Violet: "violet";
+    readonly Blue: "blue";
+};
+type ColorType = ValueOf<typeof Color>;
+export type AppearanceType = ValueOf<typeof Appearance>;
+export type WithColor = {
+    appearance: Exclude<AppearanceType, 'brand' | 'graphite'>;
+    color?: ColorType;
+};
+export type WithoutColor = {
+    appearance: Exclude<AppearanceType, 'decor'>;
+    color?: never;
+};
+export type ColorsProps = (WithColor | WithoutColor) & {
+    backgroundType: 'color';
+    backgroundImage?: never;
+};
+type WithBgImage = {
+    backgroundType: 'image';
+    backgroundImage: string;
+    appearance?: never;
+    color?: never;
+};
+export type BackgroundType = ColorsProps | WithBgImage;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Color = exports.Appearance = void 0;
+exports.Appearance = {
+    Decor: 'decor',
+    Brand: 'brand',
+    Graphite: 'graphite',
+};
+exports.Color = {
+    Neutral: 'neutral',
+    White: 'white',
+    Violet: 'violet',
+    Blue: 'blue',
+};

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTitleTypographyProps = getTitleTypographyProps;
+function getTitleTypographyProps(layoutType) {
+    switch (layoutType) {
+        case 'mobile':
+        case 'tablet':
+            return { purpose: 'headline', size: 's' };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return { purpose: 'headline', size: 'l' };
+    }
+}

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

@@ -0,0 +1,5 @@
+import { CardMediaProps } from '@sbercloud/uikit-product-site-cards';
+import { LimitedSectionCarouselProps } from '../../helperComponents';
+export type BlogCarouselItem = Omit<CardMediaProps, 'size' | 'layoutType'>;
+export type SectionBlogCarouselProps = Omit<LimitedSectionCarouselProps<BlogCarouselItem>, 'gap' | 'titleLink'>;
+export declare function SectionBlogCarousel({ items, ...props }: SectionBlogCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionBlogCarousel/SectionBlogCarousel.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.SectionBlogCarousel = SectionBlogCarousel;
+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 SectionBlogCarousel(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const carouselProps = (0, react_1.useMemo)(() => (0, utils_1.getCarouselProps)(props.layoutType), [props.layoutType]);
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, carouselProps, { children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardMedia, Object.assign({}, item, { size: 'm', layoutType: props.layoutType }), item.title))) })));
+}

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

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

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

package/dist/cjs/components/SectionBlogCarousel/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">;

package/dist/cjs/components/SectionBlogCarousel/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: 340,
+                maxItemsPerPage: 2,
+            };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return {
+                itemMinWidth: 340,
+                maxItemsPerPage: 3,
+            };
+    }
+};
+exports.getCarouselProps = getCarouselProps;

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

@@ -0,0 +1,5 @@
+import { CaseCardProps } from '@sbercloud/uikit-product-site-case-card';
+import { LimitedSectionCarouselProps } from '../../helperComponents';
+export type CaseItem = Omit<CaseCardProps, 'layoutType'>;
+export type SectionCaseCarouselProps = Omit<LimitedSectionCarouselProps<CaseItem>, 'description' | 'gap' | 'titleLink'>;
+export declare function SectionCaseCarousel({ items, layoutType, ...props }: SectionCaseCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionCaseCarousel/SectionCaseCarousel.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.SectionCaseCarousel = SectionCaseCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_site_case_card_1 = require("@sbercloud/uikit-product-site-case-card");
+const helperComponents_1 = require("../../helperComponents");
+const utils_1 = require("./utils");
+function SectionCaseCarousel(_a) {
+    var { items, layoutType } = _a, props = __rest(_a, ["items", "layoutType"]);
+    const carouselProps = (0, react_1.useMemo)(() => (0, utils_1.getCarouselProps)(layoutType), [layoutType]);
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({}, props, carouselProps, { layoutType: layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_case_card_1.CaseCard, Object.assign({}, item, { layoutType: layoutType }), item.description))) })));
+}

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

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

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

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

@@ -0,0 +1,3 @@
+.card{
+  height:100%;
+}

package/dist/cjs/components/SectionCaseCarousel/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">;

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

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

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

@@ -0,0 +1,29 @@
+import { CardProductProps } from '@sbercloud/uikit-product-site-cards';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { SectionCatalogFooterProps } from '../../helperComponents';
+import { SectionColor } from '../../types';
+type ProductCategory = {
+    id: string;
+    label: string;
+    items: Omit<CardProductProps, 'layoutType'>[];
+};
+export type SectionCatalogProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Список продуктов по категориям */
+    categories: ProductCategory[];
+    /** Выбранная категория продуктов */
+    selectedCategory?: string;
+    /** Колбек смены выбранной категории продуктов */
+    onCategorySelect?(category: string): void;
+    /** Список элементов для футера в каталоге */
+    footer?: SectionCatalogFooterProps['items'];
+}>>;
+export declare function SectionCatalog({ id, layoutType, className, title, backgroundColor, selectedCategory: selectedCategoryProp, onCategorySelect, categories, footer, ...rest }: SectionCatalogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/SectionCatalog/SectionCatalog.js

@@ -0,0 +1,35 @@
+"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.SectionCatalog = SectionCatalog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_site_cards_1 = require("@sbercloud/uikit-product-site-cards");
+const uikit_product_site_grid_1 = require("@sbercloud/uikit-product-site-grid");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const tabs_1 = require("@snack-uikit/tabs");
+const helperComponents_1 = require("../../helperComponents");
+const SectionBasic_1 = require("../SectionBasic");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SectionCatalog(_a) {
+    var { id, layoutType, className, title, backgroundColor, selectedCategory: selectedCategoryProp, onCategorySelect, categories, footer } = _a, rest = __rest(_a, ["id", "layoutType", "className", "title", "backgroundColor", "selectedCategory", "onCategorySelect", "categories", "footer"]);
+    const [selectedCategory, setSelectedCategory] = (0, uncontrollable_1.useUncontrolledProp)(selectedCategoryProp, categories[0].id, onCategorySelect);
+    const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
+    const isOutlineCard = backgroundColor === 'neutral-background1-level';
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor, layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionCatalog) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.body, children: [(0, jsx_runtime_1.jsxs)(tabs_1.Tabs, { value: selectedCategory, onChange: setSelectedCategory, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.categoryList, { [styles_module_scss_1.default.desktopCategoryList]: isDesktop }), children: [(0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { type: 'primary', orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: (0, classnames_1.default)({ [styles_module_scss_1.default.desktopTabs]: isDesktop }), children: categories.map(({ id, label }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, { value: id, label: label }, id))) }), footer && isDesktop && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionCatalogFooter, { items: footer, layoutType: layoutType })] }), categories.map(({ id, items }) => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabContent, { value: id, className: styles_module_scss_1.default.tabContent, children: (0, jsx_runtime_1.jsx)(uikit_product_site_grid_1.Grid, { columnsConfig: constants_1.GRID_CONFIG, gap: 's', layoutType: layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_site_cards_1.CardProduct, Object.assign({ layoutType: layoutType, outline: isOutlineCard }, item), item.title))) }) }, id)))] }), footer && !isDesktop && (0, jsx_runtime_1.jsx)(helperComponents_1.SectionCatalogFooter, { items: footer, layoutType: layoutType })] }) })));
+}

package/dist/cjs/components/SectionCatalog/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/cjs/components/SectionCatalog/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GRID_CONFIG = void 0;
+exports.GRID_CONFIG = {
+    desktop: { amount: 3, minWidth: 280 },
+    tablet: { amount: 2, minWidth: 280 },
+    mobile: { amount: 2, minWidth: 280 },
+};

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

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

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

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

@@ -0,0 +1,43 @@
+.sectionCatalog{
+  width:100%;
+  position:relative;
+}
+
+.body{
+  display:flex;
+  gap:32px;
+  width:100%;
+}
+[data-layout-type=tablet] .body{
+  flex-direction:column;
+  gap:32px;
+}
+[data-layout-type=mobile] .body{
+  flex-direction:column;
+  gap:24px;
+}
+
+.categoryList{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+}
+
+.tabContent{
+  width:100%;
+}
+
+.desktopTabs button{
+  text-wrap:auto;
+  text-align:left;
+  box-sizing:border-box;
+  padding-top:12px;
+  padding-bottom:12px;
+}
+
+.desktopCategoryList,
+.desktopTabs,
+.desktopTabs button{
+  max-width:280px;
+  flex-shrink:0;
+}

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

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

package/dist/cjs/components/SectionClientsCarousel/SectionClientsCarousel.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.SectionClientsCarousel = SectionClientsCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+const helperComponents_1 = require("../../helperComponents");
+const utils_1 = require("./utils");
+function SectionClientsCarousel(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const carouselProps = (0, react_1.useMemo)(() => (0, utils_1.getCarouselProps)(props.layoutType), [props.layoutType]);
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: figma_tokens_cloud_platform_1.themeVars.dimension['1m'], children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardClient, Object.assign({}, item), item.alt))) })));
+}

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

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

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

package/dist/cjs/components/SectionClientsCarousel/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">;