@redneckz/wildless-cms-uni-blocks 0.10.7 → 0.10.9

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

@@ -2,16 +2,16 @@ import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { assertUnreachable } from '../../utils/assertUnreachable.js';
 import { LinkTab } from './LinkTab.js';
 import { renderGroupTab } from './renderGroupTab.js';
-export const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
+export const renderTab = ({ page, showCounter, ...rest }) => (tab, i) => {
     const type = tab.type;
     if (!(type === 'group' || type === 'link')) {
         return null;
     }
     switch (type) {
         case 'group':
-            return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+            return renderGroupTab({ page, showCounter, ...rest })(tab, i);
         case 'link': {
-            return (_jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable, onClick: onClick }, String(i)));
+            return _jsx(LinkTab, { tab: tab, ...rest }, String(i));
         }
         default:
             assertUnreachable(type);

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

@@ -1 +1 @@
-{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,KAAK,EAAkB,EAAE,EAAE,CACrF,CAAC,GAAY,EAAE,CAAS,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IAEtB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,OAAO;YACV,OAAO,cAAc,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAC1F,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,CACL,KAAC,OAAO,IAEN,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,IAJX,MAAM,CAAC,CAAC,CAAC,CAKd,CACH,CAAC;SACH;QACD;YACE,iBAAiB,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}
+{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,EAAkB,EAAE,EAAE,CACnD,CAAC,GAAY,EAAE,CAAS,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IAEtB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,OAAO;YACV,OAAO,cAAc,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAChE,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,KAAC,OAAO,IAAiB,GAAG,EAAE,GAAG,KAAM,IAAI,IAA7B,MAAM,CAAC,CAAC,CAAC,CAAwB,CAAC;SACxD;QACD;YACE,iBAAiB,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

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

@@ -1,3 +1,4 @@
+import type { TabsMode } from './TabsContent';
 export declare const LINK_CLASSES = "h-12 flex-1 flex items-center justify-center cursor-pointer";
 export declare const ACTIVE_LINK_CLASSES = "bg-primary-main";
 export declare const INACTIVE_LINK_CLASSES = "group/btn bg-white";
@@ -7,5 +8,5 @@ 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 WHITE_ACTIVE_TEXT_CLASSES = "text-primary-main";
-export declare const getGroupTabClassName: (type: string, active: boolean, isScrollable: boolean) => any;
-export declare const getLinkTabClassName: (type: string, active: boolean, isScrollable: boolean) => any;
+export declare const getGroupTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => any;
+export declare const getLinkTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => any;

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

@@ -13,7 +13,11 @@ const GROUP_TAB_CLASSES = {
             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}`,
         },
-        default: {
+        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} whitespace-nowrap`,
             default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
         },
@@ -23,7 +27,11 @@ const GROUP_TAB_CLASSES = {
             active: `h-full border-0 border-b-2`,
             default: ``,
         },
-        default: {
+        centered: {
+            active: '',
+            default: '',
+        },
+        wideScreen: {
             active: '',
             default: '',
         },
@@ -35,7 +43,11 @@ const LINK_TAB_CLASSES = {
             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}`,
         },
-        default: {
+        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}`,
         },
@@ -45,20 +57,24 @@ const LINK_TAB_CLASSES = {
             active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
             default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
         },
-        default: {
+        centered: {
+            active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+        },
+        wideScreen: {
             active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
             default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
         },
     },
 };
