@redneckz/wildless-cms-uni-blocks 0.14.294 → 0.14.295

package/lib/ui-kit/TabsControl/TabItemInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItemInner.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItemInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,MAAM,kBAAkB,GAA4B;IAClD,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,kBAAkB;CAC5B,CAAC;AAEF,MAAM,YAAY,GAAG,6CAA6C,CAAC;AAEnE,MAAM,qBAAqB,GAA4B;IACrD,OAAO,EAAE,0BAA0B;IACnC,UAAU,EAAE,8BAA8B;IAC1C,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,MAAM,aAAa,GAA4B;IAC7C,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAEF,MAAM,mBAAmB,GAA4B;IACnD,OAAO,EAAE,oBAAoB;IAC7B,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,iBAAiB;CAC3B,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAClE,MAAM,GAAG,GAAQ,GAAG,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAE5C,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,kBAAkB,CAAC,IAAI,CAAC,EACxB,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAC3D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,EACvB,OAAO,EAAE,OAAO,KACZ,IAAI,YAER,eACE,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,kCAAkC,EAClC,+BAA+B,EAC/B,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CACtD,aAED,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,YAAE,IAAI,GAAQ,EAChC,WAAW,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,OAAO,YAAE,WAAW,GAAO,CAAC,CAAC,CAAC,IAAI,IAC5D,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"TabItemInner.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItemInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,MAAM,kBAAkB,GAA6B;IACnD,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,kFAAkF;CAC7F,CAAC;AAEF,MAAM,YAAY,GAAG,6CAA6C,CAAC;AAEnE,MAAM,qBAAqB,GAA6B;IACtD,OAAO,EAAE,0BAA0B;IACnC,UAAU,EAAE,8BAA8B;IAC1C,QAAQ,EAAE,0BAA0B;CACrC,CAAC;AAEF,MAAM,aAAa,GAA6B;IAC9C,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,mEAAmE;CAC9E,CAAC;AAEF,MAAM,mBAAmB,GAA6B;IACpD,OAAO,EAAE,oBAAoB;IAC7B,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,sDAAsD;CACjE,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1E,MAAM,GAAG,GAAQ,GAAG,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAE/D,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,kBAAkB,CAAC,IAAI,CAAC,EACxB,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAC3D,EACD,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,KACZ,IAAI,YAER,eACE,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,kCAAkC,EAClC,+BAA+B,EAC/B,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CACtD,aAEA,kBAAkB,CAAC;oBAClB,IAAI;oBACJ,WAAW;oBACX,IAAI;oBACJ,QAAQ;oBACR,IAAI;iBACL,CAAC,EACD,WAAW,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,OAAO,YAAE,WAAW,GAAO,CAAC,CAAC,CAAC,IAAI,IAC5D,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/TabsControl/TabsControl.fixture.d.ts

@@ -3,6 +3,6 @@ import '../../setup-fixture';
 declare const _default: {
     default: JSX.Element;
     scrollable: JSX.Element;
-    rounded: JSX.Element;
+    animated: JSX.Element;
 };
 export default _default;

package/lib/ui-kit/TabsControl/TabsControl.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style.js';
 import { renderTab } from './renderTab.js';
