@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.12

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntersectionObserverTag.js","sourceRoot":"","sources":["../../src/ui-kit/IntersectionObserverTag.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAYlE,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAA+B,CAAC,KAAK,EAAE,EAAE;IACjF,MAAM,EACJ,GAAG,GAAG,SAAS,EACf,gBAAgB,EAChB,eAAe,EACf,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,IAAI,EACb,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,oBAAoB,GAAG,MAAM,CAA8B,IAAI,CAAC,CAAC;IAEvE,MAAM,GAAG,GAAG,WAAW,CACrB,CAAC,OAA2B,EAAE,EAAE;QAC9B,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO;SACR;QAED,IAAI,oBAAoB,CAAC,OAAO,EAAE;YAChC,oBAAoB,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;SAC3C;QAED,oBAAoB,CAAC,OAAO,GAAG,IAAI,oBAAoB,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;QAC3F,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,gBAAgB,EAAE,eAAe,CAAC,CACpC,CAAC;IAEF,MAAM,GAAG,GAAG,GAAU,CAAC;IAEvB,OAAO,CACL,KAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,YAC5C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -5,17 +5,22 @@ const TEXT_STYLE_MAP = {
     primary: 'text-primary-text',
     secondary: 'text-white',
     gray: 'text-secondary-text',
-    tile: 'text-primary-text',
-    'tile-white': 'text-white',
 };
 const TEXT_SIZE_MAP = {
-    M: 'text-xl-light',
-    L: 'text-h5-light',
+    S: 'text-l-light',
+    M: 'text-h6',
+    L: 'text-h5',
+};
+const ITEM_INDENT_MAP = {
+    S: 'ml-2',
+    M: 'ml-3',
+    L: 'ml-4',
 };
 export const List = JSX((props) => {
-    const { className = '', itemClassName, isDotted, items, listItemSize = 'M', version = 'primary', } = props;
-    return (_jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className}`, role: "list", children: items?.length
-            ? items.map((_, i) => (_jsx(ListItem, { className: itemClassName, isDotted: isDotted, version: version, children: _ }, String(i))))
-            : null }));
+    const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
+    if (!items?.length) {
+        return null;
+    }
+    return (_jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''}`, role: "list", children: items.map((item, i) => (_jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, version: version, size: listItemSize, children: item }, String(i)))) }));
 });
 //# sourceMappingURL=List.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/ui-kit/List/List.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,MAAM,cAAc,GAAoC;IACtD,OAAO,EAAE,mBAAmB;IAC5B,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,qBAAqB;IAC3B,IAAI,EAAE,mBAAmB;IACzB,YAAY,EAAE,YAAY;CAC3B,CAAC;AAEF,MAAM,aAAa,GAAiC;IAClD,CAAC,EAAE,eAAe;IAClB,CAAC,EAAE,eAAe;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,aAAa,EACb,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,GAAG,EAClB,OAAO,GAAG,SAAS,GACpB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,kBACE,SAAS,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,YAAY,CAAC,IAAI,SAAS,EAAE,EACnF,IAAI,EAAC,MAAM,YAEV,KAAK,EAAE,MAAM;YACZ,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClB,KAAC,QAAQ,IAEP,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,YAEf,CAAC,IALG,MAAM,CAAC,CAAC,CAAC,CAML,CACZ,CAAC;YACJ,CAAC,CAAC,IAAI,GACA,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/ui-kit/List/List.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,MAAM,cAAc,GAAoC;IACtD,OAAO,EAAE,mBAAmB;IAC5B,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,qBAAqB;CAC5B,CAAC;AAEF,MAAM,aAAa,GAAiC;IAClD,CAAC,EAAE,cAAc;IACjB,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;CACb,CAAC;AAEF,MAAM,eAAe,GAAG;IACtB,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,MAAM;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,SAAS,EACT,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,KAAK,EACL,YAAY,GAAG,GAAG,EAClB,OAAO,GAAG,SAAS,GACpB,GAAG,KAAK,CAAC;IAEV,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,kBACE,SAAS,EAAE,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,YAAY,CAAC,IAAI,SAAS,IAC/E,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAC9C,EAAE,EACF,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,KAAC,QAAQ,IAEP,SAAS,EAAE,GAAG,aAAa,SAAS,EACpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,YAAY,YAEjB,IAAI,IANA,MAAM,CAAC,CAAC,CAAC,CAOL,CACZ,CAAC,GACM,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/lib/ui-kit/List/ListItem.d.ts

