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

package/mobile/lib/ui-kit/Pagination/Pagination.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-export declare const paginationBlockStyle = "py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white";
 export interface PaginationProps {
     currentPage: number;
     onPageChange: (page: number) => void;
     totalPages: number;
+    itemCount?: number;
+    onItemCountChange?: (count: number) => void;
 }
-export declare const Pagination: ({ currentPage, onPageChange, totalPages }: PaginationProps) => JSX.Element;
+export declare const Pagination: ({ currentPage, onPageChange, totalPages, itemCount, onItemCountChange, }: PaginationProps) => JSX.Element;

package/mobile/lib/ui-kit/Pagination/Pagination.js

@@ -1,28 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
-import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { Icon } from '../Icon/Icon.js';
-import { renderPages } from './renderPages.js';
-export const paginationBlockStyle = 'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
-const ICON_SIZE = { width: '24', height: '24' };
-export const Pagination = ({ currentPage, onPageChange, totalPages }) => {
-    const handlePrevPage = useCallback(() => {
-        if (currentPage > 1) {
-            onPageChange(currentPage - 1);
-        }
-    }, [currentPage]);
-    const handleNextPage = useCallback(() => {
-        if (currentPage < totalPages - 1) {
-            onPageChange(currentPage + 1);
-        }
-    }, [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 }) }), _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 }) })] }) }));
-};
-const getIconStyle = (condition) => condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';
+import { PageSizeSelector } from './PageSizeSelector.js';
+import { PaginationContainer } from './PaginationContainer.js';
+export 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] }));
 //# sourceMappingURL=Pagination.js.map

package/mobile/lib/ui-kit/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/ui-kit/Pagination/Pagination.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/ui-kit/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAU5D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,WAAW,EACX,YAAY,EACZ,UAAU,EACV,SAAS,EACT,iBAAiB,GACD,EAAE,EAAE,CAAC,CACrB,eACE,SAAS,EAAC,sDAAsD,EAChE,IAAI,EAAC,YAAY,gBACN,wDAAW,aAEtB,KAAC,mBAAmB,IAClB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,EACD,SAAS,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAChC,KAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,GAAI,CACjF,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC"}

package/mobile/lib/ui-kit/Pagination/PaginationContainer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PaginationContainerProps {
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    totalPages: number;
+}
+export declare const PaginationContainer: ({ currentPage, onPageChange, totalPages, }: PaginationContainerProps) => JSX.Element;

package/mobile/lib/ui-kit/Pagination/PaginationContainer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { Icon } from '../Icon/Icon.js';
+import { paginationBlockStyle } from './paginationBlockStyle.js';
+import { renderPages } from './renderPages.js';
+const ICON_SIZE = { width: '24', height: '24' };
+export 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);
+        }
+    }, [currentPage]);
+    const handleNextPage = useCallback(() => {
+        if (currentPage < totalPages - 1) {
+            onPageChange(currentPage + 1);
+        }
+    }, [currentPage, totalPages]);
+    const handleFirstPage = useCallback(() => onPageChange(1), []);
+    const handleLastPage = useCallback(() => onPageChange(totalPages), [totalPages]);
+    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 }) }), _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 }) })] }));
+};
+const getIconStyle = (condition) => condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';
+//# sourceMappingURL=PaginationContainer.js.map

package/mobile/lib/ui-kit/Pagination/PaginationContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationContainer.js","sourceRoot":"","sources":["../../../src/ui-kit/Pagination/PaginationContainer.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/ui-kit/Pagination/paginationBlockStyle.d.ts

@@ -0,0 +1 @@
+export declare const paginationBlockStyle = "py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white";

package/mobile/lib/ui-kit/Pagination/paginationBlockStyle.js

@@ -0,0 +1,2 @@
+export const paginationBlockStyle = 'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
+//# sourceMappingURL=paginationBlockStyle.js.map

package/mobile/lib/ui-kit/Pagination/paginationBlockStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginationBlockStyle.js","sourceRoot":"","sources":["../../../src/ui-kit/Pagination/paginationBlockStyle.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAC/B,gFAAgF,CAAC"}

package/mobile/lib/ui-kit/Pagination/renderPages.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { PaginationProps } from './Pagination';
-export declare const renderPages: (pagesParams: PaginationProps, index: number) => JSX.Element | null;
+import type { PaginationContainerProps } from './PaginationContainer';
+export declare const renderPages: (pagesParams: PaginationContainerProps, index: number) => JSX.Element | null;

