@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.5

package/mobile/lib/components/Tabs/renderGroupTab.js

@@ -1,23 +1,17 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
-import { ACTIVE_TEXT_CLASSES, getGroupTabClassName, INACTIVE_TEXT_CLASSES, TEXT_CLASSES, WHITE_ACTIVE_TEXT_CLASSES, } from './tabItemClasses.js';
-const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
-const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { style } from '../../utils/style.js';
+import { getTabClassName } from './tabItemClasses.js';
+const BADGE_CLASSES = 'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 export const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
     const active = currentTab === tab;
     const count = tab.ref && page?.blocks
         ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
         : 0;
-    return (_jsx("div", { className: getGroupTabClassName('div', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: _jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, tabsMode)}`, children: [renderTitle(tab.title, active, tabsMode), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+    return (_jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: _jsxs("div", { className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), children: [_jsx("span", { children: tab.title }), showCounter && count ? renderCount(tabsMode, count, active) : null] }) }, `group-${String(i)}`));
 };
-const renderTitle = (title, active, tabsMode) => {
-    const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-    const titleClassName = tabsMode === 'scrollable'
-        ? `${TEXT_CLASSES} ${activeClassName}`
-        : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
-    return title ? _jsx("h3", { className: titleClassName, children: title }) : null;
-};
-const renderCount = (showCounter, count, active) => {
-    return showCounter && count ? (_jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
+const renderCount = (tabsMode, count, active) => {
+    return (_jsx("div", { className: style(BADGE_CLASSES, active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES), children: count }));
 };
 //# sourceMappingURL=renderGroupTab.js.map

package/mobile/lib/components/Tabs/renderGroupTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderGroupTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderGroupTab.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,YAAY,EACZ,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAG1B,MAAM,aAAa,GACjB,kFAAkF,CAAC;AACrF,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AACtD,MAAM,sBAAsB,GAC1B,uEAAuE,CAAC;AAE1E,MAAM,CAAC,MAAM,cAAc,GACzB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAkB,EAAE,EAAE,CACzE,CAAC,GAAiB,EAAE,CAAS,EAAE,EAAE;IAC/B,MAAM,MAAM,GAAG,UAAU,KAAK,GAAG,CAAC;IAElC,MAAM,KAAK,GACT,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,MAAM;QACrB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAa,CAAC,CAAC,CAAC,MAAM;QAClF,CAAC,CAAC,CAAC,CAAC;IAER,OAAO,CACL,cAEE,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EACxD,IAAI,EAAC,KAAK,mBACK,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,YAE3B,eACE,SAAS,EAAE,2CAA2C,oBAAoB,CACxE,MAAM,EACN,MAAM,EACN,QAAQ,CACT,EAAE,aAEF,WAAW,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EACxC,WAAW,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,IACpC,IAfD,SAAS,MAAM,CAAC,CAAC,CAAC,EAAE,CAgBrB,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,WAAW,GAAG,CAAC,KAAyB,EAAE,MAAe,EAAE,QAAmB,EAAE,EAAE;IACtF,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IACnF,MAAM,cAAc,GAClB,QAAQ,KAAK,YAAY;QACvB,CAAC,CAAC,GAAG,YAAY,IAAI,eAAe,EAAE;QACtC,CAAC,CAAC,GAAG,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAEhF,OAAO,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAE,cAAc,YAAG,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,WAAgC,EAAE,KAAa,EAAE,MAAe,EAAE,EAAE;IACvF,OAAO,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,CAC5B,cAAK,SAAS,EAAE,GAAG,aAAa,IAAI,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,EAAE,YACzF,KAAK,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC"}
+{"version":3,"file":"renderGroupTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderGroupTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,MAAM,aAAa,GACjB,kGAAkG,CAAC;AACrG,MAAM,mBAAmB,GAAG,wBAAwB,CAAC;AACrD,MAAM,kBAAkB,GAAG,uDAAuD,CAAC;AAEnF,MAAM,CAAC,MAAM,cAAc,GACzB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAkB,EAAE,EAAE,CACzE,CAAC,GAAiB,EAAE,CAAS,EAAE,EAAE;IAC/B,MAAM,MAAM,GAAG,UAAU,KAAK,GAAG,CAAC;IAElC,MAAM,KAAK,GACT,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,MAAM;QACrB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAa,CAAC,CAAC,CAAC,MAAM;QAClF,CAAC,CAAC,CAAC,CAAC;IAER,OAAO,CACL,cAEE,SAAS,EAAE,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EACrD,IAAI,EAAC,KAAK,mBACK,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,YAE3B,eACE,SAAS,EAAE,KAAK,CACd,gDAAgD,EAChD,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAC1C,aAED,yBAAO,GAAG,CAAC,KAAK,GAAQ,EACvB,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,IAC/D,IAdD,SAAS,MAAM,CAAC,CAAC,CAAC,EAAE,CAerB,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,WAAW,GAAG,CAAC,QAA8B,EAAE,KAAa,EAAE,MAAe,EAAE,EAAE;IACrF,OAAO,CACL,cACE,SAAS,EAAE,KAAK,CACd,aAAa,EACb,MAAM,IAAI,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,CAC/E,YAEA,KAAK,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/mobile/lib/components/Tabs/tabItemClasses.d.ts

@@ -6,7 +6,6 @@ export declare const SCROLLABLE_ACTIVE_LINK_CLASSES = "bg-white text-primary-mai
 export declare const WIDESCREEN_ACTIVE_LINK_CLASSES = "bg-primary-main text-white";
 export declare const TEXT_CLASSES = "font-sans text-m text-center";
 export declare const ACTIVE_TEXT_CLASSES = "text-white";
-export declare const INACTIVE_TEXT_CLASSES = "text-secondary-text group-hover/btn:text-primary-main";
+export declare const INACTIVE_TEXT_CLASSES = "text-secondary-text sm:group-hover/btn:text-primary-main";
 export declare const WHITE_ACTIVE_TEXT_CLASSES = "text-primary-main";
-export declare const getGroupTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => any;
-export declare const getLinkTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => any;
+export declare const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string;

package/mobile/lib/components/Tabs/tabItemClasses.js

@@ -5,10 +5,10 @@ export const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
 export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
 export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
 export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
-const GROUP_TAB_CLASSES = {
-    div: {
+const TAB_CLASSES = {
+    block: {
         scrollable: {
             active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
             default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
@@ -24,37 +24,7 @@ const GROUP_TAB_CLASSES = {
     },
     text: {
         scrollable: {
-            active: `h-full border-0 border-b-2`,
-            default: ``,
-        },
-        centered: {
-            active: '',
-            default: '',
-        },
-        wideScreen: {
-            active: '',
-            default: '',
-        },
-    },
-};
-const LINK_TAB_CLASSES = {
-    link: {
-        scrollable: {
-            active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-            default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-        },
-        centered: {
-            active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-            default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-        },
-        wideScreen: {
-            active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
-            default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-        },
-    },
-    text: {
-        scrollable: {
-            active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+            active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
             default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
         },
         centered: {
@@ -62,19 +32,14 @@ const LINK_TAB_CLASSES = {
             default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
         },
         wideScreen: {
-            active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
         },
     },
 };
-export const getGroupTabClassName = (type, active, tabsMode) => {
-    const styleActive = active ? 'active' : 'default';
-    const mode = tabsMode || 'wideScreen';
-    return GROUP_TAB_CLASSES[type][mode][styleActive];
-};
-export const getLinkTabClassName = (type, active, tabsMode) => {
+export const getTabClassName = (type, active, tabsMode) => {
     const styleActive = active ? 'active' : 'default';
     const mode = tabsMode || 'wideScreen';
-    return LINK_TAB_CLASSES[type][mode][styleActive];
+    return TAB_CLASSES[type][mode][styleActive];
 };
 //# sourceMappingURL=tabItemClasses.js.map

package/mobile/lib/components/Tabs/tabItemClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,6DAA6D,CAAC;AAC1F,MAAM,CAAC,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AACrD,MAAM,CAAC,MAAM,qBAAqB,GAAG,oBAAoB,CAAC;AAE1D,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC;AAC3E,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,8BAA8B,CAAC;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,YAAY,CAAC;AAChD,MAAM,CAAC,MAAM,qBAAqB,GAAG,0DAA0D,CAAC;AAEhG,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAAC;AAE7D,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,YAAY,IAAI,8BAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,YAAY,IAAI,qBAAqB,EAAE;SAC5F;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,mBAAmB,YAAY,IAAI,8BAA8B,oBAAoB;YAC7F,OAAO,EAAE,mBAAmB,YAAY,6CAA6C;SACtF;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,IAAI,8BAA8B,oBAAoB;YAC7E,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,oBAAoB;SACtE;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,+CAA+C;YACtE,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,GAAG,YAAY,IAAI,mBAAmB,EAAE;YAChD,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,IAAI,mBAAmB,8DAA8D;YAC5G,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,kBAAkB;SACpE;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAmE,CAC7F,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,EAAE;IACF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAClD,MAAM,IAAI,GAAG,QAAQ,IAAI,YAAY,CAAC;IAEtC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC;AAC9C,CAAC,CAAC"}

package/mobile/lib/components/TariffsTable/TariffsTable.js

@@ -6,7 +6,6 @@ import { TariffsTableVertical } from './TariffsTableVertical.js';
 export const TariffsTable = JSX(({ className, title, description, tariffsColumns: columns, rowHeaders, orientation = 'vertical', ...rest }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
-    const headingMargin = description ? 'mb-2' : 'mb-8';
     return (_jsxs("section", { className: `p-default bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [_jsx(Headline, { title: title, description: description, headlineVersion: "M", align: "text-left", isPadding: false, className: "mb-8" }), orientation === 'vertical' ? (_jsx(TariffsTableVertical, { tiles: tiles, ...rest })) : (_jsx(TariffsTableHorizontal, { tiles: tiles, ...rest }))] }));
 });
 const getColData = (columns) => columns?.[0]?.data ? columns[0].data : [];

