@redneckz/wildless-cms-uni-blocks 0.14.17 → 0.14.19

package/bundle/bundle.umd.js

@@ -832,7 +832,12 @@
         return options.filter((_) => _.text?.toLocaleLowerCase().includes(query?.trim().toLocaleLowerCase()));
     };
 
-    const SelectPopup = JSX(({ popupRef, options, value, query, onChange }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md", role: "listbox", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "option", "aria-selected": option.key === value?.key, onClick: () => onChange && onChange(option), children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden') })] }, option.key))) })) : null);
+    const SelectPopup = JSX(({ popupRef, options, value, query, onChange }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md", role: "listbox", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "option", "aria-selected": option.key === value?.key, onClick: (e) => {
+                e.stopPropagation();
+                if (onChange) {
+                    onChange(option);
+                }
+            }, children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden') })] }, option.key))) })) : null);
 
     function useSelectPopup({ isOpen, options, value, query, onChange, onClose, }) {
         const popup = usePopupManager();
@@ -861,7 +866,7 @@
         return inputRef;
     }
 
-    const Select = JSX(({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, onChange, }) => {
+    const Select = JSX(({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, iconVersion, onChange, }) => {
         const [isOpen, { setFalse: close, setTrue: open }] = useBool();
         const [query, setQuery] = useState('');
         const handleClose = useCallback(() => {
@@ -876,10 +881,10 @@
             onChange,
             onClose: handleClose,
         });
-        return (jsxs("div", { className: className, children: [renderLabel(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10', getBorderStyle(isBorder, valid)), onClick: isOpen ? handleClose : open, children: [jsx("p", { className: "p-m pr-3xl flex items-center overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), renderIcon$1(isOpen)] }), isSearch && isOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
+        return (jsxs("div", { className: className, children: [renderLabel(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10', getBorderStyle(isBorder, valid)), onClick: isOpen ? handleClose : open, children: [jsx("p", { className: "p-m pr-3xl flex items-center overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), renderIcon$1(isOpen, iconVersion)] }), isSearch && isOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
     });
     const renderLabel = (label) => label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null;
-    const renderIcon$1 = (isOpen) => (jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" }));
+    const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
     const getBorderStyle = (isBorder, valid) => style(isBorder ? 'border rounded-md hover:border-primary-hover' : '', valid ? ' border-gray' : 'border-error');
 
     const SelectControl = JSX(({ className = '', error, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
@@ -1026,8 +1031,9 @@
     function renderRangeWithTicks({ list = [], min, max, step, value = list[0] || min, disabled, onChange, }) {
         const rangeValue = list.length ? list.indexOf(value) : value;
         const rangeValueShift = rangeValue > min ? rangeValue - min : 0;
+        const percentage = (rangeValueShift * 100) / (max - min);
         const inputStyle = {
-            backgroundSize: `${((rangeValueShift * 100) / (max - min)).toFixed(2)}% 100%`,
+            backgroundSize: `${percentage.toFixed(2)}% 100%`,
         };
         return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-m", children: list.map((_, i) => (jsx("div", { className: style('w-2 h-2 rounded-full', rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main') }, String(i)))) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-m leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", style: inputStyle, type: "range", min: min, max: max, step: step, value: rangeValue, disabled: disabled, onInput: ((e) => {
                             const rawValue = parseDecimal(e.target?.value);
@@ -1048,7 +1054,7 @@
         const handleChange = useCallback((e) => {
             onChange && onChange(parseDecimal(e.target?.value));
         }, [onChange]);
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('m-0 mt-xs font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'p-0 pl-m box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), disabled: disabled, onInput: handleChange, ...normalizedProps }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
+        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('mt-xs font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'pl-m box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), disabled: disabled, onInput: handleChange, ...normalizedProps }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
     });
     const closestValue = (list) => (_) => list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));
     const renderRangeCaption = (items) => (jsx("div", { className: "flex justify-between my-xs", children: items.map((item, i) => (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item }, String(i)))) }));
@@ -1175,7 +1181,7 @@
 
     const renderContacts = () => (jsxs("div", { className: "flex gap-xl", children: [jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", href: `tel:8 (800) 200-78-70`, "aria-label": "8 (800) 200-78-70", children: [jsx(Img, { image: { icon: 'PhoneIcon' }, width: "24", height: "24" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", "aria-label": "ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(Img, { image: { icon: 'MailIcon' }, width: "24", height: "24" }), jsx("span", { children: "ved@rshb.ru" })] })] }));
 
-    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex gap-s items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange(_.target.value) }), text ? jsx("span", { className: "text-primary-text cursor-pointer", children: text }) : null] }) })));
+    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex gap-s items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange(_.target.value) }), text ? jsx(Text, { color: "text-primary-text", children: text }) : null] }) })));
 
     const renderQuestionsInterested = (field) => {
         const { value, onChange } = field('vedTypes');
@@ -1279,6 +1285,8 @@
         return jsx(EmbeddedForm, { ...formBlock, onSubmit: handleSubmit });
     };
 
