@redneckz/wildless-cms-uni-blocks 0.5.8 → 0.5.10

package/bundle/bundle.umd.js

@@ -301,6 +301,9 @@
 
     // Generated. Do not touch
     /* eslint-disable max-len, max-lines */
+    const IconInverseMap = {
+        ActualBalanceIcon: false, AirPlaneIcon: false, AppleIcon: true, ArrowDownIcon: true, ArrowLeftIcon: true, ArrowUpIcon: true, AtmIcon: true, BankIcon: true, BuildingIcon: true, BurgerIcon: true, Calendar2Icon: true, CalendarCircleIcon: true, CalendarIcon: true, CalendarTickIcon: true, Car2Icon: true, CardIcon: true, CardPosIcon: true, CardTickIcon: true, CardWithGemIcon: false, CarIcon: false, ChartSquareIcon: true, CinemaIcon: false, ClockIcon: false, CloseIcon: true, ComfortableCompIcon: false, CreditCardsIcon: false, DiscountShapeIcon: true, DocDownloadIcon: true, DocIcon: true, DocIconMonoColor: true, DocsIcon: false, DocumentTextIcon: true, DollarIcon: false, DoneIcon: false, DoneSimpleIcon: true, EarthIcon: false, EmptyWalletChangeIcon: true, EmptyWalletIcon: true, EuroIcon: false, GeolocationIcon: true, GlassIcon: false, GlobalIcon: true, GpsIcon: true, GridIcon: true, InterestGrowthIcon: false, InterestIcon: true, JCBIcon: false, LogoIcon: true, LoupeIcon: true, MapMarkerClusterIcon: false, MapMarkerSingleIcon: false, MasterCardIcon: false, MinusIcon: true, MirIcon: false, MoneyIcon: true, MoneyInsuranceIcon: false, MoneysIcon: true, MonitorMobileIcon: true, NewDocIcon: false, OfficeIcon: false, OkIcon: true, PackA4Icon: false, PassSendIcon: false, PercentageRoundIcon: true, PercentageSquareIcon: true, PersonalCardIcon: true, PlayMarketIcon: true, PlusIcon: true, PowerIcon: false, Profile2UserIcon: true, ProfileIcon: true, PumpkinIcon: false, RoundRubleIcon: true, SafeIcon: true, ShieldTickIcon: true, SignDocsIcon: false, SmallClockIcon: true, SoundIcon: false, StrongBoxIcon: true, TelegramIcon: true, UnionPayIcon: false, UserSquareIcon: true, UserTickIcon: true, VisaIcon: false, VKIcon: true, WalletAdd2Icon: true, WalletAddIcon: true, WalletIcon: true, WalletWithMoneyIcon: true, WateringCanIcon: false
+    };
     var IconMap;
     (function (IconMap) {
         IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
@@ -452,7 +455,7 @@
         IconTitleMap["MirIcon"] = "\u041C\u0418\u0420";
         IconTitleMap["MoneyIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
         IconTitleMap["MoneyInsuranceIcon"] = "\u0414\u0435\u043D\u0435\u0436\u043D\u043E\u0435 \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435";
-        IconTitleMap["MoneysIcon"] = "MoneysIcon";
+        IconTitleMap["MoneysIcon"] = "\u041A\u0443\u043F\u044E\u0440\u044B";
         IconTitleMap["MonitorMobileIcon"] = "\u041C\u043E\u043D\u0438\u0442\u043E\u0440 \u0438 \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u044B\u0439";
         IconTitleMap["NewDocIcon"] = "\u041D\u043E\u0432\u044B\u0439 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
         IconTitleMap["OfficeIcon"] = "\u041E\u0444\u0438\u0441";
@@ -491,15 +494,23 @@
     const svgUseStyleMap = {
         normal: 'text-primary-main',
         black: 'text-black',
-        white: 'text-black invert',
+        white: 'text-black',
     };
     const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, iconVersion = 'normal', asSVG, ...imgProps }) => {
         const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-        if (asSVG) {
-            return (jsxs("svg", { className: className, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { className: `${svgUseStyleMap[iconVersion]} ${imageClassName}`, href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
+        if (asSVG && IconInverseMap[name]) {
+            return (jsx(Background, { className: className, children: jsxs("svg", { className: [
+                        getSvgSize(className, imgProps.width),
+                        svgUseStyleMap[iconVersion],
+                        imageClassName,
+                        getInvertStyle(name, iconVersion),
+                    ].join(' '), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
         }
         return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
     });
+    const getInvertStyle = (name, iconVersion) => iconVersion === 'white' && IconInverseMap[name] ? 'invert' : '';
+    const getSvgSize = (className, width) => width ? `width: ${width}px ` : 'w-full h-full';
+    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
     function getIconVersion(image) {
         return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
@@ -556,6 +567,11 @@
         return style ? style.filter(Boolean).join(' ') : '';
     }
 
+    const Description = JSX((props) => {
+        const { className = '', description } = props;
+        return jsx("div", { className: `${className}`, children: description });
+    });
+
     const ALIGN_TEXT = {
         left: 'text-left',
         center: 'text-center',
@@ -611,11 +627,6 @@
         },
     };
 
-    const Description = JSX((props) => {
-        const { className = '', description } = props;
-        return jsx("div", { className: `${className}`, children: description });
-    });
-
     const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'center', className = '', title, description, headlineVersion = 'XL', as, ...rest }) => {
         const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
         const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
@@ -802,7 +813,7 @@
     const buttonStyleMap = {
         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',
+        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
         link: '',
     };
     const DisabledStyle = 'bg-main-divider text-main-disabled';
@@ -1022,7 +1033,7 @@
     function renderBenefits$1(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 
+        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 }));
     }
     function renderBenefit(version = 'primary') {
@@ -1139,7 +1150,7 @@
         LinkList,
     };
 
-    const renderBlocksList = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : null;
+    const renderBlocksList$1 = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : null;
     const renderBlock$1 = ({ context, className }) => (block, i) => {
         if (!block) {
             return null;
@@ -1154,7 +1165,7 @@
     };
 
     const AccordionItemInner = JSX(({ blocks, context }) => {
-        return (jsx("div", { className: "grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, blocks, className: '!p-0 mb-3.5' }) }));
+        return (jsx("div", { className: "grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList$1({ context, blocks, className: '!p-0 mb-3.5' }) }));
     });
 
     const useActiveHandler$1 = ({ blocks, initialState = false }) => {
@@ -1316,6 +1327,8 @@
         return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
     }
 
+    const renderFootnote = (text) => text ? jsx("p", { className: "text-s-light text-secondary-text mt-7", children: text }) : null;
+
     const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
     const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
@@ -1460,8 +1473,6 @@
         };
     };
 
-    const renderFootnote = (text) => text ? jsx("p", { className: "text-s-light text-secondary-text mt-7", children: text }) : null;
-
     const BonusCalculatorForm = JSX(({ context, className = '', sourceBookDir = '', buttons, footnote }) => {
         const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
         const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
@@ -1724,7 +1735,7 @@
         white: 'bg-white',
     };
     const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
-        return (jsxs("section", { className: `border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? renderButton(button) : null] }));
+        return (jsxs("section", { className: `border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? renderButton(button) : null] }));
     });
     const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
     const renderButton = (button) => {
@@ -1959,7 +1970,7 @@
         return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.sell) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buy) })] }, code));
     };
 
