@redneckz/wildless-cms-uni-blocks 0.14.853 → 0.14.855

package/bundle/bundle.umd.js

@@ -473,8 +473,12 @@
 
     const useDialogManager = () => useEmitterWithActions(defaultEventBus.emitter, 'dialog');
 
-    const adjustBase = (href, basePath = '') => href?.replace(basePath, '') || '/';
+    const FORWARD_SLASH = '/';
+    const adjustBase = (href = FORWARD_SLASH, basePath = FORWARD_SLASH) => [href, basePath].some((_) => _ === FORWARD_SLASH)
+        ? href
+        : href.replace(basePath, '') || FORWARD_SLASH;
 
+    const RESERVED_PREFIX = ['/api'];
     function useLink() {
         const router = useRouter();
         const { closeAll } = useDialogManager();
@@ -497,7 +501,7 @@
         };
     }
     const isClientRouting = (href, target, basePath) => isLocalURL(href, target) &&
-        !env.SUB_PORTALS?.split(',')?.some(hasPrefix(href)) &&
+        ![...RESERVED_PREFIX, ...(env.SUB_PORTALS?.split(',') ?? [])].some(hasPrefix(href)) &&
         hasPrefix(href)(basePath || '/');
 
     const getAspectsAttributes = (data) => {
@@ -1275,7 +1279,7 @@
 
     const getValidStyle = (valid) => (valid ? inputValidStyle : 'border-error');
 
-    const renderLabel = (label) => label ? (jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label })) : null;
+    const renderLabel$1 = (label) => label ? (jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label })) : null;
 
     const Input = JSX(
     // eslint-disable-next-line max-lines-per-function
@@ -1293,7 +1297,7 @@
         const paddingStyle = children ? 'pr-3xl' : '';
         const validStyle = getValidStyle(valid);
         const ariaLabel = label ?? name ?? id;
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle$1, validStyle), id: style('textarea', id), value: value, name: name || id, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key)) : (jsx("input", { ref: inputRef, className: style('h-14', defaultStyle$1, paddingStyle, validStyle), id: id, type: type, value: value, name: name || id, placeholder: placeholder, pattern: pattern, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key))] }), children] }));
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel$1(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle$1, validStyle), id: style('textarea', id), value: value, name: name || id, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key)) : (jsx("input", { ref: inputRef, className: style('h-14', defaultStyle$1, paddingStyle, validStyle), id: id, type: type, value: value, name: name || id, placeholder: placeholder, pattern: pattern, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key))] }), children] }));
     });
     const defaultStyle$1 = 'w-full border rounded-md text-primary-text outline-none p-m';
 
@@ -1390,7 +1394,7 @@
             onClose: handleClose,
             iconVersion,
         });
-        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$1(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: setQuery }) })) : null] })] }));
+        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel$1(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$1(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: setQuery }) })) : null] })] }));
     });
     const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-0 flex self-center', { 'rotate-180': !isOpen }), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
     const getStyle = (isBorder, valid, disabled) => style(isBorder ? 'border rounded-md ' : '', isBorder && !disabled ? 'hover:border-primary-hover' : '', disabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error');
@@ -1885,7 +1889,7 @@
             value,
         });
         const spaceAbove = useElementSpace(ref, 370);
