@redneckz/wildless-cms-uni-blocks 0.13.4 → 0.13.6

package/mobile/bundle/bundle.umd.js

@@ -693,7 +693,7 @@
         };
     };
 
-    const Input = JSX(({ key, className = '', inputClassName = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, }) => {
+    const Input = JSX(({ key, className = '', inputClassName = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, autoFocus = false, }) => {
         const handleChange = useCallback((e) => {
             onChange && onChange(e.target?.value || '');
         }, [onChange]);
@@ -701,7 +701,7 @@
         const validStyle = valid
             ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
             : 'border-error';
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-m', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-m', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern, autoFocus: autoFocus }, key)] }), children] }));
     });
 
     const InputControl = JSX(({ className, label, value = '', error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(Input, { type: "text", "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
@@ -725,7 +725,7 @@
         return (jsx(Input, { onChange: handleChange, onFocus: (event) => handleChange(event?.target?.value || ''), ...inputProps, children: children }));
     });
 
-    const PhoneInputControl = JSX(({ className, label, value, error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(PhoneInput, { "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
+    const PhoneInputControl = JSX(({ className, label, value, error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(PhoneInput, { "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur, placeholder: "+7 (___) ___-__-__" }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
 
     const pattern = (regexp) => validator((_) => typeof _ === 'string' && regexp.test(_));
 
@@ -784,6 +784,70 @@
         return targetRef;
     }
 
+    const JARO_WINKLER_P = 0.1;
+    const JARO_WINKLER_MAX_L = 4;
+    const jaroWinklerDistance = (s1) => (s2) => {
+        if (s1 === s2) {
+            return 1;
+        }
+        if (!s1 || !s2) {
+            return 0;
+        }
+        const { m, s1Matches, s2Matches } = computeM(s1, s2);
+        if (m === 0) {
+            return 0;
+        }
+        const t = computeT(s1, s2, { s1Matches, s2Matches });
+        const jaroWeight = (m / s1.length + m / s2.length + (m - t / 2) / m) / 3;
+        const winklerWeight = jaroWeight > 0.7 ? computePrefixL(s1, s2) * JARO_WINKLER_P : 0;
+        return jaroWeight + winklerWeight * (1 - jaroWeight);
+    };
+    function computeM(s1, s2) {
+        const range = Math.max(0, Math.floor(Math.max(s1.length, s2.length) / 2) - 1);
+        const s1Matches = new Array(s1.length);
+        const s2Matches = new Array(s2.length);
+        let m = 0;
+        for (let i = 0; i < s1.length; i++) {
+            const low = Math.max(0, i - range);
+            const high = Math.min(i + range, s2.length - 1);
+            for (let j = low; j <= high; j++) {
+                if (s1Matches[i] || s2Matches[j] || s1[i] !== s2[j]) {
+                    continue;
+                }
+                m++;
+                s1Matches[i] = true;
+                s2Matches[j] = true;
+            }
+        }
+        return { m, s1Matches, s2Matches };
+    }
+    function computeT(s1, s2, { s1Matches, s2Matches }) {
+        let t = 0;
+        for (let i = 0, k = 0; i < s1.length; i++) {
+            if (!s1Matches[i]) {
+                continue;
+            }
+            let j = k;
+            for (; j < s2.length; j++) {
+                if (s2Matches[j]) {
+                    k = j + 1;
+                    break;
+                }
+            }
+            if (s1[i] !== s2[j]) {
+                t++;
+            }
+        }
+        return t;
+    }
+    function computePrefixL(s1, s2) {
+        let prefixL = 0;
+        while (s1[prefixL] === s2[prefixL] && prefixL < JARO_WINKLER_MAX_L) {
+            prefixL++;
+        }
+        return prefixL;
+    }
+
     const svgUseStyleMap = {
         normal: '',
         color: 'text-primary-main',
@@ -804,16 +868,28 @@
     const getSvgSize = (width) => (width ? '' : 'w-full h-full');
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
-    const Select = JSX(({ className = '', label, options = [], value, valid = true, isBorder = true, placeholder = '', onChange, }) => {
+    const Select = JSX(({ className = '', label, options = [], value, valid = true, isBorder = true, placeholder = '', onChange, isSearch = false, }) => {
         const [isOpen, { setFalse: close, toggle }] = useBool();
-        const wrapperRef = useOutsideClick(close);
-        const handleChange = useCallback((option) => {
+        const [searchValue, setSearchValue] = useState('');
+        const reset = useCallback(() => {
             close();
+            setSearchValue('');
+        }, []);
+        const wrapperRef = useOutsideClick(reset);
+        const handleChange = useCallback((option) => {
+            reset();
             onChange && onChange(option);
         }, [onChange]);
         const isSelected = (option) => option.key === value?.key;
-        return (jsxs("div", { className: className, ref: wrapperRef, children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null, jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer', getBorderStyle(isBorder, valid)), onClick: toggle, children: [jsx("p", { className: "p-m pr-3xl h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" })] }), options?.length ? (jsx("div", { className: style('h-0', isOpen ? '' : 'overflow-hidden'), children: jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: options.map(renderOption(handleChange, isOpen, isSelected)) }) })) : null] })] }));
+        return (jsxs("div", { className: className, ref: wrapperRef, children: [renderLabel(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10', getBorderStyle(isBorder, valid)), onClick: toggle, children: [jsx("p", { className: "p-m pr-3xl h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" })] }), isSearch ? renderSearch(isOpen, searchValue, setSearchValue) : null, options?.length ? (jsx("div", { className: style('h-0', isOpen ? '' : 'overflow-hidden'), children: jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: getFilteredOptions(options, searchValue).map(renderOption(handleChange, isOpen, isSelected)) }) })) : 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 getFilteredOptions = (options, searchValue) => {
+        return searchValue
+            ? options.filter((_) => jaroWinklerDistance(_.text?.toLowerCase())(searchValue.toLowerCase()) >= 0.6)
+            : options;
+    };
+    const renderSearch = (isOpen, searchValue, setSearchValue) => isOpen ? (jsx("div", { className: style('absolute top-0 w-full h-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: searchValue, onChange: setSearchValue }) })) : null;
     const renderOption = (handleChange, isOpen, isSelected) => (option, i) => (jsxs("div", { onClick: () => {
             handleChange(option);
         }, className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", 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', isSelected(option) && isOpen ? '' : 'hidden') })] }, String(i)));
@@ -875,7 +951,7 @@
 
     const renderBusinessCardDataOrganization = (field) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-lg", children: [jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })] }), jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) })] })] }));
 
-    const renderRegion = ({ regions, field }) => (jsx(SelectControl, { className: "w-full", label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }));
+    const renderRegion = ({ regions, field }) => (jsx(SelectControl, { className: "w-full", label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }));
 
     const initialFormState$3 = {
         name: '',
@@ -927,7 +1003,7 @@
     const MAX_CREDIT_TERM = 180;
     const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];
 
-    const renderCreditDataOrganization = (field) => (jsxs("div", { className: "pb-2xs border-b border-b-main-divider sm:flex sm:justify-between sm:gap-lg sm:border-none sm:pb-0", children: [jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('fullName') }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...withValidator(field('annualRevenue'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...field('mail') })] })] }));
+    const renderCreditDataOrganization = (field) => (jsxs("div", { className: "pb-2xs border-b border-b-main-divider sm:flex sm:justify-between sm:gap-lg sm:border-none sm:pb-0", children: [jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...withValidator(field('annualRevenue'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...field('mail') })] })] }));
 
     const useNormalizedInput = (props, { normalize, format }) => {
         const { value, onFocus, onBlur, onChange } = props;
@@ -990,9 +1066,9 @@
     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)))) }));
 
-    const renderCreditParameters = (field) => (jsxs("div", { className: "border-b border-b-main-divider sm:flex sm:justify-between gap-lg sm:border-none", children: [jsxs("div", { className: "sm:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u20BD" }) }), jsx(InputRange, { items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field('amount') })] }), jsxs("div", { className: "sm:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u043C\u0435\u0441\u044F\u0446\u0435\u0432" }) }), jsx(InputRange, { items: ITEMS_CREDIT_TERM, min: MIN_CREDIT_TERM, max: MAX_CREDIT_TERM, ...field('term') })] })] }));
+    const renderCreditParameters = (field) => (jsxs("div", { className: "border-b border-b-main-divider sm:flex sm:justify-between gap-lg sm:border-none", children: [jsxs("div", { className: "sm:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0443\u043C\u043C\u0430, \u20BD" }) }), jsx(InputRange, { items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field('amount') })] }), jsxs("div", { className: "sm:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A, \u043C\u0435\u0441\u044F\u0446\u0435\u0432" }) }), jsx(InputRange, { items: ITEMS_CREDIT_TERM, min: MIN_CREDIT_TERM, max: MAX_CREDIT_TERM, ...field('term') })] })] }));
 
