@redneckz/wildless-cms-uni-blocks 0.6.28 → 0.6.29

package/bundle/bundle.umd.js

@@ -446,9 +446,9 @@
     });
 
     const icons$1 = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ className = '', label = '', isExpanded, children }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
+    const AccordionItem = JSX(({ className = '', label = '', isExpanded, children }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton$1, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
     AccordionItem.childrenTypes = [];
-    const FoldButton = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
+    const FoldButton$1 = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
 
     const VersionStyleMap = {
         primary: 'bg-white text-primary-text',
@@ -1267,21 +1267,24 @@
                 }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} right-0 bg-opacity-to-white` })] }));
     });
 
-    const useTableArrowScrollControl = ({ columnsLength, colsLengthForScroll, }) => {
-        const [activeCardIndex, setActiveCardIndex] = useState(0);
-        const onNextClick = useCallback(() => setActiveCardIndex((_) => _ + 1), []);
-        const onPrevClick = useCallback(() => setActiveCardIndex((_) => _ - 1), []);
-        const isScrollAvailable = columnsLength > colsLengthForScroll;
-        const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
-        const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
-        return {
-            activeCardIndex,
-            onNextClick,
-            onPrevClick,
-            isScrollAvailable,
-            showNextButton,
-            showPrevButton,
-        };
+    const useCarouselControl = ({ itemsCount, visibleItemCount = itemsCount, isCyclic, }) => {
+        const [activeIndex, setActiveIndex] = useState(0);
+        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))), []);
+        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))), []);
+        const isScrollAvailable = itemsCount > visibleItemCount;
+        const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
+        const canInc = isCyclicAndScrollAvailable ||
+            (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
+        const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+        return [
+            activeIndex,
+            {
+                inc,
+                dec,
+                canInc,
+                canDec,
+            },
+        ];
     };
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
@@ -1303,16 +1306,6 @@
 
     const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex }) => (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$2, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header }, String(i)))) })] })));
 
-    const TableArrowScrollControl = JSX(({ isScrollAvailable, onNextClick, onPrevClick, showNextButton, showPrevButton }) => {
-        return isScrollAvailable ? (jsx("div", { children: renderArrows({
-                handler: [onPrevClick, onNextClick],
-                isShown: [showPrevButton, showNextButton],
-                btnClass: ['top-[108px]', 'top-11'],
-                className: 'right-7',
-                isDisabled: true,
-            }) })) : null;
-    });
-
     const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
         const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES$1} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
         const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
@@ -1325,8 +1318,15 @@
     const titleStyle = (isLastRow = false) => `text-s py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
     const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$2, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
-    const ComparisonTableRows = JSX(({ rowData, isColoredFirstColumn, ...tableArrowScrollProps }) => {
-        return (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeCardIndex: tableArrowScrollProps.activeCardIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), jsx(TableArrowScrollControl, { ...tableArrowScrollProps })] }));
+    const ComparisonTableRows = JSX(({ rowData, isColoredFirstColumn, activeCardIndex, controls, isScrollAvailable }) => {
+        const { inc, dec, canDec, canInc } = controls;
+        return (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), isScrollAvailable ? (jsx("div", { children: renderArrows({
+                        handler: [inc, dec],
+                        isShown: [canDec, canInc],
+                        btnClass: ['top-[108px]', 'top-11'],
+                        className: 'right-7',
+                        isDisabled: true,
+                    }) })) : null] }));
     });
 
     const ComparisonTableBody = JSX(({ columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
@@ -1338,12 +1338,12 @@
             data: colData.map((col) => col?.[i] || [{}]),
         }))
             .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