+    const AlignStyles = 'text-center';
+
     const iconBgStyles = {
         '': 'bg-main-divider group-data-secondary:bg-white/30',
         primary: 'bg-main-divider',
@@ -1295,8 +1303,6 @@
 
     const defaultIconSize = 44;
 
-    const AlignStyles = 'text-center';
-
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: AlignStyles, title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
     const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [benefit?.icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: benefit?.iconBgVersion || '', ...benefit?.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "@sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$2(benefit.description)] })) : null] }, String(i)));
     const renderDescription$2 = (description) => {
@@ -1482,7 +1488,7 @@
         return isVisible ? (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: `absolute z-40 ${btnClass[0]} ${className}`, onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: `absolute z-40 rotate-180 ${btnClass[1]} ${className}`, onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] })) : null;
     }
 
-    const calculatorValueBlockStyle = 'flex justify-between md:flex-col';
+    const calculatorValueBlockStyle = 'flex justify-between @xl:flex-col';
     const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: style(calculatorValueBlockStyle, className), children: [title ? (jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsxs(Text, { size: "text-h3", children: [prefix, " ", toLocalNumberFormat(2)(Math.round(value)), " ", postfix] }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
     const DEFAULT_MIN_SUM$1 = 10000;
@@ -1575,10 +1581,21 @@
     const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
     const REFINANCING_CALC_DEFAULT_DIR = 'refinancing-calculator-data';
 
-    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName, fractionDigits = 2, }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start gradient-color-text", children: [jsx("span", { className: style('font-mohave text-title-huge pr-xl -mt-m', rateBlockClassName), children: String(rate.toFixed(fractionDigits)).replace('.', ',') }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
-
     const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: text })) : null;
 
+    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, fractionDigits = 2 }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start gradient-color-text", children: [jsx("span", { className: "font-mohave text-title-huge pr-xl -mt-m tracking-[-15px]", children: String(rate.toFixed(fractionDigits)).replace('.', ',') }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
+
+    const UnknownRate = JSX(({ title = 'Ставка', isUnavailableByTerm = false }) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx(Icon, { className: "w-10 h-10 @5xl:h-auto @5xl:w-40", name: "PercentIcon" }), jsx("div", { className: "w-64", children: isUnavailableByTerm ? (jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] })) : (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044E \u0441\u0443\u043C\u043C\u0443 \u0438\u043B\u0438 \u0441\u0440\u043E\u043A" })) })] })));
+
+    const renderDesktopRate = ({ rate, depositeName, fractionDigits, isShowDepositeName, title, unit, }) => (jsx(Rate, { rate: rate, depositeName: depositeName, fractionDigits: fractionDigits, isShowDepositeName: isShowDepositeName, unit: unit, title: title }));
+    const renderMobileRate = ({ rate, title, unit }) => (jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit }));
+    const renderRate = ({ isUnknownRateShown = true, isUnavailableByTerm = false, title = 'Ставка', unit = '%', rate = 0, ...rest }) => {
+        if (isUnknownRateShown && rate === 0) {
+            return jsx(UnknownRate, { isUnavailableByTerm: isUnavailableByTerm, title: title });
+        }
+        return (jsxs("div", { children: [jsx("div", { className: "hidden @xl:block", children: renderDesktopRate({ title, unit, rate, ...rest }) }), jsx("div", { className: "@xl:hidden", children: renderMobileRate({ title, unit, rate, ...rest }) })] }));
+    };
+
     const DEFAULT_MONEY_STEP = 1000;
     function renderWantedSumInput({ isShowItems = true, step = DEFAULT_MONEY_STEP, ...rest }) {
         const items = [
@@ -1624,7 +1641,7 @@
             restExpenseValue: DEFAULT_REST_MIN_SUM,
         });
         const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-y-4xl', className), children: [jsxs("div", { className: "flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0", children: [renderWantedSumInput({
                             title: 'Сумма покупок в категории путешествия, ₽',
                             min: minSumTravel,
                             max: maxSumTravel,
@@ -1638,7 +1655,15 @@
                             step: 500,
                             isShowItems: false,
                             ...field('restExpenseValue'),
-                        })] }), monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]", fractionDigits: 0 })) : null, jsxs("div", { className: "flex flex-col gap-2xl sm:w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
+                        })] }), monthBonus >= 0
+                    ? renderRate({
+                        title: 'Баллов за месяц',
+                        rate: monthBonus,
+                        fractionDigits: 0,
+                        isUnknownRateShown: false,
+                        unit: '',
+                    })
+                    : null, jsxs("div", { className: "flex flex-col gap-y-4xl @xl:w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -1686,24 +1711,10 @@
         ],
     });
 
