@redneckz/wildless-cms-uni-blocks 0.3.56 → 0.3.58

package/mobile/lib/components/GroupBlock/GroupBlockTabs.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const GroupBlockTabs = JSX((props) => {
+    const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+    return (_jsx("div", { className: `mb-2 box-border flex gap-x-1 h-12 ${className}`, role: "tablist", children: tabs?.map(renderTab(onTabClick, isShowCounter, currentTag)) }));
+});
+const badgeStyle = 'w-[22px] h-[22px] rounded-full text-m-sm';
+const renderTab = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
+    const isActive = currentTag === tab.tag;
+    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+    const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+    const counterBlockStyle = `${badgeStyle} 
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-text/10 text-secondary-text'}`;
+    return (_jsx("div", { className: `flex h-full w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: _jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? _jsx("h3", { className: `mr-8 ${tabText}`, children: tab?.title }) : null, isShowCounter ? (_jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: _jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
+};
+//# sourceMappingURL=GroupBlockTabs.js.map

package/mobile/lib/components/GroupBlock/GroupBlockTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupBlockTabs.js","sourceRoot":"","sources":["../../../src/components/GroupBlock/GroupBlockTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAaxC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAsB,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,GAAG,EAAE,EAAE,aAAa,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAErF,OAAO,CACL,cAAK,SAAS,EAAE,qCAAqC,SAAS,EAAE,EAAE,IAAI,EAAC,SAAS,YAC7E,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,UAAU,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,GACxD,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,0CAA0C,CAAC;AAE9D,MAAM,SAAS,GACb,CAAC,UAA2B,EAAE,aAAsB,EAAE,UAAmB,EAAE,EAAE,CAC7E,CAAC,GAAkB,EAAE,CAAS,EAAE,EAAE;IAChC,MAAM,QAAQ,GAAG,UAAU,KAAK,GAAG,CAAC,GAAG,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAC9D,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mDAAmD,CAAC;IAC9F,MAAM,iBAAiB,GAAG,GAAG,UAAU;QACnC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,0CAA0C,EAAE,CAAC;IAEvF,OAAO,CACL,cAEE,SAAS,EAAE,uEAAuE,KAAK,EAAE,EACzF,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,mBACnB,MAAM,CAAC,QAAQ,CAAC,EAC/B,GAAG,EAAE,GAAG,EAAE,GAAG,YAEb,eAAK,SAAS,EAAC,yCAAyC,aACrD,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAE,QAAQ,OAAO,EAAE,YAAG,GAAG,EAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EACvE,aAAa,CAAC,CAAC,CAAC,CACf,cAAK,SAAS,EAAE,oCAAoC,iBAAiB,EAAE,YACrE,yBAAO,GAAG,CAAC,KAAK,GAAQ,GACpB,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,IAdD,MAAM,CAAC,CAAC,CAAC,CAeV,CACP,CAAC;AACJ,CAAC,CAAC"}

package/mobile/lib/components/GroupBlock/GroupBlocksItem.d.ts

@@ -0,0 +1,8 @@
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { UniBlockProps } from '../../types';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { GroupBlockContent } from './GroupBlockContent';
+export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {
+}
+export declare const GroupBlocksItem: (props: import("@redneckz/uni-jsx").PropsWithChildren<GroupBlocksProps, any>, context?: any) => any;
+export declare const renderBlock: (context: ContentPageContext) => (block: GroupBlockDef, i: number) => any;

package/mobile/lib/components/GroupBlock/GroupBlocksItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { style2className } from '../../utils/style2className.js';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks.js';
+export const GroupBlocksItem = JSX(({ groupBlocks, context }) => {
+    return (_jsx("div", { className: 'grid grid-cols-12 gap-2 box-border', children: groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null }));
+});
+export const renderBlock = (context) => (block, i) => {
+    const type = block?.blockType;
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+        return null;
+    }
+    const classNameBlock = style2className(block?.style);
+    const EmbeddedBlock = EmbeddableGroupBlocks[type];
+    return (_jsx(EmbeddedBlock, { context: context, ...block, className: classNameBlock }, `block_${i}`));
+};
+//# sourceMappingURL=GroupBlocksItem.js.map

package/mobile/lib/components/GroupBlock/GroupBlocksItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupBlocksItem.js","sourceRoot":"","sources":["../../../src/components/GroupBlock/GroupBlocksItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAKhE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAmB,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE;IAChF,OAAO,CACL,cAAK,SAAS,EAAE,oCAAoC,YACjD,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAC/D,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAA2B,EAAE,EAAE,CAAC,CAAC,KAAoB,EAAE,CAAS,EAAE,EAAE;IAC9F,MAAM,IAAI,GAAG,KAAK,EAAE,SAAS,CAAC;IAC9B,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,qBAAqB,CAAC,EAAE;QAC7C,OAAO,IAAI,CAAC;KACb;IACD,MAAM,cAAc,GAAG,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACrD,MAAM,aAAa,GAAa,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC5D,OAAO,CACL,KAAC,aAAa,IAAoB,OAAO,EAAE,OAAO,KAAM,KAAK,EAAE,SAAS,EAAE,cAAc,IAApE,SAAS,CAAC,EAAE,CAA4D,CAC7F,CAAC;AACJ,CAAC,CAAC"}

package/mobile/lib/components/GroupBlock/filterBlocksByTag.d.ts

@@ -0,0 +1,2 @@
+import { GroupBlockDef } from './BlocksTypeProps';
+export declare const filterBlocksByTag: (blocks: GroupBlockDef[], tag?: string) => GroupBlockDef[];

package/mobile/lib/components/GroupBlock/filterBlocksByTag.js

@@ -0,0 +1,4 @@
+export const filterBlocksByTag = (blocks, tag) => {
+    return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
+};
+//# sourceMappingURL=filterBlocksByTag.js.map

package/mobile/lib/components/GroupBlock/filterBlocksByTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterBlocksByTag.js","sourceRoot":"","sources":["../../../src/components/GroupBlock/filterBlocksByTag.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAuB,EAAE,GAAY,EAAE,EAAE;IACzE,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7E,CAAC,CAAC"}

package/mobile/lib/components/GroupBlock/renderBlocksTypes.d.ts

@@ -0,0 +1,9 @@
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { GroupBlockDef } from './BlocksTypeProps';
+declare type EmbeddableBlocksProps = {
+    groupBlocks?: GroupBlockDef[];
+    context: ContentPageContext;
+    className?: string;
+};
+export declare const renderBlock: ({ context, className }: EmbeddableBlocksProps) => (block: GroupBlockDef, i: number) => any;
+export {};

package/mobile/lib/components/GroupBlock/renderBlocksTypes.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks.js';
+import { style2className } from '../../utils/style2className.js';
+export const renderBlock = ({ context, className }) => (block, i) => {
+    const type = block?.blockType;
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+        return null;
+    }
+    const classNameBlock = style2className(block?.style);
+    const EmbeddedBlock = EmbeddableGroupBlocks[type];
+    return (_jsx("div", { className: className, children: _jsx(EmbeddedBlock, { context: context, ...block, className: classNameBlock }) }, `block_${i}`));
+};
+//# sourceMappingURL=renderBlocksTypes.js.map

package/mobile/lib/components/GroupBlock/renderBlocksTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderBlocksTypes.js","sourceRoot":"","sources":["../../../src/components/GroupBlock/renderBlocksTypes.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAQ9D,MAAM,CAAC,MAAM,WAAW,GACtB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAyB,EAAE,EAAE,CAClD,CAAC,KAAoB,EAAE,CAAS,EAAE,EAAE;IAClC,MAAM,IAAI,GAAG,KAAK,EAAE,SAAS,CAAC;IAC9B,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,qBAAqB,CAAC,EAAE;QAC7C,OAAO,IAAI,CAAC;KACb;IACD,MAAM,cAAc,GAAG,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACrD,MAAM,aAAa,GAAa,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC5D,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,YACvB,KAAC,aAAa,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,EAAE,SAAS,EAAE,cAAc,GAAI,IAD3C,SAAS,CAAC,EAAE,CAEtC,CACP,CAAC;AACJ,CAAC,CAAC"}

package/mobile/lib/components/OtherProducts/OtherProductsContent.d.ts

@@ -13,7 +13,10 @@ export interface BlockItemCommonProps {
      * @title Отображать в раскрытом виде
      */
     isExpanded?: boolean;
-    /** @title Блоки */
+    /**
+     * @title Блоки
+     * @maxItems 10
+     */
     blocks?: BlockDef[];
     columns?: ColumnsCount;
 }
@@ -25,7 +28,6 @@ export interface OtherProductsContent {
     title?: string;
     /**
      * @title Список
-     * @maxItems 10
      */
     blockItems?: BlockItemCommonProps[];
     colorPalette?: ColorPalette;

package/mobile/lib/components/ProductGallery/ProductGalleryContent.d.ts

@@ -1,4 +1,5 @@
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
     /** @title Заголовок */
@@ -16,18 +17,14 @@ export interface ProductSlide {
     productBlock: ProductBlockInnerContent;
 }
 /**
- * @title Продуктовая галерея (для мобильных горизонтальная прокрутка shift+mouseScroll)
+ * @title Продуктовая галерея
  */
 export interface ProductGalleryContent {
-    /**
-     * @title Задержка
-     * @hidden //! temporary not used
-     */
-    duration?: number;
     /**
      * @title Слайды
      * @minItems 2
      */
     slides?: ProductSlide[];
+    version?: BlockVersion;
 }
 export {};

package/mobile/lib/types.d.ts

@@ -65,3 +65,4 @@ export interface DaDataSuggestion<T> {
 export interface DaDataAddress {
     city?: string | null;
 }
+export declare type FuncSetNumber = (value: number) => void;

package/mobile/lib/ui-kit/BlocksList/renderBlocksList.d.ts

@@ -7,5 +7,4 @@ declare type EmbeddableBlocksProps = {
     className?: string;
 };
 export declare const renderBlocksList: ({ blocks, context, className, columns }: EmbeddableBlocksProps) => any[] | null;
-export declare const renderBlock: ({ context, columns, className }: EmbeddableBlocksProps) => (block: BlockDef, i: number) => any;
 export {};

package/mobile/lib/ui-kit/BlocksList/renderBlocksList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { EmbeddableBlocks } from './EmbeddableBlocks.js';
 export const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
-export const renderBlock = ({ context, columns, className }) => (block, i) => {
+const renderBlock = ({ context, columns, className }) => (block, i) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
         return null;

package/mobile/lib/ui-kit/BlocksList/renderBlocksList.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderBlocksList.js","sourceRoot":"","sources":["../../../src/ui-kit/BlocksList/renderBlocksList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAStD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAyB,EAAE,EAAE,CACjG,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAEnF,MAAM,CAAC,MAAM,WAAW,GACtB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAyB,EAAE,EAAE,CAC3D,CAAC,KAAe,EAAE,CAAS,EAAE,EAAE;IAC7B,MAAM,IAAI,GAAG,KAAK,EAAE,aAAa,CAAC;IAClC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,gBAAgB,CAAC,EAAE;QACxC,OAAO,IAAI,CAAC;KACb;IACD,MAAM,iBAAiB,GAAG,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACvD,MAAM,aAAa,GAAa,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACvD,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,SAAS,IAAI,iBAAiB,EAAE,YACjD,KAAC,aAAa,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,EAAE,SAAS,EAAC,MAAM,GAAG,IADP,SAAS,CAAC,EAAE,CAEhE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"renderBlocksList.js","sourceRoot":"","sources":["../../../src/ui-kit/BlocksList/renderBlocksList.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAStD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAyB,EAAE,EAAE,CACjG,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAEnF,MAAM,WAAW,GACf,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAyB,EAAE,EAAE,CAC3D,CAAC,KAAe,EAAE,CAAS,EAAE,EAAE;IAC7B,MAAM,IAAI,GAAG,KAAK,EAAE,aAAa,CAAC;IAClC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,gBAAgB,CAAC,EAAE;QACxC,OAAO,IAAI,CAAC;KACb;IACD,MAAM,iBAAiB,GAAG,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACvD,MAAM,aAAa,GAAa,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACvD,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,SAAS,IAAI,iBAAiB,EAAE,YACjD,KAAC,aAAa,IAAC,OAAO,EAAE,OAAO,KAAM,KAAK,EAAE,SAAS,EAAC,MAAM,GAAG,IADP,SAAS,CAAC,EAAE,CAEhE,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -11,5 +11,5 @@ const CHECK_PATHS = [
 ];
 export const Checkbox = JSX(({ text, checked, onChange, className }) => (_jsx("div", { className: className, children: _jsxs("label", { className: "flex items-center cursor-pointer relative", children: [_jsx("input", { className: `peer appearance-none w-5 h-5 border-solid border ${checked ? 'border-black' : 'border-main-stroke'} rounded checked:bg-primary-main checked:border-primary-main m-0`, type: "checkbox", onChange: (e) => {
                     onChange(e.target.checked);
-                }, checked: checked }), _jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? (_jsx("span", { className: "font-sans ml-3 text-sm leading-5 cursor-pointer", children: text })) : null] }) })));
+                }, checked: checked }), _jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? _jsx("span", { className: "font-sans ml-3 text-m-base cursor-pointer", children: text }) : null] }) })));
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/ui-kit/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,WAAW,GAAG;IAClB;QACE,CAAC,EAAE,4HAA4H;QAC/H,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACrF,cAAK,SAAS,EAAE,SAAS,YACvB,iBAAO,SAAS,EAAC,2CAA2C,aAC1D,gBACE,SAAS,EAAE,oDACT,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,oBAC7B,kEAAkE,EAClE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAC7B,CAAC,EACD,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,GAAG,IACF,KAAK,EAAE,WAAW,EAClB,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GAClB,EACD,IAAI,CAAC,CAAC,CAAC,CACN,eAAM,SAAS,EAAC,iDAAiD,YAAE,IAAI,GAAQ,CAChF,CAAC,CAAC,CAAC,IAAI,IACF,GACJ,CACP,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/ui-kit/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,WAAW,GAAG;IAClB;QACE,CAAC,EAAE,4HAA4H;QAC/H,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACrF,cAAK,SAAS,EAAE,SAAS,YACvB,iBAAO,SAAS,EAAC,2CAA2C,aAC1D,gBACE,SAAS,EAAE,oDACT,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,oBAC7B,kEAAkE,EAClE,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAC7B,CAAC,EACD,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,GAAG,IACF,KAAK,EAAE,WAAW,EAClB,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,EACV,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GAClB,EACD,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,2CAA2C,YAAE,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,IAClF,GACJ,CACP,CAAC,CAAC"}

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

@@ -19,7 +19,7 @@ export const InputRange = JSX(({ className, title, items = [], min = 1, max = 10
         if (value > max)
             onChange(max);
     };
-    return (_jsxs("div", { className: className, children: [_jsxs("label", { className: "block relative", children: [title ? (_jsx("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, _jsx("input", { className: `m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), _jsx("div", { className: "absolute inset-x-0 top-[35px] px-4 leading-[18px]", children: _jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), _jsx("div", { className: "flex justify-between my-3", children: items.map((item, i) => (_jsxs("span", { className: "text-xs leading-[14px] text-secondary-text pl-4", children: [" ", item, " "] }, String(i)))) })] }));
+    return (_jsxs("div", { className: className, children: [_jsxs("label", { className: "block relative", children: [title ? _jsx("span", { className: "text-base text-secondary-text pl-4", children: title }) : null, _jsx("input", { className: `m-0 mt-[5px] font-sans text-title w-full h-14 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 box-border text-primary-text`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), _jsx("div", { className: "absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]", children: _jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), _jsx("div", { className: "flex justify-between my-3", children: items.map((item, i) => (_jsx("span", { className: "text-sm leading-[14px] text-secondary-text pl-4", children: item }, String(i)))) })] }));
 });
 //# sourceMappingURL=InputRange.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;KAC5E,CAAC;IACF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IACF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,iBAAO,SAAS,EAAC,gBAAgB,aAC9B,KAAK,CAAC,CAAC,CAAC,CACP,eAAM,SAAS,EAAC,+DAA+D,YAC5E,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,SAAS,EAAE;iFAC2D,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAG,EAAE,EAC5F,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,cAAK,SAAS,EAAC,mDAAmD,YAChE,gBACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACA,EACR,cAAK,SAAS,EAAC,2BAA2B,YACvC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,gBAAsB,SAAS,EAAC,iDAAiD,kBAAG,IAAI,UAA7E,MAAM,CAAC,CAAC,CAAC,CAA6E,CAClG,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;KAC5E,CAAC;IACF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IACF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,iBAAO,SAAS,EAAC,gBAAgB,aAC9B,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,oCAAoC,YAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EACnF,gBACE,SAAS,EAAE;2EACoD,EAC/D,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,cAAK,SAAS,EAAC,sDAAsD,YACnE,gBACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACA,EACR,cAAK,SAAS,EAAC,2BAA2B,YACvC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAsB,SAAS,EAAC,iDAAiD,YAC9E,IAAI,IADI,MAAM,CAAC,CAAC,CAAC,CAEb,CACR,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/InputRange/InputRangeProps.d.ts

@@ -1,3 +1,4 @@
+import type { FuncSetNumber } from '../../types';
 export interface InputRangeProps {
     className?: string;
     items?: string[];
@@ -6,5 +7,5 @@ export interface InputRangeProps {
     step?: number;
     value?: number;
     title?: string;
-    onChange?: (value: number) => void;
+    onChange?: FuncSetNumber;
 }

package/mobile/lib/ui-kit/Tabs/TabsProps.d.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import { FuncSetNumber } from '../../types';
 /**
  * @title Вкладка
  */
@@ -9,7 +10,7 @@ export interface Tab {
     description?: string;
     icon?: Picture;
 }
-export declare type TabClickHandler = (value: number) => void;
+export declare type TabClickHandler = FuncSetNumber;
 export interface TabsProps {
     tabs?: Tab[];
     currentTabIndex: number;

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

@@ -1 +1 @@
-export declare const style2className: (style: string[] | undefined | null) => string;
+export declare function style2className(style: string[] | undefined | null): string;

package/mobile/lib/utils/style2className.js

@@ -1,2 +1,4 @@
-export const style2className = (style) => style ? style.join(' ') : '';
+export function style2className(style) {
+    return style ? style.filter(Boolean).join(' ') : '';
+}
 //# sourceMappingURL=style2className.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style2className.js","sourceRoot":"","sources":["../../src/utils/style2className.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAkC,EAAU,EAAE,CAC5E,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC"}
+{"version":3,"file":"style2className.js","sourceRoot":"","sources":["../../src/utils/style2className.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAAC,KAAkC;IAChE,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACtD,CAAC"}

package/mobile/src/common.css

@@ -72,6 +72,13 @@ html {
     width: 100%;
   }
 
+  .calc-rate-text {
+    background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+  }
+
   input[type='range'].slider {
     -webkit-appearance: none;
     height: 4px;

package/mobile/src/components/BlockContent.ts

@@ -5,6 +5,7 @@ import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTil
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
+import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -48,4 +49,5 @@ export type BlockContent =
   | TextBlockContent
   | TileContent
   | NavigationContent
-  | LinkListContent;
+  | LinkListContent
+  | GroupBlockContent;

package/mobile/src/components/Calculator/BonusCalculatorForm.tsx

@@ -0,0 +1,71 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { CalculatorValueBlock } from './CalculatorValueBlock';
+import { getDefaultSum } from './getDefaultSum';
+import { renderWantedSumInput } from './renderWantedSumInput';
+import { renderRate } from './renderRate';
+import { renderButtonSection } from './renderButtonSection';
+import { BonusCalculatorParams, CommonCalculatorProps } from './CalculatorContent';
+
+export interface BonusCalculatorProp
+  extends BonusCalculatorParams,
+    CommonCalculatorProps,
+    UniBlockProps {}
+
+export const BonusCalculatorForm = JSX<BonusCalculatorProp>(
+  ({
+    context,
+    className = '',
+    buttons,
+    bonus,
+    minSumTrip,
+    maxSumTrip,
+    minSumOther,
+    maxSumOther,
+  }) => {
+    const [bonusTripValue, setBonusTripValue] = context.useState<number | undefined>(undefined);
+    const [bonusOtherValue, setBonusOtherValue] = context.useState<number | undefined>(undefined);
+    const calculatorTripParams = { minSum: minSumTrip, maxSum: maxSumTrip };
+    const calculatorOtherParams = { minSum: minSumOther, maxSum: maxSumOther };
+
+    const incomeBonus = 948841;
+    const bonusOrDef = bonus || 2528;
+
+    return (
+      <section className={className}>
+        <div className="w-[468px]">
+          {renderWantedSumInput({
+            title: 'Сумма покупок в категории путешествия, ₽',
+            calculatorParams: calculatorTripParams,
+            moneyValue: bonusTripValue,
+            defaultSum: getDefaultSum(calculatorTripParams),
+            setMoneyValue: setBonusTripValue,
+            isShowItems: false,
+          })}
+          {renderWantedSumInput({
+            className: 'mt-6',
+            title: 'Сумма покупок в остальных категориях, ₽',
+            calculatorParams: calculatorOtherParams,
+            moneyValue: bonusOtherValue,
+            defaultSum: getDefaultSum(calculatorOtherParams),
+            setMoneyValue: setBonusOtherValue,
+            isShowItems: false,
+          })}
+        </div>
+        <div>
+          {bonusOrDef
+            ? renderRate({
+                rate: bonusOrDef,
+                title: 'Баллов за месяц',
+                className: 'tracking-[-14px]',
+              })
+            : null}
+        </div>
+        <div className="w-[240px]">
+          {incomeBonus ? <CalculatorValueBlock title="Баллов за год" value={incomeBonus} /> : null}
+          {renderButtonSection(context, buttons)}
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/Calculator/Calculator.tsx

@@ -0,0 +1,141 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { CalculatorContent, CalculatorBlockDef } from './CalculatorContent';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Img } from '../../ui-kit/Img/Img';
+import { renderCalculatorList } from './renderCalculatorList';
+import { CalculatorNav } from './CalculatorContent';
+
+export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
+
+type TabsProps = {
+  tabsShift: number;
+  tabsNav: CalculatorNav[];
+  activeSlideIndex: number;
+  setActiveSlideIndex: (i: number) => void;
+};
+
+type NavButtonProps = {
+  tab: CalculatorNav;
+  i: number;
+  activeSlideIndex: number;
+  onClick: (ev: MouseEvent) => void;
+};
+
+const arrowBtnStyle =
+  'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
+
+export const Calculator = JSX<CalculatorProps>(
+  ({ className = '', context, calcTabs = [], anchor = null }) => {
+    const tabsNav = calcTabs.map((_) => _.nav || ({} as CalculatorNav));
+    const blockCalcTabs = calcTabs.map(
+      ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
+    );
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [tabsShift, setTabsShift] = context.useState(0);
+
+    const handleNextClick = () => setTabsShift(tabsShift + 1);
+    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+
+    const isGalleryScrollAvailable = calcTabs?.length > 3;
+    const showNextButton = isGalleryScrollAvailable && calcTabs?.length > tabsShift + 3;
+    const showPrevButton = tabsShift > 0;
+
+    return (
+      <section
+        id={anchor}
+        className={`box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`}
+      >
+        <div>
+          {tabsNav.length > 1
+            ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
+            : null}
+          {showPrevButton ? (
+            <ArrowButton
+              className={`${arrowBtnStyle} left-3 top-3`}
+              onClick={handlePrevClick}
+              ariaLabel="Пролистать влево"
+              data-block-control="scroll-left"
+            />
+          ) : null}
+          {showNextButton ? (
+            <ArrowButton
+              className={`${arrowBtnStyle} right-3 top-3 rotate-180`}
+              onClick={handleNextClick}
+              ariaLabel="Пролистать вправо"
+              data-block-control="scroll-right"
+            />
+          ) : null}
+        </div>
+        <div
+          className="flex"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {renderCalculatorList({
+            context,
+            className,
+            blockCalcTabs,
+          })}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
+    : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
+  const btnTitleClassName = isActiveBtn ? 'text-md-new mb-1.5' : `text-base mb-[3px]`;
+  const btnDescClassName = isActiveBtn ? 'text-base text-white' : `text-m-md`;
+  const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={tab?.title}
+      className={`box-border font-sans relative border-[1px] border-main-stroke cursor-pointer text-left border-b-0 flex
+      ${btnClassName}`}
+    >
+      <Img
+        className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`}
+        image={{ ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }}
+        width="24"
+        height="24"
+        asSVG
+      />
+      <div className="border-0">
+        <div className={`font-medium ${btnTitleClassName}`}>{tab?.title}</div>
+        <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
+      </div>
+    </button>
+  );
+}
+
+function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }: TabsProps) {
+  return (
+    <div>
+      <div
+        style={{ transform: `translateX(-${tabsShift * 388}px)` }}
+        className="flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000"
+      >
+        <div className="w-full flex flex-nowrap items-end gap-2">
+          {tabsNav.map((tab, i) =>
+            renderNavButton({
+              tab,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+      </div>
+      <div className="w-full h-2 bg-primary-main" />
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+import { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export interface CommonCalculatorProps {
+  buttons?: ButtonWithIconProps[];
+}
+
+export interface CreditCalculatorParams {
+  isSalary?: boolean;
+  isInsurance?: boolean;
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface MortgageCalculatorParams {
+  isAnnuity?: boolean;
+  minInitialContribution?: number;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+export interface DepositCalculatorParams {
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rate?: number;
+}
+
+export interface BonusCalculatorParams {
+  bonus?: number;
+  minSumTrip?: number;
+  maxSumTrip?: number;
+  minSumOther?: number;
+  maxSumOther?: number;
+}
+
+export interface CalculatorParams {
+  isAnnuity?: boolean;
+  minSum?: number;
+  maxSum?: number;
+  minMonths?: number;
+  maxMonths?: number;
+  rateWithInsurance?: number;
+  rateWithoutInsurance?: number;
+}
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "CreditCalculatorForm"}
+ */
+export type CreditCalculatorParamsDef = CreditCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'CreditCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "MortgageCalculatorForm"}
+ */
+export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'MortgageCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "DepositCalculatorForm"}
+ */
+export type DepositCalculatorParamsDef = DepositCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'DepositCalculatorForm';
+  };
+
+/**
+ * @title Заголовок
+ * @default {"calcType": "BonusCalculatorForm"}
+ */
+export type BonusCalculatorParamsDef = BonusCalculatorParams &
+  CommonCalculatorProps & {
+    calcType: 'BonusCalculatorForm';
+  };
+
+/**
+ * @title Выберите калькулятор
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Калькулятор
+ */
+export type CalculatorBlockDef =
+  | EmptyOption
+  | CreditCalculatorParamsDef
+  | MortgageCalculatorParamsDef
+  | DepositCalculatorParamsDef
+  | BonusCalculatorParamsDef;
+
+/**
+ * @title Кнопка навигации
+ */
+export interface CalculatorNav {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  icon?: Picture;
+}
+
+/**
+ * @title Вкладка
+ */
+export interface CalculatorTab {
+  nav?: CalculatorNav;
+  /** @title Настройки калькулятора */
+  calculatorBlock?: CalculatorBlockDef;
+}
+
+/**
+ * @title Калькулятор
+ */
+export interface CalculatorContent {
+  /** @title Вкладки */
+  calcTabs?: CalculatorTab[];
+}