@redneckz/wildless-cms-uni-blocks 0.5.10 → 0.5.12

package/bundle/bundle.umd.js

@@ -255,34 +255,81 @@
         }
     }
 
-    const changeHashOnObserve = (entries) => {
-        if (!entries.length) {
+    const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
+        if (!entries?.length) {
             return;
         }
         const [entry] = entries;
-        if (entry.isIntersecting) ;
+        if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
+            return;
+        }
+        if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
+            EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
+            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        }
+        else if (!anchorClickRef?.current?.isScrolling) {
+            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        }
     };
 
-    const BlockWrapper = JSX(({ anchor, className, context, children, tag = 'section', labels }) => {
-        const Tag = tag;
-        const { IntersectionObserverTag } = context;
-        const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
-        useEffect(() => EventBus.inst.subscribe('tab', (event) => {
-            if (event.type === 'group') {
-                setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+    const IntersectionObserverTag = JSX((props) => {
+        const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
+        const intersectionObserver = useRef(null);
+        const ref = useCallback((element) => {
+            if (!element) {
+                return;
             }
-            else {
-                setShouldRenderBlock(true);
-                scrollToBlock(event.label);
+            if (intersectionObserver.current) {
+                intersectionObserver.current.disconnect();
             }
-        }), [labels]);
+            intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
+            intersectionObserver.current.observe(element);
+        }, [observerCallback, observerOptions]);
+        const Tag = tag;
+        return (jsx(Tag, { ref: ref, className: className, id: anchor, children: children }));
+    });
+
+    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 BlockWrapper = JSX(({ anchor, className, children, tag = 'section', labels }) => {
+        const Tag = tag;
+        const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+        const anchorClickRef = useRef({});
+        const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
+        useEffect(() => {
+            const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
+                anchorClickRef.current = e;
+            });
+            const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
+                if (event.type === 'group') {
+                    setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+                }
+                else {
+                    changeHash(event.label);
+                    setShouldRenderBlock(true);
+                }
+            });
+            return () => {
+                anchorClickCleanup();
+                tabCleanup();
+            };
+        }, []);
         if (!shouldRenderBlock) {
             return null;
         }
-        return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: changeHashOnObserve, observerOptions: { threshold: 1 }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
+        return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: observerCallback, observerOptions: {
+                threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
+            }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
     });
-    function scrollToBlock(label) {
-        setTimeout(() => globalThis.document.getElementById(`#${label}`)?.scrollIntoView({ behavior: 'smooth' }));
+    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;
+        }
     }
 
     const HEADING_STYLE_MAP = {
@@ -299,270 +346,6 @@
         return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
     });
 
