@redneckz/wildless-cms-uni-blocks 0.6.18 → 0.6.20

package/bundle/bundle.umd.js

@@ -732,7 +732,7 @@
         const { context, className = '', title, description, bonusItems, ...rest } = props;
         return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, context: context, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
                             ? bonusItems.map((_, i) => {
-                                return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), _?.buttons?.length ? (jsx(ButtonSection, { context: context, buttons: _?.buttons })) : null] }), _.bonusItemContent?.bonusType
+                                return (jsx("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), _?.buttons?.length ? (jsx(ButtonSection, { context: context, buttons: _?.buttons })) : null] }), _.bonusItemContent?.bonusType
                                                 ? renderBonusItemContent(_.bonusItemContent)
                                                 : null] }) }, String(i)));
                             })
@@ -824,7 +824,7 @@
         const inputStyle = {
             backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
         };
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
+        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light text-primary-text", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
             outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleChange, onBlur: handleChange }), jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, style: inputStyle }) })] }), renderRangeCaption(items)] }));
     });
     function renderRangeCaption(items) {
@@ -1491,7 +1491,7 @@
         useEffect(() => {
             setSelectedItem(value || { key: '', text: '' });
         }, [value]);
-        return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? jsx("span", { className: "mb-2 flex", children: label }) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+        return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? jsx("span", { className: "mb-2 flex text-primary-text", children: label }) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
             ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
     });
     const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
@@ -2650,8 +2650,11 @@
     OtherProducts.childrenTypes = ['OtherProductsItem'];
 
     function getParentBlockDef(ancestors, type) {
-        const [, ...blocks] = ancestors || [];
-        return blocks.reverse().find((_) => !type || type === _?.type) || {};
+        const [block] = (ancestors || [])
+            .map((item) => item)
+            .reverse()
+            .find(([_]) => _ && 'type' in _ && (!type || type === _.type)) || [];
+        return block || {};
     }
 
     function getParentBlockContent(ancestors, defaultContent) {
@@ -2789,7 +2792,7 @@
         const { text, href, target, onClick } = button;
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-        return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
+        return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
     }
 
     const breadcrumbsStyleMap = {
@@ -2954,7 +2957,7 @@
         return (jsxs("div", { className: "flex justify-between gap-4 mb-6", children: [jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] }));
     });
 