-        const tableArrowScrollProps = useTableArrowScrollControl({
-            columnsLength: colData.length,
-            colsLengthForScroll: COLS_LENGTH_FOR_SCROLL$1,
+        const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL$1;
+        const [activeIndex, controls] = useCarouselControl({
+            itemsCount: colData.length,
+            visibleItemCount: COLS_LENGTH_FOR_SCROLL$1,
         });
-        const { activeCardIndex, isScrollAvailable } = tableArrowScrollProps;
-        return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeCardIndex })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, isColoredFirstColumn: isColoredFirstColumn, ...tableArrowScrollProps })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
+        return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeIndex })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, isColoredFirstColumn: isColoredFirstColumn, activeCardIndex: activeIndex, controls: controls, isScrollAvailable: isScrollAvailable })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
     const ComparisonTable = JSX(({ className = '', title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
@@ -1620,7 +1620,10 @@
         transparent: 'text-white',
     };
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(ImgInner, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(ImgInner, { image: { icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$2(children, bgColor, logo?.title) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(ImgInner, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(ImgInner, { image: {
+                        icon: logo?.image?.icon || 'LogoIcon',
+                        iconVersion: ICON_VERSION_MAP[bgColor],
+                    }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$2(children, bgColor, logo?.title) : null] }));
     });
     const renderTitle$2 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
@@ -1924,7 +1927,7 @@
         'bg-white': 'black',
         transparent: 'white',
     };
-    const HeaderSecondaryMenu = JSX(({ className, defaultLocation = '', bgColor = 'bg-white' }) => {
+    const HeaderSecondaryMenu = JSX(({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
         const [city, getCity] = useGeolocation(defaultLocation);
         return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0", asSVG: true }) })] }));
     });
@@ -2007,9 +2010,9 @@
         'bg-white': 'bg-main-divider',
         transparent: 'bg-main-divider opacity-30',
     };
-    const Header = JSX(({ bgColor = 'bg-white', className = '', defaultLocation = 'Москва', logo, showSubMenu = true, ...rest }) => {
+    const Header = JSX(({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
         const router = useRouter();
-        const { topItems } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.page?.fallback);
+        const { topItems, logo, defaultLocation } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.page?.fallback);
         const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
         const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, "aria-label": _.text, bgColor: bgColor, ..._ }, String(i))));
         return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
@@ -2096,6 +2099,52 @@
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-light ${btnClassName}`, children: title }, String(i)));
     }
 
+    const BorderVersionStyleMap = {
+        primary: 'border-main-stroke',
+        secondary: 'border-white/50',
+    };
+
+    const getItemListFontSize = (colValue) => (colValue === 'single' ? 'text-h6' : 'text-l');
+    const cardColumnsModeStyleMap = {
+        double: 'flex gap-y-2 gap-x-10 flex-wrap',
+        single: 'flex gap-y-2 flex-col',
+    };
+    const InvestmentGalleryCard = JSX(({ className = '', columnsMode = 'double', description, additionalDescription, image, cardList, title, version = 'primary', }) => {
+        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
+        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
+        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border
+          p-9 min-w-[697px] min-h-[319px]
+          ${BorderVersionStyleMap[version]}
+          ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex itens-center justify-between mb-4", children: [description ? jsx(Description, { className: "text-h6", description: description }) : null, additionalDescription ? (jsxs("div", { className: "text-m-light text-secondary-text", children: [" ", additionalDescription, " "] })) : null] }), cardList?.length ? (jsx("div", { className: `${cardColumnsModeStyleMap[columnsMode]}`, role: "list", children: renderCardList(cardList, columnsMode) })) : null] }) }) }));
+    });
+    const renderCardList = (cardList, columnsMode) => cardList.map((item, i) => (jsxs("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: [item?.parameter ? (jsx("span", { className: `pr-2.5 ${getItemListFontSize(columnsMode)}`, children: item.parameter })) : null, item?.parameterDesccription ? (jsx("span", { className: "text-m-light text-secondary-text", children: item.parameterDesccription })) : null] }, String(i))));
+
+    const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
+    const CARD_FULL_VIEW_COUNT$1 = 1;
+    const InvestmentGallery = JSX(({ cards = [], className = '', title, version = 'primary', ...rest }) => {
+        const [activeCardIndex, setActiveCardIndex] = useState(0);
+        const cardWidth = 525;
+        return (jsxs(BlockWrapper, { className: `relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-9", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * cardWidth}px)` }, role: "list", children: cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null }), renderNavButtons$1({
+                            cardsCount: cards.length,
+                            activeCardIndex,
+                            setActiveCardIndex,
+                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
+    });
+    const renderInvestmentGalleryCard = (className, version) => (card, i) => jsx(InvestmentGalleryCard, { className: className, version: version, ...card }, String(i));
+    const renderNavButtons$1 = ({ cardsCount, activeCardIndex, setActiveCardIndex }) => {
+        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT$1;
+        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT$1;
+        const showPrevButton = isUseSlider && activeCardIndex > 0;
+        const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+        const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+        return (jsx("div", { children: renderArrows({
+                handler: [handlePrevClick, handleNextClick],
+                isShown: [showPrevButton, showNextButton],
+                btnClass: ['left-8', 'right-8'],
+                className: 'top-1/2 mt-3',
+            }) }));
+    };
+
     function joinList(sep) {
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
@@ -2632,7 +2681,7 @@
 
     const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', onClick }) => {
         const STATE_STYLE = 'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
-        const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5 mb-[1px]';
+        const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
         return (jsxs("button", { className: [
                 'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
                 STATE_STYLE,
@@ -2764,11 +2813,6 @@
                     : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbsStyleMap[version], ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
     });
 
-    const BorderVersionStyleMap = {
-        primary: 'border-main-stroke',
-        secondary: 'border-white/50',
-    };
-
     const productBlockStyleMap = {
         primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
         secondary: { title: 'text-white', text: 'text-white/80' },
@@ -2852,30 +2896,30 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
-    const RecommendationCard = JSX(({ className = '', title, description, items, image, version, socialMedia }) => {
+    const RecommendationCard = JSX(({ className = '', title, description, items, image, version, socialMedia, button }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx(Description, { className: "mb-2", description: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null] }) }) }));
+        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx(Description, { className: "mb-2", description: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? (jsx("div", { className: "pt-2", children: renderButton({ button, buttonClassName: 'mt-16' }) })) : null] }) }) }));
     });
 