-    // Generated. Do not touch
-    /* eslint-disable max-len, max-lines */
-    const IconInverseMap = {
-        ActualBalanceIcon: false, AirPlaneIcon: false, AppleIcon: true, ArrowDownIcon: true, ArrowLeftIcon: true, ArrowUpIcon: true, AtmIcon: true, BankIcon: true, BuildingIcon: true, BurgerIcon: true, Calendar2Icon: true, CalendarCircleIcon: true, CalendarIcon: true, CalendarTickIcon: true, Car2Icon: true, CardIcon: true, CardPosIcon: true, CardTickIcon: true, CardWithGemIcon: false, CarIcon: false, ChartSquareIcon: true, CinemaIcon: false, ClockIcon: false, CloseIcon: true, ComfortableCompIcon: false, CreditCardsIcon: false, DiscountShapeIcon: true, DocDownloadIcon: true, DocIcon: true, DocIconMonoColor: true, DocsIcon: false, DocumentTextIcon: true, DollarIcon: false, DoneIcon: false, DoneSimpleIcon: true, EarthIcon: false, EmptyWalletChangeIcon: true, EmptyWalletIcon: true, EuroIcon: false, GeolocationIcon: true, GlassIcon: false, GlobalIcon: true, GpsIcon: true, GridIcon: true, InterestGrowthIcon: false, InterestIcon: true, JCBIcon: false, LogoIcon: true, LoupeIcon: true, MapMarkerClusterIcon: false, MapMarkerSingleIcon: false, MasterCardIcon: false, MinusIcon: true, MirIcon: false, MoneyIcon: true, MoneyInsuranceIcon: false, MoneysIcon: true, MonitorMobileIcon: true, NewDocIcon: false, OfficeIcon: false, OkIcon: true, PackA4Icon: false, PassSendIcon: false, PercentageRoundIcon: true, PercentageSquareIcon: true, PersonalCardIcon: true, PlayMarketIcon: true, PlusIcon: true, PowerIcon: false, Profile2UserIcon: true, ProfileIcon: true, PumpkinIcon: false, RoundRubleIcon: true, SafeIcon: true, ShieldTickIcon: true, SignDocsIcon: false, SmallClockIcon: true, SoundIcon: false, StrongBoxIcon: true, TelegramIcon: true, UnionPayIcon: false, UserSquareIcon: true, UserTickIcon: true, VisaIcon: false, VKIcon: true, WalletAdd2Icon: true, WalletAddIcon: true, WalletIcon: true, WalletWithMoneyIcon: true, WateringCanIcon: false
-    };
-    var IconMap;
-    (function (IconMap) {
-        IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
-        IconMap["AirPlaneIcon"] = "AirPlaneIcon";
-        IconMap["AppleIcon"] = "AppleIcon";
-        IconMap["ArrowDownIcon"] = "ArrowDownIcon";
-        IconMap["ArrowLeftIcon"] = "ArrowLeftIcon";
-        IconMap["ArrowUpIcon"] = "ArrowUpIcon";
-        IconMap["AtmIcon"] = "AtmIcon";
-        IconMap["BankIcon"] = "BankIcon";
-        IconMap["BuildingIcon"] = "BuildingIcon";
-        IconMap["BurgerIcon"] = "BurgerIcon";
-        IconMap["Calendar2Icon"] = "Calendar2Icon";
-        IconMap["CalendarCircleIcon"] = "CalendarCircleIcon";
-        IconMap["CalendarIcon"] = "CalendarIcon";
-        IconMap["CalendarTickIcon"] = "CalendarTickIcon";
-        IconMap["Car2Icon"] = "Car2Icon";
-        IconMap["CardIcon"] = "CardIcon";
-        IconMap["CardPosIcon"] = "CardPosIcon";
-        IconMap["CardTickIcon"] = "CardTickIcon";
-        IconMap["CardWithGemIcon"] = "CardWithGemIcon";
-        IconMap["CarIcon"] = "CarIcon";
-        IconMap["ChartSquareIcon"] = "ChartSquareIcon";
-        IconMap["CinemaIcon"] = "CinemaIcon";
-        IconMap["ClockIcon"] = "ClockIcon";
-        IconMap["CloseIcon"] = "CloseIcon";
-        IconMap["ComfortableCompIcon"] = "ComfortableCompIcon";
-        IconMap["CreditCardsIcon"] = "CreditCardsIcon";
-        IconMap["DiscountShapeIcon"] = "DiscountShapeIcon";
-        IconMap["DocDownloadIcon"] = "DocDownloadIcon";
-        IconMap["DocIcon"] = "DocIcon";
-        IconMap["DocIconMonoColor"] = "DocIconMonoColor";
-        IconMap["DocsIcon"] = "DocsIcon";
-        IconMap["DocumentTextIcon"] = "DocumentTextIcon";
-        IconMap["DollarIcon"] = "DollarIcon";
-        IconMap["DoneIcon"] = "DoneIcon";
-        IconMap["DoneSimpleIcon"] = "DoneSimpleIcon";
-        IconMap["EarthIcon"] = "EarthIcon";
-        IconMap["EmptyWalletChangeIcon"] = "EmptyWalletChangeIcon";
-        IconMap["EmptyWalletIcon"] = "EmptyWalletIcon";
-        IconMap["EuroIcon"] = "EuroIcon";
-        IconMap["GeolocationIcon"] = "GeolocationIcon";
-        IconMap["GlassIcon"] = "GlassIcon";
-        IconMap["GlobalIcon"] = "GlobalIcon";
-        IconMap["GpsIcon"] = "GpsIcon";
-        IconMap["GridIcon"] = "GridIcon";
-        IconMap["InterestGrowthIcon"] = "InterestGrowthIcon";
-        IconMap["InterestIcon"] = "InterestIcon";
-        IconMap["JCBIcon"] = "JCBIcon";
-        IconMap["LogoIcon"] = "LogoIcon";
-        IconMap["LoupeIcon"] = "LoupeIcon";
-        IconMap["MapMarkerClusterIcon"] = "MapMarkerClusterIcon";
-        IconMap["MapMarkerSingleIcon"] = "MapMarkerSingleIcon";
-        IconMap["MasterCardIcon"] = "MasterCardIcon";
-        IconMap["MinusIcon"] = "MinusIcon";
-        IconMap["MirIcon"] = "MirIcon";
-        IconMap["MoneyIcon"] = "MoneyIcon";
-        IconMap["MoneyInsuranceIcon"] = "MoneyInsuranceIcon";
-        IconMap["MoneysIcon"] = "MoneysIcon";
-        IconMap["MonitorMobileIcon"] = "MonitorMobileIcon";
-        IconMap["NewDocIcon"] = "NewDocIcon";
-        IconMap["OfficeIcon"] = "OfficeIcon";
-        IconMap["OkIcon"] = "OkIcon";
-        IconMap["PackA4Icon"] = "PackA4Icon";
-        IconMap["PassSendIcon"] = "PassSendIcon";
-        IconMap["PercentageRoundIcon"] = "PercentageRoundIcon";
-        IconMap["PercentageSquareIcon"] = "PercentageSquareIcon";
-        IconMap["PersonalCardIcon"] = "PersonalCardIcon";
-        IconMap["PlayMarketIcon"] = "PlayMarketIcon";
-        IconMap["PlusIcon"] = "PlusIcon";
-        IconMap["PowerIcon"] = "PowerIcon";
-        IconMap["Profile2UserIcon"] = "Profile2UserIcon";
-        IconMap["ProfileIcon"] = "ProfileIcon";
-        IconMap["PumpkinIcon"] = "PumpkinIcon";
-        IconMap["RoundRubleIcon"] = "RoundRubleIcon";
-        IconMap["SafeIcon"] = "SafeIcon";
-        IconMap["ShieldTickIcon"] = "ShieldTickIcon";
-        IconMap["SignDocsIcon"] = "SignDocsIcon";
-        IconMap["SmallClockIcon"] = "SmallClockIcon";
-        IconMap["SoundIcon"] = "SoundIcon";
-        IconMap["StrongBoxIcon"] = "StrongBoxIcon";
-        IconMap["TelegramIcon"] = "TelegramIcon";
-        IconMap["UnionPayIcon"] = "UnionPayIcon";
-        IconMap["UserSquareIcon"] = "UserSquareIcon";
-        IconMap["UserTickIcon"] = "UserTickIcon";
-        IconMap["VisaIcon"] = "VisaIcon";
-        IconMap["VKIcon"] = "VKIcon";
-        IconMap["WalletAdd2Icon"] = "WalletAdd2Icon";
-        IconMap["WalletAddIcon"] = "WalletAddIcon";
-        IconMap["WalletIcon"] = "WalletIcon";
-        IconMap["WalletWithMoneyIcon"] = "WalletWithMoneyIcon";
-        IconMap["WateringCanIcon"] = "WateringCanIcon";
-    })(IconMap || (IconMap = {}));
-    var IconTitleMap;
-    (function (IconTitleMap) {
-        IconTitleMap["ActualBalanceIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
-        IconTitleMap["AirPlaneIcon"] = "\u0421\u0430\u043C\u043E\u043B\u0451\u0442";
-        IconTitleMap["AppleIcon"] = "\u041B\u043E\u0433\u043E \u00ABApple\u00BB";
-        IconTitleMap["ArrowDownIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 '\u0412\u043D\u0438\u0437'";
-        IconTitleMap["ArrowLeftIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430";
-        IconTitleMap["ArrowUpIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0432\u0432\u0435\u0440\u0445";
-        IconTitleMap["AtmIcon"] = "\u0411\u0430\u043D\u043A\u043E\u043C\u0430\u0442";
-        IconTitleMap["BankIcon"] = "\u0411\u0430\u043D\u043A";
-        IconTitleMap["BuildingIcon"] = "\u0417\u0434\u0430\u043D\u0438\u0435 \u0441 \u0434\u0435\u0440\u0435\u0432\u043E\u043C";
-        IconTitleMap["BurgerIcon"] = "\u0411\u0443\u0440\u0433\u0435\u0440";
-        IconTitleMap["Calendar2Icon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C 2";
-        IconTitleMap["CalendarCircleIcon"] = "\u0421\u043A\u0440\u0443\u0433\u043B\u0451\u043D\u043D\u044B\u0439 \u043A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C";
-        IconTitleMap["CalendarIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C";
-        IconTitleMap["CalendarTickIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C \u0441 \u0433\u0430\u043B\u043E\u0447\u043A\u043E\u0439";
-        IconTitleMap["Car2Icon"] = "\u041C\u0430\u0448\u0438\u043D\u04302";
-        IconTitleMap["CardIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430";
-        IconTitleMap["CardPosIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430 \u043F\u043E\u0434 \u043D\u0430\u043A\u043B\u043E\u043D\u043E\u043C";
-        IconTitleMap["CardTickIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430 \u0441 \u0433\u0430\u043B\u043E\u0447\u043A\u043E\u0439";
-        IconTitleMap["CardWithGemIcon"] = "\u041A\u0430\u0440\u0442\u0430 \u0441 \u0434\u0440\u0430\u0433\u043E\u0446\u0435\u043D\u043D\u043E\u0441\u0442\u044F\u043C\u0438";
-        IconTitleMap["CarIcon"] = "\u041C\u0430\u0448\u0438\u043D\u0430";
-        IconTitleMap["ChartSquareIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438 \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u0448\u0435\u043B\u044C\u043A\u0430";
-        IconTitleMap["CinemaIcon"] = "\u041A\u0438\u043D\u043E\u0442\u0435\u0430\u0442\u0440";
-        IconTitleMap["ClockIcon"] = "\u0427\u0430\u0441\u044B";
-        IconTitleMap["CloseIcon"] = "\u041A\u0440\u0435\u0441\u0442\u0438\u043A";
-        IconTitleMap["ComfortableCompIcon"] = "\u041A\u0440\u0435\u0441\u043B\u043E";
-        IconTitleMap["CreditCardsIcon"] = "\u041A\u0440\u0435\u0434\u0438\u0442\u043D\u044B\u0435 \u043A\u0430\u0440\u0442\u044B";
-        IconTitleMap["DiscountShapeIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
-        IconTitleMap["DocDownloadIcon"] = "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
-        IconTitleMap["DocIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
-        IconTitleMap["DocIconMonoColor"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442 (\u043E\u0434\u043D\u043E\u0446\u0432\u0435\u0442\u043D\u044B\u0439)";
-        IconTitleMap["DocsIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B";
-        IconTitleMap["DocumentTextIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442 \u0441 \u0442\u0435\u043A\u0441\u0442\u043E\u043C";
-        IconTitleMap["DollarIcon"] = "\u0414\u043E\u043B\u043B\u0430\u0440";
-        IconTitleMap["DoneIcon"] = "\u0417\u0435\u043B\u0451\u043D\u0430\u044F '\u0433\u0430\u043B\u043E\u0447\u043A\u0430' \u0432 \u043A\u0440\u0443\u0433\u0435";
-        IconTitleMap["DoneSimpleIcon"] = "\u0417\u0435\u043B\u0451\u043D\u0430\u044F '\u0433\u0430\u043B\u043E\u0447\u043A\u0430'";
-        IconTitleMap["EarthIcon"] = "\u0417\u0435\u043C\u043B\u044F";
-        IconTitleMap["EmptyWalletChangeIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A \u0441 \u0432\u043E\u0437\u0432\u0440\u0430\u0442\u043E\u043C";
-        IconTitleMap["EmptyWalletIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A";
-        IconTitleMap["EuroIcon"] = "\u0415\u0432\u0440\u043E";
-        IconTitleMap["GeolocationIcon"] = "\u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u044F";
-        IconTitleMap["GlassIcon"] = "\u0417\u0435\u0440\u043A\u0430\u043B\u043E";
-        IconTitleMap["GlobalIcon"] = "\u0413\u043B\u043E\u0431\u0443\u0441";
-        IconTitleMap["GpsIcon"] = "Gps";
-        IconTitleMap["GridIcon"] = "\u0421\u0435\u0442\u043A\u0430 (\u0431\u0435\u043B\u0430\u044F)";
-        IconTitleMap["InterestGrowthIcon"] = "\u0414\u0438\u0430\u0433\u0440\u0430\u043C\u043C\u0430 \u0440\u043E\u0441\u0442\u0430";
-        IconTitleMap["InterestIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
-        IconTitleMap["JCBIcon"] = "JCB";
-        IconTitleMap["LogoIcon"] = "Logo";
-        IconTitleMap["LoupeIcon"] = "\u041B\u0443\u043F\u0430";
-        IconTitleMap["MapMarkerClusterIcon"] = "\u041C\u0430\u0440\u043A\u0435\u0440 \u043A\u0430\u0440\u0442\u044B";
-        IconTitleMap["MapMarkerSingleIcon"] = "\u041C\u0430\u0440\u043A\u0435\u0440 \u043A\u0430\u0440\u0442\u044B \u0420\u0421\u0425\u0411";
-        IconTitleMap["MasterCardIcon"] = "MasterCard";
-        IconTitleMap["MinusIcon"] = "\u041C\u0438\u043D\u0443\u0441";
-        IconTitleMap["MirIcon"] = "\u041C\u0418\u0420";
-        IconTitleMap["MoneyIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
-        IconTitleMap["MoneyInsuranceIcon"] = "\u0414\u0435\u043D\u0435\u0436\u043D\u043E\u0435 \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435";
-        IconTitleMap["MoneysIcon"] = "\u041A\u0443\u043F\u044E\u0440\u044B";
-        IconTitleMap["MonitorMobileIcon"] = "\u041C\u043E\u043D\u0438\u0442\u043E\u0440 \u0438 \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u044B\u0439";
-        IconTitleMap["NewDocIcon"] = "\u041D\u043E\u0432\u044B\u0439 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
-        IconTitleMap["OfficeIcon"] = "\u041E\u0444\u0438\u0441";
-        IconTitleMap["OkIcon"] = "\u041B\u043E\u0433\u043E \u00AB\u041E\u0434\u043D\u043E\u043A\u043B\u0430\u0441\u0441\u043D\u0438\u043A\u0438\u00BB";
-        IconTitleMap["PackA4Icon"] = "\u041F\u0430\u0447\u043A\u0430 \u0431\u0443\u043C\u0430\u0433\u0438 \u04104";
-        IconTitleMap["PassSendIcon"] = "\u0411\u0438\u0437\u043D\u0435\u0441";
-        IconTitleMap["PercentageRoundIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B (\u043A\u0440\u0443\u0433.)";
-        IconTitleMap["PercentageSquareIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B";
-        IconTitleMap["PersonalCardIcon"] = "\u041F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u0430\u044F \u043A\u0430\u0440\u0442\u0430";
-        IconTitleMap["PlayMarketIcon"] = "\u041B\u043E\u0433\u043E \u00ABPlayMarket\u00BB";
-        IconTitleMap["PlusIcon"] = "\u041F\u043B\u044E\u0441";
-        IconTitleMap["PowerIcon"] = "\u0429\u0438\u0442";
-        IconTitleMap["Profile2UserIcon"] = "\u041F\u0440\u043E\u0444\u0438\u043B\u044C, 2 \u043F\u0435\u0440\u0441\u043E\u043D\u044B";
-        IconTitleMap["ProfileIcon"] = "\u041F\u0440\u043E\u0444\u0438\u043B\u044C";
-        IconTitleMap["PumpkinIcon"] = "\u0422\u044B\u043A\u0432\u0430";
-        IconTitleMap["RoundRubleIcon"] = "\u0420\u0443\u0431\u043B\u044C (\u043A\u0440\u0443\u0433.)";
-        IconTitleMap["SafeIcon"] = "\u0421\u0435\u0439\u0444";
-        IconTitleMap["ShieldTickIcon"] = "\u0411\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u044C";
-        IconTitleMap["SignDocsIcon"] = "\u041F\u043E\u0434\u043F\u0438\u0441\u0430\u043D\u043D\u044B\u0435 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B";
-        IconTitleMap["SmallClockIcon"] = "\u041C\u0430\u043B\u0435\u043D\u044C\u043A\u0438\u0435 \u0447\u0430\u0441\u044B";
-        IconTitleMap["SoundIcon"] = "\u0417\u0432\u0443\u043A";
-        IconTitleMap["StrongBoxIcon"] = "\u042F\u0449\u0438\u043A \u0441 \u0437\u0430\u043C\u043E\u0447\u043D\u043E\u0439 \u0441\u043A\u0432\u0430\u0436\u0438\u043D\u043E\u0439";
-        IconTitleMap["TelegramIcon"] = "\u041B\u043E\u0433\u043E \u00ABTelegram\u00BB";
-        IconTitleMap["UnionPayIcon"] = "UnionPay";
-        IconTitleMap["UserSquareIcon"] = "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C \u0432 \u0440\u0430\u043C\u043A\u0435";
-        IconTitleMap["UserTickIcon"] = "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C";
-        IconTitleMap["VisaIcon"] = "Visa";
-        IconTitleMap["VKIcon"] = "\u041B\u043E\u0433\u043E \u00ABVK\u00BB";
-        IconTitleMap["WalletAdd2Icon"] = "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435 \u043A\u0430\u0440\u0442\u044B";
-        IconTitleMap["WalletAddIcon"] = "\u041A\u043E\u0448\u0435\u043B\u0451\u043A \u0441 \u043F\u043B\u044E\u0441\u043E\u043C";
-        IconTitleMap["WalletIcon"] = "\u041A\u043E\u0448\u0435\u043B\u0451\u043A";
-        IconTitleMap["WalletWithMoneyIcon"] = "\u041A\u043E\u0448\u0435\u043B\u0451\u043A \u0441 \u0434\u0435\u043D\u044C\u0433\u0430\u043C\u0438";
-        IconTitleMap["WateringCanIcon"] = "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0440\u043E\u0434\u0443\u043A\u0442";
-    })(IconTitleMap || (IconTitleMap = {}));
-
-    const svgUseStyleMap = {
-        normal: 'text-primary-main',
-        black: 'text-black',
-        white: 'text-black',
-    };
-    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, iconVersion = 'normal', asSVG, ...imgProps }) => {
-        const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-        if (asSVG && IconInverseMap[name]) {
-            return (jsx(Background, { className: className, children: jsxs("svg", { className: [
-                        getSvgSize(className, imgProps.width),
-                        svgUseStyleMap[iconVersion],
-                        imageClassName,
-                        getInvertStyle(name, iconVersion),
-                    ].join(' '), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
-        }
-        return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
-    });
-    const getInvertStyle = (name, iconVersion) => iconVersion === 'white' && IconInverseMap[name] ? 'invert' : '';
-    const getSvgSize = (className, width) => width ? `width: ${width}px ` : 'w-full h-full';
-    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
-
-    function getIconVersion(image) {
-        return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
-    }
-
-    const sourcesComparator = (a, b) => {
-        if (a.media && b.media) {
-            return a.media - b.media;
-        }
-        return 0;
-    };
-    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false }) => {
-        if (!image || (!image?.sources && !image?.src)) {
-            return null;
-        }
-        const pictureStyles = isMobile ? 'flex' : 'flex-none';
-        return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
-                    ? image.sources
-                        .sort(sourcesComparator)
-                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
-                    : null, renderImg(image, imageClassName, isMobile)] }));
-    });
-    const renderImg = (image, imageClassName = '', isMobile = false) => {
-        const style = {
-            width: image.size?.width ? `${image.size?.width}px` : '100%',
-            height: image.size?.height ? `${image.size?.height}px` : '100%',
-        };
-        const title = image.title || '';
-        const alt = image.alt || image.title;
-        const imgStyle = isMobile ? 'm-auto' : 'm-0';
-        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
-    };
-    function formatToMimeType(format) {
-        return format ? `image/${String(format)}` : undefined;
-    }
-
-    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
-        if (!image) {
-            return null;
-        }
-        // backwards compatibility with existing icons in usage
-        const icon = typeof image === 'string' ? image : image.icon;
-        if (icon || icon === '') {
-            return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
-        }
-        return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
-    });
-
-    const Img = JSX(({ className = '', imageClassName, image, ...iconProps }) => {
-        return (jsx(ImgInner, { className: className, imageClassName: imageClassName, image: image, ...iconProps }));
-    });
-
     function style2className(style) {
         return style ? style.filter(Boolean).join(' ') : '';
     }
@@ -626,6 +409,15 @@
             as: 'h4',
         },
     };
+    const HEADLINE_SMALL_VERSION = {
+        XL_L: 'text-xl-light',
+        XL_R: 'text-xl',
+        L_L: 'text-l-light',
+        L_R: 'text-l',
+        M: 'text-m-light',
+        S: 'text-s-light',
+        XS: 'text-xs-light',
+    };
 
     const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'center', className = '', title, description, headlineVersion = 'XL', as, ...rest }) => {
         const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
@@ -633,9 +425,77 @@
         return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx(Description, { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, description: description })) : null] }));
     });
 
+    const svgUseStyleMap = {
+        normal: 'text-primary-main',
+        black: 'text-black',
+        white: 'text-black',
+    };
+    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'normal', asSVG, ...imgProps }) => {
+        const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+        if (asSVG) {
+            return (jsx(Background, { className: className, children: jsxs("svg", { className: [
+                        getSvgSize(className, imgProps.width),
+                        svgUseStyleMap[iconVersion],
+                        imageClassName,
+                        getInvertStyle(iconVersion),
+                    ].join(' '), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
+        }
+        return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
+    });
+    const getInvertStyle = (iconVersion) => iconVersion === 'white' ? 'invert' : '';
+    const getSvgSize = (className, width) => width ? `width: ${width}px ` : 'w-full h-full';
+    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
+
+    function getIconVersion$1(image) {
+        return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
+    }
+
+    const sourcesComparator = (a, b) => {
+        if (a.media && b.media) {
+            return a.media - b.media;
+        }
+        return 0;
+    };
+    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false }) => {
+        if (!image || (!image?.sources && !image?.src)) {
+            return null;
+        }
+        const pictureStyles = isMobile ? 'flex' : 'flex-none';
+        return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
+                    ? image.sources
+                        .sort(sourcesComparator)
+                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
+                    : null, renderImg(image, imageClassName, isMobile)] }));
+    });
+    const renderImg = (image, imageClassName = '', isMobile = false) => {
+        const style = {
+            width: image.size?.width ? `${image.size?.width}px` : '100%',
+            height: image.size?.height ? `${image.size?.height}px` : '100%',
+        };
+        const title = image.title || '';
+        const alt = image.alt || image.title;
+        const imgStyle = isMobile ? 'm-auto' : 'm-0';
+        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
+    };
+    function formatToMimeType(format) {
+        return format ? `image/${String(format)}` : undefined;
+    }
+
+    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
+        if (!image) {
+            return null;
+        }
+        // backwards compatibility with existing icons in usage
+        const icon = typeof image === 'string' ? image : image.icon;
+        if (icon || icon === '') {
+            return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion$1(image), name: icon, ...iconProps })) : null;
+        }
+        return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
+    });
+
     const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
         const { text, fileSize, ...linkProps } = doc;
