@redneckz/wildless-cms-uni-blocks 0.6.42 → 0.6.44

package/bundle/bundle.umd.js

@@ -85,6 +85,11 @@
         get CDN() {
             return this._.CDN;
         }
+        get BASE_PATH() {
+            return this._.BASE_PATH && !this._.BASE_PATH.endsWith('/')
+                ? `${this._.BASE_PATH}/`
+                : this._.BASE_PATH;
+        }
         get YANDEX_MAP_API_KEY() {
             return this._.YANDEX_MAP_API_KEY;
         }
@@ -175,7 +180,7 @@
         }
         async function auth() {
             try {
-                const userData = JSON.parse(globalThis.localStorage.getItem(STORAGE_KEY) || '');
+                const userData = JSON.parse(globalThis.localStorage?.getItem(STORAGE_KEY) || '');
                 if (userData?.token) {
                     return userData;
                 }
@@ -195,7 +200,7 @@
                     }),
                 });
                 const { token, name } = await response.json();
-                globalThis.localStorage.setItem(STORAGE_KEY, JSON.stringify({ token, name }));
+                globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify({ token, name }));
                 return { token, name };
             }
             catch (e) {
@@ -519,11 +524,7 @@
         return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
     });
 
-    const Text = JSX((props) => {
-        const { size = '', color = '', align = '', font = '', children } = props;
-        const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
-        return jsx("span", { className: textClasses, children: children });
-    });
+    const Text = JSX(({ size, color, align, font, children }) => (jsx("span", { className: ['font-sans', size, color, align, font].filter(Boolean).join(' '), children: children })));
 
     const icons$1 = ['PlusIcon', 'MinusIcon'];
     const AccordionItem = JSX(({ className = '', label = '', isExpanded, ...rest }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton$1, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
@@ -559,9 +560,9 @@
     const BenefitsBlock = JSX(({ className = '', title, benefitList, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`, title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(version)) })) : null] })));
     const renderStep = (version) => (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$4(description, version)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$5(description, version)] })] }, String(i)));
     };
-    const renderDescription$4 = (description, version) => {
+    const renderDescription$5 = (description, version) => {
         const benefitType = description?.benefitType || null;
         return description && benefitType ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`, children: benefitType === 'list'
                 ? renderListBenefit(description)
@@ -589,6 +590,13 @@
         const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
         return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
     };
+    const getPathname = (href) => {
+        if (!href || !isURL(href)) {
+            return undefined;
+        }
+        const url = new URL(href);
+        return url.pathname;
+    };
     const getHash = (href) => {
         if (!href || !isURL(href)) {
             return undefined;
@@ -603,6 +611,7 @@
         isURL: isURL,
         withoutQuery: withoutQuery,
         getOrigin: getOrigin,
+        getPathname: getPathname,
         getHash: getHash,
         isHash: isHash
     });
@@ -654,10 +663,7 @@
                 'aria-label': props.text,
                 onClick: handlerDecorator((ev) => {
                     props.onClick && props.onClick(ev);
-                    const isLocalHref = href && !isURL(href);
-                    const isLocalTarget = !props.target || props.target === '_self';
-                    if (!isLocalHref || !isLocalTarget) {
-                        // Default handle
+                    if (isRemoteHref(href, props.target)) {
                         return;
                     }
                     ev?.preventDefault();
@@ -665,12 +671,13 @@
                         blockRouter.goto(href);
                     }
                     else {
-                        router.push(href);
+                        href && router.push(href);
                     }
                 }, props),
             };
         };
     }
+    const isRemoteHref = (href, target) => isURL(href) || (target && target !== '_self') || href?.startsWith('/');
 
     const buttonStyleMap = {
         primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
@@ -1676,11 +1683,11 @@
                 BORDER_STYLE,
                 AlignText[align],
                 VersionStyleMap[version],
-            ].join(' '), role: "listitem", children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$4(icon, version), renderCardTitle$1(headlineSmallVersion, title), renderDescription$3(description, title), renderItems$2(items, isDotted, version), renderAdditionalDescription$2(additionalDescription, version)] }), renderButton({ button, buttonClassName: 'mt-6' })] }));
+            ].join(' '), role: "listitem", children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$4(icon, version), renderCardTitle$1(headlineSmallVersion, title), renderDescription$4(description, title), renderItems$2(items, isDotted, version), renderAdditionalDescription$2(additionalDescription, version)] }), renderButton({ button, buttonClassName: 'mt-6' })] }));
     });
     const renderImage$4 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
     const renderCardTitle$1 = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