-    const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
-    const CARD_FULL_VIEW_COUNT$1 = 2;
+    const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+    const CARD_FULL_VIEW_COUNT = 2;
     const CARD_SHIFT = 525;
     const Recommendation = JSX(({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
         const [activeCardIndex, setActiveCardIndex] = useState(0);
         return (jsxs(BlockWrapper, { className: `relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
                                 ? recommendations.map((card, i) => (jsx(RecommendationCard, { version: version, className: BorderVersionStyleMap[version], ...card }, String(i))))
-                                : null }), renderNavButtons$1({
+                                : null }), renderNavButtons({
                             cardsCount: recommendations.length,
                             activeCardIndex,
                             setActiveCardIndex,
-                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
+                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
     });
-    const renderNavButtons$1 = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
+    const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
         const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
         const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT$1;
-        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT$1;
+        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
         const showPrevButton = isUseSlider && activeCardIndex > 0;
         return (jsx("div", { children: renderArrows({
                 handler: [handlePrevClick, handleNextClick],
@@ -2885,6 +2929,15 @@
             }) }));
     };
 
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', children, }) => (jsx("div", { className: `border-b border-solid border-main-divider w-full ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: `grid grid-cols-12 gap-1 border-box`, isUnfolded: isUnfolded, children: children }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle, label, version }) }) })));
+    RollupItem.childrenTypes = [];
+    const renderFoldButton = ({ isUnfolded, onToggle, label, version }) => {
+        const icons = ['PlusIcon', 'MinusIcon'];
+        const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
+        return version === 'primary' ? (jsx(FoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle })) : (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    };
+    const FoldButton = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] })));
+
     const SAFEBOXES_URL = '/api/v1/safeboxes';
     const EMPTY_VALUE = [];
     function useSafeBoxes(regionCode) {
@@ -3329,14 +3382,14 @@
             data: colData.map((col) => col?.[i] || []),
         }));
         const columnsLength = colData.length;