-        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Img, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(ImgInner, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
     });
     const formatSuffix = (ext, fileSize) => {
         const prefix = ext || fileSize ? ',' : '';
@@ -682,7 +542,8 @@
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
         const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
         const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+        const iconVersion = getIconVersion(icon, isIconWhite);
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
     });
     function renderBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -694,11 +555,12 @@
         }
         return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
+    const getIconVersion = (icon, isIconWhite) => icon?.iconVersion || isIconWhite ? 'white' : 'normal';
 
     const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
 
     const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(Img, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
+        return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
     });
     const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     function renderInsuranceSumMonth(sum, monthLimit) {
@@ -791,9 +653,30 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
+    const buttonStyleMap = {
+        primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+        secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
+        link: '',
+    };
+    const DisabledStyle = 'bg-main-divider text-main-disabled';
+    const buttonDisabledStyleMap = {
+        primary: DisabledStyle,
+        secondary: DisabledStyle,
+        white: DisabledStyle,
+        link: '',
+    };
+    const buttonStyle = 'text-center font-sans select-none';
+    const iconStyleMap = {
+        primary: 'group-hover:brightness-0 group-hover:invert',
+        secondary: 'group-hover:brightness-0 group-hover:invert',
+        white: 'group-hover:brightness-0 group-hover:invert',
+        link: '',
+    };
+
     const ButtonInner = JSX((props) => {
-        const { text, aboveText, appendLeft, appendRight } = props;
-        return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-xs-light text-left", children: aboveText }), jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? appendRight : null] }));
+        const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
+        return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-xs-light text-left", children: aboveText }), jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
     });
     const getButtonStyle = (props) => {
         const { className = '', version, aboveText, rounded } = props;
@@ -810,47 +693,28 @@
     };
     const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
-    const buttonStyleMap = {
-        primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-        secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
-        link: '',
-    };
-    const DisabledStyle = 'bg-main-divider text-main-disabled';
-    const buttonDisabledStyleMap = {
-        primary: DisabledStyle,
-        secondary: DisabledStyle,
-        white: DisabledStyle,
-        link: '',
-    };
-    const buttonStyle = 'text-center font-sans select-none';
-
-    const getRegularButtonClasses = ({ className, rounded, version, }) => [
+    const getDisabledButtonClasses = ({ className, rounded, version, }) => [
+        'inline-block',
         buttonStyle,
-        'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border',
-        version ? buttonStyleMap[version] : '',
+        version ? buttonDisabledStyleMap[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
         className,
     ].join(' ');
 
-    const getDisabledButtonClasses = ({ className, rounded, version, }) => [
-        'inline-block',
+    const getRegularButtonClasses = ({ className, rounded, version, }) => [
         buttonStyle,
-        version ? buttonDisabledStyleMap[version] : '',
+        'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border',
+        version ? buttonStyleMap[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
         className,
     ].join(' ');
 
-    const Button = JSX((props) => {
-        const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
-        // its non valid HTML attribute. Must be excluded from "rest"
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { asSVG, iconRight, icon, ...usedProps } = rest;
-        const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, appendRight: appendRight, rounded: rounded }));
-        return disabled ? (jsx(DisabledButton, { rounded: rounded, ...usedProps, children: buttonInner })) : (jsx(RegularButton, { rounded: rounded, ...usedProps, children: buttonInner }));
+    const Button = JSX(({ aboveText, appendLeft, appendRight, ariaLabel, children, className, disabled, href, onClick, rel, rounded, target, text, version, }) => {
+        const buttonInner = children ?? (jsx(ButtonInner, { aboveText: aboveText, appendLeft: appendLeft, appendRight: appendRight, rounded: rounded, text: text, version: version }));
+        return disabled ? (jsx(DisabledButton, { ariaLabel: ariaLabel, className: className, rounded: rounded, version: version, children: buttonInner })) : (jsx(RegularButton, { ariaLabel: ariaLabel, className: className, href: href, onClick: onClick, rel: rel, rounded: rounded, target: target, version: version, children: buttonInner }));
     });
-    const RegularButton = JSX(({ className = '', ariaLabel, version, rounded, href, target, children, onClick, ...rest }) => {
-        return (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children }));
+    const RegularButton = JSX(({ className = '', ariaLabel, version, rounded, href, target, children, onClick, rel }) => {
+        return (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', rel: rel, children: children }));
     });
     const DisabledButton = JSX(({ className, children, ariaLabel, version, rounded }) => {
         return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children }));
@@ -859,61 +723,48 @@
     const ButtonSection = JSX(({ context, className = '', buttons }) => {
         const { handlerDecorator } = context;
         const router = context.useRouter();
-        return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
+        return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => (jsx(ButtonSectionItem, { button: button, handlerDecorator: handlerDecorator, router: router }, String(index)))) })) : null;
+    });
+    const ButtonSectionItem = JSX(({ router, handlerDecorator, button }) => {
+        const buttonProps = useLink({ router, handlerDecorator }, button);
+        return jsx(Button, { ...button, ...buttonProps });
     });
-    function renderButton$2({ icon, iconRight, version = 'primary', ...button }, i) {
-        if (!button?.text) {
-            return null;
-        }
-        const imgStyle = version === 'primary' ? 'group-hover:text-black' : 'group-hover:text-white';
-        const iconVersion = version === 'secondary' ? 'normal' : 'white';
-        return icon ? (jsx(Button, { appendLeft: jsx(Img, { imageClassName: imgStyle, image: { ...icon, iconVersion: iconVersion }, width: "24", height: "24", asSVG: true }), appendRight: jsx(Img, { imageClassName: imgStyle, image: { ...iconRight, iconVersion: iconVersion }, width: "24", height: "24", asSVG: true }), version: version, ...button }, String(i))) : (jsx(Button, { version: version, ...button }, String(i)));
-    }
 
-    const LIST_STYLE_CLASSES = {
-        primary: 'rounded-full inline-block mr-3 mt-2',
-        secondary: 'rounded-full inline-block mr-3 mt-2',
-        gray: 'rounded-full inline-block mr-3 mt-2',
-        tile: 'rounded-full inline-block mr-4 mt-3',
-        'tile-white': 'rounded-full inline-block mr-4 mt-3',
-    };
     const LIST_DOT_STYLE_MAP = {
         primary: 'bg-primary-text',
         secondary: 'bg-white',
         gray: 'bg-secondary-text',
-        tile: 'bg-black',
-        'tile-white': 'bg-white',
-    };
-    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
-        return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? jsx("div", { className: getListStyle(version) }) : null, jsx("span", { children: children })] }));
-    });
-    const getListStyle = (version) => {
-        const size = {
-            primary: 'w-2 h-2 min-w-2 min-h-2',
-            secondary: 'w-2 h-2 min-w-2 min-h-2',
-            gray: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5',
-            tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
-            'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
-        };
-        return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
     };