-    const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
+    const renderDescription$4 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
     const renderAdditionalDescription$2 = (additionalDescription, version = 'primary') => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: descriptionStyleMap[version], children: additionalDescription }) })) : null;
     const renderItems$2 = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version })) : null;
 
@@ -2050,12 +2057,12 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const renderTitle$2 = (title, bgColor, className) => {
+    const renderTitle$3 = (title, bgColor, className) => {
         return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
     };
 
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$3(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$2(children || logo?.title, bgColor) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$3(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$3(children || logo?.title, bgColor) : null] }));
     });
 
     const useSearch = () => {
@@ -2203,7 +2210,7 @@
         mini: 276,
     };
 
-    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isFullWidth = true, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$2(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription, version)] }), button?.text
+    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isFullWidth = true, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$2(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription, version)] }), button?.text
                 ? renderButton({
                     button,
                     buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
@@ -2211,7 +2218,7 @@
                 : null] })));
     const renderImage$2 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
-    const renderDescription$2 = (description, title) => description ? jsx("div", { className: `text-l ${title ? 'mt-2' : ''}`, children: description }) : null;
+    const renderDescription$3 = (description, title) => description ? jsx("div", { className: `text-l ${title ? 'mt-2' : ''}`, children: description }) : null;
     const renderAdditionalDescription$1 = (additionalDescription, version) => additionalDescription ? (jsx("div", { className: `text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`, children: additionalDescription })) : null;
     const renderItems$1 = (items, isDotted, version = 'primary') => (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
 
@@ -2252,12 +2259,17 @@
     const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
     const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
-    const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
+    const checkIsHrefSameOrigin = (href, router) => [getOrigin(href), getOrigin(router.href)].every((link, _, arr) => Boolean(link) && link === arr[0]);
 
-    const isHrefActive = (href, router, cmp = (targetHref, baseHref) => baseHref.startsWith(targetHref)) => {
-        return cmp(withoutQuery(href), withoutQuery(isURL(href) ? router.href : router.pathname));
+    const normalizeURLPath = (href) => {
+        if (isURL(href) || href?.startsWith('/')) {
+            return href;
+        }
+        return `${projectSettings.BASE_PATH || ''}${href}`;
     };
 
+    const isHrefActive = (href, router, cmp = (targetHref, baseHref) => baseHref.startsWith(targetHref)) => cmp(withoutQuery(normalizeURLPath(href)), withoutQuery(isURL(href) ? router.href : getPathname(router.href)));
+
     const isSubItemActive = (router) => (subItem) => isHrefActive(subItem.href, router);
 
     const isTopItemActive = (router) => (topItem) => topItem.items?.some(isSubItemActive(router)) ||
@@ -2307,11 +2319,8 @@
     }
 
     const REGION_URL = '/api/v1/region';
-    const localStorageLocation = globalThis?.localStorage.getItem('location');
-    const currentLocation = localStorageLocation
-        ? JSON.parse(localStorageLocation)
-        : null;
     function useLocation(defaultLocation) {
+        const currentLocation = getLocalStorageLocation();
         const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
         const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
         useEffect(() => {
@@ -2320,11 +2329,20 @@
                 : data || { name: defaultLocation });
         }, [data]);
         const onChangeLocation = useCallback((region) => {
-            globalThis?.localStorage.setItem('location', JSON.stringify({ manual: true, region }));
+            globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
             setLocation(region);
         }, [setLocation]);
         return [location, onChangeLocation];
     }