-        const tableArrowScrollControlProps = useTableArrowScrollControl({
-            columnsLength,
-            colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+        const [activeIndex, controls] = useCarouselControl({
+            itemsCount: colData.length,
+            visibleItemCount: COLS_LENGTH_FOR_SCROLL,
         });
-        const { activeCardIndex } = tableArrowScrollControlProps;
-        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeCardIndex: activeCardIndex, rowIdx: i, ...rest }, String(i))));
+        const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
+        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeCardIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
-        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle({ title, description }), renderDescription(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: rows }))] }));
+        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle({ title, description }), renderDescription(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, isScrollAvailable: isScrollAvailable, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, isScrollAvailable: isScrollAvailable, children: rows }))] }));
     });
     function renderTitle({ title, description }) {
         return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
@@ -3344,9 +3397,14 @@
     function renderDescription(description) {
         return description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null;
     }
-    const Wrapper = JSX(({ children, tableArrowScrollControlProps }) => {
-        const { isScrollAvailable } = tableArrowScrollControlProps;
-        return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
+    const Wrapper = JSX(({ children, controls, isScrollAvailable }) => {
+        const { inc, dec, canDec, canInc } = controls;
+        return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, isScrollAvailable ? (jsx("div", { children: renderArrows({
+                                handler: [inc, dec],
+                                isShown: [canDec, canInc],
+                                btnClass: ['top-[108px]', 'top-11'],
+                                className: 'right-7',
+                            }) })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
     const textBlockStyleMaps = {
@@ -3414,7 +3472,7 @@
         primary: 'bg-white',
         secondary: 'bg-primary-main',
     };
-    const VerticalLayout = JSX(({ className = '', children, gap = '', align = 'left', version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: [
+    const VerticalLayout = JSX(({ className = '', children, gap = '', align = 'left', version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: [
             'flex flex-col',
             gapStyleMap[gap],
             alignStyle[align],
@@ -3425,46 +3483,46 @@
         exclude: ['VerticalLayout'],
     };
 
-    const getItemListFontSize = (colValue) => (colValue === 'single' ? 'text-h6' : 'text-l');
-    const cardColumnsModeStyleMap = {
-        double: 'flex gap-y-2 gap-x-10 flex-wrap',
-        single: 'flex gap-y-2 flex-col',
+    const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
+    const CARD_STYLE_MAP = {
+        normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
+        mini: 'w-1/3 justify-center items-center mx-4 my-9 col-span-4',
     };
-    const InvestmentGalleryCard = JSX(({ className = '', columnsMode = 'double', description, additionalDescription, image, cardList, title, version = 'primary', }) => {
-        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border
-          p-9 min-w-[697px] min-h-[319px]
-          ${BorderVersionStyleMap[version]}
-          ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex itens-center justify-between mb-4", children: [description ? jsx(Description, { className: "text-h6", description: description }) : null, additionalDescription ? (jsxs("div", { className: "text-m-light text-secondary-text", children: [" ", additionalDescription, " "] })) : null] }), cardList?.length ? (jsx("div", { className: `${cardColumnsModeStyleMap[columnsMode]}`, role: "list", children: renderCardList(cardList, columnsMode) })) : null] }) }) }));
+    const CARD_WIDTH_MAP = {
+        normal: 'w-[1007px]',
+        mini: 'w-[350px]',
+    };
+    const CarouselCard = JSX(({ button, className = '', description, title, version = 'normal' }) => {
+        return (jsx("section", { className: `flex ${CARD_STYLE_MAP[version]}`, children: jsxs("div", { className: `relative ${CARD_WIDTH_MAP[version]}`, children: [jsxs("div", { className: `relative bg-white py-6 px-10 z-10
+              border border-solid border-green-light ${className}`, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null] }), jsx("div", { className: `top-9 right-12 bg-green-dark ${BLOCK_CLASSES}` }), jsx("div", { className: `top-6 right-8 bg-green ${BLOCK_CLASSES}` }), jsx("div", { className: `top-3 right-4 bg-green-light ${BLOCK_CLASSES}` })] }) }));
     });
-    const renderCardList = (cardList, columnsMode) => cardList.map((item, i) => (jsxs("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: [item?.parameter ? (jsx("span", { className: `pr-2.5 ${getItemListFontSize(columnsMode)}`, children: item.parameter })) : null, item?.parameterDesccription ? (jsx("span", { className: "text-m-light text-secondary-text", children: item.parameterDesccription })) : null] }, String(i))));
 
-    const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-    const CARD_FULL_VIEW_COUNT = 1;
-    const InvestmentGallery = JSX(({ cards = [], className = '', title, version = 'primary', ...rest }) => {
-        const [activeCardIndex, setActiveCardIndex] = useState(0);
-        const cardWidth = 525;
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-9", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * cardWidth}px)` }, role: "list", children: cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null }), renderNavButtons({
-                            cardsCount: cards.length,
-                            activeCardIndex,
-                            setActiveCardIndex,
-                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
+    const CarouselContainer = JSX(({ children, activeItem, cardFullViewCount, cardWidth }) => {
+        const cardFullViewStyles = cardFullViewCount === 1
+            ? `translateX(-${activeItem}00%)`
+            : `translateX(-${activeItem * cardWidth}px)`;
+        return (jsx("div", { className: "w-auto flex flex-1 duration-1000", style: { transform: `${cardFullViewStyles}` }, role: "list", children: children }));
     });
-    const renderInvestmentGalleryCard = (className, version) => (card, i) => jsx(InvestmentGalleryCard, { className: className, version: version, ...card }, String(i));
-    const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex }) => {
-        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-        const showPrevButton = isUseSlider && activeCardIndex > 0;
-        const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-        const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-        return (jsx("div", { children: renderArrows({
-                handler: [handlePrevClick, handleNextClick],
-                isShown: [showPrevButton, showNextButton],
-                btnClass: ['left-8', 'right-8'],
-                className: 'top-1/2 mt-3',
-            }) }));
-    };
+
+    const Carousel = JSX(({ cardFullViewCount = 1, children, cardWidth = 1007, className = '', isBlur = true, isCyclic = false, block, ...rest }) => {
+        const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
+        const { blocks: childBlocks } = block || {};
+        const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+        const isScrollAvailable = childBlocksLength > cardFullViewCount;
+        const [activeIndex, controls] = useCarouselControl({
+            itemsCount: childBlocksLength,
+            visibleItemCount: cardFullViewCount,
+            isCyclic,
+        });
+        const { inc, dec, canDec, canInc } = controls;
+        return (jsxs(BlockWrapper, { className: `box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeItem: activeIndex, cardFullViewCount: cardFullViewCount, cardWidth: cardWidth, children: children }), isScrollAvailable ? (jsx("div", { children: renderArrows({
+                        handler: [dec, inc],
+                        isShown: [canDec, canInc],
+                        btnClass: ['left-8', 'right-8'],
+                        className: 'top-1/2 z-10',
+                    }) })) : null, isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: `${blurClasses} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurClasses} right-0 bg-opacity-to-white` })] })) : null] }));
+    });
+    Carousel.childrenTypes = ['CarouselCard'];
 
     const Blocks = {
         Accordion,
@@ -3502,6 +3560,7 @@
         OtherProducts,
         OtherProductsItem,
         Recommendation,
+        RollupItem,
         SafeDepositRental,
         StepsBlock,
         Tabs,
@@ -3509,6 +3568,8 @@
         TextBlock,
         Tile,
         VerticalLayout,
+        CarouselCard,
+        Carousel,
     };
 
     function style2className(style) {
@@ -3616,7 +3677,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.6.28";
+    const packageVersion = "0.6.29";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;