@redneckz/wildless-cms-uni-blocks 0.13.22 → 0.13.24

package/bundle/bundle.umd.js

@@ -606,7 +606,7 @@
         primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
         secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
         white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
-        link: '',
+        link: 'text-primary-main',
         transparent: '',
         gray: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
         '': '',
@@ -626,7 +626,7 @@
         primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
-        link: '',
+        link: 'text-primary-main',
         transparent: '',
         gray: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         '': '',
@@ -1327,12 +1327,19 @@
     const renderButtonsSection = (buttons, { className, buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-m', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
-        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
-        const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
-        return text || icon?.icon ? (jsx(Button, { className: style('basis-full sm:basis-auto', buttonClassName), appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
+        const iconVersion = getIconVersion(icon, version);
+        const iconRightVersion = getIconVersion(iconRight, version);
+        return text || icon?.icon ? (jsx(Button, { className: style('basis-full sm:basis-auto', buttonClassName), appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion: iconRightVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
     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 getIconVersion = (icon, version = 'secondary') => {
+        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
+        return icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
+    };
+    const renderButtonIcon = (icon) => {
+        console.log(icon);
+        return icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
+    };
 
     const headlineVersionStyles = {
         XXL: {
@@ -2101,7 +2108,6 @@
             paramsViewSettings,
         });
         const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], sourceBookLimitParams, rateRows);
-        const { minSumOld, maxSumOld } = getLimitRangeByKeys(['minSumOld', 'maxSumOld'], sourceBookLimitParams, rateRows);
         const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], sourceBookLimitParams, rateRows);
         const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
             rateRows,
@@ -2120,8 +2126,6 @@
             ...userInputParams,
             minSum,
             maxSum,
-            minSumOld,
-            maxSumOld,
             minMonths,
             maxMonths,
             moneyValue,
@@ -2545,7 +2549,9 @@
         '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, arrowsPadded = true, isGap = true, cardSize = 'normal', ...rest }) => {
+    const VISIBLE_ITEM_COUNT = 1;
+
+    const Carousel = JSX(({ className, itemCount, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, isAlignCenter, arrowsPadded = true, isGap = true, cardSize = 'normal', ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
         const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
@@ -2618,8 +2624,8 @@
         center: '@lg:self-center',
         end: '@lg:self-end',
     };
-    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-col @lg:flex-row justify-around @lg: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: "justify-center 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',
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, isImageAlwaysOnRight = false, 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: style('grow relative flex justify-around @lg:justify-between items-stretch gap-3xl', isImageAlwaysOnRight ? 'flex-row' : 'flex-col @lg:flex-row'), 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: "justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, {
+                        className: isImageAlwaysOnRight ? '' : '-order-1 @xl:order-1',
                         imageAlign,
                     })] })] })));
     const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('md:flex-shrink-0 self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
@@ -2697,9 +2703,11 @@
             ? 'bg-secondary-light text-primary-main'
             : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
+    const getHtmlText = (html) => html.replace(/<\/?[^>]+\/?>/g, '').trim();
+
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
-        return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
+        return getHtmlText(__html) ? (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } })) : null;
     });
 
     const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
@@ -2729,11 +2737,11 @@
     const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
     const renderTag = (tag, key) => (jsx("div", { className: "p-xs border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m", font: "font-light", children: tag }) }, String(key)));
 
-    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle = true, items, isDotted = true, listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
+    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle = true, items, isDotted = true, listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground, isImageAlwaysOnRight, } = {}, children, }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isEmbedded: true }));
         const filteredBenefits = benefits?.filter((_) => _?.type === 'rte' || 'label' in _ || 'description' in _);
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
     });
     const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
     const renderTags = (tags) => (tags?.length ? jsx(Tags, { tags: tags }) : null);
@@ -2744,15 +2752,11 @@
                     description: _.description,
                 })) }) }) })));
 
-    const buttonSizeStyles = {
+    const buttonSizeStyle = {
         default: 'w-14 h-14',
         stretched: 'flex-1 h-14',
     };
 
-    const buttonStylesWithText = (text, buttonSize) => text
-        ? ''
-        : style('py-m group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize]);
-
     const ICONS_MAP = [
         {
             origins: ['t.me', 'telegram.org'],
@@ -2793,16 +2797,18 @@
 
     const findIconByHref = (href) => ICONS_MAP.find(({ origins }) => origins?.some((_) => href?.includes(_))) || {};
 
-    const MediaButton = JSX(({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
-        const { href, version, text = '' } = rest;
+    //TODO: Refactor this.
+    const MediaButton = JSX(({ buttonSize = 'default', icon, ...rest }) => {
+        const { href } = rest;
         const { iconMapped, label } = findIconByHref(href);
         const iconCustom = getFilteredIcon(icon) ?? iconMapped;
-        return (jsx(Button, { className: style(rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonStylesWithText(text, buttonSize)), "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconCustom && !text ? (jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" })) : null }));
+        return (jsx(Button, { className: style('border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', 'py-m group/media flex items-center justify-center box-border', buttonSizeStyle[buttonSize]), "aria-label": label, rel: "noopener noreferrer", target: "_blank", ...rest, children: jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" }) }));
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
     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)))) })] })));
 
+    //TODO: replace SocialMedia with renderButtonSection
     const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...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, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null, children: items.length ? jsx(List, { items: items, listItemSize: "S" }) : null }) }) }));
     });