-    const renderRegionDepartment = ({ regions, branches, field }) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-m sm:mb-2xl sm:border-none sm:pb-0", children: [jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: branches.map(({ branchCode = '', address = '' }) => ({
+    const renderRegionDepartment = ({ regions, branches, field }) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-m sm:mb-2xl sm:border-none sm:pb-0", children: [jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: branches.map(({ branchCode = '', address = '' }) => ({
                         key: branchCode,
                         text: address,
                     })), ...withValidator(field('department'), defaultValidator) }) })] }));
@@ -1008,6 +1084,7 @@
         annualRevenue: '',
     };
     const creditValidator = objectValidator({
+        fullName: defaultValidator,
         annualRevenue: defaultValidator,
         inn: innValidator,
         name: nameValidator,
@@ -1034,7 +1111,7 @@
         const [formState, { field, ...formProps }] = useForm(initialFormState$2, handleSubmit);
         const regions = useGetRegions();
         const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
-        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u043A\u0440\u0435\u0434\u0438\u0442\u0430", className: "sm:text-center" }), renderCreditParameters(field), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center" }), renderCreditDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0431\u0430\u043D\u043A\u0430", className: "sm:text-center" }), renderRegionDepartment({ regions, branches, field }), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
+        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B", className: "sm:text-center" }), renderCreditParameters(field), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center" }), renderCreditDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0431\u0430\u043D\u043A\u0430", className: "sm:text-center" }), renderRegionDepartment({ regions, branches, field }), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
     });
 
     const initialFormState$1 = {
@@ -1275,7 +1352,7 @@
         },
         XS: {
             title: { headingType: 'h5', as: 'h2' },
-            descriptionSize: 'text-l',
+            descriptionSize: 'text-m',
             descriptionWeight: 'font-light',
             descriptionStyle: 'mt-xs',
         },