-    const UnknownRate = JSX(({ title = 'Ставка', isUnavailableByTerm = false }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-2xs pt-2xs pl-lg pb-xs", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-64 mt-m", children: isUnavailableByTerm ? (jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] })) : (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044E \u0441\u0443\u043C\u043C\u0443 \u0438\u043B\u0438 \u0441\u0440\u043E\u043A" })) })] })));
-
-    const renderDesktopRate = ({ rate, depositeName, fractionDigits, isShowDepositeName, }) => (jsx(Rate, { rate: rate, depositeName: depositeName, fractionDigits: fractionDigits, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" }));
-    const renderMobileRate = ({ rate }) => (jsx(CalculatorValueBlock, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", value: rate, postfix: "%" }));
-    const renderRate = (props) => {
-        if (props.rate === 0) {
-            return jsx(UnknownRate, { isUnavailableByTerm: props.isUnavailableByTerm });
-        }
-        return (jsxs("div", { children: [jsx("div", { className: "hidden md:block", children: renderDesktopRate(props) }), jsx("div", { className: "md:hidden", children: renderMobileRate(props) })] }));
-    };
-
     const defaultDiscriminator = (_) => _;
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
     const max = maxBy();
 
-    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
-    const min = minBy();
-
     const mergeIntervals = (intervals) => {
         const result = [...intervals];
         result.sort(([a], [c]) => a - c);
@@ -1721,6 +1732,9 @@
         return result;
     };
 
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+    const min = minBy();
+
     const getLimitRangeByKeys = ([minKey, maxKey], limitParams, rateRows = []) => limitParams && limitParams[minKey] && limitParams[maxKey]
         ? {
             [minKey]: limitParams[minKey],
@@ -2820,8 +2834,10 @@
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
+    const ImageAlwaysOnRight = true;
+
     //TODO: replace SocialMedia with renderButtonSection
-    const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], listItemSize = 'S', socialMedia = [], target, title, align = 'text-left', isImageAlwaysOnRight = true, ...rest }) => {
+    const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], listItemSize = 'S', socialMedia = [], target, title, align = 'text-left', isImageAlwaysOnRight = ImageAlwaysOnRight, ...rest }) => {
         return (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, insetTitle: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, rightImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia, showButtonText: true }) : null, isImageAlwaysOnRight: isImageAlwaysOnRight, children: items.length ? jsx(List, { items: items, listItemSize: listItemSize }) : null }) }) }));
     });
 
@@ -2954,17 +2970,18 @@
         return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
     };
 
+    const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
+
     const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
     const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs border-box';
     const BaseFiltrationInner = JSX(({ label = '', blocksToRender = [], topItemsCount = 0, block, notFound, ...rest }) => {
         const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
             ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
             : [blocksToRender, []];
-        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? renderNotFound(notFound) : null }), jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style(resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
+        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? jsx(NotFound, { ...notFound }) : null }), jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style(resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
                                 return (jsx(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
                             }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
     });
-    const renderNotFound = ({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] }));
 
     const isEmpty = (v) => v === null ||
         v === undefined ||
@@ -3070,7 +3087,7 @@
 
     const DEFAULT_MIN_SUM = 500;
     const DEFAULT_MAX_SUM = 1000000000;
