@redneckz/wildless-cms-uni-blocks 0.5.9 → 0.5.11

package/bundle/bundle.umd.js

@@ -255,34 +255,65 @@
         }
     }
 
-    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 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, 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));
-            }
-            else {
-                setShouldRenderBlock(true);
-                scrollToBlock(event.label);
-            }
-        }), [labels]);
+        const anchorClickRef = useRef({});
+        const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor, anchorClickRef]);
+        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();
+            };
+        }, [anchorClickRef]);
         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 = {
@@ -301,6 +332,9 @@
 
     // 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";
@@ -452,7 +486,7 @@
         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"] = "MoneysIcon";
+        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";
@@ -491,15 +525,23 @@
     const svgUseStyleMap = {
         normal: 'text-primary-main',
         black: 'text-black',
-        white: 'text-black invert',
+        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) {
-            return (jsxs("svg", { className: className, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { className: `${svgUseStyleMap[iconVersion]} ${imageClassName}`, href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
+        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';
@@ -556,6 +598,11 @@
         return style ? style.filter(Boolean).join(' ') : '';
     }
 
+    const Description = JSX((props) => {
+        const { className = '', description } = props;
+        return jsx("div", { className: `${className}`, children: description });
+    });
+
     const ALIGN_TEXT = {
         left: 'text-left',
         center: 'text-center',
@@ -611,11 +658,6 @@
         },
     };
 
-    const Description = JSX((props) => {
-        const { className = '', description } = props;
-        return jsx("div", { className: `${className}`, children: description });
-    });
-
     const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'center', className = '', title, description, headlineVersion = 'XL', as, ...rest }) => {
         const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
         const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
@@ -802,7 +844,7 @@
     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',
+        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';
@@ -1022,7 +1064,7 @@
     function renderBenefits$1(benefits, version, image) {
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline 
+        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
         ${BENEFITS_WIDTH}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
     }
     function renderBenefit(version = 'primary') {
@@ -1139,7 +1181,7 @@
         LinkList,
     };
 
-    const renderBlocksList = ({ 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 })) : null;
     const renderBlock$1 = ({ context, className }) => (block, i) => {
         if (!block) {
             return null;
@@ -1154,7 +1196,7 @@
     };
 
     const AccordionItemInner = JSX(({ blocks, context }) => {
-        return (jsx("div", { className: "grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, blocks, className: '!p-0 mb-3.5' }) }));
+        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 useActiveHandler$1 = ({ blocks, initialState = false }) => {
@@ -1244,12 +1286,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(Img, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full`, image: _.image })) : null;
 
     function getElementsColsValue(className = '') {
         const colSpan = getColSpan(className);
@@ -1316,6 +1365,8 @@
         return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
     }
 
+    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 DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
@@ -1460,8 +1511,6 @@
         };
     };
 
-    const renderFootnote = (text) => text ? jsx("p", { className: "text-s-light text-secondary-text mt-7", children: text }) : null;
-
     const BonusCalculatorForm = JSX(({ context, className = '', sourceBookDir = '', buttons, footnote }) => {
         const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
         const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
@@ -1685,33 +1734,55 @@
                         })) }) }), 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(val)));
+    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 = '', children, onChange, ...inputProps }) => {
+        const handleChange = useCallback((e) => {
+            const validInputValue = e.target.validity.valid ? e.target.value : value;
+            onChange(validInputValue);
+        }, [onChange]);
+        const paddingStyle = children ? 'pr-8' : '';
+        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 border-main-stroke hover:border-primary-hover active:border-primary-text
+          focus:border-primary-text text-primary-text outline-none p-4 ${paddingStyle} ${inputClassName}`, id: id, name: name || id, type: type, value: value, onChange: handleChange, ...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]);
+        return (jsx(Input, { className: className, inputClassName: "w-full", onChange: handleChange, ...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 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, 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 = {
@@ -1724,7 +1795,7 @@
         white: 'bg-white',
     };
     const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
-        return (jsxs("section", { className: `border border-solid box-border 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(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] }));
     });
     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) => {
@@ -1959,40 +2030,9 @@
         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));
     };
 
-    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", 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 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 }));
-    });
+    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 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 choiceOption = (option) => {
@@ -2004,25 +2044,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}`, 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-m-light 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 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(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();
@@ -2100,7 +2162,8 @@
         currencyRatesBuy.unshift({ code: Currency.RUB });
         const currencyRatesSell = currencyRates.filter((_) => _.sell);
         currencyRatesSell.push({ code: Currency.RUB });
-        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border min-h-[320px] 
+          ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
 
     const ICON_VERSION_MAP = {
@@ -2115,8 +2178,8 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', hideTitle, }) => {
-        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 })), hideTitle ? null : renderTitle$1(children, bgColor, logo?.title)] }));
+    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] }));
     });
     const renderTitle$1 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
@@ -2242,7 +2305,7 @@
             return null;
         }
         const classes = version === 'secondary'
-            ? 'bg-secondary-light hover:bg-secondary-hover'
+            ? '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 }));
@@ -2280,10 +2343,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(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
     const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
@@ -2518,8 +2581,8 @@
         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(Img, { 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(Img, { 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" }));
@@ -2566,7 +2629,7 @@
     };
 
     const OtherProductsItem = JSX(({ label, blocks, context, dataTheme, isUnfolded }) => {
-        const foldableBlocks = renderBlocksList({
+        const foldableBlocks = renderBlocksList$1({
             context,
             blocks,
         });
@@ -2611,7 +2674,7 @@
         const galleryNav = slides.map((s) => s.nav);
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { context: context, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        return (jsxs(BlockWrapper, { context: context, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
         ${VersionStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
                         slide,
                         i,
@@ -2628,19 +2691,19 @@
     function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
         const isActiveBtn = i === activeSlideIndex;
         const btnClassName = isActiveBtn
-            ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
-            : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
+            ? 'bg-white shadow-dark-blue/42 min-w-[354px] 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'
-            : `text-l ${productBlockStyleMap[version].title}`;
+            ? 'text-primary-text !text-h6 p-2'
+            : `text-l pb-1 ${productBlockStyleMap[version].title}`;
         const btnDescClassName = isActiveBtn
-            ? 'text-secondary-text text-m-title-xs mt-2.5'
-            : `text-m mt-1.5 ${productBlockStyleMap[version].text}`;
+            ? 'text-secondary-text text-l-light mt-2.5'
+            : `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 font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0 pt-5 pb-[23px]
+        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
         ${btnClassName} ${additionalBorder}
-      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
+      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text  ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
     }
 
     const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
@@ -2706,23 +2769,16 @@
         return fetchJSON(url, { method: 'GET' });
     };
 
-    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] }) })));
@@ -2769,7 +2825,7 @@
         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"] })] })] }));
     });
     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);
@@ -2940,7 +2996,7 @@
         const toggleShowMap = () => {
             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] }));
+        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, 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 checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
@@ -3021,7 +3077,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
@@ -3036,19 +3095,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 });
@@ -3058,11 +3135,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';
@@ -3295,26 +3373,48 @@
         return (jsxs(BlockWrapper, { tag: "div", context: context, className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, ...rest, children: [jsx(LikeButton, { onClick: handlerDecorator(likeService.like), ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: handlerDecorator(likeService.dislike), className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
     });
 
-    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-    const ContentPage = JSX(({ className = '', context, blocksRegistry, data = {}, blockDecorator = defaultBlockDecorator, }) => {
-        const { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' } = data;
-        const { header } = slots;
-        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, page: data, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context, page: data }, i)) })) : null, likeControl ? (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") })) : null] }));
-    });
-    function renderBlock({ block, blockDecorator, blocksRegistry, context, page }, i) {
+    const DEFAULT_SLOT_NAME = null;
+
+    function renderBlock(block, options, ancestors = [DEFAULT_SLOT_NAME]) {
+        const { key, page, blockDecorator, blocksRegistry, context } = options;
         const { type } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
-        const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
+        const BlockComponent = type && blocksRegistry[type];
         return blockDecorator({
             blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
             block,
-            render: (props) => {
-                const { version, content, anchor, labels } = props.block;
-                return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, page: page, anchor: anchor, labels: labels, ...content }, `${type}-${i}`));
+            ancestors,
+            // Adjusted by decorator block and blockClassName
+            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+                const { version, content, anchor, labels, blocks: childBlocks } = adjustedBlock;
+                const children = childBlocks
+                    ? childBlocks.map((_, j) => renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]))
+                    : null;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, version: version, context: context, page: page, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
             },
-        }, `block-${i}`);
+        }, key);
+    }
+
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+    const ContentPage = JSX((props) => {
+        const { className = '', context, data = {} } = props;
+        const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
+        const blocksListRenderer = renderBlocksList(props);
+        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [slots?.header?.blocks?.length ? (jsx("div", { className: `${style2className(slots.header.style)}`, children: blocksListRenderer(slots.header.blocks, ['header']) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocksListRenderer(blocks) })) : null, likeControl ? renderLikeControl(context) : null] }));
+    });
+    function renderBlocksList({ blocksRegistry, data, blockDecorator, context }) {
+        return (blocks, ancestors) => blocks.map((block, i) => renderBlock(block, {
+            key: `${block.type || '#'}-${i}`,
+            blocksRegistry,
+            page: data || {},
+            blockDecorator: blockDecorator || defaultBlockDecorator,
+            context,
+        }, ancestors));
+    }
+    function renderLikeControl(context) {
+        return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") }));
     }
 
     exports.Blocks = Blocks;