@redneckz/wildless-cms-uni-blocks 0.8.8 → 0.8.10

package/bundle/bundle.umd.js

@@ -290,7 +290,6 @@
     };
 
     class EventBus {
-        static inst = new EventBus();
         subscribers = {};
         subjectsStateMap = {};
         subscribe(type, listener) {
@@ -318,6 +317,8 @@
         }
     }
 
+    const defaultEventBus = new EventBus();
+
     const SENSITIVITY_SCALE = 10;
     function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
         const ref = useRef(null);
@@ -342,55 +343,17 @@
             .concat(1);
     }
 
-    const normalizeAnchor = (rawAnchor) => rawAnchor?.replace('#', '') || '';
-    const getURLWithAnchor = (rawAnchor) => `${globalThis.location?.pathname}#${normalizeAnchor(rawAnchor)}`;
-    class BlockRouter {
-        static inst = new BlockRouter();
-        eventBus = new EventBus();
-        constructor() {
-            const anchor = normalizeAnchor(globalThis.location?.hash);
-            if (anchor) {
-                this.eventBus.subject('goto', { anchor });
-            }
-        }
-        goto(rawAnchor) {
-            const anchor = normalizeAnchor(rawAnchor);
-            if (anchor) {
-                this.push(anchor);
-                this.eventBus.fire('goto', { anchor });
-            }
-        }
-        push(rawAnchor) {
-            globalThis.history?.pushState(null, '', getURLWithAnchor(rawAnchor));
-        }
-        replace(rawAnchor) {
-            globalThis.history?.replaceState(null, '', getURLWithAnchor(rawAnchor));
-        }
-        reset() {
-            globalThis.history?.replaceState(null, '', getURLWithAnchor());
-        }
-    }
+    const blockRouterEventBus = new EventBus();
 
-    function useBlockIntersectionObserver(block, router = BlockRouter.inst) {
+    function useBlockIntersectionObserver(block) {
         const observerCallback = useCallback((entries) => {
             if (!block || !entries?.length) {
                 return;
             }
             const intersection = entries[entries.length - 1];
-            router.eventBus.fire('intersection', { block, intersection });
-        }, [block, router]);
-        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-        useEffect(() => {
-            if (!ref.current) {
-                return undefined;
-            }
-            return router.eventBus.subscribe('goto', ({ anchor }) => {
-                if (ref.current && block?.anchor === anchor) {
-                    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                }
-            });
-        }, [block, router]);
-        return ref;
+            blockRouterEventBus.fire('intersection', { block, intersection });
+        }, [block]);
+        return useIntersectionObserver(observerCallback, { sensitivity: 1 });
     }
 
     const blockStyles = {
@@ -404,7 +367,7 @@
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isVisible, setVisible] = useState(true);
-        useEffect(() => EventBus.inst.subscribe('tab', (event) => {
+        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             if (event.type === 'group') {
                 const hasSettings = block?.labels?.length || block?.anchor;
                 setVisible(event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true);
@@ -651,8 +614,14 @@
         },
     ];
 
-    function useBlockRouter() {
-        return BlockRouter.inst;
+    const normalizeAnchor = (anchor) => anchor?.replace('#', '') || '';
+    function gotoBlock(router, anchor) {
+        router.replace(`#${normalizeAnchor(anchor)}`);
+    }
+    function trackBlock(router, block) {
+        router.replace(`#${normalizeAnchor(block?.anchor)}`, undefined, {
+            scroll: false,
+        });
     }
 
     const isURL = (href) => Boolean(href?.includes('//'));
@@ -699,7 +668,6 @@
 
     function useLink(isRemote) {
         const router = useRouter();
-        const blockRouter = useBlockRouter();
         return (props) => ({
             ...props,
             href: adjustHref(props.href),
@@ -722,7 +690,7 @@
                 // Client routing
                 ev?.preventDefault();
                 if (isHash(href)) {
-                    blockRouter.goto(href);
+                    gotoBlock(router, href);
                 }
                 else if (href) {
                     router.push(href);
@@ -1143,8 +1111,8 @@
         return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, handleSubmit }), responceType ? jsx(ResponseNotification, { responceType: responceType }) : null] }) }));
     });
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep) })) : null] })));
-    const renderStep = (benefit, i) => {
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
+    const renderStep$1 = (benefit, i) => {
         const description = benefit.description;
         return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon, asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$5(description)] })] }, String(i)));
     };
@@ -1260,7 +1228,7 @@
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
-    const ButtonBlock = JSX(({ button, ...rest }) => (jsx(BlockWrapper, { ...rest, children: renderButtonsSection([button]) })));
+    const ButtonBlock = JSX(({ button, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection([button]) })));
 
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount, isCyclic } = props;
@@ -1352,7 +1320,7 @@
         maxSum: 5000000,
         minMonths: 2,
         maxMonths: 120,