-export const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (_jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tablist", children: items.map(renderTab(value, onChange, tabsType)) })));
+export const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (_jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tabpanel", children: items.map(renderTab(value, onChange, tabsType)) })));
 //# sourceMappingURL=TabsControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsControl.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabsControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAC5B,CAAC,EAAE,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpE,cAAK,SAAS,EAAE,KAAK,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,SAAS,YAC5F,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAC5C,CACP,CACF,CAAC"}
+{"version":3,"file":"TabsControl.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabsControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAC5B,CAAC,EAAE,SAAS,EAAE,QAAQ,GAAG,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpE,cACE,SAAS,EAAE,KAAK,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAC1E,IAAI,EAAC,UAAU,YAEd,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,GAC5C,CACP,CACF,CAAC"}

package/lib/ui-kit/TabsControl/TabsControlProps.d.ts

@@ -1,6 +1,15 @@
 import { type ListControlProps } from '../ListControlProps';
-import { type TabItemBase, type TabType } from './TabItem';
+import { type TabItemBase } from './TabItem';
+/**
+ * @title Тип вкладки
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой",
+ *   "Кнопка с анимацией",
+ * ]
+ */
+export declare type TabsType = 'default' | 'underlined' | 'animated';
 export interface TabsControlProps extends ListControlProps<TabItemBase> {
     className?: string;
-    tabsType?: TabType;
+    tabsType?: TabsType;
 }

package/lib/ui-kit/TabsControl/renderTab.d.ts

@@ -1,3 +1,3 @@
-import { type TabItemBase, type TabType } from './TabItem';
-import { type TabsControlProps } from './TabsControlProps';
-export declare const renderTab: (activeTab?: TabItemBase, onClick?: TabsControlProps['onChange'], type?: TabType) => (tab: TabItemBase, i: number) => JSX.Element;
+import { type TabItemBase } from './TabItem';
+import { type TabsControlProps, type TabsType } from './TabsControlProps';
+export declare const renderTab: (activeTab?: TabItemBase, onClick?: TabsControlProps['onChange'], type?: TabsType) => (tab: TabItemBase, i: number) => JSX.Element;

package/lib/ui-kit/TabsControl/renderTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/renderTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAkC,MAAM,WAAW,CAAC;AAGpE,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,SAAuB,EAAE,OAAsC,EAAE,IAAc,EAAE,EAAE,CACpF,CAAC,GAAgB,EAAE,CAAS,EAAE,EAAE,CAC9B,CACE,KAAC,OAAO,IACN,QAAQ,EAAE,GAAG,KAAK,SAAS,EAC3B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EAEV,IAAI,EAAE,GAAG,IADJ,MAAM,CAAC,CAAC,CAAC,CAEd,CACH,CAAC"}
+{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/renderTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAoB,MAAM,WAAW,CAAC;AAGtD,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,SAAuB,EAAE,OAAsC,EAAE,IAAe,EAAE,EAAE,CACrF,CAAC,GAAgB,EAAE,CAAS,EAAE,EAAE,CAC9B,CACE,KAAC,OAAO,IACN,QAAQ,EAAE,GAAG,KAAK,SAAS,EAC3B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EAEV,IAAI,EAAE,GAAG,IADJ,MAAM,CAAC,CAAC,CAAC,CAEd,CACH,CAAC"}

package/lib/ui-kit/TabsControl/renderTabItemInner.d.ts

@@ -0,0 +1,10 @@
+import { type Picture } from '../../model/Picture';
+interface TabsLayoutButtonProps {
+    isActive: boolean;
+    description?: string;
+    icon?: Picture;
+    type: string;
+    text?: string;
+}
+export declare const renderTabItemInner: ({ text, description, icon, isActive, type, }: TabsLayoutButtonProps) => JSX.Element;
+export {};

package/lib/ui-kit/TabsControl/renderTabItemInner.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { style } from '../../utils/style.js';
+import { Img } from '../Img/Img.js';
+const getButtonClassNames = (isActive) => ({
+    btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
+    text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
+    desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+    icon: isActive ? '' : 'text-primary-main',
+    iconVersion: (isActive ? 'white' : 'normal'),
+    oldText: 'text-m text-center',
+    oldDesc: 'text-m-light',
+});
+export const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
+    const buttonClassNames = getButtonClassNames(isActive);
+    return (_jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, role: "tab", children: [icon ? (_jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
+                    ...icon,
+                    iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
+                }, width: "24", height: "24", alt: text })) : null, _jsxs("div", { className: "border-0", children: [_jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), _jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
+};
+//# sourceMappingURL=renderTabItemInner.js.map

package/lib/ui-kit/TabsControl/renderTabItemInner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTabItemInner.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/renderTabItemInner.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAEjC,MAAM,mBAAmB,GAAG,CAAC,QAAiB,EAAE,EAAE,CAAC,CAAC;IAClD,GAAG,EAAE,QACH,QAAQ,CAAC,CAAC,CAAC,4CAA4C,CAAC,CAAC,CAAC,mCAC5D,EAAE;IACF,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iCAAiC;IACpE,IAAI,EAAE,cAAc,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,4BAA4B,EAAE;IACnF,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;IACzC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAgB;IAC3D,OAAO,EAAE,oBAAoB;IAC7B,OAAO,EAAE,cAAc;CACxB,CAAC,CAAC;AAUH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,IAAI,GACkB,EAAE,EAAE;IAC1B,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAEvD,OAAO,CACL,eACE,SAAS,EAAE,KAAK,CAAC,kDAAkD,CAAC,gBACxD,IAAI,EAChB,IAAI,EAAC,KAAK,aAET,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAClE,KAAK,EAAE;oBACL,GAAG,IAAI;oBACP,WAAW,EAAE,IAAI,EAAE,WAAW,IAAI,gBAAgB,CAAC,WAAW;iBAC/D,EACD,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,GAAG,EAAE,IAAI,GACT,CACH,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAC,UAAU,aACvB,cAAK,SAAS,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,YACnF,IAAI,GACD,EACN,cAAK,SAAS,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,YACnF,WAAW,GACR,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/mobile/bundle/bundle.umd.js

@@ -3986,31 +3986,54 @@
         };
     };
 
+    const getButtonClassNames = (isActive) => ({
+        btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
+        text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
+        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+        icon: isActive ? '' : 'text-primary-main',
+        iconVersion: (isActive ? 'white' : 'normal'),
+        oldText: 'text-m text-center',
+        oldDesc: 'text-m-light',
+    });
+    const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
+        const buttonClassNames = getButtonClassNames(isActive);
+        return (jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, role: "tab", children: [icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
+                        ...icon,
+                        iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
+                    }, width: "24", height: "24", alt: text })) : null, jsxs("div", { className: "border-0", children: [jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
+    };
+
     const tabPaddingStyleMap = {
         default: 'px-xs',
         underlined: 'px-m',
-        rounded: 'px-lg rounded-md',
+        animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
     };
     const tabTextStyle = 'text-secondary-text hover:text-primary-main';
     const activeTabTextStyleMap = {
         default: 'text-black sm:text-white',
         underlined: 'text-primary-main border-b-2',
-        rounded: 'text-white',
+        animated: 'text-white sm:text-white',
     };
     const tabBgStyleMap = {
         default: 'bg-white',
         underlined: 'bg-white',
-        rounded: 'bg-transparent',
+        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
     };
     const activeTabBgStyleMap = {
         default: 'sm:bg-primary-main',
         underlined: 'bg-white',
-        rounded: 'bg-primary-main',
+        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
     };
-    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
         const Tag = tag;
-        const { text, appendRight, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [jsx(Text, { size: "text-m", children: text }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
+        const { text, description, icon, appendRight, ...link } = item;
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tablist", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [renderTabItemInner({
+                        text,
+                        description,
+                        icon,
+                        isActive,
+                        type,
+                    }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
     });
 
     const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
@@ -4032,7 +4055,7 @@
 
     const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
 
-    const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tablist", children: items.map(renderTab(value, onChange, tabsType)) })));
+    const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tabpanel", children: items.map(renderTab(value, onChange, tabsType)) })));
 
     const initialFiltrationState = {
         categories: [],
@@ -5156,20 +5179,30 @@
             } }, _.title || String(i)));
     };
 