-    const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+    const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m-light", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
     const calculateResult = (value, rate, precision) => {
         const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
@@ -2100,7 +2111,8 @@
         currencyRatesBuy.unshift({ code: Currency.RUB });
         const currencyRatesSell = currencyRates.filter((_) => _.sell);
         currencyRatesSell.push({ code: Currency.RUB });
-        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border min-h-[320px] 
+          ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
 
     const ICON_VERSION_MAP = {
@@ -2115,8 +2127,8 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', hideTitle, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), hideTitle ? null : renderTitle$1(children, bgColor, logo?.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: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$1(children, bgColor, logo?.title) : null] }));
     });
     const renderTitle$1 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
@@ -2242,7 +2254,7 @@
             return null;
         }
         const classes = version === 'secondary'
-            ? 'bg-secondary-light hover:bg-secondary-hover'
+            ? 'bg-white hover:bg-secondary-hover'
             : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
         const isPrimary = version === 'primary';
         return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
@@ -2566,7 +2578,7 @@
     };
 
     const OtherProductsItem = JSX(({ label, blocks, context, dataTheme, isUnfolded }) => {
-        const foldableBlocks = renderBlocksList({
+        const foldableBlocks = renderBlocksList$1({
             context,
             blocks,
         });
@@ -2611,7 +2623,7 @@
         const galleryNav = slides.map((s) => s.nav);
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { context: context, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        return (jsxs(BlockWrapper, { context: context, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
         ${VersionStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), 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,
@@ -2628,19 +2640,19 @@
     function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
         const isActiveBtn = i === activeSlideIndex;
         const btnClassName = isActiveBtn
-            ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
-            : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
+            ? 'bg-white shadow-dark-blue/42 min-w-[354px] border-none p-6'
+            : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
         const btnTitleClassName = isActiveBtn
-            ? 'text-primary-text text-h6'
-            : `text-l ${productBlockStyleMap[version].title}`;
+            ? 'text-primary-text !text-h6 p-2'
+            : `text-l pb-1 ${productBlockStyleMap[version].title}`;
         const btnDescClassName = isActiveBtn
-            ? 'text-secondary-text text-m-title-xs mt-2.5'
-            : `text-m mt-1.5 ${productBlockStyleMap[version].text}`;
+            ? 'text-secondary-text text-l-light mt-2.5'
+            : `text-m-light ${productBlockStyleMap[version].text}`;
         const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
-        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0 pt-5 pb-[23px]
+        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
         ${btnClassName} ${additionalBorder}
-      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
+      `, 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 PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
@@ -3295,26 +3307,48 @@
         return (jsxs(BlockWrapper, { tag: "div", context: context, className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, ...rest, children: [jsx(LikeButton, { onClick: handlerDecorator(likeService.like), ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: handlerDecorator(likeService.dislike), className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
     });
 
-    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-    const ContentPage = JSX(({ className = '', context, blocksRegistry, data = {}, blockDecorator = defaultBlockDecorator, }) => {
-        const { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' } = data;
-        const { header } = slots;
-        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, page: data, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context, page: data }, i)) })) : null, likeControl ? (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", context: context }, "LikeControl") })) : null] }));
-    });
-    function renderBlock({ block, blockDecorator, blocksRegistry, context, page }, i) {
+    const DEFAULT_SLOT_NAME = null;
+
+    function renderBlock(block, options, ancestors = [DEFAULT_SLOT_NAME]) {
+        const { key, page, blockDecorator, blocksRegistry, context } = options;
         const { type } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
-        const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
+        const BlockComponent = type && blocksRegistry[type];
         return blockDecorator({
             blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
             block,
-            render: (props) => {
-                const { version, content, anchor, labels } = props.block;
-                return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, page: page, anchor: anchor, labels: labels, ...content }, `${type}-${i}`));
+            ancestors,
+            // Adjusted by decorator block and blockClassName
+            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+                const { version, content, anchor, labels, blocks: childBlocks } = adjustedBlock;
+                const children = childBlocks
+                    ? childBlocks.map((_, j) => renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]))
+                    : null;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, version: version, context: context, page: page, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
             },
-        }, `block-${i}`);
+        }, key);
+    }
+
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+    const ContentPage = JSX((props) => {
+        const { className = '', context, data = {} } = props;
+        const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
+        const blocksListRenderer = renderBlocksList(props);
+        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [slots?.header?.blocks?.length ? (jsx("div", { className: `${style2className(slots.header.style)}`, children: blocksListRenderer(slots.header.blocks, ['header']) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocksListRenderer(blocks) })) : null, likeControl ? renderLikeControl(context) : null] }));
+    });
+    function renderBlocksList({ blocksRegistry, data, blockDecorator, context }) {
+        return (blocks, ancestors) => blocks.map((block, i) => renderBlock(block, {
+            key: `${block.type || '#'}-${i}`,
+            blocksRegistry,
+            page: data || {},
+            blockDecorator: blockDecorator || defaultBlockDecorator,
+            context,
+        }, ancestors));
+    }
+    function renderLikeControl(context) {
+        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", context: context }, "LikeControl") }));
     }
 
     exports.Blocks = Blocks;