-export const getGroupTabClassName = (type, active, isScrollable) => {
-    const styleType = isScrollable ? 'scrollable' : 'default';
+export const getGroupTabClassName = (type, active, tabsMode) => {
     const styleActive = active ? 'active' : 'default';
-    return GROUP_TAB_CLASSES[type][styleType][styleActive];
+    const mode = tabsMode || 'wideScreen';
+    return GROUP_TAB_CLASSES[type][mode][styleActive];
 };
-export const getLinkTabClassName = (type, active, isScrollable) => {
-    const styleType = isScrollable ? 'scrollable' : 'default';
+export const getLinkTabClassName = (type, active, tabsMode) => {
     const styleActive = active ? 'active' : 'default';
-    return LINK_TAB_CLASSES[type][styleType][styleActive];
+    const mode = tabsMode || 'wideScreen';
+    return LINK_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":"AAAA,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,uDAAuD,CAAC;AAE7F,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAAC;AAE7D,MAAM,iBAAiB,GAAG;IACxB,GAAG,EAAE;QACH,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,YAAY,IAAI,8BAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,YAAY,IAAI,qBAAqB,EAAE;SAC5F;QACD,OAAO,EAAE;YACP,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,4BAA4B;YACpC,OAAO,EAAE,EAAE;SACZ;QACD,OAAO,EAAE;YACP,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;SACZ;KACF;CACF,CAAC;AACF,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,YAAY,IAAI,8BAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,YAAY,IAAI,qBAAqB,EAAE;SAC5F;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,YAAY,IAAI,8BAA8B,EAAE;YAC3D,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,iDAAiD,yBAAyB,EAAE;YACnG,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,YAAY,IAAI,mBAAmB,EAAE;YAChD,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,MAAe,EAAE,YAAqB,EAAE,EAAE;IAC3F,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElD,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;AACzD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,MAAe,EAAE,YAAqB,EAAE,EAAE;IAC1F,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElD,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;AACxD,CAAC,CAAC"}
+{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":"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"}

package/mobile/lib/hooks/useLink.js

@@ -9,7 +9,7 @@ export function useLink(params = {}) {
     const { close } = useDialog();
     return (props) => ({
         ...props,
-        href: isRemote ? props.href : adjustHref(router)(props.href, basePath),
+        href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
         'aria-label': props.text,
         onClick: handlerDecorator(handleHref(props), props),
     });

package/mobile/lib/hooks/useLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLink.js","sourceRoot":"","sources":["../../src/hooks/useLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAWxC,MAAM,UAAU,OAAO,CAAC,SAAwB,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAEtC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,CAAC;IAE9B,OAAO,CAA2C,KAAQ,EAAiB,EAAE,CAAC,CAAC;QAC7E,GAAG,KAAK;QACR,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC;QACtE,YAAY,EAAE,KAAK,CAAC,IAAI;QACxB,OAAO,EAAE,gBAAgB,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;KACpD,CAAC,CAAC;IAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAkC;QAC3E,OAAO,CAAC,EAAqB,EAAE,EAAE;YAC/B,OAAO,IAAI,OAAO,CAAC,EAAE,CAAC,CAAC;YAEvB,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE;gBAClD,kBAAkB;gBAClB,OAAO;aACR;YAED,KAAK,EAAE,CAAC;YAER,iBAAiB;YACjB,EAAE,EAAE,cAAc,EAAE,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC;AACH,CAAC"}
+{"version":3,"file":"useLink.js","sourceRoot":"","sources":["../../src/hooks/useLink.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAWxC,MAAM,UAAU,OAAO,CAAC,SAAwB,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAEtC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,CAAC;IAE9B,OAAO,CAA2C,KAAQ,EAAiB,EAAE,CAAC,CAAC;QAC7E,GAAG,KAAK;QACR,IAAI,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC;QACnF,YAAY,EAAE,KAAK,CAAC,IAAI;QACxB,OAAO,EAAE,gBAAgB,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;KACpD,CAAC,CAAC;IAEH,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAkC;QAC3E,OAAO,CAAC,EAAqB,EAAE,EAAE;YAC/B,OAAO,IAAI,OAAO,CAAC,EAAE,CAAC,CAAC;YAEvB,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE;gBAClD,kBAAkB;gBAClB,OAAO;aACR;YAED,KAAK,EAAE,CAAC;YAER,iBAAiB;YACjB,EAAE,EAAE,cAAc,EAAE,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC;AACH,CAAC"}

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink.js';
 import { projectSettings } from '../../ProjectSettings.js';
+import { appendSlash } from '../../utils/appendSlash.js';
 import { style } from '../../utils/style.js';
 export const Sitemap = JSX(({ className, topItems }) => {
     const link = useLink({ isRemote: true });
@@ -9,7 +10,7 @@ export const Sitemap = JSX(({ className, topItems }) => {
 });
 const renderColumn = (menuItem, index) => {
     const { text, items, href, target, onClick } = menuItem;
-    return (_jsxs("div", { className: "flex flex-col gap-3.5 w-1/4", children: [_jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }), items?.map((_, i) => (_jsx(ColumnItem, { ..._, basePath: href, index: i }, String(i))))] }, String(index)));
+    return (_jsxs("div", { className: "flex flex-col gap-3.5 w-1/4", children: [_jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }), items?.map((_, i) => (_jsx(ColumnItem, { ..._, basePath: appendSlash(href), index: i }, String(i))))] }, String(index)));
 };
 const ColumnItem = JSX(({ text, index, basePath, ...rest }) => {
     const isAnotherPortal = projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;

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

@@ -1 +1 @@
-{"version":3,"file":"Sitemap.js","sourceRoot":"","sources":["../../../src/ui-kit/Sitemap/Sitemap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAO1C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAEzC,OAAO,CACL,cAAK,SAAS,EAAE,KAAK,CAAC,kCAAkC,EAAE,SAAS,CAAC,YACjE,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,GAClC,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CAAC,QAAoD,EAAE,KAAa,EAAE,EAAE;IAC3F,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;IAExD,OAAO,CACL,eAAyB,SAAS,EAAC,6BAA6B,aAC9D,YACE,SAAS,EAAC,yEAAyE,EACnF,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IAAI,OAAO,EACzB,OAAO,EAAE,OAAO,YAEf,IAAI,IAAI,UAAU,KAAK,EAAE,GACxB,EACH,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,OAAqB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAA1C,MAAM,CAAC,CAAC,CAAC,CAAqC,CAChE,CAAC,KAXM,MAAM,CAAC,KAAK,CAAC,CAYjB,CACP,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC7E,MAAM,eAAe,GACnB,eAAe,CAAC,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElG,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,YACE,SAAS,EAAE,KAAK,CACd,uEAAuE,EACvE,uDAAuD,CACxD,EACD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IAAI,OAAO,EACzB,OAAO,EAAE,OAAO,YAEf,IAAI,IAAI,UAAU,KAAK,EAAE,GACxB,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Sitemap.js","sourceRoot":"","sources":["../../../src/ui-kit/Sitemap/Sitemap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAO1C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAEzC,OAAO,CACL,cAAK,SAAS,EAAE,KAAK,CAAC,kCAAkC,EAAE,SAAS,CAAC,YACjE,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,GAClC,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CAAC,QAAoD,EAAE,KAAa,EAAE,EAAE;IAC3F,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;IAExD,OAAO,CACL,eAAyB,SAAS,EAAC,6BAA6B,aAC9D,YACE,SAAS,EAAC,yEAAyE,EACnF,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IAAI,OAAO,EACzB,OAAO,EAAE,OAAO,YAEf,IAAI,IAAI,UAAU,KAAK,EAAE,GACxB,EACH,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,OAAqB,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,IAAvD,MAAM,CAAC,CAAC,CAAC,CAAkD,CAC7E,CAAC,KAXM,MAAM,CAAC,KAAK,CAAC,CAYjB,CACP,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC7E,MAAM,eAAe,GACnB,eAAe,CAAC,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAElG,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,YACE,SAAS,EAAE,KAAK,CACd,uEAAuE,EACvE,uDAAuD,CACxD,EACD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,IAAI,OAAO,EACzB,OAAO,EAAE,OAAO,YAEf,IAAI,IAAI,UAAU,KAAK,EAAE,GACxB,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+export declare const appendSlash: (url: string | undefined) => string | undefined;

package/mobile/lib/utils/appendSlash.js

@@ -0,0 +1,2 @@
+export const appendSlash = (url) => url && !url.endsWith('/') ? `${url}/` : url;
+//# sourceMappingURL=appendSlash.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appendSlash.js","sourceRoot":"","sources":["../../src/utils/appendSlash.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAuB,EAAE,EAAE,CACrD,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC"}

package/mobile/src/ProjectSettings.ts

@@ -1,3 +1,5 @@
+import { appendSlash } from './utils/appendSlash';
+
 export interface ProjectSettings {
   TEST_BRANCH?: string;
   RC_BRANCH?: string;
@@ -59,5 +61,3 @@ export const projectSettings = new (class implements ProjectSettings {
     return this._.YANDEX_METRIKA_ID;
   }
 })();
-
-const appendSlash = (url: string | undefined) => (url && !url.endsWith('/') ? `${url}/` : url);

package/mobile/src/components/Blocks.ts

@@ -1,5 +1,6 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
@@ -37,4 +38,5 @@ export const Blocks: BlocksRegistry = {
   RichTextBlock,
   RollupItem,
   VerticalLayout,
+  CarouselRecommendationCard,
 };

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

@@ -87,7 +87,7 @@ export const useCreditCalculatorParams = (
       ...userInputParams,
       monthlyPayment,
     }),
-    [userInputParams],
+    [userInputParams, data],
   );
 };
 

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -8,11 +8,9 @@ import { List } from '../../ui-kit/List/List';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
+import { BORDER_STYLE } from './cardStyle';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
-const BORDER_STYLE =
-  'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
-
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
@@ -26,44 +24,40 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     target,
     title,
     align = 'text-left',
-    version = 'primary',
     ...rest
   }) => {
     return (
       <BlockWrapper
         className={style(
-          'relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
+          'relative box-border p-default group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
-        version={version}
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
           <Headline
-            className="mb-4"
+            className="mb-2"
             title={title}
             description={description}
             headlineVersion="S"
             isPadding={false}
             align={align}
           />
-          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
-            {items.length ? (
-              <List className="flex flex-col gap-2" itemClassName="text-l-light" items={items} />
-            ) : null}
-            {socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
-          </div>
-          {renderIconBlock(icon)}
+          {items.length ? (
+            <List className="flex flex-col gap-2" items={items} listItemSize="S" />
+          ) : null}
+          {renderIcon(icon)}
+          {socialMedia.length ? <SocialMedia className="mt-5" media={socialMedia} /> : null}
         </LinkWrapper>
       </BlockWrapper>
     );
   },
 );
 
-const renderIconBlock = (icon: Picture | undefined) => (
-  <div className="absolute bottom-0 right-0">
-    {icon?.icon ? <Img image={icon} /> : null}
-    {icon?.src ? <Img image={icon} /> : null}
-  </div>
-);
+const renderIcon = (icon?: Picture) =>
+  icon?.src || icon?.icon ? (
+    <div>
+      <Img image={icon} />
+    </div>
+  ) : null;

package/mobile/src/components/CarouselRecommendationCard/cardStyle.ts

@@ -0,0 +1,2 @@
+export const BORDER_STYLE =
+  'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';

package/mobile/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -1,2 +1,2 @@
-export const getPaddingStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'p-default mt-6' : 'p-default mt-6';
+export const getPaddingStyle = (isHighlighting = false): string =>
+  isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный

package/mobile/src/components/Footer/Footer.tsx

@@ -43,7 +43,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
         {...rest}
       />
       <SearchBar className="grow" />
-      <SocialMedia className="pb-4" media={socialMedia} />
+      <SocialMedia className="pt-6 pb-6" media={socialMedia} />
       <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
       <TextInformation links={documents} />
     </BlockWrapper>

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -8,7 +8,7 @@ export interface SocialMediaProps {
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media }) => (
-  <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className}`}>
+  <div className={`flex gap-2 items-start justify-start ${className}`}>
     {media?.map((_, index) => (
       <MediaButton key={String(index)} {..._} />
     ))}

package/mobile/src/components/Tabs/CenteredTabs.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RenderTabProps } from './renderTab';
+import { renderTab } from './renderTab';
+import type { TabData } from './TabsContent';
+
+interface CenteredTabsProps extends RenderTabProps {
+  tabs?: TabData[];
+}
+
+export const CenteredTabs = JSX<CenteredTabsProps>(({ tabs, ...rest }) => (
+  <div className="flex p-1 m-auto bg-main-gray rounded-md">{tabs?.map(renderTab({ ...rest }))}</div>
+));

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { getLinkTabClassName } from './tabItemClasses';
-import type { LinkTabData, TabData } from './TabsContent';
+import type { LinkTabData, TabData, TabsMode } from './TabsContent';
 
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
-  isScrollable?: boolean;
   onClick: (tab: TabData) => void;
+  tabsMode?: TabsMode;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick, isScrollable = false } = props;
+  const { tab, currentTab, onClick, tabsMode } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
@@ -25,12 +25,12 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   return (
     <a
       role="tab"
-      className={getLinkTabClassName('link', active, isScrollable)}
+      className={getLinkTabClassName('link', active, tabsMode)}
       target={tab.target}
       href={adjustedProps.href}
       onClick={handleClick}
     >
-      <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
+      <span className={getLinkTabClassName('text', active, tabsMode)}>{tab.text}</span>
     </a>
   );
 });

package/mobile/src/components/Tabs/ScrollableTabs.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { RenderTabProps } from './renderTab';
-import type { TabData } from './TabsContent';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import type { RenderTabProps } from './renderTab';
 import { renderTab } from './renderTab';
+import type { TabData } from './TabsContent';
 
 interface ScrollableTabsProps extends RenderTabProps {
   tabs?: TabData[];
@@ -15,7 +15,7 @@ export type IsScrollButtonsShown = boolean[];
 const scrollButtonStyle = 'absolute z-40 top-0';
 
 export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
-  const { tabs, onClick, currentTab, page, showCounter } = props;
+  const { tabs, ...rest } = props;
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: tabs?.length || 0,
@@ -30,15 +30,7 @@ export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
           snapAlign="snap-start"
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
-          {tabs?.map(
-            renderTab({
-              onClick,
-              currentTab,
-              showCounter,
-              page,
-              isScrollable: true,
-            }),
-          )}
+          {tabs?.map(renderTab({ ...rest }))}
         </SwipeListContainer>
       </div>
       {scroll.canScrollLeft ? (

package/mobile/src/components/Tabs/Tabs.tsx

@@ -3,14 +3,20 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
 import type { TabData, TabsContent } from './TabsContent';
 
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
+interface RenderTabsProps extends TabsBlockProps {
+  currentTab?: TabData;
+  onClick: (tab: TabData) => void;
+}
+
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
+  const { className = '', tabs, isSticky, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,28 +47,24 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
       role="tablist"
       {...rest}
     >
-      {tabsMode === 'scrollable' ? (
-        <ScrollableTabs
-          tabs={tabs}
-          onClick={handleClick}
-          currentTab={currentTab}
-          showCounter={showCounter}
-          {...rest}
-        />
-      ) : (
-        tabs?.map(
-          renderTab({
-            onClick: handleClick,
-            currentTab,
-            showCounter,
-            ...rest,
-          }),
-        )
-      )}
+      {renderTabs({ tabs, onClick: handleClick, currentTab, ...rest })}
     </BlockWrapper>
   );
 });
 
+const renderTabs = ({ tabsMode, tabs, ...rest }: RenderTabsProps) => {
+  switch (tabsMode) {
+    case 'wideScreen':
+      return tabs?.map(renderTab({ tabsMode, ...rest }));
+    case 'centered':
+      return <CenteredTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+    case 'scrollable':
+      return <ScrollableTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+  }
+
+  return null;
+};
+
 const fireTabEvent = (tab: TabData) => {
   if (tab.type === 'group') {
     defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });

package/mobile/src/components/Tabs/TabsContent.ts

@@ -31,10 +31,11 @@ export type TabData = GroupTabData | LinkTabData;
 /**
  * @enumNames [
  *   "По ширине экрана",
- *   "С прокруткой"
+ *   "С прокруткой",
+ *   "По центру"
  * ]
  */
-export type TabsMode = 'wideScreen' | 'scrollable';
+export type TabsMode = 'wideScreen' | 'scrollable' | 'centered';
 
 /**
  * @title Вкладки

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,12 +1,12 @@
-import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
   ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
   INACTIVE_TEXT_CLASSES,
   TEXT_CLASSES,
   WHITE_ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
 } from './tabItemClasses';
+import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -15,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,7 +27,7 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, isScrollable)}
+        className={getGroupTabClassName('div', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
@@ -36,21 +36,22 @@ export const renderGroupTab =
           className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
             'text',
             active,
-            isScrollable,
+            tabsMode,
           )}`}
         >
-          {renderTitle(tab.title, active, isScrollable)}
+          {renderTitle(tab.title, active, tabsMode)}
           {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
   const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName = isScrollable
-    ? `${TEXT_CLASSES} ${activeClassName}`
-    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+  const titleClassName =
+    tabsMode === 'scrollable'
+      ? `${TEXT_CLASSES} ${activeClassName}`
+      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
 
   return title ? <h3 className={titleClassName}>{title}</h3> : null;
 };

package/mobile/src/components/Tabs/renderTab.tsx

@@ -2,18 +2,18 @@ import type { ContentPageDef } from '../../model/ContentPageDef';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { LinkTab } from './LinkTab';
 import { renderGroupTab } from './renderGroupTab';
-import type { TabData } from './TabsContent';
+import type { TabData, TabsMode } from './TabsContent';
 
 export interface RenderTabProps {
   page?: ContentPageDef;
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
-  isScrollable?: boolean;
+  tabsMode?: TabsMode;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, showCounter, ...rest }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -23,17 +23,9 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+        return renderGroupTab({ page, showCounter, ...rest })(tab, i);
       case 'link': {
-        return (
-          <LinkTab
-            key={String(i)}
-            tab={tab}
-            currentTab={currentTab}
-            isScrollable={isScrollable}
-            onClick={onClick}
-          />
-        );
+        return <LinkTab key={String(i)} tab={tab} {...rest} />;
       }
       default:
         assertUnreachable(type);