@redneckz/wildless-cms-uni-blocks 0.8.21 → 0.8.23

package/bundle/bundle.umd.js

@@ -365,7 +365,7 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
+    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, isTheme = true, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
@@ -375,7 +375,7 @@
                 block?.labels?.length &&
                 !block.labels.includes(event.label)));
         }), [block]);
-        return (jsx(Tag, { className: style('group', blockStyles[version], isHidden ? 'hidden' : '', className), ...(version ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+        return (jsx(Tag, { className: style(isTheme ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
 
     const styles$4 = {
@@ -1224,9 +1224,9 @@
         XS: 'text-xs-light',
     };
 
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, version = '', ...rest }) => {
+    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
-        return (jsxs(BlockWrapper, { className: style('flex flex-col p-12', versionStyle.wrapper, className), version: version, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col p-12 group-data-secondary:bg-primary-main group-data-secondary:text-white', versionStyle.wrapper, className), ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
@@ -2032,7 +2032,7 @@
             isCyclic,
         });
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: isBankHistoryCarousel
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: isBankHistoryCarousel
                             ? renderChildren({
                                 ...rest,
                                 options: {
@@ -2059,7 +2059,7 @@
     ];
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
-    const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options, ...rest }) => {
+    const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options }) => {
         const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
         const isActive = orderNumber === activeIndex;
         return (jsx(BlockWrapper, { className: "flex h-[485px]", children: isActive ? (jsx("div", { className: "relative flex items-center w-full", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: style('absolute z-10 h-[385px] w-[440px] text-white shadow-dark-blue', getActiveBlockPosition(orderNumber, blocksLength), getBackgroundColor(orderNumber)) }) })) : (jsx("div", { className: "flex w-full items-center justify-center", children: jsx("div", { className: style('flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]', getBackgroundColor(orderNumber)), children: jsx("span", { className: getTextColor(orderNumber), children: title }) }) })) }));
@@ -2154,12 +2154,12 @@
     });
 
     const MAX_LINKS_COUNT = 10;
-    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, version = 'secondary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, version: version, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { className: "p-0", title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
+    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { className: "p-0", title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
     });
     const renderLinks = (links) => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
-        return (jsx(Carousel, { version: "", className: "min-w-[832px] w-[832px]", isBlur: false, isCyclic: true, itemCount: itemCount, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: links
+        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", isBlur: false, isCyclic: true, itemCount: itemCount, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: links
                     .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
                     .map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) }, String(groupIndex)))) }));
     };
@@ -3628,7 +3628,7 @@
     const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
+        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", version: version }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
     const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
     ? 'inline-grid grid-cols-[auto_auto_auto]'
@@ -3650,12 +3650,12 @@
                     : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbStyle}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbStyle, ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
     });
 
