@redneckz/wildless-cms-uni-blocks 0.6.35 → 0.6.36

package/bundle/bundle.umd.js

@@ -311,8 +311,10 @@
         }
     }
 
-    function useIntersectionObserver(observerCallback, observerOptions) {
+    const SENSITIVITY_SCALE = 10;
+    function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
         const ref = useRef(null);
+        const observerOptions = useMemo(() => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }), [sensitivity, rootRef?.current]);
         useEffect(() => {
             if (!ref.current) {
                 return undefined;
@@ -325,6 +327,13 @@
         }, [observerCallback, observerOptions]);
         return ref;
     }
+    function sensitivityToThreshold(sensitivity = 0) {
+        const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
+        return new Array(thresholdsCount)
+            .fill(0)
+            .map((_, thi) => Math.min(thi / thresholdsCount), 1)
+            .concat(1);
+    }
 
     const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
         if (!entries?.length) {
@@ -343,19 +352,13 @@
         }
     };
 
-    const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
-    const THRESHOLD_ARRAY_LENGTH = 18;
-    const THRESHOLD_ARRAY_START_VALUE = (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
-    const OBSERVER_OPTIONS = {
-        threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
-    };
     const BlockWrapper = JSX(({ className, block, tag = 'section', role, children }) => {
         const Tag = tag;
         const { anchor, labels } = block || {};
         const [isVisible, setVisible] = useState(true);
         const anchorClickRef = useRef({});
         const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
-        const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
         useEffect(() => EventBus.inst.subscribe('anchorClick', (e) => {
             setVisible(true);
             anchorClickRef.current = e;
@@ -372,10 +375,6 @@
         }), []);
         return isVisible ? (jsx(Tag, { className: className, role: role, ...(anchor ? { id: anchor, ref } : {}), children: children })) : null;
     });
-    function getIntersectionThreshold(_, i) {
-        const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
-        return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
-    }
     function changeHash(label) {
         if (label) {
             globalThis.document.location.hash = label;
@@ -426,7 +425,7 @@
                     : '';
             }
         }, [isUnfolded, children?.length]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
     const svgUseStyleMap = {
@@ -626,7 +625,7 @@
                     props.onClick && props.onClick(ev);
                     const isLocalHref = href && !isURL(href);
                     const isLocalTarget = !props.target || props.target === '_self';
-                    if (isLocalHref && isLocalTarget) {
+                    if (isLocalHref && isLocalTarget && !isHash(href)) {
                         ev?.preventDefault();
                         router.push(href);
                     }
@@ -865,6 +864,8 @@
     const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
         : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "16", height: "16", asSVG: true }) })));