+    const getLocalStorageLocation = () => {
+        const localStorageLocation = globalThis.localStorage?.getItem('location');
+        try {
+            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
+        }
+        catch (_) {
+            return null;
+        }
+    };
 
     const REGIONS_URL$1 = '/api/v1/regions';
     function useRegions() {
@@ -2484,15 +2502,10 @@
     const Header = JSX(({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
         const router = useRouter();
         const { topItems, logo, defaultLocation, foreignOffices, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
-        const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
+        const activeTopItem = topItems?.find(isTopItemActive(router));
         const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, "aria-label": _.text, bgColor: bgColor, ..._ }, String(i))));
         return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-px ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
-    const getActiveItem = (topItems, router) => {
-        const [firstPortal] = topItems || [];
-        // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
-        return topItems?.find(isTopItemActive(router)) || firstPortal;
-    };
 
     const ImgBlock = JSX((props) => {
         const { className, image, ...rest } = props;
@@ -2675,12 +2688,12 @@
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
         ${className}`, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap mb-7 w-full
-                  ${textColorClass} ${AlignText[alignTitle]}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttonsWithClass, className: "flex gap-4 mt-8", ...rest })) : null, children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 items-center mb-3", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(version, items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
+                  ${textColorClass} ${AlignText[alignTitle]}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttonsWithClass, className: "flex gap-4 mt-8", ...rest })) : null, children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 items-center mb-3", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(version, items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
     const renderList$1 = (version, items) => {
         return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0", version: version })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
-    const renderDescription$1 = (description) => description ? jsx("p", { className: "text-xl-light mb-5 pt-0.5", children: description }) : null;
+    const renderDescription$2 = (description) => description ? jsx("p", { className: "text-xl-light mb-5 pt-0.5", children: description }) : null;
 
     function renderClusterer(yandexMaps, map, points) {
         map.geoObjects.removeAll();
@@ -3279,26 +3292,53 @@
       `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text  ${btnDescClassName}`, children: slide?.description })] }) }, String(i)));
     }
 
-    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, isImageOnRightSide = true, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `overflow-hidden font-sans p-9 box-border relative min-h-[364px]
-          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`, ...rest, children: [jsxs("div", { className: `flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`, children: [jsx(Headline, { className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left", ...rest }), renderBenefits(benefits, version, image), additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null, buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "mt-5 gap-4 z-10 text-l" })) : null] }), renderImage$1(image, isImageOnRightSide)] })));
-    function renderBenefits(benefits, version, image) {
-        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-        const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
-        ${BENEFITS_WIDTH}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
-    }
-    const renderBenefit = (version = 'primary') => (benefit, i) => {
-        const { label = '', description = '' } = benefit;
-        return [
-            jsx("div", { className: "text-h6", children: label }, `label-${i}`),
-            jsx("div", { className: `text-m-light ${VersionAdditionalStyleMap[version]}`, children: description }, `desc-${i}`),
-        ];
+    const DESCRIPTION_STYLE_MAP = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white',
     };
-    function renderAdditionalDescription(additionalDescription, image) {
+    function renderAdditionalDescription(additionalDescription, image, version = 'primary') {
+        if (!additionalDescription) {
+            return null;
+        }
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-        const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`, children: additionalDescription }));
+        const descriptionWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+        return (jsx("div", { className: `mt-2.5 z-10 ${descriptionWidth}`, children: jsx(Paragraph, { size: "text-m", font: "font-light", color: DESCRIPTION_STYLE_MAP[version], children: additionalDescription }) }));
     }
