@redneckz/wildless-cms-uni-blocks 0.14.9 → 0.14.11

package/bundle/bundle.umd.js

@@ -789,7 +789,7 @@
         if (className?.includes('h-')) {
             return {};
         }
-        return { height: isOnlyDigits(height) ? `${height}px` : height };
+        return { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
     };
     const getSvgSize = (width) => (width ? '' : 'w-full h-full');
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
@@ -2622,24 +2622,27 @@
         center: '@xl:self-center',
         end: '@xl:self-end',
     };
-    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, isImageAlwaysOnRight = false, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: style('grow relative flex justify-around @lg:justify-between items-stretch gap-3xl', isImageAlwaysOnRight ? 'flex-row' : 'flex-col-reverse @lg:flex-row'), children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, {
-                        className: isImageAlwaysOnRight ? '' : '@xl:order-1',
-                        imageAlign,
-                    })] })] })));
-    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('md:flex-shrink-0 self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, isImageAlwaysOnRight = false, isImageSecondary, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: style('grow relative flex flex-col-reverse @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl'), children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('grid gap-3xl', rightImage ? '@xl:grid-cols-2' : '', leftImage ? '' : 'grow'), children: [jsxs("div", { className: "grow grid gap-3xl row-span-1", children: [insetTitle, children] }), renderImageContainer(rightImage, {
+                                className: style('@xl:justify-self-end row-start-1 @xl:row-end-3 @xl:col-start-2', positionStyle(isImageAlwaysOnRight), isImageSecondary ? 'hidden @xl:block' : ''),
+                                imageAlign,
+                            }), jsx("div", { className: "self-end", children: buttons })] })] })] })));
+    const positionStyle = (isImageAlwaysOnRight) => isImageAlwaysOnRight
+        ? 'ml-xl justify-self-end row-start-1 row-end-3 col-start-2 self-center'
+        : '';
+    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('shrink-1/2 justify-self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
 
     const cardStyleMap = {
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align })) : null, rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align })) : null, rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full self-end' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
     const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-s border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const cardColumnsModeStyleMap = {
         1: 'grid-cols-1',
         2: 'grid-cols-2',
     };