@@ -1,4 +1,4 @@
-import type { ListItemVersion } from './ListProps';
+import type { ListItemSize, ListItemVersion } from './ListProps';
 /**
  * @title Параметры элемента списка
  */
@@ -7,6 +7,6 @@ export interface ListItemProps {
     version?: ListItemVersion;
     text?: string;
     isDotted?: boolean;
+    size?: ListItemSize;
 }
 export declare const ListItem: import("@redneckz/uni-jsx").UNIComponent<ListItemProps, any, any>;
-export declare const getListStyle: (version: ListItemVersion) => string;

package/mobile/lib/ui-kit/List/ListItem.js

@@ -1,30 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-const LIST_STYLE_CLASSES = {
-    primary: 'rounded-full inline-block mr-3 mt-2',
-    secondary: 'rounded-full inline-block mr-3 mt-2',
-    gray: 'rounded-full inline-block mr-3 mt-2',
-    tile: 'rounded-full inline-block mr-4 mt-3',
-    'tile-white': 'rounded-full inline-block mr-4 mt-3',
-};
 const LIST_DOT_STYLE_MAP = {
     primary: 'bg-primary-text',
     secondary: 'bg-white',
     gray: 'bg-secondary-text',
-    tile: 'bg-black',
-    'tile-white': 'bg-white',
 };
-export const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
-    return (_jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? _jsx("div", { className: getListStyle(version) }) : null, _jsx("span", { children: children })] }));
-});
-export const getListStyle = (version) => {
-    const size = {
-        primary: 'w-2 h-2 min-w-2 min-h-2',
-        secondary: 'w-2 h-2 min-w-2 min-h-2',
-        gray: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5',
-        tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
-        'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
-    };
-    return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
+const DOT_SIZE_MAP = {
+    L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
+    M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
+    S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
 };
+export const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
+    return (_jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? (_jsx("div", { className: `rounded-full inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` })) : null, _jsx("span", { children: children })] }));
+});
 //# sourceMappingURL=ListItem.js.map

package/mobile/lib/ui-kit/List/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/ui-kit/List/ListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAaxC,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,qCAAqC;IAC9C,SAAS,EAAE,qCAAqC;IAChD,IAAI,EAAE,qCAAqC;IAC3C,IAAI,EAAE,qCAAqC;IAC3C,YAAY,EAAE,qCAAqC;CACpD,CAAC;AAEF,MAAM,kBAAkB,GAAoC;IAC1D,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,UAAU;IAChB,YAAY,EAAE,UAAU;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE;IACrE,OAAO,CACL,eAAK,SAAS,EAAE,8BAA8B,SAAS,EAAE,EAAE,IAAI,EAAC,UAAU,aACvE,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,GAAI,CAAC,CAAC,CAAC,IAAI,EAC5D,yBAAO,QAAQ,GAAQ,IACnB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAwB,EAAE,EAAE;IACvD,MAAM,IAAI,GAAG;QACX,OAAO,EAAE,yBAAyB;QAClC,SAAS,EAAE,yBAAyB;QACpC,IAAI,EAAE,iCAAiC;QACvC,IAAI,EAAE,yCAAyC;QAC/C,YAAY,EAAE,yCAAyC;KACxD,CAAC;IAEF,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,IAAI,kBAAkB,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;AAC1F,CAAC,CAAC"}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/ui-kit/List/ListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAaxC,MAAM,kBAAkB,GAAoC;IAC1D,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,CAAC,EAAE,2CAA2C;IAC9C,CAAC,EAAE,2CAA2C;IAC9C,CAAC,EAAE,qCAAqC;CACzC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,GAAG,EAAE,EAAE,EAAE;IACjF,OAAO,CACL,eAAK,SAAS,EAAE,8BAA8B,SAAS,EAAE,EAAE,IAAI,EAAC,UAAU,aACvE,QAAQ,CAAC,CAAC,CAAC,CACV,cACE,SAAS,EAAE,6BAA6B,kBAAkB,CAAC,OAAO,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,GAC3F,CACH,CAAC,CAAC,CAAC,IAAI,EACR,yBAAO,QAAQ,GAAQ,IACnB,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/List/ListProps.d.ts