package/mobile/lib/components/TariffsTable/TariffsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TariffsTable.js","sourceRoot":"","sources":["../../../src/components/TariffsTable/TariffsTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAI9D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EACC,SAAS,EACT,KAAK,EACL,WAAW,EACX,cAAc,EAAE,OAAO,EACvB,UAAU,EACV,WAAW,GAAG,UAAU,EACxB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAEpD,OAAO,CACL,mBACE,SAAS,EAAE,oEAAoE,SAAS,EAAE,aAE1F,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,eAAe,EAAC,GAAG,EACnB,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,KAAK,EAChB,SAAS,EAAC,MAAM,GAChB,EACD,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,KAAM,IAAI,GAAI,CACjD,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,IAAC,KAAK,EAAE,KAAK,KAAM,IAAI,GAAI,CACnD,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,OAAyC,EAAE,EAAE,CAC/D,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;AAE5C,MAAM,QAAQ,GAAG,CAAC,UAA+C,EAAE,OAAoB,EAAE,EAAE,CACzF,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9B,MAAM;IACN,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;CAC3B,CAAC,CAAC,CAAC"}
+{"version":3,"file":"TariffsTable.js","sourceRoot":"","sources":["../../../src/components/TariffsTable/TariffsTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAI9D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EACC,SAAS,EACT,KAAK,EACL,WAAW,EACX,cAAc,EAAE,OAAO,EACvB,UAAU,EACV,WAAW,GAAG,UAAU,EACxB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAE5C,OAAO,CACL,mBACE,SAAS,EAAE,oEAAoE,SAAS,EAAE,aAE1F,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,eAAe,EAAC,GAAG,EACnB,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,KAAK,EAChB,SAAS,EAAC,MAAM,GAChB,EACD,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,KAAM,IAAI,GAAI,CACjD,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,IAAC,KAAK,EAAE,KAAK,KAAM,IAAI,GAAI,CACnD,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,OAAyC,EAAE,EAAE,CAC/D,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;AAE5C,MAAM,QAAQ,GAAG,CAAC,UAA+C,EAAE,OAAoB,EAAE,EAAE,CACzF,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9B,MAAM;IACN,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;CAC3B,CAAC,CAAC,CAAC"}

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

@@ -5,6 +5,6 @@ import { Input } from '../Input/Input.js';
 import { normalizePhone } from './normalizePhone.js';
 export const PhoneInput = JSX(({ children, onChange, ...inputProps }) => {
     const handleChange = useCallback((value) => onChange && onChange(normalizePhone(value)), [onChange]);
-    return (_jsx(Input, { onChange: handleChange, onFocus: handleChange, ...inputProps, children: children }));
+    return (_jsx(Input, { onChange: handleChange, onFocus: (event) => handleChange(event?.target?.value || ''), ...inputProps, children: children }));
 });
 //# sourceMappingURL=PhoneInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/ui-kit/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAa,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAC9D,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,IAAC,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,KAAM,UAAU,YACjE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/ui-kit/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE;IAClF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAa,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAC9D,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,IACJ,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAE,KAAK,EAAE,MAAM,EAAE,KAAgB,IAAI,EAAE,CAAC,KACpE,UAAU,YAEb,QAAQ,GACH,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/src/common.css

@@ -27,6 +27,7 @@ html {
   --color-gradient-from: 141, 189, 76;
   --color-gradient-to: 69, 172, 69;
 }
+
 /* Business clients | Light-Green */
 [data-theme='bc'] {
   --color-primary-main: var(--color-green-light);
@@ -37,6 +38,7 @@ html {
   --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
   --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
 }
+
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
   --color-primary-main: var(--color-yellow);
@@ -255,6 +257,7 @@ html {
     table-layout: fixed;
     text-align: left;
   }
+
   .striped.md-container table thead,
   .horizontal-separator.md-container table thead {
     color: rgb(var(--color-secondary-text));

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

@@ -1,9 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -11,47 +5,56 @@ import type {
   ListBenefitDef,
   TextBenefitDef,
 } from './BenefitsBlockContent';
+import { benefitImageStyles } from './benefitImageStyles';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper
-      className={style('flex flex-col items-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      {title ? (
-        <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
-      ) : null}
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+      {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-          {benefitList.map(renderStep)}
+        <div
+          className="sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8"
+          role="list"
+        >
+          {benefitList.map(renderBenefit)}
         </div>
       ) : null}
     </BlockWrapper>
   ),
 );
 