-        rate: 5.9,
+        rate: 7,
         isMonthlyInterestPayment: true,
     };
     const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS = {
@@ -1360,7 +1328,7 @@
         maxSum: 500000,
         minDays: BUSINESS_MIN_DAYS,
         maxDays: BUSINESS_MAX_DAYS,
-        rate: 5.9,
+        rate: 6.6,
         isMonthlyInterestPayment: true,
         isReplenished: false,
         isPartialWithdrawal: false,
@@ -1372,7 +1340,7 @@
     const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
     const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
 
-    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: style('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 })) : ('')] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
+    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: style('block gradient-color-text font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName), children: String(rate.toFixed(2)).replace('.', ',') }), unit ? (jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit })) : ('')] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
 
     const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: text })) : null;
 
@@ -1472,6 +1440,17 @@
 
     const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-1 pt-1 pl-5 pb-1.5", children: jsx(ImgInner, { image: { icon: 'PercentIcon' }, width: "90", height: "85", asSVG: true }) }), jsx("div", { className: "w-[250px] mt-3.5", children: jsxs(Paragraph, { size: "text-xl-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
 
+    const defaultDiscriminator = (_) => _;
+    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+
+    const getRangeByKeys = ([minKey, maxKey], rows = []) => ({
+        [minKey]: rows.length ? minBy()(rows.map((row) => row[minKey])) : 0,
+        [maxKey]: rows.length ? maxBy()(rows.map((row) => row[maxKey])) : 0,
+    });
+    const checkRangeByKeys = (value, [minKey, maxKey], sourceBookRow) => value >= sourceBookRow[minKey] && value < sourceBookRow[maxKey];
+
     const useBusinessDepositCalculatorParams = (userInputParams, sourceBookDir) => {
         const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isSmallBusiness, isMonthlyInterestPayment, } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || BUSINESS_DEPOSIT_CALC_DEFAULT_DIR);
@@ -1488,21 +1467,27 @@
         const businessDepositCalculatorSourceBookParams = data?.rows?.find((_) => {
             return (isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
                 isSmallBusiness === _.isSmallBusiness &&
-                (isOperatingDeposit
-                    ? _.isReplenished && _.isPartialWithdrawal
-                    : !_.isReplenished && !_.isPartialWithdrawal));
+                checkIsOperatingDeposit(isOperatingDeposit, _) &&
+                checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+                checkRangeByKeys(daysValue, ['minDays', 'maxDays'], _));
         }) || DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS;
         const { rate } = businessDepositCalculatorSourceBookParams;
         const income = getDepositIncome$1(rate, userInputParams);
         const finalSum = moneyValue + income;
+        const sourceBookRows = data?.rows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
         return {
             ...businessDepositCalculatorSourceBookParams,
+            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+            ...getRangeByKeys(['minDays', 'maxDays'], sourceBookRows),
             ...userInputParams,
             isDisabledOperatingDeposit,
             income,
             finalSum,
         };
     };