package/mobile/lib/ui-kit/Pagination/renderPages.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
-import { paginationBlockStyle } from './Pagination.js';
+import { paginationBlockStyle } from './paginationBlockStyle.js';
 import { shouldRenderPage } from './shouldRenderPage.js';
 export const renderPages = (pagesParams, index) => {
     const { currentPage, onPageChange, totalPages } = pagesParams;

package/mobile/lib/ui-kit/Pagination/renderPages.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderPages.js","sourceRoot":"","sources":["../../../src/ui-kit/Pagination/renderPages.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAmB,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,WAA4B,EAAE,KAAa,EAAE,EAAE;IACzE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAC9D,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,KAAK,WAAW,EAAE;QACxB,OAAO,CACL,8BAEe,MAAM,EACnB,SAAS,EAAC,iDAAiD,YAE1D,IAAI,IAJA,MAAM,CAAC,KAAK,CAAC,CAKd,CACP,CAAC;KACH;IAED,IAAI,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,UAAU,IAAI,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE;QACxF,OAAO,CACL,cAEE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,SAAS,EAAE,oBAAoB,gBACnB,YAAY,IAAI,EAAE,YAE7B,IAAI,IALA,MAAM,CAAC,KAAK,CAAC,CAMd,CACP,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}
+{"version":3,"file":"renderPages.js","sourceRoot":"","sources":["../../../src/ui-kit/Pagination/renderPages.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,WAAqC,EAAE,KAAa,EAAE,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAC9D,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,KAAK,WAAW,EAAE;QACxB,OAAO,CACL,8BAEe,MAAM,EACnB,SAAS,EAAC,iDAAiD,YAE1D,IAAI,IAJA,MAAM,CAAC,KAAK,CAAC,CAKd,CACP,CAAC;KACH;IAED,IAAI,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,UAAU,IAAI,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,EAAE;QACxF,OAAO,CACL,cAEE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,SAAS,EAAE,oBAAoB,gBACnB,YAAY,IAAI,EAAE,YAE7B,IAAI,IALA,MAAM,CAAC,KAAK,CAAC,CAMd,CACP,CAAC;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/mobile/lib/ui-kit/Select/Select.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { Text } from '../../ui-kit/Text/Text.js';
 import { style } from '../../utils/style.js';
 import { Icon } from '../Icon/Icon.js';
 import { Input } from '../Input/Input.js';
+import { Text } from '../Text/Text.js';
 import { formatOption } from './formatOption.js';
 import { useSelectPopup } from './useSelectPopup.js';
 export const Select = JSX(({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, onChange, }) => {

package/mobile/lib/ui-kit/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,qCAAqC,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CACvB,CAAC,EACC,SAAS,EACT,KAAK,EACL,OAAO,GAAG,EAAE,EACZ,KAAK,EACL,KAAK,GAAG,IAAI,EACZ,QAAQ,GAAG,IAAI,EACf,WAAW,GAAG,EAAE,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,KAAK,EAAE,CAAC;IACV,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,cAAc,CAAC;QAC9B,MAAM;QACN,OAAO;QACP,KAAK;QACL,KAAK;QACL,QAAQ;QACR,OAAO,EAAE,WAAW;KACrB,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACtB,WAAW,CAAC,KAAK,CAAC,EACnB,eAAK,SAAS,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,QAAQ,aACxE,eACE,SAAS,EAAE,KAAK,CACd,yFAAyF,EACzF,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAChC,EACD,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,aAEpC,YAAG,SAAS,EAAC,8EAA8E,YACxF,YAAY,CAAC,KAAK,CAAC,IAAI,WAAW,GACjC,EACH,UAAU,CAAC,MAAM,CAAC,IACf,EACL,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CACpB,cAAK,SAAS,EAAE,KAAK,CAAC,4BAA4B,CAAC,YACjD,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC7D,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,KAAc,EAAE,EAAE,CACrC,KAAK,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAC,OAAO,YACpB,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,YAAY,YAC5D,KAAK,GACD,GACH,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AAEX,MAAM,UAAU,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,CACtC,KAAC,IAAI,IACH,SAAS,EAAE,KAAK,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAChE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,GACX,CACH,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,QAAiB,EAAE,KAAc,EAAE,EAAE,CAC3D,KAAK,CACH,QAAQ,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,EAAE,EAC9D,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CACxC,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/utils/formatDate.d.ts

@@ -0,0 +1 @@
+export declare const formatDate: (date: string) => string;

package/mobile/lib/utils/formatDate.js

@@ -0,0 +1,2 @@
+export const formatDate = (date) => date.split('-').reverse().join('.');
+//# sourceMappingURL=formatDate.js.map

package/mobile/lib/utils/formatDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatDate.js","sourceRoot":"","sources":["../../src/utils/formatDate.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC"}

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
@@ -54,7 +54,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
             <Img className="flex justify-center align-center mb-xl" image={image} />
           ) : null
         }
-        buttons={renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })}
+        buttons={renderButtonsSection([button], { buttonClassName: 'w-full self-end' })}
       >
         {colors?.length ? (
           <div className="flex text-secondary-text mb-m">

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -39,7 +39,7 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-m z-10" title={title} /> : null
         }
-        backImage={image?.src ? <Img image={image} /> : null}
+        rightImage={image?.src ? <Img image={image} /> : null}
       >
         <div className="flex justify-between mb-m">
           {description ? (

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -36,7 +36,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
 
     return (
       <div data-theme={colorPalette}>
-        <section className={style('relative', pageStyle, className)}>
+        <section className={style('@container relative', pageStyle, className)}>
           {slots?.header ? (
             <div className="relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]">
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}

package/mobile/src/components/Depository/Depository.tsx

@@ -15,11 +15,12 @@ interface DepositoryProps extends DepositoryContent, UniBlockProps {}
 export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
   ({ 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), []);
+    const handleChangePage = useCallback((page: number) => setCurrentPage(page - 1), []);
+    const handleItemCountChange = useCallback((count: number) => setItemCount(count), []);
 
     return (
       <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
@@ -35,6 +36,8 @@ export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
             currentPage={currentPage + 1}
             onPageChange={handleChangePage}
             totalPages={totalPages + 1}
+            itemCount={itemCount}
+            onItemCountChange={handleItemCountChange}
           />
         </div>
       </BlockWrapper>

package/mobile/src/components/Depository/DepositoryItem.tsx

@@ -1,15 +1,15 @@
 import { useLink } from '../../hooks/useLink';
-import { convertTimestampToDate } from '../../utils/convertTimestampToDate';
+import { formatDate } from '../../utils/formatDate';
 import { DepositoryDataItem } from './useDepository';
 
-export const DepositoryItem = ({ title, timestamp = 0, publicId }: DepositoryDataItem) => {
+export const DepositoryItem = ({ title, timestamp = '', publicId }: DepositoryDataItem) => {
   const link = useLink();
   const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
 
   return (
     <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
       <div className="col-span-2 text-m">
-        <span>{convertTimestampToDate(timestamp)}</span>
+        <span>{formatDate(timestamp)}</span>
       </div>
       <div className="col-span-10 text-h6 hover:text-primary-active">
         <a href={href} download aria-label="Скачать">

package/mobile/src/components/Depository/useDepository.ts

@@ -3,7 +3,7 @@ import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 
 export interface DepositoryDataItem {
   publicId?: number;
-  timestamp?: number;
+  timestamp?: string;
   title?: number;
 }
 

package/mobile/src/components/ProductTile/ProductTile.example.json

@@ -37,7 +37,7 @@
     "imageOptions": {
       "directionRight": true,
       "imageAlign": "end",
-      "isBackground": true
+      "isSecondary": true
     }
   }
 }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -24,7 +24,7 @@ export const ProductTile = JSX<ProductTileProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         isTabularBenefits={isTabularBenefits}
-        imageOptions={{ isBackground: true, ...imageOptions }}
+        imageOptions={{ isImageSecondary: true, ...imageOptions }}
         {...rest}
       >
         {additionalDescription ? (

package/mobile/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import type { HeadlineVersion } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -9,9 +10,8 @@ import { Img } from '../Img/Img';
 import { List } from '../List/List';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
-import type { BaseProductTileContent } from './BaseProductTileContent';
-import type { HeadlineVersion } from '../../model/HeadlineType';
 import type { TextAlign } from '../Text/TextProps';
+import type { BaseProductTileContent } from './BaseProductTileContent';
 
 interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {}
 
@@ -36,10 +36,10 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     buttons,
     image,
     imageOptions: {
-      imageAlign = 'end',
+      imageAlign = 'center',
       directionRight = true,
-      isBackground,
       isImageAlwaysOnRight,
+      isImageSecondary = false,
     } = {},
     children,
   }) => {
@@ -55,7 +55,8 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         padding={padding}
         defaultPadding={defaultPadding}
         {...(isFullWidthTitle ? { insetTitle: headline } : { title: headline })}
-        {...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight))}
+        {...leftOrRightImage(img, directionRight)}
+        isImageSecondary={isImageSecondary}
         imageAlign={imageAlign}
         isImageAlwaysOnRight={isImageAlwaysOnRight}
         buttons={renderButtonsSection(buttons)}

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,12 +1,12 @@
 import type { Align } from '../../model/Align';
 import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineProps } from '../../model/HeadlineType';
+import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
+import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 import type { ImageContent } from '../Img/ImgProps';
 import type { ListContent } from '../List/ListContent';
 import type { RichTextProps } from '../RichText/RichTextProps';
 import type { TagsContent } from '../Tags/TagsContent';
-import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
-import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 
 /** @title Доп. настройки картинки */
 export interface TileImageOptions {
@@ -14,8 +14,8 @@ export interface TileImageOptions {
   directionRight?: boolean;
   /** @title Выравнивание изображения */
   imageAlign?: Align;
-  /** @title Фоновое изображение */
-  isBackground?: boolean;
+  /** @title Второстепенное изображение */
+  isImageSecondary?: boolean;
   /** @title Изображение всегда справа */
   isImageAlwaysOnRight?: boolean;
 }

package/mobile/src/ui-kit/BaseTile/BaseTile.tsx

@@ -10,9 +10,9 @@ interface BaseTileProps extends UniBlockProps {
   leftImage?: VNode;
   rightImage?: VNode;
   imageAlign?: Align;
-  backImage?: VNode;
   buttons?: VNode;
   isImageAlwaysOnRight?: boolean;
+  isImageSecondary?: boolean;
 }
 
 const imageAlignmentMap: Record<Align, string> = {
@@ -32,8 +32,8 @@ export const BaseTile = JSX<BaseTileProps>(
     leftImage,
     rightImage,
     imageAlign,
-    backImage,
     isImageAlwaysOnRight = false,
+    isImageSecondary,
     children,
   }) => (
     <div
@@ -46,35 +46,41 @@ export const BaseTile = JSX<BaseTileProps>(
       {title ? <div className="relative">{title}</div> : null}
       <div
         className={style(
-          'grow relative flex justify-around @lg:justify-between items-stretch gap-3xl',
-          isImageAlwaysOnRight ? 'flex-row' : 'flex-col-reverse @lg:flex-row',
+          'grow relative flex flex-col-reverse @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl',
         )}
       >
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
-            'flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]',
+            'grid gap-3xl',
+            rightImage ? '@xl:grid-cols-2' : '',
             leftImage ? '' : 'grow',
           )}
         >
-          {insetTitle}
-          <div className="grow">{children}</div>
-          {backImage ? (
-            <div className="justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">
-              {backImage}
-            </div>
-          ) : null}
-          {buttons}
+          <div className="grow grid gap-3xl row-span-1">
+            {insetTitle}
+            {children}
+          </div>
+          {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,
+          })}
+          <div className="self-end">{buttons}</div>
         </div>
-        {renderImageContainer(rightImage, {
-          className: isImageAlwaysOnRight ? '' : '@xl:order-1',
-          imageAlign,
-        })}
       </div>
     </div>
   ),
 );
 
+const positionStyle = (isImageAlwaysOnRight: boolean) =>
+  isImageAlwaysOnRight
+    ? 'ml-xl justify-self-end row-start-1 row-end-3 col-start-2 self-center'
+    : '';
+
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
@@ -82,7 +88,7 @@ const renderImageContainer = (
   image ? (
     <div
       className={style(
-        'md:flex-shrink-0 self-center',
+        'shrink-1/2 justify-self-center',
         imageAlign && imageAlignmentMap[imageAlign],
         className,
       )}

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -71,7 +71,7 @@ const getInlineStyle = (className?: string, height?: string) => {
     return {};
   }
 
-  return { height: isOnlyDigits(height) ? `${height}px` : height };
+  return { height: isOnlyDigits(height) ? `${height}px` : height, width: 'auto' };
 };
 
 const getSvgSize = (width?: string) => (width ? '' : 'w-full h-full');

package/mobile/src/ui-kit/Pagination/PageSizeSelector.tsx

@@ -0,0 +1,27 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { Select } from '../Select/Select';
+
+const DEFAULT_OPTIONS = [{ key: '10' }, { key: '50' }, { key: '100' }];
+
+interface PageSizeSelectorProps {
+  itemCount: number;
+  onItemCountChange: (count: number) => void;
+}
+
+export const PageSizeSelector = ({ itemCount, onItemCountChange }: PageSizeSelectorProps) => {
+  const handleItemCountChange = useCallback(
+    ({ key }: { key: string }) => onItemCountChange(Number(key)),
+    [],
+  );
+
+  return (
+    <div className="flex items-center gap-s">
+      <span>Показать по</span>
+      <Select
+        onChange={handleItemCountChange}
+        value={{ key: String(itemCount) }}
+        options={DEFAULT_OPTIONS}
+      />
+    </div>
+  );
+};

package/mobile/src/ui-kit/Pagination/Pagination.tsx

@@ -1,87 +1,33 @@
-import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
-import { Icon } from '../Icon/Icon';
-import { renderPages } from './renderPages';
-
-export const paginationBlockStyle =
-  'py-m px-lg rounded-md cursor-pointer hover:bg-green-more-dark hover:text-white';
+import { PageSizeSelector } from './PageSizeSelector';
+import { PaginationContainer } from './PaginationContainer';
 
 export interface PaginationProps {
   currentPage: number;
   onPageChange: (page: number) => void;
   totalPages: number;
+  itemCount?: number;
+  onItemCountChange?: (count: number) => void;
 }
 
-const ICON_SIZE = { width: '24', height: '24' };
-
-export const Pagination = ({ currentPage, onPageChange, totalPages }: PaginationProps) => {
-  const handlePrevPage = useCallback(() => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  }, [currentPage]);
-
-  const handleNextPage = useCallback(() => {
-    if (currentPage < totalPages - 1) {
-      onPageChange(currentPage + 1);
-    }
-  }, [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 (
-    <div className="mt-3xl flex items-center select-none" role="navigation" aria-label="Пагинация">
-      <div className="flex gap-m items-center">
-        <div onClick={handlePrevPage}>
-          <Icon
-            name="ArrowLeftIcon"
-            iconVersion="black"
-            imageClassName={getIconStyle(currentPage === 1)}
-            {...ICON_SIZE}
-          />
-        </div>
-        <div className="flex gap-xs">
-          {currentPage > 1 ? (
-            <div onClick={handleFirstPage} className={paginationBlockStyle} aria-label="Страница 1">
-              1
-            </div>
-          ) : null}
-          {currentPage > 4 ? <div className="py-m px-s">...</div> : null}
-          {pages.map(renderPages)}
-          {currentPage < totalPages - 3 ? <div className="py-m px-s">...</div> : null}
-          {currentPage < totalPages ? (
-            <div
-              onClick={handleLastPage}
-              className={paginationBlockStyle}
-              aria-label={`Страница ${totalPages}}`}
-            >
-              {totalPages}
-            </div>
-          ) : null}
-        </div>
-        <div onClick={handleNextPage}>
-          <Icon
-            className="rotate-180"
-            name="ArrowLeftIcon"
-            iconVersion="black"
-            imageClassName={getIconStyle(currentPage === totalPages)}
-            {...ICON_SIZE}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const getIconStyle = (condition: boolean) =>
-  condition ? 'opacity-20' : 'cursor-pointer hover:opacity-60';
+export const Pagination = ({
+  currentPage,
+  onPageChange,
+  totalPages,
+  itemCount,
+  onItemCountChange,
+}: PaginationProps) => (
+  <div
+    className="mt-3xl flex justify-between items-center select-none"
+    role="navigation"
+    aria-label="Пагинация"
+  >
+    <PaginationContainer
+      currentPage={currentPage}
+      onPageChange={onPageChange}
+      totalPages={totalPages}
+    />
+    {itemCount && onItemCountChange ? (
+      <PageSizeSelector itemCount={itemCount} onItemCountChange={onItemCountChange} />
+    ) : null}
+  </div>
+);