+    const DOT_SIZE_MAP = {
+        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
+        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
+        S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
+    };
+    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
+        return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { className: `rounded-full inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` })) : null, jsx("span", { children: children })] }));
+    });
 
     const TEXT_STYLE_MAP = {
         primary: 'text-primary-text',
         secondary: 'text-white',
         gray: 'text-secondary-text',
-        tile: 'text-primary-text',
-        'tile-white': 'text-white',
     };
     const TEXT_SIZE_MAP = {
-        M: 'text-xl-light',
-        L: 'text-h5-light',
+        S: 'text-l-light',
+        M: 'text-h6',
+        L: 'text-h5',
+    };
+    const ITEM_INDENT_MAP = {
+        S: 'ml-2',
+        M: 'ml-3',
+        L: 'ml-4',
     };
     const List = JSX((props) => {
-        const { className = '', itemClassName, isDotted, items, listItemSize = 'M', version = 'primary', } = props;
-        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className}`, role: "list", children: items?.length
-                ? items.map((_, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, version: version, children: _ }, String(i))))
-                : null }));
+        const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
+        if (!items?.length) {
+            return null;
+        }
+        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, version: version, size: listItemSize, children: item }, String(i)))) }));
     });
 
     const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
@@ -925,7 +776,7 @@
     };
 
     const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
-        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
+        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
     const getButtons = (context, buttons) => {
         return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-4" })) : null;
@@ -935,7 +786,7 @@
         const { text, href, target, onClick } = button;
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-        return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(Img, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
+        return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
     }
 
     const breadcrumbsStyleMap = {
@@ -973,13 +824,13 @@
     };
     const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, ...rest }) => {
         const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-        return (jsxs(BlockWrapper, { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, ...rest, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `text-l font-medium mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-s ${textBlockStyleMap.description}`, children: description })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, ...rest, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage$1(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `text-l font-medium mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-s ${textBlockStyleMap.description}`, children: description })) : null] })] }));
     });
     function renderIcon(className) {
         return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${className}`, children: "i" }) }));
     }
-    function renderImage(image) {
-        return image?.src ? jsx(Img, { className: "pt-0.5 pr-3", image: image }) : null;
+    function renderImage$1(image) {
+        return image?.src ? jsx(ImgInner, { className: "pt-0.5 pr-3", image: image }) : null;
     }
 
     const getColSpan = (className) => {
@@ -1017,18 +868,17 @@
     const Tile = JSX((props) => {
         const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, listItemSize = 'M', className = '', version = 'primary', ...rest } = props;
         const headingClassName = version === 'primary' ? 'text-primary-text' : '';
-        return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-8 gap-3" })) : null, image: image?.src ? jsx(Img, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2", description: description })) : null, children, renderList$1(items, { version, isDotted, listItemSize })] }) }));
+        return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-8 gap-3" })) : null, image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2.5", description: description })) : null, children, renderList$1(items, { version, isDotted, listItemSize })] }) }));
     });
     function renderList$1(items, { version, isDotted, listItemSize }) {
-        const listVersion = version === 'primary' ? 'tile' : 'tile-white';
-        return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-3", listItemSize: listItemSize, itemClassName: "mb-1.5", version: listVersion })) : null;
+        return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-2.5", listItemSize: listItemSize, itemClassName: "mb-1.5", version: version })) : null;
     }
 
     const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, version = 'primary', ...rest }) => {
         return (jsxs(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
           ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`, ...rest, children: [jsx(Headline, { context: context, className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits$1(benefits, version, image), additionalDescription
-                    ? renderAdditionalDescription(additionalDescription, image, version)
-                    : null, buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
+                    ? renderAdditionalDescription$1(additionalDescription, image, version)
+                    : null, buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(ImgInner, { className: "absolute right-0 bottom-0", image: image }) : null] }));
     });
     function renderBenefits$1(benefits, version, image) {
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
@@ -1049,7 +899,7 @@
             ];
         };
     }
-    function renderAdditionalDescription(additionalDescription, image, version = 'primary') {
+    function renderAdditionalDescription$1(additionalDescription, image, version = 'primary') {
         const descStyleMap = {
             primary: 'text-secondary-text',
             secondary: 'text-white',
@@ -1061,7 +911,7 @@
 
     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(Img, { 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 }) })));
+        : '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 }) })));
 
     function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
         return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
@@ -1080,27 +930,23 @@
         mini: 276,
     };
 
-    const GalleryCardInner = JSX(({ title, description, image, items, button, version, isDotted = true }) => {
-        const titleStyleClasses = getTitleStyle(version);
-        return (jsxs("div", { className: "h-full flex flex-col justify-between text-center", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? jsx("div", { className: `text-m${title ? 'mt-2' : ''}`, children: description }) : null, items?.length ? renderItems(items, isDotted, version) : null] }), button?.text ? renderButton$1(button) : null] }));
+    const ALIGN_TITLE$1 = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+    };
+    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'XL_L', description, additionalDescription, image, items, button, version, isDotted = true, align = 'center', }) => {
+        return (jsxs("div", { className: `h-full flex flex-col justify-between ${ALIGN_TITLE$1[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage(image), renderCardTitle(headlineSmallVersion, title), renderDescription$1(description, title), renderAdditionalDescription(additionalDescription), items?.length ? renderItems$1(items, isDotted, version) : null] }), button ? renderButton(button) : null] }));
     });