-        return (jsxs("div", { className: style('space-y-xs', className), ref: ref, children: [renderLabel(label), jsxs("div", { className: "relative", children: [renderDatePickerForm({
+        return (jsxs("div", { className: style('space-y-xs', className), ref: ref, children: [renderLabel$1(label), jsxs("div", { className: "relative", children: [renderDatePickerForm({
                             handleChangeVisibleCalendar,
                             value,
                             valid,
@@ -5327,7 +5331,7 @@
         };
     };
 
-    const DraftActionButton = JSX(({ title, icon, description, onClick = noop }) => (jsxs("button", { className: "flex gap-lg items-center border border-gray/30 rounded-xl cursor-pointer p-4 hover:border-green", type: "button", onClick: onClick, children: [jsx(Img, { image: { icon, iconVersion: 'normal' }, width: "78", height: "78" }), jsxs("div", { className: "flex flex-col items-start gap-xs md:w-72 md:mr-lg", children: [jsx(Text, { font: "font-medium", size: "text-s", children: title }), description ? (jsx(Text, { color: "text-secondary-text", size: "text-xs", children: description })) : null] })] })));
+    const DraftActionButton = JSX(({ title, icon, description, onClick = noop }) => (jsxs("button", { className: "flex gap-lg items-center border border-gray/30 rounded-xl cursor-pointer p-4 hover:border-green", type: "button", onClick: onClick, children: [jsx(Img, { image: { icon, iconVersion: 'normal' }, width: "78", height: "78" }), jsxs("div", { className: "flex flex-col items-start gap-xs md:w-72 md:mr-lg", children: [title ? (jsx(Text, { font: "font-medium", size: "text-s", children: title })) : null, description ? (jsx(Text, { color: "text-secondary-text", size: "text-xs", children: description })) : null] })] })));
 
     const fieldsNamesToContactKeysMap = {
         email: 'EMAIL',
@@ -10586,6 +10590,37 @@
         ? Number(paramsId)
         : tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
 
+    const FIRST_CELL_STYLES = 'w-80 flex-shrink-0 sticky left-0 bg-white';
+    const renderHeader = ({ title, icon }) => (jsxs("div", { className: style('flex gap-m items-center', FIRST_CELL_STYLES), role: "cell", children: [icon ? (jsx(Img, { className: "hidden lg:block max-w-6 shrink-0", image: icon, width: "24", height: "24" })) : null, title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null] }));
+
+    const carouselContainerClassesMap = {
+        comparison: 'flex gap-m duration-1000',
+        tariff: 'flex gap-5xl flex-grow duration-1000',
+    };
+    const TableCarouselContainer = JSX(({ children, version = 'comparison' }) => (jsx("div", { className: "flex flex-1", children: jsx("div", { className: carouselContainerClassesMap[version], children: children }) })));
+
+    const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(DefaultFoldButton, { className: className, label: isOpen ? 'Скрыть' : 'Показать', isUnfolded: isOpen, version: "secondary", short: true, onClick: onClick })));
+
+    const renderCell = ({ label, description, __html, isDotted, buttons, image }, i) => (jsxs("div", { className: "grid gap-xs", children: [renderLabel(label), renderDescription$1(description), renderRich({ __html, isDotted }), renderButtonsSection(buttons, {
+                buttonClassName: 'basis-0',
+            }), image?.src ? jsx(Img, { image: image }) : null] }, String(i)));
+    const renderLabel = (label) => label ? (jsx("div", { children: jsx(Text, { size: "text-h6", children: label }) })) : null;
+    const renderDescription$1 = (description) => description ? (jsx("div", { className: "text-l font-light", children: jsx(Text, { color: "text-secondary-text", children: description }) })) : null;
+    const renderRich = ({ __html, isDotted }) => __html ? (jsx("div", { className: "flex flex-col justify-between items-start text-h6", children: jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: "list-m" }) })) : null;
+
+    const TariffsTableCell = JSX(({ cells, tableInner, onSetTable }) => {
+        return (jsx("div", { className: "w-80 flex-grow flex flex-col gap-lg", role: "cell", children: cells?.length
+                ? cells.map((_, i) => {
+                    if (_?.tableSource?.tableData) {
+                        return (jsx(TableInnerButton, { className: "w-fit", isOpen: Boolean(tableInner), onClick: () => {
+                                onSetTable(tableInner ? undefined : { tableSource: _.tableSource });
+                            } }, String(i)));
+                    }
+                    return renderCell(_, i);
+                })
+                : null }));
+    });
+
     const useCarouselControls = (props, initialIndex = 0) => {
         const { itemCount, visibleItemCount } = props;
         const [activeIndex, setActiveIndex] = useState(initialIndex);
@@ -10608,75 +10643,6 @@
         ];
     };
 
-    const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
-    const firstCellStyle = 'w-80 flex-shrink-0';
-    const COLS_LENGTH_FOR_SCROLL = 2;
-    const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
-
-    const carouselContainerClassesMap = {
-        comparison: 'flex gap-m duration-1000',
-        tariff: 'flex gap-5xl flex-grow duration-1000',
-    };
-    const TableCarouselContainer = JSX(({ children, activeIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeIndex * columnWidth}px)` }, children: children }) })));
-
-    const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(DefaultFoldButton, { className: className, label: isOpen ? 'Скрыть' : 'Показать', isUnfolded: isOpen, version: "secondary", short: true, onClick: onClick })));
-
-    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
-        buttonClassName: 'basis-0',
-    });
-    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { className: "space-y-2xs", children: [label ? (jsx("div", { children: jsx(Text, { size: "text-h6", children: label }) })) : null, description ? (jsx("div", { className: "lg:text-l font-light text-xs", children: jsx(Text, { color: "text-secondary-text", children: description }) })) : null] }));
-    const renderImgCellData = ({ image }) => (image?.src ? jsx(Img, { image: image }) : null);
-    const renderRichTextCellData = ({ __html, isDotted = true }) => (jsx("div", { className: "flex flex-col justify-between items-start text-h6", children: jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: "list-m" }) }));
-    const renderInnerTableCellData = ({ isVisible, displayTable, tableSource, pdfUrl, isOpen, }) => isVisible ? (jsx(TableInnerButton, { className: "w-fit", isOpen: isOpen, onClick: () => {
-            displayTable({ tableSource, pdfUrl });
-        } })) : null;
-    const EmbeddableCellData = {
-        Buttons: renderButtonsCellData,
-        Img: renderImgCellData,
-        RichText: renderRichTextCellData,
-        LabelDescription: renderLabelDescriptionCellData,
-        Table: renderInnerTableCellData,
-    };
-
-    const RenderCellInner = JSX(({ cell, fieldIdx, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => {
-        const [isVisible, setVisibility] = useState(true);
-        useEffect(() => {
-            if (cellIdx !== openTableInnerIdx || !tableInner) {
-                setVisibility(true);
-            }
-        }, [tableInner, openTableInnerIdx]);
-        const displayTable = (props) => {
-            setVisibility(false);
-            setOpenTableInnerIdx(cellIdx);
-            setTableInner(props);
-        };
-        return renderCell({
-            cell,
-            cellProps: {
-                rowIdx,
-                cellIdx,
-                fieldIdx,
-                displayTable,
-                isVisible,
-            },
-        });
-    });
-    const renderCell = ({ cell, cellProps }) => {
-        if (!cell) {
-            return null;
-        }
-        const { tableCellType: type, ...rest } = cell;
-        if (!type || !(type in EmbeddableCellData)) {
-            return null;
-        }
-        const EmbeddableCellInner = EmbeddableCellData[type];
-        return jsx(EmbeddableCellInner, { ...cellProps, ...rest });
-    };
-
-    const TariffsTableCell = JSX(({ cells, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => (jsx("div", { className: "w-80 flex-grow flex flex-col gap-m @4xl:gap-lg", role: "cell", children: cells?.length
-            ? cells.map((_, i) => (jsx(RenderCellInner, { cell: _, fieldIdx: i, rowIdx: rowIdx, cellIdx: cellIdx, setTableInner: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx }, String(i))))
-            : null })));
-
     /** @deprecated */
     const renderArrows = ({ className, btnClass, canDec, canInc, dec, inc, }) => canDec || canInc ? (jsxs("div", { children: [canDec ? (jsx(ArrowLeftButton, { wcmsIgnore: true, className: style('absolute z-40', btnClass[0], className), onClick: dec })) : null, canInc ? (jsx(ArrowRightButton, { wcmsIgnore: true, className: style('absolute z-40', btnClass[1], className), onClick: inc })) : null] })) : null;
 
@@ -10689,7 +10655,7 @@
         }
         const [headerColumn, ...columns] = rowData;
         const columnsStyle = style('flex duration-1000 text-center', rowIdx !== 0 ? 'font-normal' : 'font-light');
-        return (jsxs("div", { className: "flex border-main-divider border-b border-solid h-full", children: [headerColumn?.data ? (jsx("div", { className: "whitespace-pre-wrap sm:whitespace-normal w-48 sm:w-56 sm:min-w-56 py-lg pr-lg sm:pr-0", children: jsx(Text, { size: "text-xl", font: "font-light", children: headerColumn.data }) })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsStyle, style: {
+        return (jsxs("div", { className: "flex border-main-divider border-b border-solid h-full", children: [headerColumn?.data ? (jsx("div", { className: "whitespace-pre-wrap sm:whitespace-normal w-48 min-w-48 sm:w-56 sm:min-w-56 py-lg pr-lg sm:pr-0", children: jsx(Text, { size: "text-xl", font: "font-light", children: headerColumn.data }) })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsStyle, style: {
                             transform: `translateX(-${getHorizontalShift(columns, activeColumnIndex)}px)`,
                         }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider", children: [_?.data ? jsx(Text, { size: "text-xl", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
     };
@@ -10709,12 +10675,10 @@
                 })] }));
     });
 
-    const InnerTableBody = JSX(({ activeTabIndex, items }) => {
-        return (jsx("div", { children: items.map((_, tableIdx) => {
-                const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
-                return (jsxs("div", { className: "w-full @container", children: [jsx("div", { className: "flex py-m sm:px-m bg-white @4xl:bg-gray relative", children: jsx(Text, { size: "text-xl", align: "text-left", children: _.title }) }), jsx("div", { className: "w-full sm:pl-xs overflow-hidden transition-height duration-500 ease-in-out", children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
-            }) }));
-    });
+    const InnerTableBody = JSX(({ activeTabIndex, items }) => (jsx("div", { children: items.map((_, tableIdx) => {
+            const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
+            return (jsxs("div", { className: "w-full @container", children: [jsx("div", { className: "flex py-m px-m bg-white @4xl:bg-gray relative", children: jsx(Text, { size: "text-xl", align: "text-left", children: _.title }) }), jsx("div", { className: "w-full sm:pl-xs overflow-hidden transition-height duration-500 ease-in-out", children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
+        }) })));
 
     const linkButtonVersion = 'secondary';
 
@@ -10724,50 +10688,38 @@
                     }), onClick: () => setActiveTabIndex(idx), children: jsx(Text, { size: "text-xl", font: "font-light", color: TableColor(idx === activeTabIndex), children: currency || idx + 1 }) }, currency))) })) : null, linkToPDF ? (jsx(LinkButton, { className: "text-primary-main", href: linkToPDF, version: linkButtonVersion, target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-3xs", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     const EMPTY_DATA$1 = 'Данных нет';
-    const InnerTable = UniBlock(({ tableSource, pdfUrl, onClick }) => {
+    const InnerTable = UniBlock(({ tableSource }) => {
         const tableData = tableSource?.tableData;
         const [activeTabIndex, setActiveTabIndex] = useState(0);
         const handleActiveTabIndex = useCallback((_) => setActiveTabIndex(_), []);
         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: handleActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { className: "mt-xl", onClick: onClick, isOpen: true })] })) : (jsxs("div", { className: "my-lg space-y-m text-center", children: [jsx(Text, { size: "text-h6", children: EMPTY_DATA$1 }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] }));
+        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: handleActiveTabIndex }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items })] })) : (jsx("div", { className: "space-y-m text-center", children: jsx(Text, { size: "text-h6", children: EMPTY_DATA$1 }) }));
     });
 
-    const TariffsTableRowContainer = JSX(({ children, tableInner, onHideContentClick }) => (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: style(dividerStyle, 'flex flex-col @4xl:flex-row gap-y-xs gap-x-5xl pb-lg @4xl:pt-lg'), children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { ...tableInner, onClick: onHideContentClick }) })) : null] })));
+    const DIVIDER_STYLE = 'border-main-divider lg:border-b w-full py-s lg:py-xl';
+    const TariffsTableRowContainer = JSX(({ children, tableInner, onClick }) => (jsxs("div", { className: style('self-start flex flex-col gap-xl', DIVIDER_STYLE), role: "row", children: [jsx("div", { className: style('flex flex-col lg:flex-row gap-x-5xl gap-y-xs'), children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { ...tableInner, onClick: onClick }) })) : null] })));
 
-    const TariffsTableRow = JSX(({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
+    const TariffsTableRow = JSX(({ row: { header, data = [] }, ...rest }) => {
         const [tableInner, setTableInner] = useState(undefined);
-        const handleSetTableInner = useCallback((_) => setTableInner(_), []);
-        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: style('text-s', firstCellStyle), children: jsxs("div", { className: "flex gap-m items-center", role: "cell", children: [header?.icon ? (jsx(Img, { className: "hidden @4xl:block max-w-6 shrink-0", image: header.icon, width: "24", height: "24" })) : null, header?.title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", 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 handleSetTableInner = useCallback((_) => {
+            setTableInner(_);
+        }, []);
+        return (jsxs(TariffsTableRowContainer, { tableInner: tableInner, ...rest, children: [renderHeader(header), data?.length ? (jsx(TableCarouselContainer, { version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, onSetTable: handleSetTableInner, tableInner: tableInner, ...rest }, String(i)))) })) : null] }));
     });
 
-    const TariffsTableWrapper = JSX(({ children, controls }) => {
-        const { isScrollAvailable } = controls;
-        return (jsxs("div", { role: "table", className: "overflow-x-auto w-auto grid md:block", children: [jsxs("div", { className: "relative space-y-xs", children: [children, renderArrows({
-                            ...controls,
-                            btnClass: ['top-28', 'top-11'],
-                            className: 'right-7',
-                        })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" })) : null] }));
-    });
+    const TariffsTableWrapper = JSX(({ children }) => (jsx("div", { role: "table", className: "overflow-x-auto w-auto grid relative gap-y-xs", children: children })));
 
-    const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
+    const TariffsTable = UniBlock(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
         const colData = columns?.map(({ data }) => data) || [];
         const rowData = rowHeaders?.map((header, i) => ({
             header,
             data: colData.map((col) => col?.[i] || []),
         }));
-        const itemCount = colData.length;
-        const [activeIndex, controls] = useCarouselControls({
-            itemCount: itemCount,
-            visibleItemCount: COLS_LENGTH_FOR_SCROLL,
-        });
-        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
+        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
         const [isUnfolded, { toggle }] = useBool(false);
-        return (jsxs(BlockWrapper, { className: style('relative space-y-6xl @4xl:space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-center" }), jsx("div", { className: "space-y-m overflow-hidden", children: hiddenRowsNum > 0 ? (jsxs(Foldable, { children: [jsxs(TariffsTableWrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] }), jsx(DefaultFoldButton, { className: "text-h4", isUnfolded: isUnfolded, onClick: toggle })] })) : (jsx(TariffsTableWrapper, { controls: controls, children: rows })) })] }));
+        return (jsxs(BlockWrapper, { className: style('relative space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-center" }), jsx("div", { className: "space-y-m overflow-hidden", children: hiddenRowsNum > 0 ? (jsxs(Foldable, { children: [jsxs(TariffsTableWrapper, { children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] }), jsx(DefaultFoldButton, { className: "text-h4", isUnfolded: isUnfolded, onClick: toggle })] })) : (jsx(TariffsTableWrapper, { children: rows })) })] }));
     });
 
     const TextBlock = JSX(({ className = '', title, description, iconVersion, __html, richVersion, ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-s sm:gap-m group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? renderIcon() : null, jsxs("div", { className: "flex flex-col w-fit gap-2xs sm:gap-xs", children: [title ? (jsx(Text, { size: "text-l", font: "font-normal", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, __html ? jsx(RichText, { richVersion: richVersion, __html: __html }) : null] })] })));
@@ -10986,7 +10938,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.852";
+    const packageVersion = "0.14.854";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;