+    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
+    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
 
     function renderArrows({ dec, inc, canDec, canInc, btnClass, className = '', }) {
         const isVisible = canDec || canInc;
@@ -1376,35 +1377,140 @@
         return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
-    const childStyleMap = ['[&>*]:min-w-[100%]', '[&>*]:min-w-[50%]', '[&>*]:min-w-[33.33%]'];
-    const CarouselContainer = JSX(({ activeIndex, itemCount, visibleItemCount, containerRef, children }) => {
-        const scrollWidth = containerRef?.current?.scrollWidth || 0;
-        const maxScrollLeft = scrollWidth - (containerRef?.current?.clientWidth || 0);
-        const translateX = visibleItemCount
-            ? `${-Math.round((100 * activeIndex) / visibleItemCount)}%`
-            : `${-Math.round(Math.min((scrollWidth * activeIndex) / (itemCount || 1), maxScrollLeft))}px`;
-        return (jsx("div", { className: `flex gap-1 duration-1000 ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: { transform: `translateX(${translateX})` }, role: "list", ref: containerRef, children: children }));
+    const mapChildren = (mapper) => (children) => {
+        if (children === null || children === undefined) {
+            return children;
+        }
+        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
+    };
+
+    const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+        const observerCallback = useCallback((entries) => {
+            if (entries.length && onIntersection) {
+                onIntersection(idx || 0, entries[entries.length - 1]);
+            }
+        }, [onIntersection, idx]);
+        const ref = useIntersectionObserver(observerCallback, observerOptions);
+        return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, role: "listitem", "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
+    });
+
+    const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount, gap = 0, padding = 0, snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+        const observerOptions = {
+            sensitivity: 1,
+            rootRef: containerRef,
+        };
+        const itemsVisibilityListRef = useRef([]);
+        const handleIntersection = useCallback((idx, entry) => {
+            const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+            itemsVisibilityList[idx] = entry;
+            itemsVisibilityListRef.current = itemsVisibilityList;
+            onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+            onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+        }, [onVisibleItemsChange, onVisibleIndicesChange]);
+        return (jsx("div", { className: `box-border overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: `${snapAlign} ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: getContainerStyle(padding / 4), activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+    });
+    // Styles used to compensate outer container padding to get rid of clipping effect
+    const getContainerStyle = (padding) => ({
+        marginLeft: `${-padding}px`,
+        marginRight: `${-padding}px`,
+        paddingLeft: `${padding}px`,
+        paddingRight: `${padding}px`,
     });
+    const getVisibleIndices = (itemsVisibilityList) => itemsVisibilityList
+        .map((_, i) => [_, i])
+        .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+        .map(([, i]) => i);
+
+    const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
+
+    const defaultDiscriminator = (_) => _;
+    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+
+    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
+    const scrollBy = (container) => (itemCount, delta) => {
+        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
+    };
+
+    const scrollToEnd = (container) => {
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+    };
+
+    const scrollToStart = (container) => {
+        container.scrollTo({ left: 0, behavior: 'smooth' });
+    };
+
+    const useSwipeListScroll = ({ itemCount, isCyclic, onVisibleIndicesChange, }) => {
+        const containerRef = useRef(null);
+        const [visibleIndices, setVisibleIndices] = useState([]);
+        const handleVisibleIndicesChange = useCallback((indices) => {
+            setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
+            onVisibleIndicesChange && onVisibleIndicesChange(indices);
+        }, [itemCount]);
+        const [minIndex, maxIndex] = visibleIndices.length
+            ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
+            : [-1, -1];
+        const canScrollLeft = minIndex > 0;
+        const canScrollRight = maxIndex < itemCount - 1;
+        const scrollLeft = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (isCyclic && !canScrollLeft) {
+                scrollToEnd(containerRef.current);
+            }
+            else {
+                scrollBy(containerRef.current)(itemCount, -1);
+            }
+        }, [isCyclic, itemCount, canScrollLeft]);
+        const scrollRight = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (isCyclic && !canScrollRight) {
+                scrollToStart(containerRef.current);
+            }
+            else {
+                scrollBy(containerRef.current)(itemCount, 1);
+            }
+        }, [itemCount, isCyclic, canScrollRight]);
+        return [
+            containerRef,
+            {
+                scrollLeft,
+                scrollRight,
+                canScrollLeft: isCyclic || canScrollLeft,
+                canScrollRight: isCyclic || canScrollRight,
+                visibleIndicesRange: [minIndex, maxIndex],
+                handleVisibleIndicesChange,
+            },
+        ];
+    };
 
+    const ITEMS_GAP = 4;
     const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+    const scrollButtonStyle = 'absolute top-1/2 z-50';
     const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
-        const containerRef = useRef(null);
-        const [activeIndex, controls] = useCarouselControls({
+        const [containerRef, scroll] = useSwipeListScroll({
             itemCount: count,
-            visibleItemCount,
             isCyclic,
-            container: containerRef.current,
         });
-        const { isScrollAvailable } = controls;
-        return (jsxs(BlockWrapper, { className: `relative font-sans overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeIndex: activeIndex, itemCount: count, visibleItemCount: visibleItemCount, containerRef: containerRef, children: renderChildren(rest) }), isScrollAvailable && isBlur ? (jsxs("div", { children: [jsx("div", { className: `${blurBaseStyle} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurBaseStyle} right-0 bg-opacity-to-white` })] })) : null, renderArrows({
-                    ...controls,
-                    btnClass: ['left-8', 'right-8'],
-                    className: 'top-1/2',
-                })] }));
+        return (jsxs(BlockWrapper, { className: `relative font-sans ${className}`, ...rest, children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren(rest) }), (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: `${blurBaseStyle} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurBaseStyle} right-0 bg-opacity-to-white` })] })) : null, renderScrollButtons(scroll)] }));
     });
