@redneckz/wildless-cms-uni-blocks 0.14.10 → 0.14.12

package/bundle/bundle.umd.js

@@ -832,7 +832,7 @@
         return options.filter((_) => _.text?.toLocaleLowerCase().includes(query?.trim().toLocaleLowerCase()));
     };
 
-    const SelectPopup = JSX(({ popupRef, options, value, query, onChange }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", role: "listbox", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "option", "aria-selected": option.key === value?.key, onClick: () => onChange && onChange(option), children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden') })] }, option.key))) })) : null);
+    const SelectPopup = JSX(({ popupRef, options, value, query, onChange }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md s1hadow-black", role: "listbox", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "option", "aria-selected": option.key === value?.key, onClick: () => onChange && onChange(option), children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden') })] }, option.key))) })) : null);
 
     function useSelectPopup({ isOpen, options, value, query, onChange, onClose, }) {
         const popup = usePopupManager();
@@ -1029,7 +1029,7 @@
         const inputStyle = {
             backgroundSize: `${((rangeValueShift * 100) / (max - min)).toFixed(2)}% 100%`,
         };
-        return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-m", children: list.map((_, i) => (jsx("div", { className: `w-2 h-2 rounded-full ${rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'}` }, String(i)))) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-m leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", style: inputStyle, type: "range", min: min, max: max, step: step, value: rangeValue, disabled: disabled, onInput: ((e) => {
+        return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-m", children: list.map((_, i) => (jsx("div", { className: style('w-2 h-2 rounded-full', rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main') }, String(i)))) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-m leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", style: inputStyle, type: "range", min: min, max: max, step: step, value: rangeValue, disabled: disabled, onInput: ((e) => {
                             const rawValue = parseDecimal(e.target?.value);
                             const newValue = list.length ? list[rawValue] : rawValue;
                             onChange && onChange(newValue || 0);
@@ -1468,9 +1468,9 @@
         ];
     };
 
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
-        ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
+    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
+            ? 'bg-secondary-light text-secondary-text'
+            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
     const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
     const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
 
@@ -2533,7 +2533,7 @@
             : null;
     }
 
-    const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
+    const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-main-black', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
 
     const cardBaseStyle = 'relative h-full';
     const CARD_SIZE_MAP = {
@@ -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);
@@ -2820,8 +2823,8 @@
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
     //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 }) }) }));
+    const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], listItemSize = 'S', socialMedia = [], target, title, align = 'text-left', isImageAlwaysOnRight, ...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, rightImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia, showButtonText: true }) : null, isImageAlwaysOnRight: isImageAlwaysOnRight, 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) => {
@@ -4077,7 +4079,7 @@
         if (investmentZeroColumn) {
             columns.unshift(investmentZeroColumn);
         }
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { className: "container text-m font-light space-y-4xl", children: [columns?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-3xl pr-lg text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(columns.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-3xl w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-xs mx-3xl" }), jsx("div", { className: "flex justify-between text-primary-text mt-s -mx-5xl", children: columns.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-4xl", ...rest, children: jsxs("div", { className: "container text-m font-light space-y-4xl", children: [columns?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-3xl pr-lg text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(columns.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-3xl w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-xs mx-3xl" }), jsx("div", { className: "flex justify-between text-primary-text mt-s -mx-5xl", children: columns.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
     });
     const renderInvestmentColumn = (column, i, arr) => {
         const isSecondColumn = i === 1;
@@ -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) {
@@ -5280,7 +5282,7 @@
             globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
             close();
         }, []);
-        return opened ? (jsx("div", { className: "container fixed left-0 right-0 bottom-0 z-50", children: jsxs("div", { className: "bg-white m-xl p-xl rounded-md flex sm:items-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx("div", { className: "sm:flex-1", children: jsxs(Paragraph, { size: "text-s", font: "font-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(termLink?.href), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(personalDataPolicyLink?.href), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "ml-s sm:ml-0 w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClose: handleClose }) })] }) })) : null;
+        return opened ? (jsx("div", { className: "container fixed left-0 right-0 bottom-0 z-50", children: jsxs("div", { className: "bg-white m-xl p-xl rounded-md flex sm:items-center shadow-main-black", children: [jsx("div", { className: "sm:flex-1", children: jsxs(Paragraph, { size: "text-s", font: "font-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(termLink?.href), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(personalDataPolicyLink?.href), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "ml-s sm:ml-0 w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClose: handleClose }) })] }) })) : null;
     });
     const linkWrapperStyle = (href) => style('inline mx-2xs', href ? 'text-green-dark' : '');
 
@@ -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.10";
+    const packageVersion = "0.14.12";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;