-const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
-  const description = benefit.description;
-
-  return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-      {benefit?.icon?.icon ? (
-        <Img
-          className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
-          image={benefit.icon}
-        />
-      ) : null}
-      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5 h-full">
-        {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
-        {renderDescription(description)}
+const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
+  <div
+    key={String(i)}
+    className="flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14"
+    role="listitem"
+  >
+    {benefit?.icon?.icon ? (
+      <Img
+        className={style(
+          'p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black',
+          benefitImageStyles,
+        )}
+        image={benefit.icon}
+      />
+    ) : null}
+    {benefit?.icon?.src ? <Img className="mr-5 shrink-0" image={benefit.icon} /> : null}
+    {benefit?.label ? (
+      <div className="sm:h-full">
+        <Heading headingType="h6">{benefit.label}</Heading>
+        {renderDescription(benefit.description)}
       </div>
-    </div>
-  );
-};
+    ) : null}
+  </div>
+);
 
 const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;

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

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-56 h-56 min-w-56';

package/mobile/src/components/Blocks.ts

@@ -1,4 +1,5 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
@@ -19,12 +20,15 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
+import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 
 export const Blocks: BlocksRegistry = {
   ButtonsBlock,
+  BonusBenefitsBlock,
   CardTransfer,
   Carousel,
   CarouselTariffsCard,
@@ -39,6 +43,7 @@ export const Blocks: BlocksRegistry = {
   Placeholder,
   ProductBlock,
   StepsBlock,
+  Tabs,
   TariffsTable,
   TextBlock,
   RichTextBlock,
@@ -47,4 +52,5 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselProgramsCard,
   ProductGallery,
+  BenefitsBlock,
 };

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,15 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type {
-  BonusBenefit,
-  BonusBenefitsBlockContent,
-  ColumnsCount,
-} from './BonusBenefitsBlockContent';
+import type { BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
+import { renderBonusBenefits } from './renderBonusBenefits';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
@@ -23,48 +18,17 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style('flex flex-col text-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />
-      {bonusBenefits?.length ? (
-        <div
-          className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}
-        >
-          {bonusBenefits.map(renderBonusBenefit)}
-        </div>
-      ) : null}
+    <BlockWrapper className={style('p-default', className)} defaultPadding="p-default" {...rest}>
+      <Headline
+        className="mb-4 sm:mb-8"
+        isPadding={false}
+        title={title}
+        description={subtitle}
+        headlineVersion="M"
+      />
+      {bonusBenefits?.length
+        ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
+        : null}
     </BlockWrapper>
   ),
 );