-    const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
-    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType }) => {
+    const scrollButtonStyle = 'hidden sm:flex absolute z-40';
+    const scrollStyleType = {
+        animated: {
+            itemClassName: 'flex',
+            gap: 8,
+            buttonTop: 'top-5',
+        },
+        underlined: {
+            itemClassName: '',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
+    };
+    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType = 'default' }) => {
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: items?.length || 0,
         });
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), role: "tablist", children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle), onClick: scroll.scrollRight })) : null] }));
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyleType[tabsType].itemClassName, gap: scrollStyleType[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
     });
 
     const renderTabs = ({ tabsMode, ...props }) => {
         switch (tabsMode) {
             case 'wideScreen':
                 return jsx(TabsControl, { ...props });
-            case 'centered':
-                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto p-xs rounded-md bg-main-gray", tabsType: "rounded", ...props }) }));
             case 'scrollable':
                 return (jsx("div", { className: "flex", children: jsx(ScrollableTabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
             default:
@@ -5177,7 +5210,7 @@
         }
     };
 
-    const TAB_QUERY_PARAM_KEY = 'tab';
+    const TAB_QUERY_PARAM_KEY$1 = 'tab';
     const Tabs = JSX(({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
         const router = useRouter();
         const { isReady } = router;
@@ -5187,8 +5220,8 @@
             if (!tabs || !tabs[0]) {
                 return;
             }
-            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY]) || 0
+            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY$1]
+                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY$1]) || 0
                 : 0;
             const defaultTab = tabs[defaultTabIndex] || tabs[0];
             setActiveTabIndex(defaultTabIndex);
@@ -5207,10 +5240,10 @@
         const updateUrlSearchTabParam = (_) => {
             const searchParams = new URLSearchParams(router.query);
             if (_.name) {
-                searchParams.set(TAB_QUERY_PARAM_KEY, _.name);
+                searchParams.set(TAB_QUERY_PARAM_KEY$1, _.name);
             }
             else {
-                searchParams.delete(TAB_QUERY_PARAM_KEY);
+                searchParams.delete(TAB_QUERY_PARAM_KEY$1);
             }
             router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
         };
@@ -5240,76 +5273,66 @@
     };
     const normalizeTab = (_) => _?.type === 'group' ? { text: _.title, name: _.ref } : _;
 
-    const alignTabStyle = {
-        start: 'text-start',
-        center: 'text-center',
-        end: 'text-end',
+    const renderTabsLayout = ({ tabsType = 'animated', ...props }) => {
+        switch (tabsType) {
+            case 'default':
+                return jsx(TabsControl, { ...props });
+            case 'underlined':
+                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
+            case 'animated':
+                return (jsx("div", { className: "border-b-8 border-primary-main", children: jsx(ScrollableTabsControl, { className: "m-auto", ...props, tabsType: "animated" }) }));
+            default:
+                return null;
+        }
     };
 
-    const getButtonClassNames = (isActive) => ({
-        btn: `w-96 ${isActive
-        ? 'p-m border-none bg-primary-main text-white'
-        : 'p-s ease-in duration-300 bg-white text-primary-text'}`,
-        title: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l',
-        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
-        icon: isActive ? '' : 'text-primary-main',
-        iconVersion: (isActive ? 'white' : 'normal'),
-    });
-    const TabsLayoutButton = JSX(({ tab, className, onClick, isActive }) => {
-        const buttonClassNames = getButtonClassNames(isActive);
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs', buttonClassNames.btn, className), ...getAspectsAttributes(tab?.data), children: [tab?.icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
-                        ...tab?.icon,
-                        iconVersion: tab?.icon?.iconVersion ?? buttonClassNames.iconVersion,
-                    }, width: "24", height: "24" })) : null, jsxs("div", { className: "border-0", children: [tab?.title ? jsx("div", { className: buttonClassNames.title, children: tab.title }) : null, tab?.description ? jsx("div", { className: buttonClassNames.desc, children: tab.description }) : null] })] }));
-    });
-
-    function useDebouncedEffect(effect, deps, delay = 300) {
-        useEffect(() => {
-            const timerId = globalThis.setTimeout(effect, delay);
-            return () => {
-                globalThis.clearTimeout(timerId);
-            };
-        }, deps);
-    }
-
-    const REDIRECT_DELAY = 0.8 * 1000;
-    const TabsLayoutRedirectSection = JSX(({ tab }) => {
-        const link = useLink();
-        const { onClick } = link({
-            ...tab,
-            onClick: () => {
-                /**
-                 * In the current implementation of useLink, there is no follow-by-link method,
-                 * and default routing won't work if the link is external.
-                 */
-                if (tab.href && !isLocalURL(tab.href)) {
-                    globalThis.location.href = tab.href;
-                }
-            },
-        });
-        useDebouncedEffect(onClick, [], REDIRECT_DELAY);
-        return jsx(Shimmer, { className: "col-span-12 p-xl", size: 5 });
-    });
-
-    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+    const TAB_QUERY_PARAM_KEY = 'tab';
+    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, ...rest }) => {
+        const router = useRouter();
+        const { isReady } = router;
         const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+        const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+        useEffect(() => {
+            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+                ? tabs.findIndex((_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY])
+                : defaultSelectedTab;
+            setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
+        }, [isReady, defaultSelectedTab]);
         const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
-        const itemCount = tabs.length;
-        const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] = useCarouselControls({ itemCount }, activeTabIndex);
-        const [containerRef, scroll] = useSwipeListScroll({ itemCount });
-        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "relative border-b-8 border-primary-main", children: [jsx(SwipeListContainer, { itemClassName: "flex", containerRef: containerRef, snapAlign: "snap-end", gap: 8, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign)) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: true, onScrollLeft: decActiveSlideIndex, onScrollRight: incActiveSlideIndex, activeIndex: activeSlideIndex, itemCount: itemCount })] }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: tabs[activeTabIndex]?.href ? (jsx(TabsLayoutRedirectSection, { tab: tabs[activeTabIndex] })) : (renderBlocksList(block?.slots?.[slotName], {
+        const updateUrlSearchTabParam = (_, index) => {
+            const searchParams = new URLSearchParams(router.query);
+            if (_.text) {
+                searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
+            }
+            else {
+                searchParams.delete(TAB_QUERY_PARAM_KEY);
+            }
+            router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+        };
+        const handleChange = useCallback((_) => {
+            const index = tabs.indexOf(_);
+            const tab = tabs[index];
+            setActiveTabIndex(index);
+            if (tab.type === 'group') {
+                updateUrlSearchTabParam(_, index);
+            }
+        }, [tabs]);
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [renderTabsLayout({
+                    items: tabs,
+                    value: tabs[activeTabIndex],
+                    tabsType,
+                    onChange: handleChange,
+                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: renderBlocksList(block?.slots?.[slotName], {
                         ...rest?.options,
-                        key: `${slotName}-${block?.type}`,
                         slotName,
                         parent: block,
-                    })) })] }));
+                    }) })] }));
     }, {
         slots: ({ tabs }) => tabs?.filter((_) => !_.href).map(getSlotName) || [],
         childrenTypes: { exclude: ['TabsLayout'] }, // TODO: fix this on wcms
     });
-    const getSlotName = (tab, index) => tab?.title || `Слот №${index}`;
+    const getSlotName = (tab, index) => tab?.text || `Слот №${index}`;
     const getInitSelectedIndex = (tabs) => tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
-    const renderTabButton = (activeTabIndex, onClick, tabAlign = 'start') => (tab, i) => (jsx(TabsLayoutButton, { className: alignTabStyle[tabAlign], tab: tab, isActive: activeTabIndex === i, onClick: () => onClick(i) }, String(i)));
 
     const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
     const firstCellStyle = 'w-80 flex-shrink-0';
@@ -5559,6 +5582,15 @@
         useEventListener(globalThis, 'click', applyAspects(aspects));
     });
 
+    function useDebouncedEffect(effect, deps, delay = 300) {
+        useEffect(() => {
+            const timerId = globalThis.setTimeout(effect, delay);
+            return () => {
+                globalThis.clearTimeout(timerId);
+            };
+        }, deps);
+    }
+
     const COOKIE_DIALOG_ID = 'cookie';
     const DIALOG_INITIAL_DELAY = 3 * 1000;
     const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
@@ -5666,7 +5698,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.293";
+    const packageVersion = "0.14.294";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;