-    const initialFiltrationState$1 = {
+    const initialFiltrationState$2 = {
         sum: {
             min: 10000,
             max: DEFAULT_MAX_SUM,
@@ -3079,7 +3096,7 @@
     };
     const DepositFiltration = JSX(({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
         const { source, months } = useDepositsPeriods(rest.block?.blocks);
-        const [filtrationState, { field, reset }] = useForm(initialFiltrationState$1);
+        const [filtrationState, { field, reset }] = useForm(initialFiltrationState$2);
         const blocksToRender = getBlocksToRender(rest.block?.blocks, filtrationState)((content) => ({ ...content, period: getPeriod(source, content || {}) || [] }));
         const Inputs = (jsxs("div", { children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', {
                         parse: (min) => ({ min: Number(min), max: DEFAULT_MAX_SUM }),
@@ -3100,7 +3117,7 @@
     const DEFAULT_OPTIONS = [{ key: '10' }, { key: '50' }, { key: '100' }];
     const PageSizeSelector = ({ itemCount, onItemCountChange }) => {
         const handleItemCountChange = useCallback(({ key }) => onItemCountChange(Number(key)), []);
-        return (jsxs("div", { className: "flex items-center gap-s", children: [jsx("span", { children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E" }), jsx(Select, { onChange: handleItemCountChange, value: { key: String(itemCount) }, options: DEFAULT_OPTIONS })] }));
+        return (jsxs("div", { className: "flex items-center gap-s", children: [jsx("span", { children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E" }), jsx(Select, { className: "min-w-20", onChange: handleItemCountChange, value: { key: String(itemCount) }, options: DEFAULT_OPTIONS, iconVersion: "black" })] }));
     };
 
     const paginationBlockStyle = 'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
@@ -3148,7 +3165,167 @@
 
     const Pagination = ({ currentPage, onPageChange, totalPages, itemCount, onItemCountChange, }) => (jsxs("div", { className: "mt-3xl flex justify-between items-center select-none", role: "navigation", "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: [jsx(PaginationContainer, { currentPage: currentPage, onPageChange: onPageChange, totalPages: totalPages }), itemCount && onItemCountChange ? (jsx(PageSizeSelector, { itemCount: itemCount, onItemCountChange: onItemCountChange })) : null] }));
 
-    const formatDate$1 = (date) => date.split('-').reverse().join('.');
+    const formatDate$1 = (date, toTimeStamp = false) => {
+        if (typeof date === 'string') {
+            return date.split('-').reverse().join('.');
+        }
+        else {
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const year = toTimeStamp ? String(date.getFullYear()) : String(date.getFullYear()).slice(-2);
+            return toTimeStamp ? `${year}-${month}-${day}` : `${day}.${month}.${year}`;
+        }
+    };
+
+    const noop = () => {
+        // Do nothing
+    };
+
+    const DAY_COUNT = 6;
+    const WEEK_COUNT = 7;
+    const renderCalendarCells = ({ today, firstDayOfWeek, totalDays, currentMonth, currentYear, min, max, onDateClick, }) => {
+        const calendarCells = [];
+        let dayCounter = 1;
+        for (let i = 0; i < DAY_COUNT; i++) {
+            const rowCells = [];
+            for (let j = 0; j < WEEK_COUNT; j++) {
+                if (i === 0 && j < firstDayOfWeek) {
+                    rowCells.push(jsx("td", {}, `empty-${j}`));
+                }
+                else if (dayCounter > totalDays) {
+                    rowCells.push(jsx("td", {}, `empty-${j}`));
+                }
+                else {
+                    const currentDate = new Date(currentYear, currentMonth, dayCounter);
+                    const isToday = checkIsToday(currentDate, today);
+                    const isDisabled = checkIsDisabled(currentDate, min, max);
+                    rowCells.push(jsx("td", { children: jsx("div", { className: getDayStyles(isToday, isDisabled), onClick: () => !isDisabled && onDateClick(currentDate), children: dayCounter }) }, `day-${dayCounter}`));
+                    dayCounter++;
+                }
+            }
+            calendarCells.push(jsx("tr", { children: rowCells }, `row-${i}`));
+        }
+        return calendarCells;
+    };
+    const checkIsToday = (currentDate, today) => today && currentDate.toDateString() === today.toDateString();
+    const checkIsDisabled = (currentDate, min, max) => (min && currentDate.getTime() < min.getTime()) || (max && currentDate.getTime() > max.getTime());
+    const getDayStyles = (isToday, isDisabled) => style('p-s text-center rounded-md border', isToday ? '' : 'border-transparent hover:bg-gray', isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
+
+    const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+    const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
+        const handleDateClick = useCallback((date) => onDateSelect(date), []);
+        const { firstDayOfWeek, totalDays } = useMemo(() => ({
+            firstDayOfWeek: new Date(currentYear, currentMonth, 1).getDay() - 1,
+            totalDays: new Date(currentYear, currentMonth + 1, 0).getDate(),
+        }), [currentYear, currentMonth]);
+        return (jsxs("table", { className: "mx-auto", children: [jsx("thead", { className: "text-gray font-light", children: jsx("tr", { children: WEEK_DAYS.map((day, index) => (jsx("th", { className: "p-s", children: day }, String(index)))) }) }), jsx("tbody", { children: renderCalendarCells({
+                        firstDayOfWeek,
+                        today,
+                        totalDays,
+                        currentYear,
+                        currentMonth,
+                        min,
+                        max,
+                        onDateClick: handleDateClick,
+                    }) })] }));
+    });
+
+    const months = [
+        'Январь',
+        'Февраль',
+        'Март',
+        'Апрель',
+        'Май',
+        'Июнь',
+        'Июль',
+        'Август',
+        'Сентябрь',
+        'Октябрь',
+        'Ноябрь',
+        'Декабрь',
+    ];
+
+    const START_YEAR = 1970;
+    const getYears = () => Array.from({ length: new Date().getFullYear() - START_YEAR + 1 }, (_, i) => START_YEAR + i);
+
+    const MONTHS_COUNT = 11;
+    const MONTHS_OPTIONS = months.map((key) => ({ key }));
+    const YEARS_OPTIONS = getYears()
+        .reverse()
+        .map((key) => ({ key: String(key) }));
+    const useDatePickerManager = ({ onShowCalendar, showCalendar, selectedMonth, onMonthSelect, onYearSelect, selectedYear, }) => {
+        const close = useCallback(() => showCalendar && onShowCalendar(false), [showCalendar]);
+        const ref = useOutsideClick(close);
+        const handleChangeVisibleCalendar = useCallback(() => onShowCalendar(!showCalendar), [showCalendar]);
+        const handleNextMonth = useCallback(() => {
+            if (selectedMonth + 1 <= MONTHS_COUNT) {
+                onMonthSelect(selectedMonth + 1);
+            }
+            else {
+                onMonthSelect(0);
+                onYearSelect(selectedYear + 1);
+            }
+        }, [selectedMonth]);
+        const handlePrevMonth = useCallback(() => {
+            if (selectedMonth - 1 >= 0) {
+                onMonthSelect(selectedMonth - 1);
+            }
+            else {
+                onMonthSelect(11);
+                onYearSelect(selectedYear - 1);
+            }
+        }, [selectedMonth]);
+        const handleSelectMonth = useCallback(({ key }) => onMonthSelect(months.indexOf(key)), []);
+        const handleSelectYear = useCallback(({ key }) => onYearSelect(Number(key)), []);
+        return {
+            handleChangeVisibleCalendar,
+            handleNextMonth,
+            handlePrevMonth,
+            handleSelectMonth,
+            handleSelectYear,
+            monthsOptions: MONTHS_OPTIONS,
+            yearsOptions: YEARS_OPTIONS,
+            ref,
+        };
+    };
+
+    const ICON_PROPS = {
+        name: 'ArrowUpIcon',
+        iconVersion: 'black',
+        width: '24',
+        height: '24',
+    };
+    const SELECT_PROPS = {
+        className: 'min-w-32',
+        iconVersion: 'black',
+        isBorder: false,
+    };
+    const formStyle = 'flex justify-between px-m py-s border border-gray rounded-md cursor-pointer ' +
+        'hover:border-black active:border-black focus:border-black';
+    const DatePicker = JSX(({ className = '', label = '', value, minDate, maxDate, onChange }) => {
+        const [showCalendar, { setValue }] = useBool(false);
+        const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
+        const [selectedYear, setSelectedYear] = useState(value?.getFullYear() || new Date().getFullYear());
+        const { handlePrevMonth, handleNextMonth, handleSelectMonth, handleSelectYear, monthsOptions, yearsOptions, handleChangeVisibleCalendar, ref, } = useDatePickerManager({
+            onYearSelect: setSelectedYear,
+            onMonthSelect: setSelectedMonth,
+            onShowCalendar: setValue,
+            selectedYear,
+            selectedMonth,
+            showCalendar,
+        });
+        return (jsxs("div", { className: style(className, 'relative'), ref: ref, children: [jsx(Text, { size: "text-m", children: label }), renderDatePickerForm(handleChangeVisibleCalendar, value), showCalendar ? (jsxs("div", { className: "absolute bg-white z-10 select-none", children: [jsxs("div", { className: "flex gap-s", children: [jsx("div", { className: "my-auto", onClick: handlePrevMonth, children: jsx(Icon, { ...ICON_PROPS, className: "-rotate-90 cursor-pointer" }) }), jsx(Select, { onChange: handleSelectMonth, value: { key: months[selectedMonth] }, options: monthsOptions, ...SELECT_PROPS }), jsx(Select, { onChange: handleSelectYear, value: { key: String(selectedYear) }, options: yearsOptions, ...SELECT_PROPS }), jsx("div", { className: "my-auto", onClick: handleNextMonth, children: jsx(Icon, { ...ICON_PROPS, className: "rotate-90 cursor-pointer" }) })] }), jsx(Calendar, { today: value, currentMonth: selectedMonth, currentYear: selectedYear, onDateSelect: onChange, min: minDate, max: maxDate })] })) : null] }));
+    });
+    const renderDatePickerForm = (handleChangeVisibleCalendar, value) => (jsxs("div", { onClick: handleChangeVisibleCalendar, className: formStyle, children: [jsx(Paragraph, { children: value && formatDate$1(value) }), jsx(Icon, { ...ICON_PROPS, name: "Calendar2Icon" })] }));
+
+    const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus, placeholder = 'Поиск по сайту' }) => {
+        const handleChange = useCallback((ev) => {
+            onChange && onChange(ev.target?.value || '');
+        }, [onChange]);
+        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-m pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: 'black' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 w-full px-10 text-l text-black outline-none box-border border border-solid rounded-md', 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: placeholder, autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
+    });
+
+    const DepositoryFilter = JSX(({ field, onClearFilter, filtrationState }) => (jsxs("div", { className: "grid grid-cols-12 mb-3xl space-x-xl", children: [jsx(SearchInput, { className: "col-span-4 mt-auto", placeholder: "\u041F\u043E\u0438\u0441\u043A", ...field('query') }), jsx(DatePicker, { className: "col-span-3", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u043E\u0442", maxDate: filtrationState.endDate, ...field('startDate') }), jsx(DatePicker, { className: "col-span-3", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u0434\u043E", minDate: filtrationState.startDate, ...field('endDate') }), jsx("div", { className: "col-span-2 mt-auto", children: jsx("button", { className: "px-m py-s rounded-md bg-main-gray text-green cursor-pointer w-full", onClick: onClearFilter, children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440" }) })] })));
 
     const DepositoryItem = ({ title, timestamp, publicId }) => {
         const link = useLink({ basePath: '/' });
@@ -3156,19 +3333,29 @@
         return (jsxs("div", { className: "grid grid-cols-12 py-lg border-gray border-opacity-50 border-b", children: [jsx("div", { className: "col-span-2 text-m", children: timestamp ? jsx(Text, { children: formatDate$1(timestamp) }) : null }), jsx("div", { className: "col-span-10 text-h6 hover:text-primary-active", children: jsx("a", { href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title }) })] }, publicId));
     };
 
-    const useDepository = (size, page) => {
-        const { data } = useAsyncData(`/api/v1/depository?page=${page}&size=${size}`, fetchJSONUnsafe);
+    const useDepository = ({ size, page, query, startDate, endDate }) => {
+        const { data } = useAsyncData(`/api/v1/depository?page=${page}&size=${size}&=query=${query}&timestampStart=${startDate ? formatDate$1(startDate, true) : ''}&timestampEnd=${endDate ? formatDate$1(endDate, true) : ''}`, fetchJSONUnsafe);
         return { items: data?.content, totalPages: data?.totalPages };
     };
 
     const DEFAULT_ITEMS_COUNT = 10;
+    const initialFiltrationState$1 = {
+        startDate: undefined,
+        endDate: undefined,
+        query: '',
+    };
     const Depository = JSX(({ className, ...rest }) => {
         const [currentPage, setCurrentPage] = useState(0);
         const [itemCount, setItemCount] = useState(DEFAULT_ITEMS_COUNT);
-        const { totalPages = 0, items } = useDepository(itemCount, currentPage);
+        const [filtrationState, { field, reset }] = useForm(initialFiltrationState$1);
+        const { totalPages = 0, items } = useDepository({
+            size: itemCount,
+            page: currentPage,
+            ...filtrationState,
+        });
         const handleChangePage = useCallback((page) => setCurrentPage(page - 1), []);
         const handleItemCountChange = useCallback((count) => setItemCount(count), []);
-        return (jsx(BlockWrapper, { className: style(className, 'container p-4xl'), ...rest, children: jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b", children: [jsx("span", { className: "col-span-2 text-gray text-m", children: "\u0414\u0430\u0442\u0430" }), jsx("span", { className: "col-span-10 text-gray text-m", children: "\u0422\u0435\u043C\u0430" })] }), items?.map((params) => (jsx(DepositoryItem, { ...params }, String(params.publicId)))), jsx(Pagination, { currentPage: currentPage + 1, onPageChange: handleChangePage, totalPages: totalPages + 1, itemCount: itemCount, onItemCountChange: handleItemCountChange })] }) }));
+        return (jsxs(BlockWrapper, { className: style(className, 'container p-4xl'), ...rest, children: [jsx(DepositoryFilter, { filtrationState: filtrationState, field: field, onClearFilter: reset }), jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b", children: [jsx("span", { className: "col-span-2 text-gray text-m", children: "\u0414\u0430\u0442\u0430" }), jsx("span", { className: "col-span-10 text-gray text-m", children: "\u0422\u0435\u043C\u0430" })] }), items?.length ? (items?.map((params) => jsx(DepositoryItem, { ...params }, String(params.publicId)))) : (jsx(NotFound, { title: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E", description: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B" })), jsx(Pagination, { currentPage: currentPage + 1, onPageChange: handleChangePage, totalPages: totalPages + 1, itemCount: itemCount, onItemCountChange: handleItemCountChange })] })] }));
     });
 
     const renderErrorContent = (error) => {
@@ -3388,13 +3575,6 @@
 
     const CloseButton = JSX(({ className, onClose }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-2xs bg-transparent border-none', className), onClick: onClose, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
-    const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus }) => {
-        const handleChange = useCallback((ev) => {
-            onChange && onChange(ev.target?.value || '');
-        }, [onChange]);
-        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-m pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: 'black' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 w-full px-10 text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
-    });
-
     function useDebouncedEffect(effect, deps, delay = 300) {
         useEffect(() => {
             const timerId = globalThis.setTimeout(effect, delay);
@@ -3757,11 +3937,6 @@
         return result;
     };
 
-    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-m w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
-    });
-
     const renderForeignOffices = (foreignOffices) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-2xs pt-2xs", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-5xl", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null;
     const ForeignOffice = JSX(({ icon, ...rest }) => {
         const link = useLink();
@@ -3775,6 +3950,11 @@
 
     const renderRegionGroup = (onChangeLocation) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-2xl w-56", children: [jsx("div", { className: "mb-s", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(onChangeLocation))] }, letter));
 
+    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
+        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-m w-full peer text-l text-black border border-solid rounded-md box-border
+              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
+    });
+
     const SEARCH_TERM_MIN_LENGTH = 3;
     const LocationDialog = JSX(() => {
         const { defaultLocation, foreignOffices } = useSitemap();
@@ -4270,25 +4450,6 @@
     const isClient = !isSSR();
     const ClientOnly = JSX(({ children }) => (isClient ? children : null));
 
-    const styles$2 = {
-        focus: 'focus:border-primary-text focus:border',
-        hover: 'hover:bg-primary-hover',
-        active: 'active:bg-primary-active',
-        border: 'border-b border-b-2 border-gray last:border-0',
-        position: 'relative flex items-center justify-center',
-        font: 'text-center font-sans text-l',
-    };
-    // TODO: Добавить метод определения центральной точки
-    const ZoomButton = JSX(({ yandexMaps, direction = 'in' }) => {
-        const iconName = direction === 'in' ? 'PlusIcon' : 'MinusIcon';
-        const changeZoom = () => {
-            const currentZoom = yandexMaps.current.getZoom();
-            const newZoom = direction === 'in' ? currentZoom + 1 : currentZoom - 1;
-            yandexMaps.current.setZoom(newZoom, { checkZoomRange: true });
-        };
-        return (jsx("div", { onClick: changeZoom, className: `${Object.values(styles$2).join(' ')} bg-white select-none cursor-pointer w-12 h-12`, children: jsx(Icon, { name: iconName, width: "20", height: "16" }) }));
-    });
-
     function renderClusterer(yandexMaps, map, points) {
         map.geoObjects.removeAll();
         const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
@@ -4321,7 +4482,7 @@
         });
     }
 
-    const styles$1 = {
+    const styles$2 = {
         focus: 'focus:border-primary-text focus:border',
         hover: 'hover:bg-primary-hover',
         active: 'active:bg-primary-active',
@@ -4333,10 +4494,10 @@
         const getYandexMapUrl = () => {
             return `https://yandex.ru/maps/?ll=${[pointsCenter[1], pointsCenter[0]]}&z=10&l=map`;
         };
-        return (jsx("a", { className: `select-none cursor-pointer px-4xl h-12 bg-primary-main text-white ${Object.values(styles$1).join(' ')}`, href: getYandexMapUrl(), target: "_blank", children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043D\u0430 \u043A\u0430\u0440\u0442\u0435" }));
+        return (jsx("a", { className: `select-none cursor-pointer px-4xl h-12 bg-primary-main text-white ${Object.values(styles$2).join(' ')}`, href: getYandexMapUrl(), target: "_blank", children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043D\u0430 \u043A\u0430\u0440\u0442\u0435" }));
     };
 
-    const styles = {
+    const styles$1 = {
         focus: 'focus:border-primary-text focus:border',
         hover: 'hover:bg-primary-hover',
         active: 'active:bg-primary-active',
@@ -4358,7 +4519,7 @@
                 map.geoObjects.add(result.geoObjects);
             });
         };
-        return (jsx("div", { className: `select-none cursor-pointer py-m w-12 bg-white ${Object.values(styles).join(' ')} ${className}`, onClick: setUserGeoLocation, children: jsx(Icon, { name: "UserGeoLocationIcon", width: "20", height: "16" }) }));
+        return (jsx("div", { className: `select-none cursor-pointer py-m w-12 bg-white ${Object.values(styles$1).join(' ')} ${className}`, onClick: setUserGeoLocation, children: jsx(Icon, { name: "UserGeoLocationIcon", width: "20", height: "16" }) }));
     };
 
     const YMAPS_NAMESPACE = 'ymaps';
@@ -4367,6 +4528,25 @@
         return useExternalNS(YMAPS_NAMESPACE, url);
     };
 
+    const styles = {
+        focus: 'focus:border-primary-text focus:border',
+        hover: 'hover:bg-primary-hover',
+        active: 'active:bg-primary-active',
+        border: 'border-b border-b-2 border-gray last:border-0',
+        position: 'relative flex items-center justify-center',
+        font: 'text-center font-sans text-l',
+    };
+    // TODO: Добавить метод определения центральной точки
+    const ZoomButton = JSX(({ yandexMaps, direction = 'in' }) => {
+        const iconName = direction === 'in' ? 'PlusIcon' : 'MinusIcon';
+        const changeZoom = () => {
+            const currentZoom = yandexMaps.current.getZoom();
+            const newZoom = direction === 'in' ? currentZoom + 1 : currentZoom - 1;
+            yandexMaps.current.setZoom(newZoom, { checkZoomRange: true });
+        };
+        return (jsx("div", { onClick: changeZoom, className: `${Object.values(styles).join(' ')} bg-white select-none cursor-pointer w-12 h-12`, children: jsx(Icon, { name: iconName, width: "20", height: "16" }) }));
+    });
+
     const FULLSCREEN_STYLES = {
         border: 'border border-transparent rounded-md ',
         position: 'absolute flex items-center justify-center',
@@ -4699,8 +4879,6 @@
 
     const getIconName = (isUnfolded) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
 
-    const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
-
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const renderRoundedIcon = (_icon, _iconBgVersion) => null;
 
@@ -4708,6 +4886,8 @@
 
     const PrimaryFoldButton = JSX(({ label, labelIconBgVersion, icon, onToggle, labelIcon }) => (jsx(TextWithIcon, { tag: "button", className: style('border-none bg-transparent items-center group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, textNode: jsxs("div", { className: "flex items-center text-start group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), iconNode: icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null })));
 
+    const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
+
     const RollupItem = JSX(({ className = '', isExpanded, isFoldButtonOnTop = true, label = 'Развернуть', labelIcon, labelIconBgVersion, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-lg', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren({
                     ...rest,
                     extraProps: { className: 'w-full', padding: 'p-0' },
@@ -4728,6 +4908,12 @@
         return version === 'primary' ? (jsx(PrimaryFoldButton, { label: label, labelIcon: labelIcon, labelIconBgVersion: labelIconBgVersion, icon: icon, onToggle: onToggle })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
 
+    const RadioButtons = JSX(({ className = '' }) => {
+        const [selectedOption, setSelectedOption] = useState('option2');
+        const onChange = useCallback((_) => setSelectedOption(_), []);
+        return (jsxs("div", { className: style('order-4', className), children: [jsx(Radio, { className: "mb-xs", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
+    });
+
     const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
         const dataFormat = data
             .filter(Boolean)
@@ -4738,12 +4924,6 @@
 
     const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex flex-col @xl:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "flex-1 min-w-0", 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 RadioButtons = JSX(({ className = '' }) => {
-        const [selectedOption, setSelectedOption] = useState('option2');
-        const onChange = useCallback((_) => setSelectedOption(_), []);
-        return (jsxs("div", { className: style('order-4', className), children: [jsx(Radio, { className: "mb-xs", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
-    });
-
     const ITEMS = ['От 1 дня', 'До 365 дней'];
     const MIN = 1;
     const MAX = 365;
@@ -4853,14 +5033,6 @@
     });
     const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
-    const STEPS_BLOCK_STYLE = {
-        description: 'text-white/80 text-l font-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
-        iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
-        iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
-        iconConnector: 'bg-white group-data-primary:bg-secondary-light',
-        dot: 'bg-white/80 group-data-primary:bg-secondary-text',
-    };
-
     const checkCanRenderIcon = (icon) => Boolean(icon?.icon || icon?.src);
 
     // TODO: Create universal function for this case
@@ -4884,6 +5056,14 @@
     };
     const getContainerWidth = (length) => (length < 5 ? 'w-72' : 'w-52');
 
+    const STEPS_BLOCK_STYLE = {
+        description: 'text-white/80 text-l font-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
+        iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
+        iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
+        iconConnector: 'bg-white group-data-primary:bg-secondary-light',
+        dot: 'bg-white/80 group-data-primary:bg-secondary-text',
+    };
+
     const getLineOpacity = (showLines) => (showLines ? '' : 'opacity-0');
     const getPaddingX = (steps) => (steps < 5 ? 'px-24' : 'px-16');
     const StepsBlock = JSX(({ className = '', showLines = true, steps = [], buttons, size = 'normal', version = 'primary', stepVersion = 'gray', title, description, ...rest }) => {
@@ -4990,6 +5170,8 @@
     const COLS_LENGTH_FOR_SCROLL = 2;
     const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
+    const headlineAlign = 'text-center';
+
     const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(Button, { className: className, appendRight: jsx(Img, { image: { icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }, width: "20", height: "20" }), text: isOpen ? 'Скрыть' : 'Показать', version: "gray", onClick: onClick })));
 
     const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
@@ -5139,8 +5321,6 @@
                         })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" })) : null] }));
     });
 
-    const headlineAlign = 'text-center';
-
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
         const colData = columns?.map(({ data }) => data) || [];
         const rowData = rowHeaders?.map((header, i) => ({
@@ -5483,7 +5663,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.14.17";
+    const packageVersion = "0.14.19";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;