-
-const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => {
-  return (
-    <div
-      key={String(i)}
-      className={style(
-        'flex flex-col items-center text-h6',
-        !description && !title ? 'justify-center' : '',
-      )}
-    >
-      {title ? <span>{title}</span> : null}
-      {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
-      {description ? <span>{description}</span> : null}
-    </div>
-  );
-};
-
-const getElementsColsValue = (colValue: ColumnsCount) => {
-  switch (colValue) {
-    case '3':
-      return 'grid-cols-3';
-    case '4':
-      return 'grid-cols-4';
-    case '5':
-      return 'grid-cols-5';
-    default:
-      return 'grid-cols-5';
-  }
-};

package/mobile/src/components/BonusBenefitsBlock/bonusBenefitAlign.ts

@@ -0,0 +1 @@
+export const bonusBenefitAlign = 'text-left';

package/mobile/src/components/BonusBenefitsBlock/bonusBenefitStyles.ts

@@ -0,0 +1 @@
+export const bonusBenefitStyles = 'justify-between p-4 h-full border border-gray';

package/mobile/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -0,0 +1,29 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { bonusBenefitAlign } from './bonusBenefitAlign';
+import { BonusBenefit } from './BonusBenefitsBlockContent';
+import { bonusBenefitStyles } from './bonusBenefitStyles';
+
+export const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => (
+  <div
+    key={String(i)}
+    className={style(
+      'flex flex-col',
+      bonusBenefitStyles,
+      !description && !title ? 'justify-center' : '',
+    )}
+  >
+    {title ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {title}
+      </Text>
+    ) : null}
+    {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
+    {description ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {description}
+      </Text>
+    ) : null}
+  </div>
+);

