@redneckz/wildless-cms-uni-blocks 0.6.34 → 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;
@@ -909,8 +910,17 @@
         travelBonusRate: 0.015,
         restBonusRate: 0.01,
     };
+    const DEFAULT_DEPOSIT_CALCULATOR_PARAMS = {
+        minSum: 50000,
+        maxSum: 5000000,
+        minMonths: 2,
+        maxMonths: 120,
+        rate: 5.9,
+        isMonthlyInterestPayment: true,
+    };
     const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
     const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
+    const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
 
     const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-l-light text-secondary-text", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
 
@@ -1182,6 +1192,29 @@
         return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, setMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx(RadioButtonGroup, { items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => toggleIsAnnuity(text === ANNUITY) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
     });
 
+    const useDepositCalculatorParams = (userInputParams, sourceBookDir) => {
+        const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
+        const depositCalculatorSourceBookParams = data?.rows.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
+            DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+        const { rate } = depositCalculatorSourceBookParams;
+        const income = getDepositIncome(rate, userInputParams);
+        const finalSum = moneyValue + income;
+        return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+    };
+    const getDepositIncome = (rate, userInputParams) => {
+        const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+        if (isMonthlyInterestPayment) {
+            return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, monthsValue) - moneyValue);
+        }
+        else {
+            /*
+            Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+            */
+            return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
+        }
+    };
+
     const EVERY_MONTH = 'everyMonth';
     const AT_END_TERM = 'atEndTerm';
     const depositTypeItems = [
@@ -1194,21 +1227,22 @@
             text: 'В конце срока',
         },
     ];
-    const DepositCalculatorForm = JSX(({ className = '', rate, buttons, footnote }) => {
+    const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote }) => {
         const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
         const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-        const [isEveryMonth, toggleIsEveryMonth] = useState(false);
-        const income = 948841;
-        const finallySum = 1218841;
+        const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+        const userInputParams = {
+            moneyValue,
+            monthsValue,
+            isMonthlyInterestPayment,
+        };
+        const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
+        const { income, finalSum, rate } = calculatorParams;
         return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
-                            moneyValue,
-                            minSum: DEFAULT_MIN_SUM,
-                            maxSum: DEFAULT_MAX_SUM,
+                            ...calculatorParams,
                         }, setMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
-                            minMonths: DEFAULT_MIN_MONTHS,
-                            maxMonths: DEFAULT_MAX_MONTHS,
-                            monthsValue,
-                        }, setMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [(jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) , (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finallySum, postfix: "\u20BD" })) , jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsEveryMonth(text === EVERY_MONTH) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+                            ...calculatorParams,
+                        }, setMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [income ? (jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) : null, finalSum ? (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })) : null, jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
     });
 
     const EmbeddableCalcBlocks = {
@@ -1343,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 = {
@@ -1402,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',
@@ -2065,13 +2198,11 @@
         'bg-white': 'black',
         transparent: 'white',
     };
-    const HeaderSecondaryMenu = JSX(({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
+    const HeaderSecondaryMenu = JSX(({ className, officesLink, 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 }) })] }));
+        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
@@ -2133,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)
@@ -2150,10 +2281,10 @@
     };
     const Header = JSX(({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
         const router = useRouter();
-        const { topItems, logo, defaultLocation } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
+        const { topItems, logo, defaultLocation, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.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] }) }));
+        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, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
     const getActiveItem = (topItems, router) => {
         const [firstPortal] = topItems || [];
@@ -2822,7 +2953,7 @@
     const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
     const OtherProductsItem = JSX(({ className, label = '', isUnfolded: unfoldedByDefault, ...rest }) => {
         const { colorPalette } = getParentBlockContent(rest.options, {});
-        return (jsx("div", { className: `border-0 border-b border-solid border-main-divider ${className}`, children: jsx(Foldable, { unfoldedByDefault: unfoldedByDefault, 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 }) => (jsx(DefaultFoldButton, { label: label, icon: icons[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette || colorPalette, onClick: onToggle })) }) }));
+        return (jsx("div", { className: `border-0 border-b border-solid border-main-divider ${className}`, children: jsx(Foldable, { unfoldedByDefault: unfoldedByDefault, 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 }) => (jsx(DefaultFoldButton, { label: label, icon: icons[Number(isUnfolded)], dataTheme: colorPalette || rest.options?.page?.colorPalette, onClick: onToggle })) }) }));
     });
     OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
 
@@ -3043,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'];
@@ -3583,13 +3723,15 @@
         primary: 'bg-white',
         secondary: 'bg-primary-main',
     };
-    const VerticalLayout = JSX(({ className = '', gap = '', align = 'left', version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: [
+    const VerticalLayout = JSX(({ className = '', gap = '', align, version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: [
             'flex flex-col',
             gapStyleMap[gap],
-            alignStyle[align],
+            align && alignStyle[align],
             backgroundStyleMap[version],
             className,
-        ].join(' '), ...rest, children: renderChildren(rest) })));
+        ]
+            .filter(Boolean)
+            .join(' '), ...rest, children: renderChildren(rest) })));
     VerticalLayout.childrenTypes = {
         exclude: ['VerticalLayout'],
     };
@@ -3605,7 +3747,6 @@
     const Blocks = {
         Accordion,
         AccordionItem,
-        CarouselLinks,
         BenefitsBlock,
         BusinessBlock,
         Bonus,
@@ -3614,6 +3755,8 @@
         Calculator,
         Carousel,
         CarouselCard,
+        CarouselLinks,
+        CarouselProgramsCard,
         CarouselTariffsCard,
         Catalog,
         ContactsBlock,
@@ -3720,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.34";
+    const packageVersion = "0.6.36";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;