-    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
+    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "text-primary-text ml-3 cursor-pointer", children: text }) : null] }) })));
 
     const RenderRadioButtons = JSX(() => {
         const [selectedOption, setSelectedOption] = useState('option2');
@@ -3063,29 +3066,31 @@
             setShowMap(!showMap);
         };
         const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
-        return (jsxs(BlockWrapper, { context: context, className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onShowMapToggle: onShowMapToggle, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
+        return (jsxs(BlockWrapper, { context: context, className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onShowMapToggle: onShowMapToggle, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
     });
     const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
 
-    const renderItems = ({ items, isDotted = true, version = 'primary', className = '', }) => {
-        const listVersion = version === 'primary' ? 'gray' : version;
-        return items ? (jsx(List, { className: `mt-4 ${className}`, version: listVersion, items: items, listItemSize: "S", isDotted: isDotted })) : null;
-    };
+    const renderItems = ({ items, isDotted = true, version = 'primary', className = '', }) => items ? (jsx(List, { className: className, version: version, items: items, listItemSize: "M", isDotted: isDotted })) : null;
 
     const renderStepContent = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i, { length }) => {
         const { label, description, button, items, isDotted } = step;
-        const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
-        const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
-        return (jsxs("div", { className: `flex flex-col items-center text-center relative
-        whitespace-pre-line overflow-hidden ${widthContainer}`, children: [renderStepLabel(label), renderStepDescription({
-                    description,
-                    className: `${styleMap.description} ${additionalMarginClass}`,
-                }), renderItems({ items, isDotted, version, className: styleMap.description }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", ...useLink({ router, handlerDecorator }, button), version: version, children: button.text })) : null] }, String(i)));
-    };
-    const renderStepLabel = (label) => label ? jsx("div", { className: "text-x6 m-0 mt-4", children: label }) : null;
+        const contentMarginClass = label && (description || items) ? 'mt-2' : '';
+        return (jsxs("div", { className: `relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden ${getContainerWidth(length)}`, children: [jsxs("div", { className: `${button?.text ? 'mb-8' : ''}  text-center`, children: [renderStepLabel(label), jsxs("div", { className: `${contentMarginClass} flex flex-col items-center`, children: [renderStepDescription({
+                                    description,
+                                    className: styleMap.description,
+                                }), renderItems({
+                                    items,
+                                    isDotted,
+                                    version,
+                                    className: getItemsClasses({ className: 'text-left', description, styleMap }),
+                                })] })] }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", ...useLink({ router, handlerDecorator }, button), version: version, children: button?.text })) : null] }, String(i)));
+    };
+    const renderStepLabel = (label) => label ? jsx("div", { className: "text-h6", children: label }) : null;
     const renderStepDescription = ({ description, className = '', }) => (description ? jsx("div", { className: className, children: description }) : null);
+    const getItemsClasses = ({ className, description, styleMap, }) => [description ? styleMap.description : 'text-h6', description ? 'mt-0.5' : '', className].join(' ');
+    const getContainerWidth = (length) => (length < 5 ? 'w-[276px]' : 'w-[210px]');
 
     const STEPS_BLOCK_STYLE_MAPS = {
         primary: {
@@ -3120,13 +3125,13 @@
         const titleMargin = title ? 'mt-9' : '';
         const paddingX = getPaddingX(steps.length);
         return (jsxs(BlockWrapper, { className: [
-                'box-border font-sans text-primary-text bg-white',
+                'box-border py-[50px] font-sans',
                 shortGaps ? 'px-20' : 'px-[70px]',
-                'py-[50px] flex flex-col items-center',
+                'flex flex-col items-center',
                 styleMap.background,
                 styleMap.title,
                 className,
-            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({
+            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({
                                 styleMap,
                                 isMainButton: Boolean(button?.text),
                                 version,
@@ -3233,11 +3238,8 @@
     const COLS_LENGTH_FOR_SCROLL = 2;
     const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
-    const TableInnerButton = JSX(({ isOpen, dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx }) => {
-        const handleClick = () => {
-            EventBus.inst.fire('tariffInnerTable', { dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx });
-        };
-        return (jsxs(Button, { version: "primary", onClick: handleClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
+    const TableInnerButton = JSX(({ isOpen, onClick }) => {
+        return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
     });
 
     const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ rounded, ...buttonProps }, idx) => renderButton({
@@ -3250,15 +3252,10 @@
     };
     const renderImgCellData = ({ image }) => (image?.src ? jsx(ImgInner, { image: image }) : null);
     const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-h6", version: "primary", isDotted: isDotted ?? true, ...rest }));
-    const renderTableCellData = JSX((props) => {
-        const [showBtn, setShowBtn] = useState(true);
-        console.log(props);
-        const tariffInnerTableSubscriber = (event) => {
-            const _showBtn = ['rowIdx', 'cellIdx', 'fieldIdx'].every((key) => props[key] === event[key]);
-            setShowBtn(!_showBtn);
-        };
-        useEffect(() => EventBus.inst.subscribe('tariffInnerTable', tariffInnerTableSubscriber), []);
-        return showBtn ? jsx(TableInnerButton, { ...props }) : null;
+    const renderTableCellData = JSX(({ isVisible, displayTable, dataUrl, pdfUrl, isOpen, context }) => {
+        return isVisible ? (jsx(TableInnerButton, { isOpen: isOpen, context: context, onClick: () => {
+                displayTable({ dataUrl, pdfUrl });
+            } })) : null;
     });
     const EmbeddableCellData = {
         Buttons: renderButtonsCellData,
@@ -3268,14 +3265,31 @@
         Table: renderTableCellData,
     };
 
-    const TariffsTableCell = JSX(({ context, cells, isLastRow, rowIdx, cellIdx }) => {
-        const cellWrapperClasses = `first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${isLastRow ? 'border-t-0 rounded-b-md' : ''}`;
-        return (jsx("div", { className: cellWrapperClasses, role: "cell", children: cells.map(renderCellInner(rowIdx, context, cellIdx)) }));
-    });
-    const renderCellInner = (rowIdx, context, cellIdx) => (cell, i) => {
-        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })] }, String(i)));
+    const renderCellInner = ({ rowIdx, context, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => (cell, i) => {
+        const [isVisible, setVisibility] = useState(true);
+        useEffect(() => {
+            if (cellIdx !== openTableInnerIdx || !tableInner) {
+                setVisibility(true);
+            }
+        }, [tableInner, openTableInnerIdx]);
+        const displayTable = (props) => {
+            setVisibility(false);
+            setOpenTableInnerIdx(cellIdx);
+            setTableInner(props);
+        };
+        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell({
+                    cell,
+                    cellProps: {
+                        rowIdx,
+                        cellIdx,
+                        fieldIdx: i,
+                        displayTable,
+                        isVisible,
+                        context,
+                    },
+                })] }, String(i)));
     };
-    const renderCell = (cell, context, indexes) => {
+    const renderCell = ({ cell, cellProps }) => {
         if (!cell) {
             return null;
         }
@@ -3284,9 +3298,23 @@
             return null;
         }
         const EmbeddableCellInner = EmbeddableCellData[type];
-        return jsx(EmbeddableCellInner, { context: context, ...rest, ...indexes });
+        return jsx(EmbeddableCellInner, { ...cellProps, ...rest });
     };
 
+    const TariffsTableCell = JSX(({ context, cells, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => {
+        return (jsx("div", { className: "first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0", role: "cell", children: cells?.length
+                ? cells.map(renderCellInner({
+                    rowIdx,
+                    context,
+                    cellIdx,
+                    setTableInner,
+                    tableInner,
+                    openTableInnerIdx,
+                    setOpenTableInnerIdx,
+                }))
+                : null }));
+    });
+
     function useTariffsInnerTableData(directoryName) {
         const { data } = useAsyncData(tariffsInnerTableDataUrl(directoryName), fetchTariffsInnerTableData);
         return data || {};
@@ -3343,24 +3371,24 @@
 
     const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsxs(Button, { href: linkToPDF, version: "secondary", className: "flex justify-center items-center text-l-light text-primary-main px-8 max-h-14", target: "_blank", children: [jsx(ImgInner, { image: "DocDownloadIcon", className: "mr-2.5", width: "20", height: "20", asSVG: true }), jsx("span", { children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })] })) : null] })));
 
-    const InnerTable = JSX(({ context, dataUrl, pdfUrl }) => {
+    const EMPTY_DATA = 'Данных нет';
+    const InnerTable = JSX(({ context, dataUrl, pdfUrl, onClick }) => {
         const { tableData } = useTariffsInnerTableData(dataUrl);
         const [activeTabIndex, setActiveTabIndex] = useState(0);
         const items = tableData?.[activeTabIndex]?.items ?? [];
         const currencies = tableData?.map((item) => item.currency ?? '');
-        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { context: context, activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { context: context, isOpen: true })] })) : null;
+        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { context: context, activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { context: context, onClick: onClick, isOpen: true })] })) : (jsxs("div", { className: "my-5 text-h6 text-center", children: [jsx("p", { children: EMPTY_DATA }), jsx(TableInnerButton, { context: context, onClick: onClick, isOpen: true })] }));
     });
 
-    const TariffsTableRowContainer = JSX(({ context, children, rowIdx }) => {
-        const [tableInnerData, setTableInnerData] = useState(undefined);
-        useEffect(() => EventBus.inst.subscribe('tariffInnerTable', (event) => {
-            setTableInnerData(rowIdx === event.rowIdx ? { dataUrl: event.dataUrl, pdfUrl: event.pdfUrl } : undefined);
-        }), [rowIdx]);
-        return (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: "flex", children: children }), tableInnerData ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { context: context, ...tableInnerData }) })) : null] }));
+    const TariffsTableRowContainer = JSX(({ context, children, tableInner, onHideContentClick }) => {
+        return (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: "flex", children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { context: context, ...tableInner, onClick: onHideContentClick }) })) : null] }));
     });
 