-    function renderButton$1(button) {
-        return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Img, { image: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
-    }
-    function renderCardTitle(title, className) {
-        return jsx("div", { className: `text-xl-light m-0 ${className}`, children: title });
-    }
-    function renderItems(items, isDotted, version = 'primary') {
-        return (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 text-left first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
-    }
-    function getTitleStyle(version) {
-        return `text-xl-light m-0
-        ${version !== 'secondary' ? 'text-primary-text' : ''}
-      `;
-    }
+    const renderImage = (image) => image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(ImgInner, { className: "mb-6", image: image }) })) : null;
+    const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
+    const renderDescription$1 = (description, title) => description ? jsx("div", { className: `text-base ${title ? 'mt-2' : ''}`, children: description }) : null;
+    const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx("div", { className: "text-m-light text-secondary-text mt-auto", children: additionalDescription })) : null;
+    const renderButton = (button) => (jsx(Button, { className: "mt-6 w-full", ...button }));
+    const renderItems$1 = (items, isDotted, version = 'primary') => (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 text-left first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
 
-    const GalleryContainer = JSX(({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
-        return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "L", align: "center" }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
+    const GalleryContainer = JSX(({ context, title, headlineVersion = 'L', description, cards = [], version = 'normal', activeCardIndex, }) => {
+        return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: headlineVersion, align: "center" }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
     });
     function renderCard({ card, version }, i) {
         return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
@@ -1150,7 +996,7 @@
         LinkList,
     };
 
-    const renderBlocksList$1 = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : null;
+    const renderBlocksList$1 = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : [];
     const renderBlock$1 = ({ context, className }) => (block, i) => {
         if (!block) {
             return null;
@@ -1164,37 +1010,47 @@
         return (jsx(EmbeddedBlock, { className: `${className} ${classNameBlock}`, context: context, ...rest }, `block_${i}`));
     };
 
-    const AccordionItemInner = JSX(({ blocks, context }) => {
-        return (jsx("div", { className: "grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList$1({ context, blocks, className: '!p-0 mb-3.5' }) }));
+    const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+
+    const DefaultButton = JSX(({ icon, label, dataTheme = '', onClick }) => {
+        return (jsxs("button", { className: "border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer", "data-theme": dataTheme, onClick: onClick, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
+                        icon,
+                        iconVersion: 'white',
+                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] }));
     });
 
-    const useActiveHandler$1 = ({ blocks, initialState = false }) => {
-        const [isActive, setIsActive] = useState(initialState);
-        const hasContent = blocks?.length;
-        const icon = isActive ? 'MinusIcon' : 'PlusIcon';
-        const handleToggle = (e) => {
-            const currentTarget = e.currentTarget;
-            if (!currentTarget) {
-                return;
+    const Foldable = JSX(({ blocks = [], hiddenBlocksNum = 0, isFoldButtonOnTop = false, unfoldedByDefault = false, containerClassName = '', blockWrapper = (_) => _, renderFoldButton = renderDefaultFoldButton, }) => {
+        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+        const blocksToHide = clamp(hiddenBlocksNum, 0, blocks?.length);
+        const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
+        const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
+        const containerRef = useRef(null);
+        const onToggle = () => {
+            setIsUnfolded(!isUnfolded);
+            if (containerRef.current) {
+                containerRef.current.style.maxHeight = isUnfolded
+                    ? ''
+                    : `${containerRef.current.scrollHeight}px`;
             }
-            setIsActive(!isActive);
-            const contentBlock = currentTarget.nextSibling;
-            contentBlock.style.maxHeight = contentBlock.style.maxHeight
-                ? ''
-                : `${contentBlock.scrollHeight}px`;
         };
-        return { isActive, hasContent, icon, handleToggle };
+        const buttonNode = hiddenBlocksNum ? renderFoldButton({ isUnfolded, onToggle }) : null;
+        const blocksNode = blockWrapper(jsxs("div", { children: [visibleBlocks, jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${containerClassName}`, children: hiddenBlocks })] }));
+        return (jsx("div", { children: isFoldButtonOnTop ? (jsxs("div", { children: [buttonNode, blocksNode] })) : (jsxs("div", { children: [blocksNode, buttonNode] })) }));
+    });
+    const renderDefaultFoldButton = (props) => {
+        const labels = ['Развернуть', 'Скрыть'];
+        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+        return (jsx(DefaultButton, { icon: icons[Number(props.isUnfolded)], label: labels[Number(props.isUnfolded)], onClick: props.onToggle }));
     };
 
-    const AccordionItem = JSX(({ label, isExpanded, blocks, context }) => {
-        const { isActive, hasContent, icon, handleToggle } = useActiveHandler$1({
-            blocks,
-            initialState: isExpanded,
-        });
-        return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full
-            font-sans text-h6 ${hasContent ? 'group cursor-pointer' : ''}
-          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl font-medium pr-2.5`, children: label }), hasContent ? (jsx(Img, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
+    const icons$1 = ['PlusIcon', 'MinusIcon'];
+    const AccordionItem = JSX(({ label = '', blocks, context }) => {
+        const foldableBlocks = blocks
+            ? renderBlocksList$1({ context, blocks, className: '!p-0 mb-5' })
+            : [];
+        return (jsx("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: jsx(Foldable, { hiddenBlocksNum: foldableBlocks.length, blocks: foldableBlocks, isFoldButtonOnTop: true, containerClassName: "grid grid-cols-12", renderFoldButton: (props) => (jsx(FoldButton, { icon: icons$1[Number(props.isUnfolded)], label: label, hasContent: Boolean(blocks?.length), onClick: props.onToggle })) }) }));
     });
+    const FoldButton = JSX(({ icon, label, hasContent, onClick }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer ${hasContent ? 'group cursor-pointer' : ''}`, onClick: onClick, children: [jsx("span", { className: `text-xl font-medium pr-2.5`, children: label }), hasContent ? (jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })) : null] })));
 
     const ALIGN_TITLE = {
         left: 'text-left',
@@ -1228,7 +1084,7 @@
         return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(benefitsBlockVersion)) }));
     };
     const setIconVersion = (benefitIcon, benefitsBlockVersion) => {
-        if (!benefitIcon.icon) {
+        if (!benefitIcon.icon || benefitIcon?.iconVersion) {
             return benefitIcon;
         }
         benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
@@ -1236,7 +1092,7 @@
     };
     const renderStep = (benefitsBlockVersion) => (benefit, i) => {
         const description = (benefit?.description || undefined);
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(Img, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), asSVG: true })) : null, benefit?.icon?.src ? jsx(Img, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription(description, benefitsBlockVersion)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription(description, benefitsBlockVersion)] })] }, String(i)));
     };
     const renderDescription = (description, benefitsBlockVersion) => {
         const benefitType = description ? description?.benefitType : null;
@@ -1255,12 +1111,19 @@
 
     const Bonus = JSX((props) => {
         const { context, className = '', title, description, bonusItems, ...rest } = props;
-        return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, context: context, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
+        return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, context: context, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
                             ? bonusItems.map((_, i) => {
-                                return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-[14px] max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-h2 bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
+                                return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), _?.buttons?.length ? (jsx(ButtonSection, { context: context, buttons: _?.buttons })) : null] }), _.bonusItemContent?.bonusType
+                                                ? renderBonusItemContent(_.bonusItemContent)
+                                                : null] }) }, String(i)));
                             })
                             : null })] }) }));
     });
+    const renderBonusItemContent = (bonusItemContent) => (jsx("div", { children: bonusItemContent.bonusType === 'count'
+            ? renderBonusCount(bonusItemContent)
+            : renderBonusImage(bonusItemContent) }));
+    const renderBonusCount = (_) => (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [_.bonusCount ? (jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount })) : null, _.bonusName ? (jsx("span", { className: "text-h2 bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })) : null] }));
+    const renderBonusImage = (_) => _.image ? (jsx(ImgInner, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full`, image: _.image })) : null;
 
     function getElementsColsValue(className = '') {
         const colSpan = getColSpan(className);
@@ -1277,7 +1140,7 @@
 
     const BonusBenefitsBlock = JSX(({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: subtitle, headlineVersion: "M", align: "center" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 mt-8 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
     const renderBonusBenefit = (bonusBenefit, i) => {
-        return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[160px] w-[180px] min-w-[180px] min-h-[160px]", image: bonusBenefit.icon, width: "180", height: "160" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "text-h6 m-0", children: bonusBenefit.label }) : null })] }, String(i)));
+        return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(ImgInner, { className: "h-[160px] w-[180px] min-w-[180px] min-h-[160px]", image: bonusBenefit.icon, width: "180", height: "160" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "text-h6 m-0", children: bonusBenefit.label }) : null })] }, String(i)));
     };
 
     const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
@@ -1329,16 +1192,15 @@
 
     const renderFootnote = (text) => text ? jsx("p", { className: "text-s-light text-secondary-text mt-7", children: text }) : null;
 
-    const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+    const getSanitizedValue = (_) => _.split(/\s+/).join('');
 
     const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
     const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, disabled = false, onChange, }) => {
-        const getSanitizedValue = (_) => Number(_.replace(/\D/g, ''));
         const handleChange = (e) => {
             if (!onChange) {
                 return;
             }
-            onChange(clamp(getSanitizedValue(e.target.value), min, max));
+            onChange(clamp(Number(getSanitizedValue(e.target.value)), min, max));
         };
         const inputStyle = {
             backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
@@ -1373,7 +1235,7 @@
     };
 
     const consistentDataMap = new Map();
-    function useAsyncData$1(key, fetcher, { fallback } = {}) {
+    function useAsyncData(key, fetcher, { fallback } = {}) {
         const args = useMemo(() => keyToArgs(key), [key]);
         const [data, setData] = useState();
         const [error, setError] = useState();
@@ -1432,9 +1294,6 @@
         }
     }
 
-    let impl = useAsyncData$1;
-    const useAsyncData = (...args) => impl(...args);
-
     async function fetchJSON(url, options) {
         try {
             return await fetchJSONUnsafe(url, options);
@@ -1685,7 +1544,7 @@
             : `text-m-light text-secondary-text`;
         const iconClassName = isActiveBtn ? '' : `text-primary-main`;
         return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${btnClassName}`, children: [jsx(Img, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
+      ${btnClassName}`, children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
     }
     function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }) {
         return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
@@ -1696,65 +1555,86 @@
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
-    const CurrencyInput = JSX(({ className = '', label, onChange, value = '', minValue = 0, maxValue = 300000, ...inputProps }) => {
-        const handleChange = (e) => {
+    const adjustValue = (val) => onlyOneDot(setZeroStart(replaceCommaToDot(getSanitizedValue(val))));
+    const localNumberFormat = (val) => new Intl.NumberFormat('ru-RU', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    })
+        .format(Number(getSanitizedValue(val)))
+        .replace(',', '.');
+    const onlyOneDot = (val) => {
+        const matches = val.match(/\./g) || [];
+        return matches.length > 1 ? val.slice(0, val.lastIndexOf('.')) : val;
+    };
+    const setZeroStart = (val) => {
+        const isZeroStart = val.indexOf('0') === 0 && val.length === 2;
+        const newVal = isZeroStart ? val.replace('0', '0.') : val;
+        return newVal.startsWith('.') ? newVal.replace('.', '0.') : newVal;
+    };
+    const replaceCommaToDot = (val) => String(val.replace(',', '.').replace(/[^.\d]/g, ''));
+
+    const Input = JSX(({ className = '', inputClassName = '', id, name, type = 'text', label, value = '', valid = true, children, onChange, onBlur, ...inputProps }) => {
+        const handleChange = useCallback((e) => {
+            const validInputValue = e.target.validity.valid ? e.target.value : value;
+            onChange(validInputValue);
+        }, [onChange]);
+        const handleBlur = useCallback((e) => {
+            if (!onBlur) {
+                return;
+            }
+            const validInputValue = e.target.validity.valid ? e.target.value : value;
+            onBlur(validInputValue);
+        }, [onBlur]);
+        const paddingStyle = children ? 'pr-8' : '';
+        const validStyle = valid
+            ? 'border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+            : 'border-error';
+        return (jsxs("div", { className: `relative ${className}`, children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsx("input", { className: `w-full border rounded-md text-primary-text outline-none p-4 ${paddingStyle} ${validStyle} ${inputClassName}`, id: id, name: name || id, type: type, value: value, onChange: handleChange, onBlur: handleBlur, ...inputProps }), children] }));
+    });
+
+    const CurrencyInput = JSX(({ className = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
+        const handleChange = useCallback((inputValue) => {
             if (!onChange) {
                 return;
             }
-            const newValue = e.target.value === '' ? '' : String(clamp(e.target.value, minValue, maxValue));
-            onChange(newValue);
-        };
-        return (jsxs("div", { className: className, children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsxs("div", { className: "h-[56px] relative flex items-center", children: [jsx("input", { type: "number", className: 'text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text', onChange: handleChange, value: value, min: minValue, max: maxValue, ...inputProps }), jsx("span", { className: "text-xl-light absolute right-4", children: "\u20BD" })] })] }));
+            const adjustedVal = adjustValue(inputValue);
+            const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
+            onChange(String(clampVal));
+        }, [onChange]);
+        const handleBlur = useCallback((inputValue) => {
+            if (!onChange) {
+                return;
+            }
+            onChange(localNumberFormat(inputValue));
+        }, [onChange]);
+        return (jsx(Input, { className: className, inputClassName: "w-full", onChange: handleChange, onBlur: handleBlur, ...inputProps, children: jsx("span", { className: "text-xl-light absolute right-4 bottom-4", children: "\u20BD" }) }));
     });
+    const getClampValue = (val, clampVal) => Number(val) === clampVal ? val : String(clampVal);
 
     const AMOUNT_KEY = 'amount';
     const FORM_URL = 'https://www.rshb.ru/p2p/';
     const DEFAULT_TITLE = 'Укажите сумму перевода';
     const DEFAULT_LABEL = 'Сумма перевода';
     const DEFAULT_PLACEHOLDER = '1500';
-    const DEFAULT_BUTTON_TEXT = 'Далее';
-    const BUTTON_CLASS_PARAMS = {
-        version: 'primary',
-        className: 'w-full h-[56px] px-9 mt-6',
-    };
-    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, buttonText = DEFAULT_BUTTON_TEXT, ...rest }) => {
+    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, context, ...rest }) => {
+        const router = context.useRouter();
+        const { handlerDecorator } = context;
         const [value, setValue] = useState('');
-        const isDisabled = !Number(value);
-        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: setValue, placeholder: placeholder, label: label }), jsx("button", { type: "submit", className: isDisabled
-                                ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
-                                : getRegularButtonClasses(BUTTON_CLASS_PARAMS), disabled: isDisabled, children: buttonText })] })] }));
+        const isDisabled = !Number(getSanitizedValue(value));
+        const buttonStyle = isDisabled
+            ? getDisabledButtonClasses({ version: button?.version })
+            : getRegularButtonClasses({ className: 'text-white', version: button?.version });
+        return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, context: context, ...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: setValue, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] })] }));
     });
 
-    const iconVersionMap = {
-        default: 'normal',
-        primary: 'white',
-        secondary: 'black',
-    };
     const cardStyleMap = {
         black: 'bg-black',
         white: 'bg-white',
     };
     const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
-        return (jsxs("section", { className: `border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? renderButton(button) : null] }));
+        return (jsxs("section", { className: `border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? jsx(Button, { className: "mt-5 w-full", ...button }) : null] }));
     });
     const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
-    const renderButton = (button) => {
-        const { icon, iconRight, ...other } = button;
-        if (!button?.text) {
-            return null;
-        }
-        const iconVersion = iconVersionMap[button?.version || 'default'];
-        const leftIcon = renderButtonIcon({ ...icon, iconVersion });
-        const rightIcon = renderButtonIcon({ ...iconRight, iconVersion });
-        return (jsx(Button, { className: "mt-5 w-full", appendLeft: leftIcon, appendRight: rightIcon, ...other }));
-    };
-    const renderButtonIcon = (buttonIcon) => {
-        if (!buttonIcon || (!buttonIcon?.icon && !buttonIcon?.src)) {
-            return null;
-        }
-        const iconWidth = buttonIcon?.size?.width ? `${buttonIcon.size.width}` : '24';
-        return jsx(Img, { image: buttonIcon, width: iconWidth, height: "24", asSVG: true });
-    };
 
     const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
     const CARD_FULL_VIEW_COUNT$1 = 3;
@@ -1765,7 +1645,7 @@
                     cardsCount: cards.length,
                     activeCardIndex,
                     setActiveCardIndex,