@@ -3296,7 +3302,7 @@
         transparent: 'text-white',
     };
     const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$1(bgColor, logo?.image, ICON_SIZE), showTitle
-                ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title }) }))
+                ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title || 'Россельхозбанк' }) }))
                 : null] })));
 
     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" }) })));
@@ -3373,17 +3379,14 @@
     const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
 
     const SEARCH_INDEX_FILENAME = 'search.index.json';
-    const DEFAULT_BASE_PATH = ['/'];
-    const useSearch = ({ basePathList = DEFAULT_BASE_PATH, initialQuery = '', wasOpened, }) => {
+    const useSearch = ({ basePathList, initialQuery = '', }) => {
         const [query, setQuery] = useState(initialQuery || '');
         useEffect(() => {
             if (initialQuery !== undefined && initialQuery !== null) {
                 setQuery(initialQuery);
             }
         }, [initialQuery]);
-        const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
-        [wasOpened, basePathList]);
-        const { data } = useAsyncData(key, fetchSearchIndex);
+        const { data } = useAsyncData(basePathList?.length ? basePathList : null, fetchSearchIndex);
         const [result, setResult] = useState(null);
         useDebouncedEffect(() => {
             if (data) {
@@ -3426,7 +3429,6 @@
         const [searchResult, searchInputProps] = useSearch({
             basePathList,
             initialQuery,
-            wasOpened: false,
         });
         const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
         useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
@@ -3507,11 +3509,11 @@
 
     const LEFT_COL_WIDTH = 'w-52';
     const Footer = JSX(({ className, ...rest }) => {
-        const { topItems } = useSitemap(rest.options?.page?.fallback);
-        const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } = useSWRResource(projectSettings.FOOTER || 'footer', {
+        const { topItems, logo } = useSitemap(rest.options?.page?.fallback);
+        const { documents, relatedEnterprises, contacts, socialMedia, mobileApps } = useSWRResource(projectSettings.FOOTER || 'footer', {
             fallback: rest.options?.page?.fallback,
         });
-        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-3xl pb-3xl ", children: [jsx(Logo, { className: LEFT_COL_WIDTH, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-6xl", children: [jsxs("div", { className: `${LEFT_COL_WIDTH} flex flex-col shrink-0 overflow-hidden space-y-xl`, children: [jsx(Contacts, { items: contacts }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "flex-grow", topItems: topItems })] }), jsx(HorizontalNavigation, { className: "mt-xl", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-3xl pb-3xl ", children: [jsx(Logo, { className: LEFT_COL_WIDTH, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-6xl", children: [jsxs("div", { className: style(LEFT_COL_WIDTH, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "flex-grow", topItems: topItems })] }), jsx(HorizontalNavigation, { className: "mt-xl", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
     const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-m', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true }), calendar ? renderCalendar(calendar) : null] })));
@@ -4496,7 +4498,7 @@
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const className = 'w-12 h-12 min-h-12 min-w-12 flex items-center justify-center';
         const text = 'Вернуться назад';
-        return (jsxs("div", { className: "flex items-center gap-s", children: [jsx("div", { className: getRegularButtonClasses({ className, version, rounded: true }), onClick: handleClick, children: jsx(Img, { className: "w-4 h-4", image: {
+        return (jsxs("div", { className: "hidden sm:flex items-center gap-s", children: [jsx("div", { className: getRegularButtonClasses({ className, version, rounded: true }), onClick: handleClick, children: jsx(Img, { className: "w-4 h-4", image: {
                             icon: 'ArrowLeftIcon',
                             iconVersion: iconVersion,
                         } }) }), jsx(Button, { version: "link", text: text, ariaLabel: text, onClick: handleClick })] }));
@@ -4544,10 +4546,19 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
-    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left space-y-s', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between flex-row-reverse", children: [renderIconBlock(icon), title ? jsx(Heading, { headingType: "h4", as: "h3", title: title }) : null] }), jsxs("div", { className: "w-full space-y-m", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text ? renderButtonsSection([button]) : null] })] })));
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left space-y-s', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between flex-row-reverse", children: [renderIconBlock(icon), title ? jsx(Heading, { headingType: "h3", as: "h3", title: title }) : null] }), jsxs("div", { className: "w-full space-y-m", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock({
+                        label: 'Адрес',
+                        data: address,
+                        iconName: 'GeolocationIcon',
+                    }), renderBlock({ label: 'Телефон(факс)', data: telephone, iconName: 'PhoneIcon' }), renderBlock({
+                        label: 'E-mail',
+                        data: email,
+                        iconName: 'MailIcon',
+                        dataColor: 'text-primary-main',
+                    }), button?.text ? renderButtonsSection([button]) : null] })] })));
     const renderIconBlock = (icon) => (jsx("div", { className: 'w-10 h-7 sm:w-24 sm:h-16', children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
-    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider", children: jsx(RichText, { __html: __html }) }));
-    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex gap-m", children: [jsx(Icon, { iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col", children: [jsx(Text, { size: "text-m", font: "font-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
+    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-lg", children: jsx(RichText, { __html: __html }) }));
+    const renderBlock = ({ label, data, iconName, dataColor = '' }) => data ? (jsxs("div", { className: "flex gap-s", children: [jsx(Icon, { iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col gap-2xs", children: [jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: label }), jsx(Text, { size: "text-xl", color: dataColor, children: data })] })] })) : null;
 
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
@@ -5322,7 +5333,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.13.22";
+    const packageVersion = "0.13.24";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;