package/mobile/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -0,0 +1,14 @@
+import { AlignType } from '../../model/AlignType';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
+import { renderBonusBenefit } from './renderBonusBenefit';
+
+export const renderBonusBenefits = (
+  bonusBenefits: BonusBenefit[],
+  columnsCount: ColumnsCount,
+  cardTextAlign: AlignType,
+) => (
+  <SwipeListControl>
+    {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}
+  </SwipeListControl>
+);

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

@@ -21,7 +21,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={style(
-        'border box-border border-gray min-w-[392px] h-full flex flex-col justify-left',
+        'border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left',
         className,
       )}
       {...rest}
@@ -41,7 +41,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         <div className="flex mb-4 text-secondary-text">
           <div className="mr-1.5">
             <Text size="text-s" align="text-left" font="font-light">
-              Доступные цвета:
+              Цвета:
             </Text>
           </div>
           {colors.map(renderColorOption)}
@@ -61,6 +61,6 @@ const renderColorOption = (color: ProductColorVersion, i: number) => (
   <div
     role="figure"
     key={String(i)}
-    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+    className={`w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );

package/mobile/src/components/CarouselCatalogCard/CatalogCard.ts

@@ -0,0 +1,22 @@
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+const colors: ProductColorVersion[] = ['black', 'white'];
+
+const buttonPrimary: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
+};
+
+export const CATALOG_CARD = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};

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

@@ -3,17 +3,7 @@
     "format": "webp",
     "size": {
       "width": 290
-    },
-    "sources": [
-      {
-        "media": 1279,
-        "size": {
-          "width": 174
-        },
-        "format": "webp",
-        "alignment": "southeast"
-      }
-    ]
+    }
   },
   "title": "Заголовок",
   "description": "Описание",

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

@@ -5,17 +5,7 @@
       "size": {
         "width": 140,
         "height": 140
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 84
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -5,8 +5,11 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
@@ -15,18 +18,17 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style('border border-gray', className)}
-        defaultPadding="p-0"
+        defaultPadding="p-lg sm:p-0"
         {...rest}
       >
-        <LinkWrapper className="flex" href={href} target={target}>
-          <div className="w-[200px] min-w-[200px] self-center">
-            {icon?.icon ? <Img image={icon} /> : null}
-            {icon?.src ? <Img image={icon} /> : null}
+        <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
+          <div className="min-w-[200px] flex justify-center">
+            {icon?.src || icon?.icon ? <Img image={icon} /> : null}
           </div>
-          <div className="p-8 pl-3 w-full">
-            {title ? <Heading className="mb-3.5" headingType="h5" title={title} /> : null}
+          <div className="sm:px-3 py-xl">
+            {title ? <Heading className="mb-2 sm:mb-3.5" headingType="h6" title={title} /> : null}
             {list.length ? (
-              <div className="flex flex-col gap-3">{list?.map(renderList)}</div>
+              <div className="flex flex-col gap-2 sm:gap-3">{list?.map(renderList)}</div>
             ) : null}
           </div>
         </LinkWrapper>
@@ -36,8 +38,16 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="break-words">
-    {_.title ? <div className="text-h6">{_.title}</div> : null}
-    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-1 sm:flex-col">
+    {_.title ? (
+      <Text size="text-l" font={cardTitleFont}>
+        {_.title}
+      </Text>
+    ) : null}
+    {_.description ? (
+      <Paragraph size="text-l" font="font-light" color={cardDescriptionColor}>
+        {_.description}
+      </Paragraph>
+    ) : null}
   </div>
 );

package/mobile/src/components/CarouselProgramsCard/programCardStyles.ts

@@ -0,0 +1,2 @@
+export const cardTitleFont = 'font-light';
+export const cardDescriptionColor = '';