-                }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 ${'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 ${'bg-opacity-to-white'}` })] }));
+                }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 bg-opacity-to-white` })] }));
     });
     const renderCatalogCard = (context) => (card, i) => {
         return jsx(CatalogCard, { context: context, ...card }, String(i));
@@ -1800,7 +1680,7 @@
     const COLS_LENGTH_FOR_SCROLL$1 = 2;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
+    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-4 duration-1000',
@@ -1870,12 +1750,12 @@
                     : null] }));
     });
     const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => {
-        return (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans text-xs-light font-medium py-[11px]", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
+        return (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans text-xs-light font-medium py-3", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
     };
 
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
-            return jsx(Img, { image: error.image });
+            return jsx(ImgInner, { image: error.image });
         }
         if (error?.errorContentType === 'Code' && error.code) {
             return jsx("div", { className: "font-mohave text-title-extra gradient-color-text", children: error.code });
@@ -1885,7 +1765,7 @@
     const ErrorBlock = JSX(({ context, className = '', title, subtitle, error, button }) => {
         const { useRouter, handlerDecorator } = context;
         const router = useRouter();
-        return (jsxs("section", { className: `flex flex-col justify-center items-center mt-12 ${className}`, role: "listitem", children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light text-left mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] }));
+        return (jsxs("section", { className: `flex flex-col justify-center items-center mt-12 ${className}`, role: "listitem", children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] }));
     });
 
     const roundTo = (value, precision = 2) => {
@@ -1967,45 +1847,33 @@
     });
     const renderCurrencyRow = (exchangeCurrencyItem) => {
         const code = exchangeCurrencyItem?.code;
-        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.sell) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buy) })] }, code));
+        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.sell) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buy) })] }, code));
     };
 
-    const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m-light", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
-
-    const calculateResult = (value, rate, precision) => {
-        const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
-        return Number.isInteger(result) ? result : roundTo(result);
-    };
-    const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
+    const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(ImgInner, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m-light", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
-    const tableFunc = (table) => (input) => {
-        const [, output] = table.find(([predicate]) => predicate(input)) || [];
-        return output;
-    };
-
-    const callbackCurrencySelect = (props) => tableFunc([
-        [
-            (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
-            () => props.handleConvert(props.value, Currency.RUB),
-        ],
-        [
-            (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
-            () => props.handleConvert(props.value, Currency.USD),
-        ],
-        [() => true, () => props.handleConvert(props.value)],
-    ])(props)?.();
-
-    const Input = JSX(({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
-        const handleChange = (e) => {
-            const validInputValue = e.target.validity.valid ? e.target.value : value;
-            onChange(validInputValue);
-        };
-        return (jsx("input", { className: `border rounded-md border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text text-primary-text outline-none ${className}`, id: id, name: name || id, type: type, pattern: pattern, placeholder: placeholder, value: value, onChange: handleChange }));
-    });
+    function useOutsideClick(wrapperRef, setIsOpen) {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (wrapperRef &&
+                    wrapperRef.current &&
+                    event.target instanceof HTMLElement &&
+                    !wrapperRef.current.contains(event.target)) {
+                    setIsOpen(false);
+                }
+            }
+            document.addEventListener('click', handleClickOutside);
+            return () => {
+                document.removeEventListener('click', handleClickOutside);
+            };
+        }, []);
+    }
 
-    const SelectCustom = JSX(({ className = '', isBorder = true, label, options = [], value, onChange }) => {
+    const Select = JSX(({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
         const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
         const [isOpen, setIsOpen] = useState(false);
+        const wrapperRef = useRef(null);
+        useOutsideClick(wrapperRef, setIsOpen);
         const choiceOption = (option) => {
             setSelectedItem(option);
             setIsOpen(false);
@@ -2015,25 +1883,47 @@
         useEffect(() => {
             setSelectedItem(value || { key: '', text: '' });
         }, [value]);
-        return (jsxs("div", { className: `${isOpen ? 'z-10' : ''} ${className}`, children: [label ? jsx("span", { className: "mb-2", children: label }) : null, jsxs("div", { className: `relative w-fit`, children: [jsxs("div", { className: `text-m-light flex justify-between items-center min-h-[56px] mb-0.5 p-4 pr-8 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [selectedItem.text, jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options.length > 0 ? (jsx("div", { className: `h-0 ${isOpen ? '' : 'overflow-hidden'}`, children: jsx("div", { className: `bg-white text-l rounded-md`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
+        return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? jsx("span", { className: "mb-2 flex", children: label }) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+            ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
     });
+    const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
     const renderOption = (choiceOption, isOpen, isSelected) => (option, i) => {
         return (jsxs("div", { onClick: () => {
                 choiceOption(option);
-            }, className: "flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11", children: [jsx("span", { children: option.text }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: ['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(' ') })] }, String(i)));
+            }, className: "flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative", children: [jsx("span", { className: "min-h-6", children: option.text }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: ['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(' ') })] }, String(i)));
     };
-    function getBorderStyle(isBorder) {
-        return isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
-    }
+    const getBorderStyle = (isBorder) => isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
 
     function renderInput(props) {
         const { placeholder, rates, selected, value, setValue, setSelected } = props;
         const ratesOptions = rates.map((_) => ({ key: _.code ?? '', text: _.code ?? '' }));
         const selectedValue = { key: selected, text: selected };
-        return (jsxs("div", { className: "relative flex", children: [jsx(Input, { className: "shrink-0 h-14 pl-4 pt-4 pb-4 text-l w-full appearance-none mr-[-90px]", placeholder: placeholder, type: "text", value: value, onChange: setValue }), ratesOptions.length ? (jsx(SelectCustom, { isBorder: false, onChange: (_) => setSelected(_.key), options: ratesOptions, value: selectedValue })) : null] }));
+        return (jsxs("div", { className: "relative flex", children: [jsx(Input, { className: "shrink-0 text-l w-full appearance-none mr-[-90px]", placeholder: placeholder, type: "text", value: value, onChange: setValue }), ratesOptions.length ? (jsx(Select, { isBorder: false, onChange: (_) => setSelected(_.key), options: ratesOptions, value: selectedValue })) : null] }));
     }
 
+    const calculateResult = (value, rate, precision) => {
+        const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+        return Number.isInteger(result) ? result : roundTo(result);
+    };
+    const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
+
+    const tableFunc = (table) => (input) => {
+        const [, output] = table.find(([predicate]) => predicate(input)) || [];
+        return output;
+    };
+
+    const callbackCurrencySelect = (props) => tableFunc([
+        [
+            (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
+            () => props.handleConvert(props.value, Currency.RUB),
+        ],
+        [
+            (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+            () => props.handleConvert(props.value, Currency.USD),
+        ],
+        [() => true, () => props.handleConvert(props.value)],
+    ])(props)?.();
+
     const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
         const { useRouter, handlerDecorator } = context;
         const router = useRouter();
@@ -2128,7 +2018,7 @@
         transparent: 'text-white',
     };
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$1(children, bgColor, logo?.title) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(ImgInner, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(ImgInner, { image: { icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$1(children, bgColor, logo?.title) : null] }));
     });
     const renderTitle$1 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
@@ -2149,11 +2039,11 @@
         const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
         const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
         const inputPlaceholder = isMobile ? 'some search' : undefined;
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
+        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(ImgInner, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
               outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                         e.preventDefault();
                         setTerm('');
-                    }, children: jsx(Img, { image: "CloseIcon", width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-[3px] right-1", onClick: (ev) => {
+                    }, children: jsx(ImgInner, { image: "CloseIcon", width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-[3px] right-1", onClick: (ev) => {
                         ev?.preventDefault();
                         console.log('click');
                     }, children: jsx("div", { className: "text-s px-9 py-2.5", children: "\u041D\u0430\u0439\u0442\u0438" }) }))] }));
@@ -2170,7 +2060,7 @@
                         text: 'Обратная связь',
                         href: '/',
                         target: '_blank',
-                    }) })) : null] }));
+                    }), ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] }));
     });
     const renderContact = (item, index) => {
         const { type, text, description } = item;
@@ -2257,7 +2147,7 @@
             ? 'bg-white hover:bg-secondary-hover'
             : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
         const isPrimary = version === 'primary';
-        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(ImgInner, { image: icon, imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
 
     const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
@@ -2292,10 +2182,10 @@
             ..._,
             flexBasis: `${_.month.length * colSize}%`,
         }));
