@redneckz/wildless-cms-uni-blocks 0.2.61 → 0.2.64

package/lib/types.d.ts

@@ -60,11 +60,6 @@ export declare type NavMenuItem = LinkContent;
 export interface TopMenuItem extends NavMenuItem {
     items?: NavMenuItem[];
 }
-export interface Benefit {
-    label: string;
-    description?: string;
-    icon?: string;
-}
 export interface DaDataResult {
     suggestions?: DaDataSuggestion<DaDataAddress>[];
 }

package/lib/ui-kit/ArrowButton.d.ts

@@ -0,0 +1,6 @@
+export interface ArrowButtonProps {
+    onClick?: () => void;
+    ariaLabel?: string;
+    className?: string;
+}
+export declare const ArrowButton: (props: import("@redneckz/uni-jsx").PropsWithChildren<ArrowButtonProps, any>, context?: any) => any;

package/lib/ui-kit/ArrowButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const ArrowButton = JSX(({ className, onClick, ariaLabel }) => {
+    return (_jsx("button", { className: `${className} border-none no-underline w-12 h-12 rounded-3xl bg-white flex text-black hover:text-primary-main`, style: { boxShadow: '0px 4px 25px rgba(0, 0, 0, 0.07)' }, onClick: onClick, "aria-label": ariaLabel, children: _jsxs("svg", { className: "m-auto", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7 12L3 8L7 4", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), _jsx("path", { d: "M14 9C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7L14 9ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9L8 7ZM14 7L8 7L8 9L14 9L14 7Z", fill: "currentColor" })] }) }));
+});
+//# sourceMappingURL=ArrowButton.js.map

package/lib/ui-kit/ArrowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowButton.js","sourceRoot":"","sources":["../../src/ui-kit/ArrowButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AASxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,OAAO,CACL,iBACE,SAAS,EAAE,GAAG,SAAS,kGAAkG,EACzH,KAAK,EAAE,EAAE,SAAS,EAAE,kCAAkC,EAAE,EACxD,OAAO,EAAE,OAAO,gBACJ,SAAS,YAErB,eACE,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,eAAM,CAAC,EAAC,eAAe,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAG,EACxF,eACE,CAAC,EAAC,kJAAkJ,EACpJ,IAAI,EAAC,cAAc,GACnB,IACE,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/ui-kit/Icon.d.ts

@@ -0,0 +1,11 @@
+export declare type IconName = 'ActualBalanceIcon' | 'AppleIcon' | 'CalendarIcon' | 'ClockIcon' | 'ComfortableCompIcon' | 'DollarIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'GridIcon' | 'LoupeIcon' | 'NewDocIcon' | 'OkIcon' | 'PassSendIcon' | 'PercentageSquareIcon' | 'PlayMarketIcon' | 'ProfileIcon' | 'SignDocsIcon' | 'TelegramIcon' | 'VKIcon' | 'ArrowLeftIcon';
+export interface IconProps {
+    className?: string;
+    name: IconName;
+    alt?: string;
+    title?: string;
+    width?: string;
+    height?: string;
+    'aria-hidden'?: 'true';
+}
+export declare const Icon: (props: import("@redneckz/uni-jsx").PropsWithChildren<IconProps, any>, context?: any) => any;

package/lib/ui-kit/Icon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { projectSettings } from '../ProjectSettings.js';
+export const Icon = JSX(({ className, name, alt = `Icon ${name}`, title = alt, ...imgProps }) => (_jsx("img", { className: className, src: `${projectSettings.CDN || ''}icons/${name}.svg`, alt: alt, title: title, ...imgProps })));
+//# sourceMappingURL=Icon.js.map

package/lib/ui-kit/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/ui-kit/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAkCrD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CACrB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,GAAG,QAAQ,IAAI,EAAE,EAAE,KAAK,GAAG,GAAG,EAAE,GAAG,QAAQ,EAAE,EAAE,EAAE,CAAC,CACvE,cACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,eAAe,CAAC,GAAG,IAAI,EAAE,SAAS,IAAI,MAAM,EACpD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,KACR,QAAQ,GACZ,CACH,CACF,CAAC"}

package/lib/ui-kit/IconButton.d.ts

@@ -1,6 +1,7 @@
 import type { ButtonProps } from './Button';
+import { IconName } from './Icon';
 export interface IconButtonProps extends ButtonProps {
-    icon?: string;
+    icon?: IconName;
     aboveText?: string;
 }
 export declare const IconButton: (props: import("@redneckz/uni-jsx").PropsWithChildren<IconButtonProps, any>, context?: any) => any;

package/lib/ui-kit/IconButton.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-import { AppleIcon, PlayMarket } from '../Icons/index.js';
 import { Button } from './Button.js';
-const ICONS = { AppleIcon, PlayMarket };
+import { Icon } from './Icon.js';
 export const IconButton = JSX((props) => {
-    return (_jsx(Button, { ...props, children: props.icon ? (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-2", children: ICONS[props.icon]?.() }), _jsxs("div", { children: [_jsx("div", { className: "text-xxs text-left", children: props.aboveText }), _jsx("div", { className: "text-sm font-medium text-left", children: props.text })] })] })) : null }));
+    return (_jsx(Button, { ...props, children: props.icon ? (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-2", children: _jsx(Icon, { name: props.icon, width: "24", height: "24" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-xxs text-left", children: props.aboveText }), _jsx("div", { className: "text-sm font-medium text-left", children: props.text })] })] })) : null }));
 });
 //# sourceMappingURL=IconButton.js.map

package/lib/ui-kit/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/ui-kit/IconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,KAAK,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAOxC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,KAAK,EAAE,EAAE;IACvD,OAAO,CACL,KAAC,MAAM,OAAK,KAAK,YACd,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,MAAM,YAAE,KAAK,CAAC,KAAK,CAAC,IAA0B,CAAC,EAAE,EAAE,GAAO,EACzE,0BACE,cAAK,SAAS,EAAC,oBAAoB,YAAE,KAAK,CAAC,SAAS,GAAO,EAC3D,cAAK,SAAS,EAAC,+BAA+B,YAAE,KAAK,CAAC,IAAI,GAAO,IAC7D,IACF,CACP,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/ui-kit/IconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAC;AAOxC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,KAAK,EAAE,EAAE;IACvD,OAAO,CACL,KAAC,MAAM,OAAK,KAAK,YACd,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC7C,EACN,0BACE,cAAK,SAAS,EAAC,oBAAoB,YAAE,KAAK,CAAC,SAAS,GAAO,EAC3D,cAAK,SAAS,EAAC,+BAA+B,YAAE,KAAK,CAAC,IAAI,GAAO,IAC7D,IACF,CACP,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/ui-kit/SearchBar.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-import { LoupeIcon } from '../Icons/index.js';
+import { Icon } from './Icon.js';
 export const SearchBar = JSX(({ className, context }) => {
-    const search = context.useSearch();
-    return (_jsxs("form", { className: `relative ${className || ''}`, children: [_jsxs("div", { className: "absolute rounded-l-full h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5", children: [_jsx("div", { className: "w-[24px] h-[24px]", children: LoupeIcon() }), _jsx("span", { className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" })] }), _jsx("input", { className: "pl-[170px] w-full font-sans font-normal text-sm border border-solid border-main-divider rounded-full h-full box-border outline-none", value: search.term, onChange: (e) => search.setTerm(e.target.value), type: "text", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", name: "s" }), _jsx("button", { type: "submit", className: "absolute font-sans font-normal text-sm cursor-pointer bg-transparent hover:bg-primary-hover active:bg-primary-active text-primary-main hover:text-white border-none px-5 rounded-r-full h-full top-0 right-0 outline-none", onClick: (e) => {
+    const { term, setTerm } = context.useSearch();
+    return (_jsxs("form", { className: `relative ${className || ''}`, children: [_jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [_jsx("div", { className: "w-[24px] h-[24px]", children: _jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (_jsx("span", { className: "font-sans font-normal text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), _jsx("input", { className: "pl-12 w-full font-sans font-normal text-base text-black border border-solid border-main-divider rounded h-full box-border outline-none pr-[6%]", value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "s" }), term && (_jsx("button", { type: "submit", className: "absolute font-sans font-normal text-sm cursor-pointer bg-transparent hover:bg-primary-hover active:bg-primary-active text-primary-main hover:text-white border-none px-5 py-2 rounded top-1 right-1 outline-none", onClick: (e) => {
                     e.preventDefault();
                     console.log('click');
-                }, children: "\u041D\u0430\u0439\u0442\u0438" })] }));
+                }, children: "\u041D\u0430\u0439\u0442\u0438" }))] }));
 });
 //# sourceMappingURL=SearchBar.js.map

package/lib/ui-kit/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../src/ui-kit/SearchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAgB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IACrE,MAAM,MAAM,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IACnC,OAAO,CACL,gBAAM,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,aAC5C,eAAK,SAAS,EAAC,4FAA4F,aACzG,cAAK,SAAS,EAAC,mBAAmB,YAAE,SAAS,EAAE,GAAO,EACtD,eAAM,SAAS,EAAC,mDAAmD,2FAAsB,IACrF,EACN,gBACE,SAAS,EAAC,qIAAqI,EAC/I,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,4EAAgB,EAC5B,IAAI,EAAC,GAAG,GACR,EACF,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2NAA2N,EACrO,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC,+CAGM,IACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../src/ui-kit/SearchBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAgB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAC9C,OAAO,CACL,gBAAM,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,aAC5C,eAAK,SAAS,EAAC,yGAAyG,aACtH,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC5C,EACL,CAAC,IAAI,IAAI,CACR,eAAM,SAAS,EAAC,qDAAqD,2FAE9D,CACR,IACG,EACN,gBACE,SAAS,EAAC,gJAAgJ,EAC1J,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,GAAG,GACR,EACD,IAAI,IAAI,CACP,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,kNAAkN,EAC5N,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC,+CAGM,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.61",
+  "version": "0.2.64",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -74,16 +74,20 @@
     "url": "https://github.com/redneckz/wildless-cms-uni-blocks/issues"
   },
   "scripts": {
-    "build": "npm run build:lib && npm run build:commonjs && npm run build:style",
+    "start": "npm run cosmos",
+    "build": "npm run build:lib && npm run build:commonjs && npm run build:style && npm run build:icons",
     "build:lib": "rimraf ./lib && tsc --build --verbose",
     "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir dist",
     "bundle": "rimraf ./bundle && rollup -c",
     "build:style": "postcss './src/**/*.css' --env production --dir ./lib",
     "postbuild:style": "npm run size",
+    "build:icons": "svgo -f ./src/icons -o ./cosmos-static/icons",
     "size": "size-limit",
     "test": "jest --coverage",
+    "precosmos": "npm run build:icons",
     "cosmos": "cosmos",
+    "precosmos:export": "npm run build:icons",
     "cosmos:export": "cosmos-export",
     "prepare": "husky install || exit 0"
   },
@@ -130,6 +134,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "size-limit": "^7.0.8",
     "style-loader": "^3.3.1",
+    "svgo": "^2.8.0",
     "tailwindcss": "^3.1.1",
     "ts-jest": "^28.0.4",
     "ts-loader": "^9.3.0",
@@ -145,8 +150,8 @@
   ],
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,css}": "prettier --write",
-    "src/**/*.{js,jsx,ts,tsx,css,json}": [
-      "cosmos-export",
+    "*.{js,jsx,ts,tsx,css,json}": [
+      "npm run cosmos:export",
       "git add ./docs"
     ]
   }

package/src/BenefitsBlock.tsx

@@ -1,8 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ClockIcon, SignDocsIcon, ComfortableCompIcon, ActualBalanceIcon } from './Icons/index';
-import type { UniBlockProps, Benefit } from './types';
+import type { UniBlockProps } from './types';
+import { Icon, IconName } from './ui-kit/Icon';
 
-const ICONS = { ClockIcon, SignDocsIcon, ComfortableCompIcon, ActualBalanceIcon };
+export interface Benefit {
+  label: string;
+  description?: string;
+  icon?: IconName;
+}
 
 export interface BenefitsBlockContent {
   title?: string;
@@ -30,9 +34,12 @@ const renderStep = (benefit: Benefit, i: number) => {
   return (
     <div key={String(i)} className="flex items-center p-10 gap-5 max-w-[580px]">
       {benefit.icon && (
-        <div className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]">
-          {ICONS[benefit.icon as keyof typeof ICONS]?.()}
-        </div>
+        <Icon
+          className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"
+          name={benefit.icon}
+          width="70"
+          height="70"
+        />
       )}
       <div>
         <h3 className="font-medium text-xl m-0">{benefit.label}</h3>

package/src/Blocks.ts

@@ -13,6 +13,7 @@ import { BaseTileContent } from './BaseTile';
 import { PromoTile, PromoTileContent } from './PromoTile';
 import { Tile } from './Tile';
 import { TextBlock, TextBlockContent } from './TextBlock';
+import { Gallery, GalleryContent } from './Gallery';
 
 export const Blocks = {
   Header,
@@ -28,6 +29,7 @@ export const Blocks = {
   ProductGallery,
   ExchangeRateTile,
   MobileAppTile,
+  Gallery,
 };
 
 export type BlockContent =
@@ -43,4 +45,5 @@ export type BlockContent =
   | BenefitsBlockContent
   | ProductGalleryContent
   | ExchangeRateTileContent
-  | MobileAppTileContent;
+  | MobileAppTileContent
+  | GalleryContent;

package/src/ContentPage.page.json

@@ -388,7 +388,23 @@
         "qr": {
           "href": "https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true",
           "src": "data:image/png;base64,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"
-        }
+        },
+        "buttons": [
+          {
+            "aboveText": "Загрузите в",
+            "text": "App Store",
+            "icon": "AppleIcon",
+            "href": "#",
+            "version": "secondary"
+          },
+          {
+            "aboveText": "Доступно в",
+            "text": "Google Play",
+            "icon": "PlayMarketIcon",
+            "href": "#",
+            "version": "secondary"
+          }
+        ]
       },
       "mobile": {
         "style": ["col-span-12"]

package/src/ExchangeRateTile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { DollarIcon, EuroIcon } from './Icons/index';
 import { Tile } from './Tile';
 import type { UniBlockProps } from './types';
 import { ButtonProps } from './ui-kit/Button';
+import { Icon } from './ui-kit/Icon';
 
 export interface ExchangeRateTileContent {
   title?: string;
@@ -14,8 +14,8 @@ const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
 
 const CURRENCY_CODES = ['USD', 'EUR'];
 const CURRENCY_ICONS_MAP = {
-  USD: DollarIcon,
-  EUR: EuroIcon,
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
 };
 
 const buttons: ButtonProps[] = [
@@ -48,7 +48,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context
               <tr key={code}>
                 <CurrencyTD className="pt-4">
                   <div className="flex items-center">
-                    {CURRENCY_ICONS_MAP[code] ? CURRENCY_ICONS_MAP[code]() : null}
+                    <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
                     <span className="ml-2">{code}</span>
                   </div>
                 </CurrencyTD>

package/src/Footer/Footer.tsx

@@ -24,8 +24,8 @@ export interface FooterProps extends FooterContent, UniBlockProps {}
 export const Footer = JSX<FooterProps>(
   ({ className, documents, relatedEnterprises, contacts, socialMedia, topItems, context }) => {
     return (
-      <footer className={`${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`}>
-        <div className="flex items-stretch gap-32 py-8 xl:gap-8">
+      <footer className={`${className} px-9 py-10 bg-white`}>
+        <div className="flex items-stretch gap-32 pb-8 xl:gap-8">
           <Logo className={`${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}`} />
           <SearchBar context={context} className="grow" />
         </div>

package/src/Footer/HorizontalNavigation.tsx

@@ -10,7 +10,7 @@ export const HorizontalNavigation = JSX<FooterLink>(({ className, links, context
   return (
     <div className={`${className || ''}`}>
       {links?.length ? (
-        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y-1 border-y-main-divider">
+        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
           {links.map((_, i) => (
             <HorizontalNavigationLink
               key={String(i)}

package/src/Footer/Sitemap.tsx

@@ -48,7 +48,7 @@ interface ColumnItemProps extends LinkContent {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-text no-underline"
+    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/src/Footer/SocialMedia.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { LinkContent, UniBlockProps } from '../types';
-import { TelegramIcon, VKIcon, OkIcon } from '../Icons/index';
+import { Icon, IconName } from '../ui-kit/Icon';
 import { useLink } from '../useLink';
 
-const ICONS_MAP = [
-  { origins: ['t.me', 'telegram.org'], icon: TelegramIcon, label: 'Телеграм' },
-  { origins: ['vk.com'], icon: VKIcon, label: 'ВКонтакте' },
-  { origins: ['ok.ru'], icon: OkIcon, label: 'Одноклассники' },
+const ICONS_MAP: Array<{ origins: string[]; icon: IconName; label: string }> = [
+  { origins: ['t.me', 'telegram.org'], icon: 'TelegramIcon', label: 'Телеграм' },
+  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте' },
+  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники' },
 ];
 
 export interface SocialMediaProps extends UniBlockProps {
@@ -17,7 +17,7 @@ export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context })
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <div className={`flex items-end justify-end gap-2 py-6 ${className || ''}`}>
+    <div className={`flex items-end justify-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
       {media?.map((_, index) => (
         <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
       ))}
@@ -30,17 +30,17 @@ interface MediaButtonProps {
 }
 
 const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon: Icon, label } =
+  const { icon, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
   return (
     <a
-      className="flex items-center justify-center border-solid border-1 border-main-divider rounded-full no-underline outline-none w-8 h-8"
+      className="flex items-center justify-center border-solid border border-main-divider rounded-full no-underline outline-none w-9 h-9"
       href={href}
       target="_blank"
       rel="noopener noreferrer"
       aria-label={label}
     >
-      {Icon && <Icon className="block" />}
+      {icon && <Icon className="block" name={icon} /> /* TODO width & height */}
     </a>
   );
 });

package/src/Footer/TextInformation.tsx

@@ -8,9 +8,9 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   const { handlerDecorator } = context;
   return (
     <div className={`${className || ''}`}>
-      <div className="py-[5px]">
+      <div className="pt-5 pb-[5px]">
         <span className="font-sans font-normal text-xs text-secondary-text">
-          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00AB;Россельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
       {links?.length ? (

package/src/Gallery.fixture.tsx

@@ -0,0 +1,213 @@
+import { context } from './setup-fixture';
+
+import { Gallery, GalleryProps } from './Gallery';
+import { Picture } from './types';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 140,
+    height: 140,
+  },
+};
+
+const defaultItems = [
+  'Качественные фермерские продукты напрямую от производителей',
+  'Самая большая база сельских туров по России',
+  'Площадки для создания комфортной жизни за городом',
+];
+
+const defaultProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+  ],
+};
+
+const textAndButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+      href: '/credit-cards',
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+      href: '/credit-cards',
+    },
+  ],
+};
+
+const listAndButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+      href: '/credit-cards',
+      items: defaultItems,
+    },
+  ],
+};
+
+const textAndNoButtonProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+  ],
+};
+
+const onlyTitleProps: GalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+  ],
+};
+
+export default {
+  default: <Gallery {...defaultProps} />,
+  'text and button': <Gallery {...textAndButtonProps} />,
+  'list and button': <Gallery {...listAndButtonProps} />,
+  'text and no button': <Gallery {...textAndNoButtonProps} />,
+  'only title': <Gallery {...onlyTitleProps} />,
+};