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

package/mobile/bundle/bundle.umd.js

@@ -13,6 +13,7 @@
     const useEffect = lazyHook('useEffect');
     const useCallback = lazyHook('useCallback');
     const useMemo = lazyHook('useMemo');
+    const useRef = lazyHook('useRef');
 
     const setup = (_jsx, _jsxs) => {
         globalThis._uni = {
@@ -243,6 +244,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";
@@ -394,7 +398,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";
@@ -433,15 +437,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';
@@ -701,6 +713,11 @@
         return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [jsx(Headline, { className: `!p-0 ${description ? 'gap-2' : 'gap-5'}`, title: title, description: description, context: context, align: "center" }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
     });
 
+    const VersionStyleMap = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+    };
+
     const isURL = (href) => href?.includes('//');
     const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
     const getOrigin = (href) => {
@@ -801,11 +818,14 @@
     };
     const styleButton = 'w-full text-center font-sans select-none';
     const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'primary', ariaLabel, ...rest }) => {
+        // It isn't a valid HTML attribute. Must be excluded from "rest"
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { asSVG, iconRight, appendRight, icon, ...buttonInnerRest } = rest;
         const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded, version: version }));
         if (disabled) {
             return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: `inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
         }
-        return (jsx("a", { className: `${styleButton} inline-block cursor-pointer no-underline focus:border focus:border-primary-focus ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...rest, children: buttonInner }));
+        return (jsx("a", { className: `${styleButton} inline-block cursor-pointer no-underline focus:border focus:border-primary-focus ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...buttonInnerRest, children: buttonInner }));
     });
 
     const ButtonSection = JSX(({ context, className = '', buttons }) => {
@@ -913,11 +933,6 @@
     };
     const renderLabel = (label, version) => (jsx("div", { className: `px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`, children: label }));
 
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
-
     const ProductBlock = JSX((props /* Get rid of image and benefits */) => {
         const { className = '', version = 'primary' } = props;
         return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${VersionStyleMap[version]} ${className}`, children: jsx(ProductBlockInner, { ...props }) }));
@@ -1003,34 +1018,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 LinkList = JSX(({ className = '', documents, ...rest }) => {
@@ -1052,7 +1098,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;
@@ -1067,7 +1113,7 @@
     };
 
     const AccordionItemInner = JSX(({ blocks, context }) => {
-        return (jsx("div", { className: "flex flex-wrap transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0", children: renderBlocksList({ context, blocks, className: '!px-0' }) }));
+        return (jsx("div", { className: "flex flex-wrap transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0", children: renderBlocksList$1({ context, blocks, className: '!px-0' }) }));
     });
 
     const useActiveHandler = ({ blocks, initialState = false }) => {
@@ -1122,9 +1168,14 @@
         const buttonVersion = isFillGradient ? 'secondary' : 'primary';
         return (jsxs("div", { className: `border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`, role: "row", children: [jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
                     ? columnDataView.map(({ rowHeader, cell }, i) => (jsx(TableCell, { cell: cell, rowHeader: rowHeader, isFillGradient: isFillGradient }, String(i))))
-                    : null, showRow && renderButton({ header, buttonVersion }), renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
+                    : null, showRow ? renderButton({ header, buttonVersion }) : null, renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
     });
-    const renderButton = ({ header, buttonVersion }) => (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "text-s font-medium mt-4 py-[11px]", children: header.link.text }));
+    const renderButton = ({ header, buttonVersion }) => {
+        if (!header.link) {
+            return null;
+        }
+        return (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "text-s font-medium mt-4 py-[11px]", children: header.link.text }));
+    };
     const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (jsx("div", { className: "mt-5", role: "cell", children: jsx("a", { role: "link", onClick: onToggleColumn, className: `text-s font-medium cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
 
     const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, orientation = 'vertical', }) => {
@@ -1343,40 +1394,19 @@
         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 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 Input = JSX(({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
-        const handleChange = (e) => {
+    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);
-        };
-        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 }));
+        }, [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 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) => {
@@ -1388,25 +1418,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();
@@ -1484,7 +1536,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 SVG_COLOR = {
@@ -1495,12 +1548,12 @@
         'bg-white': 'text-black',
         transparent: 'text-white',
     };
-    const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(Img, { image: { icon: 'LogoIcon' }, className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, asSVG: true }), hideTitle ? null : (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
+    const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(Img, { image: { icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, asSVG: true }), showTitle ? (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`, children: children || 'Россельхозбанк' })) : null] }));
     });
 
     const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
-        return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]", children: jsx(Logo, { className: "w-[33px]", bgColor: "transparent", hideTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
+        return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]", children: jsx(Logo, { className: "w-[33px]", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
     });
 
     const Contacts = JSX(({ className = '', items, hasButton, context }) => {
@@ -1569,7 +1622,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 }));
@@ -1829,6 +1882,10 @@
         normal: 'min-h-[70px]',
         small: 'min-h-[50px]',
     };
+    const STEPS_SVG_VERSION_MAP = {
+        primary: 'normal',
+        secondary: 'white',
+    };
     const StepsBlock = JSX(({ className, title, description, showLines = true, steps, size = 'normal', version = 'primary', }) => {
         const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
         return (jsxs("section", { className: `box-border font-sans bg-white px-4 py-6 flex flex-col
@@ -1845,7 +1902,7 @@
         const iconAreaSize = STEPS_SIZE_MAP[size];
         const iconSize = size === 'normal' ? '38' : '27';
         const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-        return (jsx("div", { className: `${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium flex self-center ${styleMap.title} ${iconTextSize}`, children: checkIsIconRenderable(step?.icon) ? (jsx(Img, { image: step.icon, width: iconSize, height: iconSize, asSVG: true })) : (jsx("span", { children: i + 1 })) }) }));
+        return (jsx("div", { className: `${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium flex self-center ${styleMap.title} ${iconTextSize}`, children: checkIsIconRenderable(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: STEPS_SVG_VERSION_MAP[version] }, width: iconSize, height: iconSize, asSVG: true })) : (jsx("span", { children: i + 1 })) }) }));
     };
 
     const getButtonAriaLabel = (icon) => icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];
@@ -1964,26 +2021,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") }));
     }
 
     function joinList(sep) {