@@ -1,20 +1,22 @@
 import type { ListContent } from './ListContent';
 /**
  * @title Размер пунктов списка
- * @enumNames ["Средний", "Большой"]
+ * @enumNames ["Маленький", "Средний", "Большой"]
  */
-export declare type ListItemSize = 'M' | 'L';
+export declare type ListItemSize = 'S' | 'M' | 'L';
 /**
  * @title Версия списка
  * @enumNames ["Основной", "Второстепенный", "Серый"]
  */
-export declare type ListItemVersion = 'primary' | 'secondary' | 'gray' | 'tile' | 'tile-white';
+export declare type ListItemVersion = 'primary' | 'secondary' | 'gray';
 /**
  * @title Содержимое списка
  */
 export interface ListProps extends ListContent {
     /** @hidden */
     className?: string;
+    /** @title Отступ */
+    hasIndent?: boolean;
     /** @hidden */
     itemClassName?: string;
     /** @title Буллиты */

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-export const Radio = JSX(({ name, text, value, checked, onChange, className }) => (_jsx("div", { className: className, children: _jsxs("label", { className: "flex items-center relative cursor-pointer", children: [_jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main\n        rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? _jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
+export const Radio = JSX(({ name, text, value, checked, onChange, className }) => (_jsx("div", { className: className, children: _jsxs("label", { className: "flex items-center relative cursor-pointer", children: [_jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? _jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
 //# sourceMappingURL=Radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/ui-kit/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5F,cAAK,SAAS,EAAE,SAAS,YACvB,iBAAO,SAAS,EAAC,2CAA2C,aAC1D,gBACE,SAAS,EAAC,0NACuG,EACjH,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,EACD,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,+BAA+B,YAAE,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,IACtE,GACJ,CACP,CAAC,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/ui-kit/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5F,cAAK,SAAS,EAAE,SAAS,YACvB,iBAAO,SAAS,EAAC,2CAA2C,aAC1D,gBACE,SAAS,EAAC,uYAEoH,EAC9H,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,EACD,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,+BAA+B,YAAE,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,IACtE,GACJ,CACP,CAAC,CAAC"}

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

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../Icon/Icon.js';
-import { useState, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useState, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '../../hooks/useOutsideClick.js';
 export const Select = JSX(({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    useOutsideClick(wrapperRef, setIsOpen);
     const choiceOption = (option) => {
         setSelectedItem(option);
         setIsOpen(false);
@@ -14,7 +17,7 @@ export const Select = JSX(({ className = '', isBorder = true, label, options = [
     useEffect(() => {
         setSelectedItem(value || { key: '', text: '' });
     }, [value]);
-    return (_jsxs("div", { className: `${className}`, children: [label ? _jsx("span", { className: "mb-2 flex", children: label }) : null, _jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [_jsxs("div", { className: `text-m-light flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+    return (_jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? _jsx("span", { className: "mb-2 flex", children: label }) : null, _jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [_jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
             ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [_jsx("p", { className: "p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), _jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (_jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: _jsx("div", { className: `bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
 });
 const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');

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

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

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

package/mobile/lib/utils/getSanitizedValue.js

@@ -0,0 +1,2 @@
+export const getSanitizedValue = (_) => _.split(/\s+/).join('');
+//# sourceMappingURL=getSanitizedValue.js.map

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

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

package/mobile/src/components/Accordion/AccordionItem.tsx

@@ -1,44 +1,68 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import { UniBlockProps } from '../../model/ContentPageDef';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import type { FoldButtonProps } from '../../ui-kit/Foldable/FoldButtonProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionItemCommonProps } from './AccordionContent';
-import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+
 export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, labelIcon, blocks, bordered, context }) => {
-    const { hasContent, icon, handleToggle } = useActiveHandler({ blocks });
+  ({ label = '', labelIcon, blocks, bordered, context }) => {
+    const foldableBlocks = blocks ? renderBlocksList({ context, blocks, className: '!px-0' }) : [];
 
     return (
       <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
-        <button
-          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-          ${bordered ? '' : 'py-[14px] px-0'}
-          ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-m-title-xs font-medium pr-2.5 flex ${
-              hasContent ? 'group-hover:text-primary-main' : ''
-            }`}
-          >
-            {labelIcon ? (
-              <Img image={labelIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
-            ) : null}
-            {label}
-          </span>
-          {hasContent ? (
-            <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
-          ) : null}
-        </button>
-        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+        <Foldable
+          hiddenBlocksNum={foldableBlocks.length}
+          blocks={foldableBlocks}
+          isFoldButtonOnTop
+          containerClassName="flex flex-wrap group-last:last:pb-0"
+          renderFoldButton={(props) => (
+            <FoldButton
+              className={bordered ? '' : 'py-[14px] px-0'}
+              icon={icons[Number(props.isUnfolded)]}
+              label={label}
+              primaryIcon={labelIcon}
+              hasContent={Boolean(blocks?.length)}
+              onClick={props.onToggle}
+            />
+          )}
+        />
       </li>
     );
   },
 );
 
+const FoldButton = JSX<FoldButtonProps>(
+  ({ className, hasContent, icon, label, primaryIcon, onClick }) => (
+    <button
+      className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+  ${className}
+  ${hasContent ? 'group cursor-pointer' : ''}`}
+      onClick={onClick}
+    >
+      <span
+        className={`text-m-title-xs font-medium pr-2.5 flex ${
+          hasContent ? 'group-hover:text-primary-main' : ''
+        }`}
+      >
+        {primaryIcon ? (
+          <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        ) : null}
+        {label}
+      </span>
+      {hasContent ? (
+        <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+      ) : null}
+    </button>
+  ),
+);
+
 function borderedLiClass(bordered?: boolean) {
   return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
 }

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -63,7 +63,7 @@ const renderBenefits = (
 };
 
 const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
-  if (!benefitIcon.icon) {
+  if (!benefitIcon.icon || benefitIcon?.iconVersion) {
     return benefitIcon;
   }
   benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';

package/mobile/src/components/Blocks.ts

@@ -1,6 +1,5 @@
 import { Accordion } from './Accordion/Accordion';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
-import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
@@ -18,7 +17,6 @@ import { TextBlock } from './TextBlock/TextBlock';
 export const Blocks = {
   Accordion,
   ComparisonTable,
-  ExchangeRateTile,
   Footer,
   Gallery,
   Header,

package/mobile/src/components/Calculator/CalculatorContent.ts

@@ -138,7 +138,7 @@ export type CalculatorNav = HeadlineCommonProps & IconProps;
 /**
  * @title Вкладка
  */
-export type CalculatorTab = TitleProps & {
+export type CalculatorTab = {
   nav?: CalculatorNav;
   calculatorBlock?: CalculatorBlockDef;
 };

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -8,6 +8,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 import { useLink } from '../../hooks/useLink';
+import { getSanitizedValue } from '../../utils/getSanitizedValue';
 
 const AMOUNT_KEY = 'amount';
 const FORM_URL = 'https://www.rshb.ru/p2p/';
@@ -30,7 +31,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const router = context.useRouter();
     const { handlerDecorator } = context;
     const [value, setValue] = useState<string>('');
-    const isDisabled = !Number(value);
+    const isDisabled = !Number(getSanitizedValue(value));
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
       : getRegularButtonClasses({ className: 'text-white', version: button?.version });
@@ -47,6 +48,7 @@ export const CardTransfer = JSX<CardTransferProps>(
             name={AMOUNT_KEY}
             value={value}
             onChange={setValue}
+            valid={value === '' || !isDisabled}
             placeholder={placeholder}
             label={label}
           />

package/mobile/src/components/Catalog/Catalog.tsx

@@ -44,8 +44,8 @@ export const Catalog = JSX<CatalogProps>(
           activeCardIndex,
           setActiveCardIndex,
         })}
-        <div className={`${BLUR_BLOCK_CLASSES} left-0 ${'bg-opacity-from-white'}`} />
-        <div className={`${BLUR_BLOCK_CLASSES} right-0 ${'bg-opacity-to-white'}`} />
+        <div className={`${BLUR_BLOCK_CLASSES} left-0 bg-opacity-from-white`} />
+        <div className={`${BLUR_BLOCK_CLASSES} right-0 bg-opacity-to-white`} />
       </BlockWrapper>
     );
   },

package/mobile/src/components/Catalog/CatalogCard.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType } from './CatalogContent';
@@ -13,12 +11,6 @@ export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
   version?: BlockVersion;
 }
 
-const iconVersionMap = {
-  default: 'normal',
-  primary: 'white',
-  secondary: 'black',
-};
-
 const cardStyleMap: Record<ProductColorVersion, string> = {
   black: 'bg-black',
   white: 'bg-white',
@@ -43,7 +35,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
           </div>
         ) : null}
         {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-        {button ? renderButton(button) : null}
+        {button ? <Button className="mt-5 w-full" {...button} /> : null}
       </section>
     );
   },
@@ -55,29 +47,3 @@ const renderColorOption = (color: ProductColorVersion, i: number) => (
     className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );
-
-const renderButton = (button: ButtonWithIconProps) => {
-  const { icon, iconRight, ...other } = button;
-
-  if (!button?.text) {
-    return null;
-  }
-
-  const iconVersion = iconVersionMap[button?.version || 'default'];
-  const leftIcon = renderButtonIcon({ ...icon, iconVersion });
-  const rightIcon = renderButtonIcon({ ...iconRight, iconVersion });
-
-  return (
-    <Button className="mt-5 w-full" appendLeft={leftIcon} appendRight={rightIcon} {...other} />
-  );
-};
-
-const renderButtonIcon = (buttonIcon?: Picture) => {
-  if (!buttonIcon || (!buttonIcon?.icon && !buttonIcon?.src)) {
-    return null;
-  }
-
-  const iconWidth = buttonIcon?.size?.width ? `${buttonIcon.size.width}` : '24';
-
-  return <Img image={buttonIcon} width={iconWidth} height="24" asSVG />;
-};

package/mobile/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,143 +1,72 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import type { ComparisonTableContent } from './ComparisonTableContent';
+import type { CellData, ComparisonTableContent } from './ComparisonTableContent';
 import { TableColumn } from './TableColumn';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
-export const ComparisonTable = JSX<ComparisonTableProps>(
-  ({
-    className,
-    context,
-    title,
-    rowHeaders,
-    columns,
-    visibleRowLength = 0,
-    isColoredFirstColumn = false,
-    orientation = 'vertical',
-  }) => {
-    const tableData =
-      columns?.map(({ data, header }) => ({
-        header,
-        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
-      })) || [];
+export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
+  const { className, title } = props;
 
+  return (
+    <section
+      className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+        className || ''
+      }`}
+    >
+      {title ? (
+        <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+      ) : null}
+      <div role="table">
+        <TableInner {...props} />
+      </div>
+    </section>
+  );
+});
+
+const TableInner = JSX<ComparisonTableProps>(
+  ({ columns, rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, context }) => {
     const [columnsViewState, setColumnsViewState] = useState(
       new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
     );
 
-    const handleToggleColumn = (i: number) => {
-      columnsViewState[i] = !columnsViewState[i];
-      setColumnsViewState([...columnsViewState]);
-    };
+    const handleToggleColumn = useCallback((colIndex: number) => {
+      const toggleColState = (colState: boolean, i: number) =>
+        i === colIndex ? !colState : colState;
 
-    return (
-      <section
-        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
-          className || ''
-        }`}
-      >
-        {title ? (
-          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
-        ) : null}
+      setColumnsViewState((_) => _.map(toggleColState));
+    }, []);
 
-        {renderColumns({
-          tableData,
-          context,
-          visibleRowLength,
-          isColoredFirstColumn,
-          columnsViewState,
-          handleToggleColumn,
-          orientation,
-          setColumnsViewState,
-        })}
-      </section>
+    const handleSlideChange = useCallback(
+      () => setColumnsViewState((_) => new Array(_.length).fill(false)),
+      [],
     );
-  },
-);
 
-const renderColumns = ({
-  context,
-  tableData,
-  visibleRowLength,
-  isColoredFirstColumn,
-  columnsViewState,
-  handleToggleColumn,
-  orientation = 'horizontal',
-  setColumnsViewState,
-}) => (
-  <div role="table">
-    {tableData?.length
-      ? renderInnerTable({
-          orientation,
-          context,
-          columnsViewState,
-          setColumnsViewState,
-          tableData,
-          visibleRowLength,
-          isColoredFirstColumn,
-          handleToggleColumn,
-        })
-      : null}
-  </div>
-);
+    const getColumnData = (cellData?: CellData[][]) =>
+      cellData?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title }));
 
-const renderInnerTable = ({
-  orientation,
-  context,
-  columnsViewState,
-  setColumnsViewState,
-  tableData,
-  visibleRowLength,
-  isColoredFirstColumn,
-  handleToggleColumn,
-}) =>
-  orientation === 'horizontal' ? (
-    <SwipeListControl
-      context={context}
-      onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
-    >
-      {tableData.map(
-        renderColumn({
-          context,
-          visibleRowLength,
-          isColoredFirstColumn,
-          columnsViewState,
-          handleToggleColumn,
-        }),
-      )}
-    </SwipeListControl>
-  ) : (
-    tableData.map(
-      renderColumn({
-        context,
-        visibleRowLength,
-        isColoredFirstColumn,
-        columnsViewState,
-        handleToggleColumn,
-      }),
-    )
-  );
-
-const renderColumn =
-  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
-  (columnData, i) =>
-    (
+    const tableColumns = columns?.map(({ data, header }, colIndex) => (
       <TableColumn
-        key={String(i)}
+        key={String(colIndex)}
         context={context}
         visibleRowLength={visibleRowLength}
-        showRow={columnsViewState[i]}
-        header={columnData.header}
-        columnData={columnData.column}
-        isFillGradient={i === 0 && isColoredFirstColumn}
-        onToggleColumn={() => handleToggleColumn(i)}
+        showRow={columnsViewState[colIndex]}
+        header={header}
+        columnData={getColumnData(data)}
+        isFillGradient={colIndex === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(colIndex)}
       />
-    );
+    ));
 
-const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
-  setColumnsViewState(new Array(columnsViewState.length).fill(false));
-};
+    return orientation === 'horizontal' ? (
+      <SwipeListControl context={context} onSlideChange={handleSlideChange}>
+        {tableColumns}
+      </SwipeListControl>
+    ) : (
+      tableColumns
+    );
+  },
+);