-    const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, isLastRow, context, rowIdx }) => {
-        return (jsxs(TariffsTableRowContainer, { context: context, rowIdx: rowIdx, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, isLastRow: isLastRow, rowIdx: rowIdx, cellIdx: i, context: context }, String(i)))) })) : null] }));
+    const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, context, rowIdx }) => {
+        const [tableInner, setTableInner] = useState(undefined);
+        const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
+        const onHideContentClick = () => setTableInner(undefined);
+        return (jsxs(TariffsTableRowContainer, { context: context, onHideContentClick: onHideContentClick, tableInner: tableInner, 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-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, context: context, setTableInner: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', context, title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -3377,7 +3405,7 @@
             activeCardIndex,
             setActiveCardIndex,
         });
-        const rows = (rowData || []).map((row, i, { length }) => (jsx(TariffsTableRow, { context: context, row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, rowIdx: i }, String(i))));
+        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { context: context, row: row, activeCardIndex: activeCardIndex, rowIdx: i }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
         return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, context: context, ...rest, children: [renderTitle({ title, description }), renderDescription(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: rows }))] }));
     });
@@ -3521,19 +3549,30 @@
     });
 
     const DEFAULT_SLOT_NAME = null;
-    const DEFAULT_ANCESTORS = [DEFAULT_SLOT_NAME];
 
