@redneckz/wildless-cms-uni-blocks 0.5.10 → 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 = {
@@ -1255,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);
@@ -1696,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 = {
@@ -1972,38 +2032,7 @@
 
     const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m-light", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
-    const calculateResult = (value, rate, precision) => {
-        const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
-        return Number.isInteger(result) ? result : roundTo(result);
-    };
-    const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
-
-    const 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 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) => {
@@ -2015,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();
@@ -2292,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);
 
@@ -2530,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" }));
@@ -2718,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] }) })));
@@ -2781,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);
@@ -2952,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);
@@ -3033,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
@@ -3048,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 });
@@ -3070,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';