@@ -1491,7 +1568,15 @@
     const DEFAULT_ICON_W = 24;
     const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
 
-    const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) })));
+    const alignStyleMap = {
+        start: 'justify-start',
+        center: 'justify-center',
+        end: 'justify-end',
+    };
+    const ButtonsBlock = JSX(({ buttons, className = '', align, ...rest }) => {
+        const alignStyle = align ? style('flex', alignStyleMap[align]) : '';
+        return (jsx(BlockWrapper, { className: style('!bg-transparent', alignStyle, className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) }));
+    });
 
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
@@ -2383,13 +2468,21 @@
     const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
 
     const cardBaseStyle = 'relative h-full';
-    const renderCarouselCards = ({ noCardBorder, activeIndex, ...rest }) => {
+    const CARD_SIZE_MAP = {
+        normal: 'sm:min-w-96',
+        big: 'sm:min-w-[515px]',
+    };
+    const renderCarouselCards = ({ noCardBorder, activeIndex, cardSize = 'normal', ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
         return renderChildren({
             ...rest,
             renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock(block, options, {
-                        className: cardStyle(block, { someCardsHighlighted, showBorder: !noCardBorder }),
+                        className: cardStyle(block, {
+                            someCardsHighlighted,
+                            showBorder: !noCardBorder,
+                            cardSize,
+                        }),
                         blockIndex,
                         isActive: blockIndex === activeIndex,
                     }), isCardHighlighted(block)
@@ -2398,11 +2491,12 @@
         });
     };
     const cardWrapperStyle = (_, { someCardsHighlighted }) => style(cardBaseStyle, someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'));
-    const cardStyle = (_, { someCardsHighlighted, showBorder }) => style(cardBaseStyle, 'min-w-80 sm:min-w-96', someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), showBorder &&
+    const cardStyle = (_, { someCardsHighlighted, showBorder, cardSize = 'normal', }) => style(cardBaseStyle, 'min-w-80', CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), showBorder &&
         'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider');
     const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
 
-    const Carousel = JSX(({ className, itemCount, visibleItemCount = 0, noCardBorder, isAlignCenter, showDots, arrowsPadded = true, isGap = true, ...rest }) => {
+    const Carousel = JSX(({ className, itemCount, visibleItemCount = 0, noCardBorder, isAlignCenter, showDots, arrowsPadded = true, isGap = true, cardSize = 'normal', ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
         const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
@@ -2413,7 +2507,7 @@
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         // TODO Remove
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderCarouselCards({ noCardBorder, activeIndex, ...rest }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })) : null] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -2464,15 +2558,18 @@
         L: 'w-1.5 h-1.5 mr-m',
         M: 'w-1.5 h-1.5 mr-s',
         S: 'w-1 h-1 mr-xs',
+        XS: 'w-1 h-1 mr-xs',
     };
     const ListItem = JSX(({ className, isDotted = true, children, size = 'M' }) => (jsxs("div", { className: style('font-sans flex', className), role: "listitem", children: [isDotted ? (jsx("div", { className: "shrink-0", children: jsx("div", { className: style('align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white', DOT_SIZE_MAP[size]) }) })) : null, jsx("span", { children: children })] })));
 
     const TEXT_SIZE_MAP = {
+        XS: 'text-m font-light',
         S: 'text-l font-light',
         M: 'text-h6',
         L: 'text-h5',
     };
     const ITEM_INDENT_MAP = {
+        XS: 'ml-2xs',
         S: 'ml-xs',
         M: 'ml-s',
         L: 'ml-m',
@@ -2501,7 +2598,7 @@
     const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
     const renderImageContainer = (image, { className, imageAlign }) => {
         //TODO Спорное решение
-        const fullWidth = image?.props?.image.size?.width > 400;
+        const fullWidth = image?.props?.image?.size?.width > 400;
         return image ? (jsx("div", { className: style('flex-shrink-0', fullWidth ? 'w-full @xl:w-auto' : '', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
     };
 
@@ -2561,7 +2658,7 @@
                 })) }) }) })));
 
     const buttonSizeStyles = {
-        default: 'w-24 h-14',
+        default: 'w-14 h-14',
         stretched: 'flex-1 h-14',
     };
 