-    const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('text-left', className), padding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-m z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-m", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 grid gap-xs', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList) })) : null] }) })));
+    const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('text-left', className), padding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-m z-10", title: title }) : null, rightImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-m", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 grid gap-xs', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList) })) : null] }) })));
     const renderCardList = (cardsList) => cardsList.map((item, i) => (jsxs("li", { children: [item?.parameter ? (jsx("div", { className: "inline pr-xs", children: jsx(Text, { size: "text-h6", children: item.parameter }) })) : null, item?.parameterDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
 
     const LINK_CLASS_NAME = `absolute border
@@ -2746,11 +2749,11 @@
     const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
     const renderTag = (tag, key) => (jsx("div", { className: "p-xs border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m", font: "font-light", children: tag }) }, String(key)));
 
-    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle = true, items, isDotted = true, listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground, isImageAlwaysOnRight, } = {}, children, }) => {
+    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle = true, items, isDotted = true, listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'center', directionRight = true, isImageAlwaysOnRight, isImageSecondary = false, } = {}, children, }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = renderHeadline({ title, description, headlineVersion, align });
         const filteredBenefits = benefits?.filter((_) => _?.type === 'rte' || 'label' in _ || 'description' in _);
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col sm:gap-xl gap-4xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...leftOrRightImage(img, directionRight), isImageSecondary: isImageSecondary, imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col sm:gap-xl gap-4xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
     });
     const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
     const renderTags = (tags) => (tags?.length ? jsx(Tags, { tags: tags }) : null);
@@ -2821,7 +2824,7 @@
 
     //TODO: replace SocialMedia with renderButtonSection
     const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], listItemSize = 'S', socialMedia = [], target, title, align = 'text-left', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia, showButtonText: true }) : null, children: items.length ? jsx(List, { items: items, listItemSize: listItemSize }) : null }) }) }));
+        return (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, rightImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia, showButtonText: true }) : null, children: items.length ? jsx(List, { items: items, listItemSize: listItemSize }) : null }) }) }));
     });
 
     const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: className, ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
@@ -3098,6 +3101,14 @@
         sourceBook: sourceBookSchema,
     });
 
+    const DEFAULT_OPTIONS = [{ key: '10' }, { key: '50' }, { key: '100' }];
+    const PageSizeSelector = ({ itemCount, onItemCountChange }) => {
+        const handleItemCountChange = useCallback(({ key }) => onItemCountChange(Number(key)), []);
+        return (jsxs("div", { className: "flex items-center gap-s", children: [jsx("span", { children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E" }), jsx(Select, { onChange: handleItemCountChange, value: { key: String(itemCount) }, options: DEFAULT_OPTIONS })] }));
+    };
+
+    const paginationBlockStyle = 'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
+
     const checkPageRange = (page, currentPage, totalPages) => (currentPage <= 3 && page <= currentPage + 3) ||
         (currentPage >= totalPages - 1 && page >= totalPages - 4);
     const shouldRenderPage = (page, currentPage, totalPages) => (page < currentPage && page >= currentPage - 2) ||
@@ -3116,9 +3127,13 @@
         return null;
     };
 
-    const paginationBlockStyle = 'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
     const ICON_SIZE$1 = { width: '24', height: '24' };
-    const Pagination = ({ currentPage, onPageChange, totalPages }) => {
+    const PaginationContainer = ({ currentPage, onPageChange, totalPages, }) => {
+        const pages = useMemo(() => new Array(totalPages).fill({
+            currentPage,
+            onPageChange,
+            totalPages,
+        }), [totalPages, currentPage]);
         const handlePrevPage = useCallback(() => {
             if (currentPage > 1) {
                 onPageChange(currentPage - 1);
@@ -3131,32 +3146,18 @@
         }, [currentPage, totalPages]);
         const handleFirstPage = useCallback(() => onPageChange(1), []);
         const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
-        const pages = useMemo(() => new Array(totalPages).fill({
-            currentPage,
-            onPageChange,
-            totalPages,
-        }), [totalPages, currentPage]);
-        return (jsx("div", { className: "mt-3xl flex items-center select-none", role: "navigation", "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: jsxs("div", { className: "flex gap-m items-center", children: [jsx("div", { onClick: handlePrevPage, children: jsx(Icon, { name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === 1), ...ICON_SIZE$1 }) }), jsxs("div", { className: "flex gap-xs", children: [currentPage > 1 ? (jsx("div", { onClick: handleFirstPage, className: paginationBlockStyle, "aria-label": "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 1", children: "1" })) : null, currentPage > 4 ? jsx("div", { className: "py-m px-s", children: "..." }) : null, pages.map(renderPages), currentPage < totalPages - 3 ? jsx("div", { className: "py-m px-s", children: "..." }) : null, currentPage < totalPages ? (jsx("div", { onClick: handleLastPage, className: paginationBlockStyle, "aria-label": `Страница ${totalPages}}`, children: totalPages })) : null] }), jsx("div", { onClick: handleNextPage, children: jsx(Icon, { className: "rotate-180", name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === totalPages), ...ICON_SIZE$1 }) })] }) }));
+        return (jsxs("div", { className: "flex gap-m items-center", children: [jsx("div", { onClick: handlePrevPage, children: jsx(Icon, { name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === 1), ...ICON_SIZE$1 }) }), jsxs("div", { className: "flex gap-xs", children: [currentPage > 1 ? (jsx("div", { onClick: handleFirstPage, className: paginationBlockStyle, "aria-label": "\u0421\u0442\u0440\u0430\u043D\u0438\u0446\u0430 1", children: "1" })) : null, currentPage > 4 ? jsx("div", { className: "py-m px-s", children: "..." }) : null, pages.map(renderPages), currentPage < totalPages - 3 ? jsx("div", { className: "py-m px-s", children: "..." }) : null, currentPage < totalPages ? (jsx("div", { onClick: handleLastPage, className: paginationBlockStyle, "aria-label": `Страница ${totalPages}}`, children: totalPages })) : null] }), jsx("div", { onClick: handleNextPage, children: jsx(Icon, { className: "rotate-180", name: "ArrowLeftIcon", iconVersion: "black", imageClassName: getIconStyle(currentPage === totalPages), ...ICON_SIZE$1 }) })] }));
     };
     const getIconStyle = (condition) => condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';
 
-    const convertTimestampToDate = (timestamp) => {
-        const date = new Date(timestamp * 1000);
-        let dd = date.getDate();
-        if (dd < 10) {
-            dd = '0' + dd;
-        }
-        let mm = date.getMonth() + 1;
-        if (mm < 10) {
-            mm = '0' + mm;
-        }
-        return dd + '.' + mm + '.' + date.getFullYear();
-    };
+    const Pagination = ({ currentPage, onPageChange, totalPages, itemCount, onItemCountChange, }) => (jsxs("div", { className: "mt-3xl flex justify-between items-center select-none", role: "navigation", "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: [jsx(PaginationContainer, { currentPage: currentPage, onPageChange: onPageChange, totalPages: totalPages }), itemCount && onItemCountChange ? (jsx(PageSizeSelector, { itemCount: itemCount, onItemCountChange: onItemCountChange })) : null] }));
+
+    const formatDate$1 = (date) => date.split('-').reverse().join('.');
 
-    const DepositoryItem = ({ title, timestamp = 0, publicId }) => {
+    const DepositoryItem = ({ title, timestamp = '', publicId }) => {
         const link = useLink();
         const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
-        return (jsxs("div", { className: "grid grid-cols-12 py-lg border-gray border-opacity-50 border-b", children: [jsx("div", { className: "col-span-2 text-m", children: jsx("span", { children: convertTimestampToDate(timestamp) }) }), jsx("div", { className: "col-span-10 text-h6 hover:text-primary-active", children: jsx("a", { href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title }) })] }, publicId));
+        return (jsxs("div", { className: "grid grid-cols-12 py-lg border-gray border-opacity-50 border-b", children: [jsx("div", { className: "col-span-2 text-m", children: jsx("span", { children: formatDate$1(timestamp) }) }), jsx("div", { className: "col-span-10 text-h6 hover:text-primary-active", children: jsx("a", { href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title }) })] }, publicId));
     };
 
     const useDepository = (size, page) => {
@@ -3167,10 +3168,11 @@
     const DEFAULT_ITEMS_COUNT = 10;
     const Depository = JSX(({ className, ...rest }) => {
         const [currentPage, setCurrentPage] = useState(0);
-        const [itemCount] = useState(DEFAULT_ITEMS_COUNT);
+        const [itemCount, setItemCount] = useState(DEFAULT_ITEMS_COUNT);
         const { totalPages = 0, items } = useDepository(itemCount, currentPage);
         const handleChangePage = useCallback((page) => setCurrentPage(page - 1), []);
-        return (jsx(BlockWrapper, { className: style(className, 'container p-4xl'), ...rest, children: jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b", children: [jsx("span", { className: "col-span-2 text-gray text-m", children: "\u0414\u0430\u0442\u0430" }), jsx("span", { className: "col-span-10 text-gray text-m", children: "\u0422\u0435\u043C\u0430" })] }), items?.map((params) => (jsx(DepositoryItem, { ...params }, String(params.publicId)))), jsx(Pagination, { currentPage: currentPage + 1, onPageChange: handleChangePage, totalPages: totalPages + 1 })] }) }));
+        const handleItemCountChange = useCallback((count) => setItemCount(count), []);
+        return (jsx(BlockWrapper, { className: style(className, 'container p-4xl'), ...rest, children: jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b", children: [jsx("span", { className: "col-span-2 text-gray text-m", children: "\u0414\u0430\u0442\u0430" }), jsx("span", { className: "col-span-10 text-gray text-m", children: "\u0422\u0435\u043C\u0430" })] }), items?.map((params) => (jsx(DepositoryItem, { ...params }, String(params.publicId)))), jsx(Pagination, { currentPage: currentPage + 1, onPageChange: handleChangePage, totalPages: totalPages + 1, itemCount: itemCount, onItemCountChange: handleItemCountChange })] }) }));
     });
 
     const renderErrorContent = (error) => {
@@ -4627,7 +4629,7 @@
         return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: btnDescClassName, children: nav?.description })] }, String(i)));
     };
 
-    const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-4xl sm:p-xl", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isBackground: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
+    const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-4xl sm:p-xl", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isImageSecondary: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
 
     const PromoTile = JSX(({ className, title = 'Акции и спецпредложения', description, headlineVersion = 'S', date, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('box-border', className), ...rest, children: jsxs(BaseTile, { className: "h-full", title: title ? (jsx(Headline, { title: title, headlineVersion: headlineVersion, align: "text-left", isEmbedded: true })) : null, buttons: renderButtonsSection(buttons), children: [date ? jsx("div", { className: "text-s mb-xs", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) })));
     function formatDate(date) {
@@ -5439,7 +5441,7 @@
             parent: data,
         };
         useBlockRouterProvider();
-        return (jsxs("div", { "data-theme": colorPalette, children: [jsxs("section", { className: style('relative', pageStyle, className), children: [slots?.header ? (jsx("div", { className: "relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, { ...options, slotName: 'header' }) })) : null, jsxs("div", { className: "container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })] }), likeControl ? renderLikeControl() : null] }), jsx(StickyBottomMenu, {}), jsx(DialogManager, {}), jsx(PopupManager, {}), jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
+        return (jsxs("div", { "data-theme": colorPalette, children: [jsxs("section", { className: style('@container relative', pageStyle, className), children: [slots?.header ? (jsx("div", { className: "relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, { ...options, slotName: 'header' }) })) : null, jsxs("div", { className: "container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })] }), likeControl ? renderLikeControl() : null] }), jsx(StickyBottomMenu, {}), jsx(DialogManager, {}), jsx(PopupManager, {}), jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
     });
     ContentPage.childrenTypes = [];
     ContentPage.slots = () => ['header', 'footer', 'StickyBottomMenu'];
@@ -5447,7 +5449,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.14.9";
+    const packageVersion = "0.14.11";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;