+    const checkIsOperatingDeposit = (isOperatingDeposit, sourceBookRow) => isOperatingDeposit
+        ? sourceBookRow.isReplenished && sourceBookRow.isPartialWithdrawal
+        : !sourceBookRow.isReplenished && !sourceBookRow.isPartialWithdrawal;
     const getDepositIncome$1 = (rate, userInputParams) => {
         const { isMonthlyInterestPayment, moneyValue, daysValue } = userInputParams;
         /*
@@ -1574,18 +1559,23 @@
     };
 
     const useCreditCalculatorParams = (userInputParams, sourceBookDir) => {
-        const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
+        const { isInsurance, isSalaryClient, isStateEmployee, moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
         const creditCalculatorSourceBookParams = data?.rows?.find((_) => {
             return (isInsurance === _.isInsurance &&
                 isSalaryClient === _.isSalaryClient &&
-                isStateEmployee === _.isStateEmployee);
+                isStateEmployee === _.isStateEmployee &&
+                checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+                checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _));
         }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
         const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
         const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
         const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
+        const sourceBookRows = data?.rows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
         return {
             ...creditCalculatorSourceBookParams,
+            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+            ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
             ...userInputParams,
             finalRate,
             monthlyPayment,
@@ -1626,14 +1616,23 @@
     });
 
     const useDepositCalculatorParams = (userInputParams, sourceBookDir) => {
-        const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+        const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
-        const depositCalculatorSourceBookParams = data?.rows?.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
-            DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+        const depositCalculatorSourceBookParams = data?.rows?.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+            checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+            checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _)) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
         const { rate } = depositCalculatorSourceBookParams;
         const income = getDepositIncome(rate, userInputParams);
         const finalSum = moneyValue + income;
-        return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+        const sourceBookRows = data?.rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
+        return {
+            ...depositCalculatorSourceBookParams,
+            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+            ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
+            ...userInputParams,
+            income,
+            finalSum,
+        };
     };
     const getDepositIncome = (rate, userInputParams) => {
         const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
@@ -1843,11 +1842,6 @@
 
     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' });
@@ -1948,10 +1942,12 @@
             isCyclic,
         });
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
-                            ...rest,
-                            block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
-                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }) }));
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: isBankHistoryCarousel
+                            ? renderChildren({
+                                ...rest,
+                                block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
+                            })
+                            : renderChildren(rest) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -3536,6 +3532,7 @@
         throw new Error(x);
     }
 
+    // TODO: Create universal function for this case
     const renderBenefit$2 = 
     // Linter doesn't understand that switch processes all cases
     // eslint-disable-next-line consistent-return
@@ -3672,6 +3669,7 @@
         return (jsx("div", { className: `mt-2.5 z-10 ${descriptionWidth}`, children: jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription }) }));
     }
 
+    // TODO: Create universal function for this case
     const renderBenefit = 
     // Linter doesn't understand that switch processes all cases
     // eslint-disable-next-line consistent-return
@@ -3874,19 +3872,30 @@
     });
     const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
-    const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
+    const checkCanRenderIcon = (icon) => Boolean(icon?.icon || icon?.src);
 
-    const renderStepContent = ({ styleMap, isMainButton, version, }) => (step, i, { length }) => {
+    // TODO: Create universal function for this case
+    const renderStep = (props) => 
+    // Linter doesn't understand that switch processes all cases
+    // eslint-disable-next-line consistent-return
+    (step, i, arr) => {
+        const { type } = step;
+        if (!(type === 'default' || type === 'rte')) {
+            return null;
+        }
+        switch (type) {
+            case 'default':
+                return renderDefaultStep(props)(step, i, arr);
+            case 'rte':
+                return jsx(RichText, { __html: step.__html });
+            default:
+                assertUnreachable(step);
+        }
+    };
+    const renderDefaultStep = ({ styleMap, isMainButton, version }) => (step, i, arr) => {
         const { label, description, button, items, isDotted } = step;
-        const contentMarginClass = label && (description || items) ? 'mt-2' : '';
-        return (jsxs("div", { className: `relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden ${getContainerWidth(length)}`, children: [jsxs("div", { className: `${button?.text ? 'mb-8' : ''}  text-center`, children: [renderStepLabel(label), jsxs("div", { className: `${contentMarginClass} flex flex-col items-center`, children: [renderStepDescription({
-                                    description,
-                                    className: styleMap.description,
-                                }), jsx(List, { className: getItemsClasses({ className: 'text-left', description, styleMap }), items: items, listItemSize: "M", isDotted: isDotted })] })] }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", version: version, ...button, children: button?.text })) : null] }, String(i)));
-    };
-    const renderStepLabel = (label) => label ? jsx("div", { className: "text-h6", children: label }) : null;
-    const renderStepDescription = ({ description, className = '', }) => (description ? jsx("div", { className: className, children: description }) : null);
-    const getItemsClasses = ({ className, description, styleMap, }) => [description ? styleMap.description : 'text-h6', description ? 'mt-0.5' : '', className].join(' ');
+        return (jsxs("div", { className: style('relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden', getContainerWidth(arr.length)), children: [jsxs("div", { className: style(button?.text ? 'mb-8' : '', 'text-center'), children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-h6", children: label }) })) : null, jsxs("div", { className: "flex flex-col items-center", children: [description ? jsx("div", { className: styleMap.description, children: description }) : null, jsx(List, { className: style(description ? `${styleMap.description} mt-0.5` : 'text-h6'), items: items, listItemSize: "M", isDotted: isDotted })] })] }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", version: version, ...button, children: button?.text })) : null] }, String(i)));
+    };
     const getContainerWidth = (length) => (length < 5 ? 'w-[276px]' : 'w-[210px]');
 
     const STEPS_BLOCK_STYLE_MAPS = {
@@ -3931,21 +3940,14 @@
 
     const getLineOpacity = (showLines) => (showLines ? '' : 'opacity-0');
     const getPaddingX = (steps) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
-    const StepsBlock = JSX(({ className = '', showLines = true, steps = [], button, version = 'primary', ...rest }) => {
-        const { title } = rest;
-        const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
+    const StepsBlock = JSX(({ className = '', showLines = true, steps = [], button, version = 'primary', title, ...rest }) => {
         const shortGaps = steps.length > 3;
+        const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
         const lineOpacity = getLineOpacity(showLines);
-        const titleMargin = title ? 'mt-9' : '';
         const paddingX = getPaddingX(steps.length);
-        return (jsxs(BlockWrapper, { className: [
-                'box-border py-12',
-                shortGaps ? 'px-20' : 'px-[70px]',
-                'flex flex-col items-center overflow-hidden',
-                className,
-            ].join(' '), version: version, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap, version))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? jsx(Button, { className: "mt-8 min-w-60", version: "primary", ...button }) : null] }));
+        return (jsxs(BlockWrapper, { className: style('box-border py-12', shortGaps ? 'px-20' : 'px-[70px]', 'flex flex-col items-center overflow-hidden', className), version: version, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: style('flex items-center', paddingX), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light', lineOpacity) }))(steps.map(renderStepIcon(styleMap, version))) }), jsx("div", { className: style('flex justify-between mt-4', shortGaps ? 'gap-x-3' : 'gap-x-[101px]'), children: steps.map(renderStep({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? jsx(Button, { className: "mt-8 min-w-60", version: "primary", ...button }) : null] }));
     });
-    const renderStepIcon = (styleMap, version) => ({ icon }, i) => (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
+    const renderStepIcon = (styleMap, version) => ({ icon }, i) => (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`, children: checkCanRenderIcon(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
 
     const containerStyles = {
         'horizontal-list': 'mx-auto mt-5 w-fit',
@@ -4121,7 +4123,7 @@
     const Tabs = JSX((props) => {
         const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
-        useEffect(() => EventBus.inst.subscribe('tab', (event) => {
+        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             const tab = tabs?.find(checkTab(event));
             if (event.type === 'link' && tab) {
                 setCurrentTab(tab);
@@ -4129,11 +4131,11 @@
             return [];
         }), [tabs]);
         useEffect(() => currentTab?.type === 'group'
-            ? EventBus.inst.subject('tab', { type: currentTab.type, label: currentTab.ref })
+            ? defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref })
             : undefined, [currentTab]);
         const handleClick = useCallback((selectedTab) => {
             if (selectedTab?.type === 'group') {
-                EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
+                defaultEventBus.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
             }
             setCurrentTab(selectedTab);
         }, []);
@@ -4347,10 +4349,10 @@
     });
     const renderTag = (tag, key) => (jsx("span", { className: "text-m-light py-2 px-2.5 border-solid border rounded-md border-gray", children: tag }, String(key)));
 
-    const Tile = JSX(({ title, headingType = 'h3', description, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, ...rest }) => (jsx(BlockWrapper, { className: `overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(className)} ${getTileMinHeight(className)} ${className}`, ...rest, children: jsxs(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: renderButtonsSection(buttons, {
+    const Tile = JSX(({ title, headingType = 'h3', __html, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, ...rest }) => (jsx(BlockWrapper, { className: `overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(className)} ${getTileMinHeight(className)} ${className}`, ...rest, children: jsxs(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: renderButtonsSection(buttons, {
                 className: 'mt-8',
                 buttonClassName: 'min-w-[158px]',
-            }), image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(Paragraph, { size: "text-xl-light", children: description }) })) : null, children, jsx(List, { className: "mt-2.5", itemClassName: "mb-1.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })));
+            }), image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", itemClassName: "mb-1.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })));
 
     const alignStyle = {
         left: 'items-start',
@@ -4459,25 +4461,22 @@
     }
 
     const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
-    function useBlockRouterProvider(router = BlockRouter.inst, scrollTarget = globalThis) {
+    function useBlockRouterProvider(scrollTarget = globalThis) {
+        const router = useRouter();
         const intersectionsMapRef = useRef(new Map());
-        useEffect(() => router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+        useEffect(() => blockRouterEventBus.subscribe('intersection', ({ block, intersection }) => {
             if (intersectionsMapRef.current) {
                 intersectionsMapRef.current.set(block, intersection);
             }
-        }), [router]);
+        }), []);
         useEffect(() => {
             const handleScroll = debounce(() => {
-                if (!isScrolledEnough()) {
-                    router.reset();
-                    return;
-                }
-                const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
-                if (activeBlock?.anchor) {
-                    router.replace(activeBlock.anchor);
+                if (isScrolledEnough()) {
+                    const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+                    trackBlock(router, activeBlock);
                 }
-                else if (!activeBlock) {
-                    router.reset();
+                else {
+                    trackBlock(router);
                 }
             }, 100);
             scrollTarget.addEventListener('scroll', handleScroll);
@@ -4556,7 +4555,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.8.8";
+    const packageVersion = "0.8.10";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;