-        return (jsxs("div", { className: "w-full flex flex-col justify-center mt-[54px]", children: [jsx("div", { className: "flex w-full mb-3 text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "text-s-light text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
+        return (jsxs("div", { className: "w-full flex flex-col justify-center mt-13", children: [jsx("div", { className: "flex w-full mb-3 text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "text-s-light text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
     };
-    const renderMonthNames = (item, colSize) => item.month.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
-    const renderMonthImages = (item) => item.month.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
+    const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.name }, `monthName-${i}`)));
+    const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
     const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
@@ -2359,7 +2249,7 @@
     };
     const HeaderSecondaryMenu = JSX(({ className, defaultLocation = '', bgColor = 'bg-white' }) => {
         const [city, getCity] = useGeolocation(defaultLocation);
-        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { 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(Img, { 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 }), 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 }) })] }));
     });
 
     const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -2407,7 +2297,7 @@
     const HeaderSubMenu = JSX(({ context, subItems = [], bgColor }) => {
         const [menuVisible, setMenuVisible] = useState(false);
         const router = context.useRouter();
-        const { handlerDecorator, IntersectionObserverTag } = context;
+        const { handlerDecorator } = context;
         const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
         const dropDownMenuItems = subItems.slice(visibleItemsCount);
         const activeSubItem = findActiveSubItem(router)(subItems);
@@ -2486,13 +2376,13 @@
         const btnClassName = isActiveBtn
             ? 'shadow-dark-blue/42 border-primary-main'
             : `ease-in duration-300 border-main-stroke`;
-        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(Img, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
+        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(ImgInner, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
     }
     function renderValueBlock(title, sum) {
         return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
     }
     function renderDoneIcon(isActive) {
-        return isActive ? (jsx(Img, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
+        return isActive ? (jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
     }
 
     const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
@@ -2530,59 +2420,25 @@
         return (jsxs(BlockWrapper, { context: context, className: `flex justify-between font-sans p-9 box-border relative min-h-[320px]
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
-        ${className}`, ...rest, children: [jsx(BaseTile, { context: context, className: "z-[1]", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
-                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttonsWithClass, className: "flex gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
+        ${className}`, ...rest, children: [jsx(BaseTile, { context: context, className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
+                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttonsWithClass, className: "flex gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr, alt: "QR-\u043A\u043E\u0434" }) })) : null, renderList(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
     const renderList = (version, items) => {
-        return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+        return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0", version: version })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
 
     const OfficeServicesBlock = JSX(({ className = '', context, title, servicesList, anchor = '', ...rest }) => {
         return (jsxs(BlockWrapper, { context: context, id: anchor, className: `font-sans bg-white p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? servicesList.map(renderListItems) : null] }));
     });
-    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(Img, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
-
-    const foldableBlockClassNames = 'transition-all duration-300 max-h-0 overflow-hidden';
-    const useActiveHandler = ({ initialState = false }) => {
-        const [isActive, setIsActive] = useState(initialState);
-        const icon = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
-        const handleToggle = (e) => {
-            const currentTarget = e.currentTarget;
-            if (!currentTarget) {
-                return;
-            }
-            setIsActive(!isActive);
-            const wrapperBlock = currentTarget.previousSibling;
-            const contentBlock = wrapperBlock.getElementsByClassName(foldableBlockClassNames)[0];
-            contentBlock.style.maxHeight = contentBlock.style.maxHeight
-                ? ''
-                : `${contentBlock.scrollHeight}px`;
-        };
-        return { icon, handleToggle, isActive };
-    };
+    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
-    const Foldable = JSX(({ blocks = [], hiddenBlocksNum = 0, foldButtonClasses, foldButtonLabel, foldButtonDataTheme, isUnfolded, containerClasses, render = (_) => _, }) => {
-        const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
-        const { icon, handleToggle, isActive } = useActiveHandler({
-            initialState: isUnfolded,
-        });
-        const buttonClassName = foldButtonClasses ||
-            'border-none bg-primary-main hover:bg-primary-hover focus:bg-primary-main active:bg-primary-active px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
-        const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
-        return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: buttonClassName, "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: getFoldButtonLabel }), icon ? (jsx(Icon, { className: "my-auto", name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true })) : null] })) : null] })) : null;
-    });
-    const renderBlocks = (blocks, render, { blocksToHide, isActive, containerClasses = '' }) => {
-        const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
-        const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
-        return render(jsxs("div", { children: [visibleBlocks, jsx("div", { className: `${foldableBlockClassNames} ${containerClasses}`, children: hiddenBlocks })] }), isActive);
-    };
-
-    const OtherProductsItem = JSX(({ label, blocks, context, dataTheme, isUnfolded }) => {
+    const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+    const OtherProductsItem = JSX(({ label = '', blocks, context, dataTheme, isUnfolded }) => {
         const foldableBlocks = renderBlocksList$1({
             context,
             blocks,
         });
-        return (jsx("div", { className: "border-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { foldButtonDataTheme: dataTheme, hiddenBlocksNum: blocks?.length, blocks: foldableBlocks, isUnfolded: isUnfolded, context: context, foldButtonLabel: label, containerClasses: "grid grid-cols-12 gap-1 border-box", render: (children) => jsx(Wrapper$1, { children: children }) })) : null }));
+        return (jsx("div", { className: "\u02DDborder-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: blocks?.length, unfoldedByDefault: isUnfolded, containerClassName: "grid grid-cols-12 gap-1 border-box", blockWrapper: (children) => jsx(Wrapper$1, { children: children }), renderFoldButton: (props) => (jsx(DefaultButton, { icon: icons[Number(props.isUnfolded)], label: label, dataTheme: dataTheme, onClick: props.onToggle })) })) : null }));
     });
     const Wrapper$1 = JSX(({ children }) => {
         return jsx("div", { className: "box-border", children: children });
@@ -2640,14 +2496,14 @@
     function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
         const isActiveBtn = i === activeSlideIndex;
         const btnClassName = isActiveBtn
-            ? 'bg-white shadow-dark-blue/42 min-w-[354px] border-none p-6'
+            ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
             : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
         const btnTitleClassName = isActiveBtn
             ? 'text-primary-text !text-h6 p-2'
             : `text-l pb-1 ${productBlockStyleMap[version].title}`;
         const btnDescClassName = isActiveBtn
-            ? 'text-secondary-text text-l-light mt-2.5'
+            ? 'text-secondary-text text-l-light'
             : `text-m-light ${productBlockStyleMap[version].text}`;
         const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
@@ -2670,7 +2526,7 @@
 
     const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(Img, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
+        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
         return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { context: context, className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx(Description, { className: "mb-2", description: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version, context: context })) : null] }) }) }));
     });
 
@@ -2707,37 +2563,29 @@
     };
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
-    function useFetchSafeBoxes(regionCode) {
+    const EMPTY_VALUE = [];
+    function useSafeBoxes(regionCode) {
         const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
-        return data || [];
+        return data || EMPTY_VALUE;
     }
-    const fetchSafeBoxes = (url) => {
-        if (!url) {
-            return {};
-        }
-        return fetchJSON(url, { method: 'GET' });
+    const fetchSafeBoxes = async (url) => {
+        const result = await fetchJSON(url, { method: 'GET' });
+        return result || EMPTY_VALUE;
     };
 
-    const selectStyle = {
-        background: `url('/icons/ArrowDownIcon.svg') right 16px top 50% / 21px no-repeat`,
-    };
-    const Select = JSX(({ className = '', id, name, children, value, onChange }) => {
-        return (jsx("select", { className: `appearance-none pl-0.5 ${className}`, style: selectStyle, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), placeholder: "", children: children }));
-    });
-
-    const SelectOption = JSX(({ className = '', value, selected, disabled = false, children }) => {
-        return (jsx("option", { className: className, value: `${value}`, selected: selected, disabled: disabled, children: children }));
-    });
-
-    const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder, setSelected, label }) => {
-        return (jsxs("div", { children: [jsx("span", { className: "block text-m-light mb-2", children: label }), jsxs(Select, { className: `h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer ${!selected ? 'text-secondary-text' : ''}`, value: selected, onChange: (_) => setSelected(_), children: [placeholder ? jsx(SelectOption, { value: "", children: placeholder }) : null, data.map((_, i) => (jsx(SelectOption, { value: _?.[fieldValue || fieldLabel], children: _?.[fieldLabel] }, String(i))))] })] }));
+    const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
+        const dataFormat = data
+            .filter(Boolean)
+            .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
+        const selectedObj = dataFormat.find((_) => _.key === selected);
+        return (jsx(Select, { options: dataFormat, label: label, placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj }));
     });
 
     const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => {
-        return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "w-full mr-4", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0413\u043E\u0440\u043E\u0434" }) }), jsx("div", { className: "w-full", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] }));
+        return (jsxs("div", { className: "flex justify-between gap-4 mb-6", children: [jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] }));
     });
 
-    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main\n        rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
+    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
 
     const RenderRadioButtons = JSX(() => {
         const [selectedOption, setSelectedOption] = useState('option2');
@@ -2754,23 +2602,11 @@
         return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "mr-4 w-full", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "w-full", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
     });
 
-    const getCoordinates = (data) => {
-        if (Array.isArray(data)) {
-            return data.map((_) => _.gpsLatitude && _.gpsLongitude ? [_.gpsLatitude, _.gpsLongitude] : []);
-        }
-        if (data?.gpsLatitude && data?.gpsLongitude) {
-            return [[data.gpsLatitude, data.gpsLongitude]];
-        }
-        return [];
-    };
-    const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
-
-    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, setPoints, onChange, toggleShowMap, }) => {
-        return (jsxs("div", { className: "flex-1 mr-9", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange, setPoints, branches) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: toggleShowMap })] })] }));
+    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onShowMapToggle, }) => {
+        return (jsxs("div", { className: "flex-1 mr-9", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onShowMapToggle })] })] }));
     });
-    const onSelectedBranch = (onChange, setPoints, branches) => (value) => {
+    const onSelectedBranch = (onChange) => (value) => {
         onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
-        setPoints(getCoordinates(value ? getBranch(branches, value) : branches));
     };
     const onSelectedCaseVolume = (onChange) => (value) => {
         onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
@@ -2778,10 +2614,10 @@
 
     const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
         const price = calculatePrice(days, tariffs);
-        return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, width: "290", height: "257", asSVG: true }), jsxs("span", { className: "text-s-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
+        return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(ImgInner, { image: { icon: 'PackA4Icon' }, width: "290", height: "257", asSVG: true }), jsxs("span", { className: "text-s-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
     });
     const renderTotal = (label, total, className = '') => {
-        return (jsxs("div", { className: className, children: [jsx("span", { className: "block text-m-light mb-1", children: label }), jsx("span", { className: "text-h3", children: total })] }));
+        return (jsxs("div", { className: className, children: [jsx("div", { className: "text-m-light text-secondary-text mb-1", children: label }), jsx("span", { className: "text-h3 text-primary-text", children: total })] }));
     };
     const calculatePrice = (days, tariffs) => {
         const tariffType = getTariffType(days);
@@ -2804,41 +2640,32 @@
         return tariffType;
     };
 
-    const DEFAULT_DAYS = 26;
+    const getCoordinates = (data) => {
+        if (Array.isArray(data)) {
+            return data.map((_) => _.gpsLatitude && _.gpsLongitude ? [_.gpsLatitude, _.gpsLongitude] : []);
+        }
+        if (data?.gpsLatitude && data?.gpsLongitude) {
+            return [[data.gpsLatitude, data.gpsLongitude]];
+        }
+        return [];
+    };
+    const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
+
     const SafeDepositRentalForm = JSX((props) => {
-        const [safeDepositState, setStateDepositState] = useState({
-            selectedRegion: '',
-            selectedBranch: '',
-            selectedCaseVolume: '',
-            selectedBoxSize: '',
-            days: DEFAULT_DAYS,
-            branches: [],
-        });
-        const resultBranches = useFetchSafeBoxes(safeDepositState.selectedRegion);
-        const handleChangeSafeDepositState = (state) => setStateDepositState((oldState) => ({ ...oldState, ...state }));
-        useEffect(() => handleChangeSafeDepositState({
-            selectedRegion: getInitialValueSelectedRegion(props.regions),
-        }), [props.regions]);
+        const { regions, data, branches, onChange, onShowMapToggle } = props;
         useEffect(() => {
-            if (Array.isArray(resultBranches) && resultBranches.length) {
-                handleChangeSafeDepositState({ branches: resultBranches });
-                props.setPoints(getCoordinates(resultBranches));
-            }
-        }, [resultBranches]);
-        useEffect(() => {
-            handleChangeSafeDepositState({
+            onChange({
                 selectedBranch: '',
                 selectedCaseVolume: '',
                 selectedBoxSize: '',
             });
-        }, [safeDepositState.selectedRegion]);
-        const branch = getBranch(safeDepositState.branches, safeDepositState.selectedBranch);
+        }, [data.selectedRegion, onChange]);
+        const branch = getBranch(branches, data.selectedBranch);
         const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
-        const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, safeDepositState.selectedCaseVolume)?.safeBoxCases;
-        const tariffs = getTariffs(safeBoxCases, safeDepositState.selectedBoxSize);
-        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...safeDepositState, ...props, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: handleChangeSafeDepositState }), jsx(SafeDepositRentalTotal, { days: safeDepositState.days, tariffs: tariffs })] }));
+        const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, data.selectedCaseVolume)?.safeBoxCases;
+        const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
+        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onShowMapToggle: onShowMapToggle, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
     });
-    const getInitialValueSelectedRegion = (regions) => regions?.length && regions[0]?.code ? regions[0].code : '';
     const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
     const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
     const getTariffs = (safeBoxCases, selectedBoxSize) => safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;