-    Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+    Carousel.childrenTypes = [
+        'CarouselCard',
+        'CarouselTariffsCard',
+        'CarouselLinks',
+        'CarouselProgramsCard',
+    ];
+    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} right-8`, onClick: scrollRight })) : null] }));
+
+    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-end", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) }) : null] })] })));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
     const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
     const CARD_WIDTH_MAP = {
@@ -1435,23 +1541,17 @@
                     .map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
+    const VISIBLE_ROWS_COUNT = 1;
     const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-        const hitStyle = getHitStyle(Boolean(isHighlighting));
         const rowsNode = rows.map(renderCardInfo);
-        const VISIBLE_ROWS_COUNT = 1;
-        const [visibleRows, hiddenRows] = [
-            rowsNode.slice(0, VISIBLE_ROWS_COUNT),
-            rowsNode.slice(VISIBLE_ROWS_COUNT),
-        ];
-        return (jsxs(BlockWrapper, { className: `font-sans bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { className: "flex justify-center", image: icon }) : null, title ? (jsx(Heading, { className: "text-primary-text text-center pt-2", headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, rows?.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: rows.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
+        const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
+        return (jsx(BlockWrapper, { className: `font-sans ${className}`, ...rest, children: jsxs("div", { className: `relative bg-white border border-main-stroke min-w-[322px] p-8 ${getHitStyle(isHighlighting)}`, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { className: "text-primary-text text-center pt-2", headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, rows?.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: rows.length > 1 ? renderFoldButton$1 : null })) : null] }) }));
     });
-    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16", asSVG: true })] }));
-    const renderCardInfo = (cell, i) => (jsxs("div", { className: "py-5 border-b border-main-divider flex flex-col gap-1", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? jsx("div", { className: "text-primary-text text-h6", children: cell.description }) : null] }, String(i)));
-    const renderHitIcon = () => {
-        const POSITION_STYLE = 'absolute -top-7 -right-4';
-        return (jsxs("div", { className: `h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`, children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx("div", { className: "text-center", children: "\u0425\u0438\u0442" })] }));
-    };
+    const renderCardInfo = (cell, i) => (jsxs("div", { className: "py-5 border-b border-main-divider", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null] }, String(i)));
+    const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx("div", { className: "text-center", children: "\u0425\u0438\u0442" })] }));
 
     const cardStyleMap$1 = {
         black: 'bg-black',
@@ -2103,8 +2203,6 @@
         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 }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, 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 })) : null, 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 }) })] }));
     });
 
-    const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
-
     const findActiveSubItem = (router) => (items = []) => {
         const possibleActiveSubItems = items?.filter(isSubItemActive(router));
         return possibleActiveSubItems?.length
@@ -2166,7 +2264,7 @@
         const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
         const dropDownMenuItems = subItems.slice(visibleItemsCount);
         const subItemsListRef = useRef(null);
-        const observerOptions = useMemo(() => ({ threshold: 1, root: subItemsListRef.current }), [subItemsListRef.current]);
+        const observerOptions = { rootRef: subItemsListRef };
         const subItemsVisibilityHandlers = useMemo(() => subItems.map((_, index) => (isIntersecting) => {
             setVisibleItemsCount(isIntersecting
                 ? handleIntersectionActivation(index)
@@ -3076,7 +3174,16 @@
     });
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (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: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle, label, version }) }) })));
-    RollupItem.childrenTypes = [];
+    RollupItem.childrenTypes = {
+        exclude: [
+            'RollupItem',
+            'Accordion',
+            'AccordionItem',
+            'OtherProducts',
+            'OtherProductsItem',
+            'VerticalLayout',
+        ],
+    };
     const renderFoldButton = ({ isUnfolded, onToggle, label, version }) => {
         const iconsPrimary = ['PlusIcon', 'MinusIcon'];
         const iconsSecondary = ['ArrowDownIcon', 'ArrowUpIcon'];
@@ -3640,7 +3747,6 @@
     const Blocks = {
         Accordion,
         AccordionItem,
-        CarouselLinks,
         BenefitsBlock,
         BusinessBlock,
         Bonus,
@@ -3649,6 +3755,8 @@
         Calculator,
         Carousel,
         CarouselCard,
+        CarouselLinks,
+        CarouselProgramsCard,
         CarouselTariffsCard,
         Catalog,
         ContactsBlock,
@@ -3755,7 +3863,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.35";
+    const packageVersion = "0.6.36";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;