-    const ProductGallery = JSX(({ className = '', slides = [], version = 'primary', ...rest }) => {
+    const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
         const galleryNav = slides.map((s) => s.nav);
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`, version: version, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest, version }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
+        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
                         slide,
                         i,
                         isActive: Boolean(i === activeSlideIndex),
@@ -3916,56 +3916,27 @@
     };
     const getContainerWidth = (length) => (length < 5 ? 'w-[276px]' : 'w-[210px]');
 
-    const STEPS_BLOCK_STYLE_MAPS = {
-        primary: {
-            description: '!text-secondary-text text-l-light',
-            iconText: 'text-secondary-text',
-            iconBackground: 'bg-main-divider',
-            iconConnector: 'bg-secondary-light',
-            dot: 'bg-secondary-text',
-        },
-        secondary: {
-            description: '!text-white/80 text-l-light',
-            iconText: 'text-white',
-            iconBackground: 'bg-white/30',
-            iconConnector: 'bg-white',
-            dot: 'bg-white/80',
-        },
-        gray: {
-            // TODO Replace this Map with group-data-*
-            description: '!text-white/80 text-l-light',
-            iconText: 'text-white',
-            iconBackground: 'bg-white/30',
-            iconConnector: 'bg-white',
-            dot: 'bg-white/80',
-        },
-        transparent: {
-            description: '!text-white/80 text-l-light',
-            iconText: 'text-white',
-            iconBackground: 'bg-white/30',
-            iconConnector: 'bg-white',
-            dot: 'bg-white/80',
-        },
-        '': {
-            // TODO Replace this Map with group-data-*
-            description: '!text-white/80 text-l-light',
-            iconText: 'text-white',
-            iconBackground: 'bg-white/30',
-            iconConnector: 'bg-white',
-            dot: 'bg-white/80',
-        },
+    const STEPS_BLOCK_STYLE = {
+        description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
+        iconText: 'text-white group-data-primary:text-secondary-text',
+        iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
+        iconConnector: 'bg-white group-data-primary:bg-secondary-light',
+        dot: 'bg-white/80 group-data-primary:bg-secondary-text',
     };
 
     const getLineOpacity = (showLines) => (showLines ? '' : 'opacity-0');
     const getPaddingX = (steps) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
-    const StepsBlock = JSX(({ className = '', showLines = true, steps = [], button, version = 'primary', title, ...rest }) => {
+    const StepsBlock = JSX(({ className = '', showLines = true, steps = [], button, size = 'normal', version = 'primary', stepVersion = 'gray', title, ...rest }) => {
         const shortGaps = steps.length > 3;
-        const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
+        const styleMap = STEPS_BLOCK_STYLE;
         const lineOpacity = getLineOpacity(showLines);
         const paddingX = getPaddingX(steps.length);
-        return (jsxs(BlockWrapper, { className: style('box-border py-12', shortGaps ? 'px-20' : 'px-[70px]', 'flex flex-col items-center overflow-hidden', className), version: version, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: style('flex items-center', paddingX), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light', lineOpacity) }))(steps.map(renderStepIcon(styleMap, version))) }), jsx("div", { className: style('flex justify-between mt-4', shortGaps ? 'gap-x-3' : 'gap-x-[101px]'), children: steps.map(renderStep({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? jsx(Button, { className: "mt-8 min-w-60", version: "primary", ...button }) : null] }));
+        return (jsxs(BlockWrapper, { className: style('box-border py-12', shortGaps ? 'px-20' : 'px-[70px]', 'flex flex-col items-center overflow-hidden', className), version: version, ...rest, children: [title ? (jsx(Heading, { headingType: "h4", className: "max-w-[752px] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: style('flex items-center', paddingX), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity) }))(steps.map(renderStepIcon(styleMap, size, stepVersion))) }), jsx("div", { className: style('flex justify-between mt-4', shortGaps ? 'gap-x-3' : 'gap-x-[101px]'), children: steps.map(renderStep({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? renderButtonsSection([button], { className: 'mt-8 min-w-60' }) : null] }));
     });
-    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}`, children: checkCanRenderIcon(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)));
+    const renderStepIcon = (styleMap, size, stepVersion) => ({ icon }, i) => {
+        const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
+        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: `text-h4 group-data-transparent:${styleMap.iconText} text-primary-text`, children: i + 1 })) }, String(i)));
+    };
 
     const containerStyles = {
         'horizontal-list': 'mx-auto mt-5 w-fit',
@@ -3975,9 +3946,9 @@
         'horizontal-list': 'w-6',
         'vertical-list': 'h-6',
     };
-    const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
+    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
     const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
         const handleClick = (idx) => {
             if (idx !== activeIndex && containerRef?.current) {
                 containerRef.current.children[idx]?.scrollIntoView({
@@ -3986,7 +3957,7 @@
                 });
             }
         };
-        return dotCount ? (jsx("div", { className: `flex gap-2 ${containerStyles[listType]}`, children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
     });
 
     const DEFAULT_GAP = 14;
@@ -3996,18 +3967,18 @@
       and get rid of a clipping effect caused by overflow: hidden.
      */
     const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
+    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', version, }) => {
         const itemCount = Array.isArray(children) ? children.length : 0;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount,
             onVisibleIndicesChange,
         });
         const [activeIndex] = scroll.visibleIndicesRange;
-        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, minHeight: minHeight, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType })) : null] }));
+        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, minHeight: minHeight, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version })) : null] }));
     });
 
-    const SwipeListControlBlock = JSX(({ listType, showDots, options, ...rest }) => {
-        return (jsx(BlockWrapper, { ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, children: renderChildren({ ...rest, options }) }) }));
+    const SwipeListControlBlock = JSX(({ listType, showDots, options, version, ...rest }) => {
+        return (jsx(BlockWrapper, { version: version, ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) }));
     });
     SwipeListControlBlock.childrenTypes = {
         exclude: ['SwipeListControlBlock'],
@@ -4341,19 +4312,13 @@
                         })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
-    const textBlockBack = {
-        primary: 'bg-white',
-        secondary: 'bg-primary-main',
-        'secondary-light': 'bg-primary-main/10',
-    };
-    const TextBlock = JSX(({ className = '', title, description, blockVersion = 'primary', iconVersion, image, __html, ...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, __html ? jsx(RichText, { __html: __html }) : null] })] }));
+    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10' ${className}`, ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { children: [title ? renderTitle(title) : null, description ? jsx("div", { className: "mt-1", children: renderDescription(description) }) : null, __html ? jsx(RichText, { __html: __html }) : 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 renderIcon = () => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`, 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 renderTitle = (title) => (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title }));
+    const renderDescription = (description) => (jsx(Paragraph, { size: "text-s", color: "text-secondary-text group-data-secondary:text-white", children: description }));
 
     const Tags = JSX((props) => {
         const { tags, className = '' } = props;
@@ -4570,7 +4535,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.8.21";
+    const packageVersion = "0.8.23";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;