-    const defaultChildRenderer = (_) => _;
-    function renderBlock(block, options, ancestors = DEFAULT_ANCESTORS) {
-        const { key, page, blockDecorator, blocksRegistry, context } = options;
-        const { type, blocks: childBlocks } = block;
+    function renderSlots({ slots = {}, parent, options, ancestors = [], }) {
+        return Object.entries(slots).reduce((res, [slotName, slotBlocks]) => ({
+            ...res,
+            [slotName]: renderBlocksList({
+                blocks: slotBlocks,
+                parent,
+                slotName,
+                options,
+                ancestors,
+            }),
+        }), {});
+    }
+
+    function renderBlock({ block = {}, options, ancestors = [] }) {
+        const { key, page, blockDecorator, blocksRegistry = {}, context } = options;
+        const { type, slots, blocks: childBlocks } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
         const BlockComponent = type && blocksRegistry[type];
-        const { renderChild = defaultChildRenderer } = BlockComponent || {};
-        const renderChildBlock = (_, j) => renderChild(renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]), j);
-        const children = childBlocks?.length ? childBlocks.map(renderChildBlock) : null;
+        const subBlockRenderProps = { parent: block, options, ancestors };
+        const children = renderBlocksList({ ...subBlockRenderProps, blocks: childBlocks });
+        const blockSlots = slots ? renderSlots({ ...subBlockRenderProps, slots }) : {};
         return blockDecorator({
             blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
             block,
@@ -3541,32 +3580,45 @@
             // Adjusted by decorator block and blockClassName
             render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
                 const { version, anchor, labels, content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, context: context, page: page, ancestors: ancestors, version: version, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, context: context, page: page, ancestors: ancestors, version: version, anchor: anchor, labels: labels, slots: blockSlots, ...content, children: children }, key)) : null;
             },
         }, key);
     }
 
+    const defaultChildRenderer = (_) => _;
+    function renderBlocksList({ blocks = [], parent, slotName = DEFAULT_SLOT_NAME, options, ancestors = [], }) {
+        const { blocksRegistry = {} } = options;
+        const { type } = parent;
+        const BlockComponent = type && blocksRegistry[type];
+        const { renderChild = defaultChildRenderer } = BlockComponent || {};
+        return blocks.map((_, j) => renderChild(renderBlock({
+            block: _,
+            options: { ...options, key: `${options.key ? options.key : _.type}-${j}` },
+            ancestors: [...ancestors, [parent, slotName]],
+        }), j));
+    }
+
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
     const ContentPage = JSX((props) => {
-        const { className = '', context, data = {} } = props;
+        const { className = '', blocksRegistry, blockDecorator, 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}`,
+        const options = {
+            key: '',
             blocksRegistry,
-            page: data || {},
+            page: data,
             blockDecorator: blockDecorator || defaultBlockDecorator,
             context,
-        }, ancestors));
-    }
+        };
+        const pageSlots = renderSlots({ slots, parent: data, options });
+        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [pageSlots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: pageSlots.header })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: renderBlocksList({ blocks, parent: data, options }) })) : null, likeControl ? renderLikeControl(context) : null] }));
+    });
+    ContentPage.childrenTypes = [];
+    ContentPage.slots = () => ['header'];
     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") }));
     }
 
-    const packageVersion = "0.6.18";
+    const packageVersion = "0.6.20";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;