+
+    const MarkdownText = JSX((props) => {
+        const { md = '' } = props;
+        return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html: md } });
+    });
+
+    function assertUnreachable(x) {
+        throw new Error(x);
+    }
+
+    const LABEL_STYLE_MAP = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white',
+    };
+    const renderBenefit = (version = 'primary') => 
+    // Linter doesn't understand that switch processes all cases
+    // eslint-disable-next-line consistent-return
+    (benefit, i) => {
+        const { type } = benefit;
+        if (!(type === 'default' || type === 'md')) {
+            return null;
+        }
+        switch (type) {
+            case 'default':
+                return [
+                    jsx(Text, { size: "text-h6", children: benefit.label }, `label-${i}`),
+                    jsx(Text, { size: "text-m-light", color: LABEL_STYLE_MAP[version], children: benefit.description }, `desc-${i}`),
+                ];
+            case 'md':
+                return jsx(MarkdownText, { md: benefit.md });
+            default:
+                assertUnreachable(benefit);
+        }
+    };
+
     function renderImage$1(image, isImageOnRightSide) {
         if (!image?.src) {
             return null;
@@ -3306,6 +3346,18 @@
         return (jsx(ImgInner, { className: `absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`, image: image }));
     }
 
+    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, isImageOnRightSide = true, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `overflow-hidden font-sans p-9 box-border relative min-h-[364px]
+          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`, ...rest, children: [jsxs("div", { className: `flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`, children: [jsx(Headline, { className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left", ...rest }), renderBenefits(benefits, version, image), renderAdditionalDescription(additionalDescription, image), buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "mt-5 gap-4 z-10 text-l" })) : null] }), renderImage$1(image, isImageOnRightSide)] })));
+    function renderBenefits(benefits, version, image) {
+        if (!benefits.length) {
+            return null;
+        }
+        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+        const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
+        ${benefitsWidth}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
+    }
+
     const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "left", as: "h2", ...rest })) : null, buttons: buttons?.length ? jsx(ButtonSection, { buttons: buttons, className: "flex gap-3" }) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
     function formatDate(date) {
         const dateObj = new Date(date);
@@ -3564,10 +3616,6 @@
     const renderStepIcon = (styleMap, version) => ({ icon }, i) => (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
             ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
 
-    function assertUnreachable(x) {
-        throw new Error(x);
-    }
-
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
     const ACTIVE_LINK_CLASSES = 'bg-primary-main';
     const INACTIVE_LINK_CLASSES = 'group bg-white';
@@ -3591,9 +3639,9 @@
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle$1(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle$2(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
     };
-    const renderTitle$1 = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
+    const renderTitle$2 = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
     const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
 
     const renderTab = ({ page, currentTab, showCounter, onClick }) => 
@@ -3802,12 +3850,12 @@
         });
         const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
-        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-12 overflow-hidden text-primary-text relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle({ title, description }), renderDescription(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
+        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-12 overflow-hidden text-primary-text relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle$1({ title, description }), renderDescription$1(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
     });
-    function renderTitle({ title, description }) {
+    function renderTitle$1({ title, description }) {
         return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
     }
-    function renderDescription(description) {
+    function renderDescription$1(description) {
         return description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null;
     }
     const Wrapper = JSX(({ children, controls }) => {
@@ -3819,36 +3867,19 @@
                         })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
-    const textBlockStyleMaps = {
-        primary: {
-            background: 'bg-white',
-            icon: 'bg-primary-main text-white',
-            title: 'text-primary-text',
-            description: 'text-secondary-text',
-        },
-        secondary: {
-            background: 'bg-primary-main',
-            icon: 'bg-white text-primary-main',
-            title: 'text-white',
-            description: 'text-white',
-        },
-        'secondary-light': {
-            background: 'bg-primary-main/10',
-            icon: 'bg-primary-main text-white',
-            title: 'text-primary-text',
-            description: 'text-secondary-text',
-        },
+    const textBlockBack = {
+        primary: 'bg-white',
+        secondary: 'bg-primary-main',
+        'secondary-light': 'bg-primary-main/10',
     };
-    const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, ...rest }) => {
-        const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-        return (jsxs(BlockWrapper, { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, ...rest, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `text-l font-medium mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-s ${textBlockStyleMap.description}`, children: description })) : null] })] }));
+    const TextBlock = JSX(({ className = '', title, description, blockVersion = 'primary', iconVersion, image, ...rest }) => {
+        const isSecondaryBlock = blockVersion === 'secondary';
+        return (jsxs(BlockWrapper, { className: `px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`, ...rest, children: [iconVersion === 'small' ? (jsx("div", { className: "mt-1", children: renderIcon(isSecondaryBlock) })) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { children: [title ? renderTitle(title, isSecondaryBlock) : null, description ? (jsx("div", { className: "mt-1", children: renderDescription(description, isSecondaryBlock) })) : null] })] }));
     });
-    function renderIcon(className) {
-        return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${className}`, children: "i" }) }));
-    }
-    function renderImage(image) {
-        return image?.src ? jsx(ImgInner, { className: "pt-0.5 pr-3", image: image }) : null;
-    }
+    const renderIcon = (isSecondaryBlock) => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${isSecondaryBlock ? 'bg-white text-primary-main' : 'bg-primary-main text-white'}`, children: "i" }));
+    const renderImage = (image) => (image?.src ? jsx(ImgInner, { image: image }) : null);
+    const renderTitle = (title, isSecondaryBlock) => (jsx(Text, { size: "text-l", font: "font-medium", color: isSecondaryBlock ? 'text-white' : 'text-primary-text', children: title }));
+    const renderDescription = (description, isSecondaryBlock) => (jsx(Paragraph, { size: "text-s", color: isSecondaryBlock ? 'text-white' : 'text-secondary-text', children: description }));
 
     const Tags = JSX((props) => {
         const { tags, className = '' } = props;
@@ -4093,7 +4124,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.6.42";
+    const packageVersion = "0.6.44";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;