@redneckz/wildless-cms-uni-blocks 0.10.1 → 0.10.2

package/bundle/bundle.umd.js

@@ -559,16 +559,16 @@
 
     const ButtonInner = JSX((props) => {
         const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
-        return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [aboveText ? jsx("div", { className: "text-xs-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
+        return (jsxs("div", { className: style(getButtonStyle(props), 'flex gap-2'), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [aboveText ? jsx("div", { className: "text-xs-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
     });
     const getButtonStyle = (props) => {
         const { version, aboveText, rounded } = props;
         if (version === 'link') {
             return '';
         }
-        const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
+        const withTextStyle = `${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
         return [
-            'group/btn flex items-center justify-center',
+            'group/btn items-center justify-center',
             isWithText(props) ? withTextStyle : 'h-12 w-12',
             rounded ? 'rounded-full' : '',
         ].join(' ');
@@ -1085,7 +1085,7 @@
         if (!image?.src && !image?.icon) {
             return null;
         }
-        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion || 'normal', name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
+        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
     });
 
     const renderContacts = () => (jsxs("div", { className: "flex", children: [jsxs("a", { className: "flex items-center text-primary-text no-underline mr-6", href: `tel:8 (800) 200-78-70`, "aria-label": "8 (800) 200-78-70", children: [jsx(ImgInner, { image: { icon: 'PhoneIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex items-center text-primary-text no-underline", "aria-label": "ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(ImgInner, { image: { icon: 'MailIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "ved@rshb.ru" })] })] }));
@@ -1210,7 +1210,8 @@
     const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
-        const iconVersion = version === 'secondary' ? 'color' : 'white';
+        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
+        const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
         return text || icon?.icon ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
     const DEFAULT_ICON_W = 24;
@@ -2353,13 +2354,8 @@
         return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
     });
 
-    const getIconWithVersion = (icon, version = 'primary') => ({
-        ...icon,
-        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
-    });
-
     const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
     const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] })));
@@ -2437,7 +2433,7 @@
     const renderItems = (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 })) : null;
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) })) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) })) : null] })] }) }));
     });
     const renderList$1 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
@@ -2484,8 +2480,7 @@
         const { href, version, text = '' } = rest;
         const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
         const iconCustom = getFilteredIcon(icon) ?? iconMapped;
-        const iconWithVersion = iconCustom ? getIconWithVersion(iconCustom) : undefined;
-        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: iconWithVersion && !text ? (jsx(ImgInner, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        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(ImgInner, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
@@ -2495,7 +2490,7 @@
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
         return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
-    const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
+    const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
 
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
@@ -2533,10 +2528,13 @@
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
         return (jsxs(BlockWrapper, { className: style('relative border border-gray p-8 flex flex-col', getHitStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock$1 = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null] }));
+    const renderIconBlock$1 = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null] }));
     const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16", asSVG: true })] }));
-    const renderCardInfo = (cell, i) => (jsxs("div", { className: "py-5 border-b border-main-divider", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null] }, String(i)));
+    const renderCardInfo = (cell, i) => {
+        const { title, description, buttons } = cell;
+        return (jsxs("div", { className: "py-5 border-b border-main-divider", children: [title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
+    };
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
@@ -2546,7 +2544,7 @@
     const COLS_LENGTH_FOR_SCROLL$1 = 3;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: getIconWithVersion(icon), width: "63", height: "63", asSVG: true })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
+    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63", asSVG: true })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-4 duration-1000',
@@ -3710,9 +3708,9 @@
         return (jsx("div", { className: `flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${isLastColumn ? 'mr-3.5' : ' '}`, children: column.title }, `title_${i}`));
     };
 
-    const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
+    const LinkDocsListItem = JSX(({ doc, icon }) => {
         const { text, fileSize, ...linkProps } = doc;
-        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(ImgInner, { className: iconClassName, image: getIconWithVersion(icon), width: "24", height: "24", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+        return (jsxs("a", { className: "flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main", role: "link", ...linkProps, children: [icon, text ? (jsxs(Text, { size: "text-l", font: "font-light", children: [text, jsx(Text, { color: "text-secondary-text", children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
     });
     const formatSuffix = (ext, fileSize) => {
         const prefix = ext || fileSize ? ',' : '';
@@ -3728,17 +3726,11 @@
         return index !== -1 ? href.substring(index + 1) : '';
     };
 
-    const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6", textClassName: "self-center text-l-light", suffixClassName: "text-secondary-text group-hover/item:text-primary-main", doc: doc, icon: icon })));
-
-    const LinkDocsList = JSX(({ className, documents, columnsMode = 'double', icon }) => {
-        return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group/item flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
-    });
-
     const linkColumnsModeStyleMap = {
-        double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
-        single: 'flex gap-3.5 flex-col',
+        double: 'flex-wrap',
+        single: 'flex-col',
     };
-    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-12', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] })));
+    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-12', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(ImgInner, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24", asSVG: true })) : null }) }, String(i)))) })) : null] })));
 
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
@@ -4140,15 +4132,14 @@
     });
 
     const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: `p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] })));
-    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: getIconWithVersion(itemList.icon) })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
+    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
     const BenefitItem = JSX((props) => {
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
         const listItemAlign = description ? 'items-start' : 'items-center';
-        const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: getIconWithVersion(icon, calcVersion), asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
     });
     function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -4364,7 +4355,7 @@
             onToggle,
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`, onClick: onToggle, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] }));
+    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`, onClick: onToggle, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), icon ? jsx(ImgInner, { image: { icon }, width: "24", height: "24", asSVG: true }) : null] }));
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
     const EMPTY_VALUE = [];
@@ -4536,7 +4527,8 @@
     const renderStepIcon = (styleMap, size, stepVersion) => ({ icon }, i) => {
         const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
         const stepVersionIconTextStyles = stepVersion === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
-        return (jsx(BlockWrapper, { className: `${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, stepVersion), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles), children: i + 1 })) }, String(i)));
+        const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
+        return (jsx(BlockWrapper, { className: `${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(ImgInner, { image: { ...icon, iconVersion: icon.iconVersion || iconVersion }, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles), children: i + 1 })) }, String(i)));
     };
 
     const DEFAULT_GAP = 14;
@@ -4872,7 +4864,7 @@
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         const handleOpenTableInnerIdx = useCallback((_) => setOpenTableInnerIdx(_), []);
         const onHideContentClick = () => setTableInner(undefined);
-        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-3.5 max-w-6", image: getIconWithVersion(header.icon), width: "24", height: "24", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-3.5 max-w-6", image: header.icon, width: "24", height: "24", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -4952,7 +4944,7 @@
                             className: 'mb-6',
                         })
                         : null] })] })));
-    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null] }));
+    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon, asSVG: true }) : null] }));
     const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
     const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
 
@@ -5144,7 +5136,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.10.1";
+    const packageVersion = "0.10.2";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;