@@ -2615,7 +2712,7 @@
     const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "flex flex-col sm:flex-col-reverse gap-xs", children: [children ? (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })) : null, jsx("div", { className: style('flex gap-xs', className), children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, ..._ }, String(index)))) })] })));
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative group-data-gray:bg-main-divider/50 space-y-m', className), defaultPadding: "p-6xl", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-xs", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('relative group-data-gray:bg-main-divider/50', className), defaultPadding: "p-3xl", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, className: 'space-y-lg', children: [jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-xs", items: items, listItemSize: "XS" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null] }) }));
     });
     const renderIcon$1 = (icon) => icon?.src || icon?.icon ? (jsx("div", { children: jsx(Img, { image: icon }) })) : null;
 
@@ -3863,19 +3960,16 @@
         return [list, { setList, push, pop, remove, clear }];
     }
 
-    const DialogManager = JSX(() => {
+    const useDialogsList = ({ onCloseAll, onClose, } = {}) => {
         const [dialogs, { push, pop, clear }] = useList();
         const closeAll = useCallback(() => {
-            for (const _ of dialogs) {
-                _.onClose && _.onClose();
-            }
+            onCloseAll && onCloseAll(dialogs);
             clear();
-        }, [dialogs]);
+        }, [dialogs, onCloseAll]);
         const close = useCallback(() => {
-            const _ = dialogs[dialogs.length - 1];
-            _?.onClose && _.onClose();
+            onClose && onClose(dialogs[dialogs.length - 1]);
             pop();
-        }, [dialogs]);
+        }, [dialogs, onClose]);
         useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
             switch (action.type) {
                 case 'open':
@@ -3893,6 +3987,20 @@
                     assertUnreachable(action);
             }
         }), [closeAll, close]);
+        return dialogs;
+    };
+
+    const DialogManager = JSX(() => {
+        const handleCloseAll = useCallback((dialogs) => {
+            for (const _ of dialogs) {
+                _?.onClose && _.onClose();
+            }
+        }, []);
+        const handleClose = useCallback((_) => {
+            _?.onClose && _.onClose();
+        }, []);
+        const dialogs = useDialogsList({ onCloseAll: handleCloseAll, onClose: handleClose });
+        const { close } = useDialogManager();
         useEffect(() => {
             const handleEscape = ({ key }) => {
                 if (key === 'Escape') {
@@ -3976,7 +4084,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.13.4";
+    const packageVersion = "0.13.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;