@@ -2945,18 +2772,32 @@
         return (jsxs("div", { className: "pt-12 mt-1 bg-white", children: [jsx(Heading, { title: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", headingType: "h3", className: "mb-8 text-center" }), jsx("div", { id: "map", className: "h-[640px]" })] }));
     });
 
+    const DEFAULT_DAYS = 26;
     const SafeDepositRental = JSX(({ title, footnote, context, className = '', ...rest }) => {
-        const [points, setPoints] = useState([]);
         const [showMap, setShowMap] = useState(false);
+        const [safeDepositState, setStateDepositState] = useState({
+            selectedRegion: '',
+            selectedBranch: '',
+            selectedCaseVolume: '',
+            selectedBoxSize: '',
+            days: DEFAULT_DAYS,
+        });
         const regions = useGetRegions();
-        const toggleShowMap = () => {
+        const selectedRegion = normalizeSelectedRegion(safeDepositState.selectedRegion, regions);
+        const branches = useSafeBoxes(selectedRegion);
+        const handleChangeSafeDepositState = useCallback((state) => setStateDepositState((oldState) => ({ ...oldState, ...state })), [setStateDepositState]);
+        const onShowMapToggle = () => {
             setShowMap(!showMap);
         };
-        return (jsxs(BlockWrapper, { context: context, className: className, ...rest, children: [jsxs("div", { className: "bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, setPoints: setPoints, toggleShowMap: toggleShowMap }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points }) : null] }));
+        const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
+        return (jsxs(BlockWrapper, { context: context, className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onShowMapToggle: onShowMapToggle, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points }) : null] }));
     });
+    const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
 
+    const renderItems = (items, styleMap, isDotted = true) => items ? (jsx("div", { className: `mt-4 ${styleMap?.description}`, role: "list", children: items.map((_) => (jsxs("div", { className: "items-start mt-1 first:mt-0", role: "listitem", children: [isDotted ? (jsx("div", { className: `rounded-full inline-block mr-3 mb-1 w-1.5 h-1.5 min-w-1.5 min-h-1.5 ${styleMap?.dot}` })) : null, jsx("span", { children: _ })] }))) })) : null;
+
     const STEPS_BLOCK_STYLE_MAPS = {
         primary: {
             background: 'bg-white',
@@ -2965,6 +2806,7 @@
             iconText: 'text-secondary-text',
             iconBackground: 'bg-main-divider',
             iconConnector: 'bg-secondary-light',
+            dot: 'bg-secondary-text',
         },
         secondary: {
             background: 'bg-primary-main',
@@ -2973,10 +2815,12 @@
             iconText: 'text-white',
             iconBackground: 'bg-white/30',
             iconConnector: 'bg-white',
+            dot: 'bg-white/80',
         },
     };
 
     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', context, ...rest }) => {
         const router = context.useRouter();
         const { handlerDecorator } = context;
@@ -2985,6 +2829,7 @@
         const shortGaps = steps.length > 3;
         const lineOpacity = getLineOpacity(showLines);
         const titleMargin = title ? 'mt-9' : '';
+        const paddingX = getPaddingX(steps.length);
         return (jsxs(BlockWrapper, { className: [
                 'box-border font-sans text-primary-text bg-white',
                 shortGaps ? 'px-20' : 'px-[70px]',
@@ -2992,7 +2837,7 @@
                 styleMap.background,
                 styleMap.title,
                 className,
-            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle({
+            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", 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))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle({
                                 styleMap,
                                 isMainButton: Boolean(button?.text),
                                 version,
@@ -3002,11 +2847,13 @@
     });
     const renderStepIcon = (styleMap) => ({ icon }, i) => {
         return (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} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(Img, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
+            ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
     };
-    const renderStepTitle = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i) => {
+    const renderStepTitle = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i, { length }) => {
         const additionalMarginClass = step?.label ? 'mt-2' : 'mt-4';
-        return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px]\n        whitespace-pre-line overflow-hidden", children: [step?.label ? jsx("div", { className: "text-xl m-0 mt-4", children: step.label }) : null, step?.description ? (jsx("div", { className: `text-l-light ${styleMap.description} ${additionalMarginClass}`, children: step.description })) : null, step.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", ...useLink({ router, handlerDecorator }, step.button), version: version, children: step.button.text })) : null] }, String(i)));
+        const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
+        return (jsxs("div", { className: `flex flex-col items-center text-center relative
+        whitespace-pre-line overflow-hidden ${widthContainer}`, children: [step?.label ? jsx("div", { className: "text-xl m-0 mt-4", children: step.label }) : null, step?.description ? (jsx("div", { className: `text-l-light ${styleMap.description} ${additionalMarginClass}`, children: step.description })) : null, renderItems(step?.items, styleMap, step?.isDotted), step.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", ...useLink({ router, handlerDecorator }, step.button), version: version, children: step.button.text })) : null] }, String(i)));
     };
 
     function assertUnreachable(x) {
@@ -3033,7 +2880,10 @@
     const renderTitle = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
     const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
 
-    const renderLinkTab = ({ text, onClick, href, target = '_self', i }) => (jsx("a", { className: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`, target: target, href: href, onClick: onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`, children: text }) }, String(i)));
+    const renderLinkTab = ({ text, currentTab, onClick, href, target = '_self', i, }) => {
+        const active = currentTab?.type === 'link' && currentTab.href === href;
+        return (jsx("a", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, target: target, href: href, onClick: onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: text }) }, String(i)));
+    };
 
     const renderTab = ({ onClick, currentTab, showCounter, page, context }) => 
     // Linter doesn't understand that switch processes all cases
@@ -3048,19 +2898,37 @@
         switch (type) {
             case 'group':
                 return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
-            case 'link':
+            case 'link': {
+                const link = useLink({ router, handlerDecorator }, tab);
+                const linkClick = link.onClick;
                 return renderLinkTab({
-                    ...useLink({ router, handlerDecorator }, tab),
+                    ...link,
+                    onClick: (ev) => {
+                        linkClick(ev);
+                        onClick(tab);
+                        EventBus.inst.fire('anchorClick', { isScrolling: true, label: tab.href });
+                    },
+                    currentTab,
                     i,
                 });
+            }
             default:
                 assertUnreachable(type);
         }
     };
 
     const Tabs = JSX((props) => {
-        const { context, className, tabs, page, showCounter } = props;
+        const { context, className = '', tabs, page, showCounter, isSticky } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
+        useEffect(() => EventBus.inst.subscribe('tab', (event) => {
+            if (!tabs) {
+                return;
+            }
+            const tab = tabs.find(checkTab(event));
+            if (event.type === 'link' && tab) {
+                setCurrentTab(tab);
+            }
+        }), [tabs]);
         useEffect(() => {
             if (currentTab?.type === 'group') {
                 return EventBus.inst.subject('tab', { label: currentTab.ref });
@@ -3070,11 +2938,12 @@
         const handleClick = (selectedTab) => {
             if (selectedTab?.type === 'group') {
                 EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-                setCurrentTab(selectedTab);
             }
+            setCurrentTab(selectedTab);
         };
-        return (jsx(BlockWrapper, { context: context, className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context })) }));
+        return (jsx(BlockWrapper, { context: context, className: `${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context })) }));
     });
+    const checkTab = (event) => (_) => _.type === 'link' && _.href === `#${event.label}`;
 
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
     const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
@@ -3085,18 +2954,16 @@
         const handleClick = () => {
             EventBus.inst.fire('tariffInnerTable', { dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx });
         };
-        return (jsxs(Button, { version: "primary", onClick: handleClick, className: "w-full flex items-center justify-center rounded-none py-5 ", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
+        return (jsxs(Button, { version: "primary", onClick: handleClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
     });
 
-    const getButtonAriaLabel = (icon) => icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];
-
-    const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, ariaLabel: getButtonAriaLabel(icon), rounded: rounded, appendLeft: icon?.src || icon?.icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) })) : null;
+    const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, rounded: rounded, ...buttonProps }, String(idx)))) })) : null;
     const renderLabelDescriptionCellData = ({ label, description }) => {
-        const labelClassName = `text-h6 font-medium m-0 ${description ? 'mb-1' : ''}`;
-        return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : null] }));
+        const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;
+        return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-secondary-text text-l-light", children: description }) : null] }));
     };
-    const renderImgCellData = ({ image }) => (image?.src ? jsx(Img, { image: image }) : null);
-    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-sm", version: "gray", isDotted: isDotted ?? true, ...rest }));
+    const renderImgCellData = ({ image }) => (image?.src ? jsx(ImgInner, { image: image }) : null);
+    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-h6", version: "primary", isDotted: isDotted ?? true, ...rest }));
     const renderTableCellData = JSX((props) => {
         const [showBtn, setShowBtn] = useState(true);
         console.log(props);
@@ -3120,7 +2987,7 @@
         return (jsx("div", { className: cellWrapperClasses, role: "cell", children: cells.map(renderCellInner(rowIdx, context, cellIdx)) }));
     });
     const renderCellInner = (rowIdx, context, cellIdx) => (cell, i) => {
-        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'mx-0.5' : `first:pt-5 last:pb-5 pl-10`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })] }, String(i)));
+        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })] }, String(i)));
     };
     const renderCell = (cell, context, indexes) => {
         if (!cell) {
@@ -3167,11 +3034,15 @@
         }
         const [headerColumn, ...columns] = rowData;
         const transform = [...Array(activeColumnIndex).keys()].reduce((res, i) => (columns?.[i]?.cols?.length ?? 1) * COLUMN_WIDTH + res, 0);
-        return (jsxs("div", { className: "flex border-main-divider border border-t-0 border-x-0 border-solid", children: [jsx("div", { className: "text-xl-light min-w-[214px] w-[214px] pt-6 pb-5", children: headerColumn.data }), jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: "flex duration-1000 text-center", style: {
+        const columnsClassName = [
+            'flex duration-1000 text-center',
+            rowIdx !== 0 ? 'font-normal' : 'font-light',
+        ].join(' ');
+        return (jsxs("div", { className: "flex border-main-divider border border-t-0 border-x-0 border-solid", children: [headerColumn?.data ? (jsx("div", { className: `text-xl-light w-[214px] pb-5 ${rowIdx === 0 ? 'pt-8' : 'pt-6'}`, children: headerColumn.data })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsClassName, style: {
                             transform: `translateX(-${transform}px)`,
                         }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow justify-center pt-6 pb-5 odd:bg-main-divider", children: [_?.data ? jsx("div", { className: "text-xl-light mb-3", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
     };
-    const renderCols = (cols, rowIndex) => cols ? (jsx("div", { className: `flex text-xl-light ${rowIndex === 0 ? 'text-secondary-text' : ''}`, children: cols.map((data, i) => (jsx("div", { className: "w-[76px] mx-8", children: data }, String(i)))) })) : null;
+    const renderCols = (cols, rowIndex) => cols?.length > 0 ? (jsx("div", { className: `flex ${rowIndex} ${rowIndex === 0 ? 'text-secondary-text' : ''} last:mr-3`, children: cols.map((data, i) => (jsx("div", { className: `w-[76px] text-h6 mr-5 first:ml-8`, children: data }, String(i)))) })) : null;
 
     const InnerTableBody = JSX(({ context, activeTabIndex, items }) => {
         const [hiddenTables, setHiddenTables] = useState({});
@@ -3180,11 +3051,11 @@
         };
         return (jsx("div", { children: items.map((_, tableIdx) => {
                 const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
-                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTable(key), children: [_.title, jsx(Img, { image: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon', className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : 'h-[243px]'}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { context: context, rows: _.rowsData }) }) })] }, key));
+                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTable(key), children: [_.title, jsx(ImgInner, { image: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon', className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { context: context, rows: _.rowsData }) }) })] }, key));
             }) }));
     });
 
-    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsxs(Button, { href: linkToPDF, version: "secondary", className: "flex justify-center items-center text-l-light text-primary-main px-8", children: [jsx(Img, { image: "DocDownloadIcon", className: "mr-[10px]", width: "24", height: "24", asSVG: true }), jsx("span", { children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })] })) : null] })));
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsxs(Button, { href: linkToPDF, version: "secondary", className: "flex justify-center items-center text-l-light text-primary-main px-8 max-h-14", target: "_blank", children: [jsx(ImgInner, { image: "DocDownloadIcon", className: "mr-2.5", width: "20", height: "20", asSVG: true }), jsx("span", { children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })] })) : null] })));
 
     const InnerTable = JSX(({ context, dataUrl, pdfUrl }) => {
         const { tableData } = useTariffsInnerTableData(dataUrl);
@@ -3203,7 +3074,7 @@
     });
 
     const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, isLastRow, context, rowIdx }) => {
-        return (jsxs(TariffsTableRowContainer, { context: context, rowIdx: rowIdx, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title ? (jsx(Heading, { headingType: header?.headingType || 'h6', as: "h6", title: header?.title })) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, isLastRow: isLastRow, rowIdx: rowIdx, cellIdx: i, context: context }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { context: context, rowIdx: rowIdx, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, isLastRow: isLastRow, rowIdx: rowIdx, cellIdx: i, context: context }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', context, title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -3221,7 +3092,7 @@
             setActiveCardIndex,
         });
         const foldableBlocks = rowData?.map((row, i, { length }) => (jsx(TariffsTableRow, { context: context, row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, rowIdx: i }, String(i))));
-        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
+        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, blockWrapper: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })) })) : null] }));
     });
     const Wrapper = JSX(({ children, tableArrowScrollControlProps }) => {
         const { isScrollAvailable } = tableArrowScrollControlProps;