@redneckz/wildless-cms-uni-blocks 0.3.95 → 0.3.96

package/mobile/lib/ui-kit/SearchBar/SearchBarInner.js

@@ -5,10 +5,8 @@ import { Img } from '../Img/Img.js';
 export const SearchBarInner = JSX(({ className, context, isMobile = false }) => {
     const { term, setTerm } = context.useSearch();
     const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
-    const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'text-l-light';
-    const SearchBarInputClassName = isMobile
-        ? ' placeholder-transparent font-normal'
-        : 'font-light h-full';
+    const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
+    const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
     const inputPlaceholder = isMobile ? 'some search' : undefined;
     return (_jsxs("form", { className: `font-sans relative ${className}`, children: [_jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [_jsx("div", { className: LoupeIconClassName, children: _jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (_jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), _jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
               outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (_jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
@@ -17,6 +15,6 @@ export const SearchBarInner = JSX(({ className, context, isMobile = false }) =>
                 }, children: _jsx(Img, { image: "CloseIcon", width: "24", height: "24" }) })) : (_jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (ev) => {
                     ev?.preventDefault();
                     console.log('click');
-                }, children: _jsx("div", { className: "font-normal text-sm px-9 py-[9px]", children: "\u041D\u0430\u0439\u0442\u0438" }) }))] }));
+                }, children: _jsx("div", { className: "text-s px-9 py-2.5", children: "\u041D\u0430\u0439\u0442\u0438" }) }))] }));
 });
 //# sourceMappingURL=SearchBarInner.js.map

package/mobile/lib/ui-kit/SearchBar/SearchBarInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInner.js","sourceRoot":"","sources":["../../../src/ui-kit/SearchBar/SearchBarInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAMjC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAC/B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAE9C,MAAM,kBAAkB,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAChF,MAAM,uBAAuB,GAAG,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,cAAc,CAAC;IAClF,MAAM,uBAAuB,GAAG,QAAQ;QACtC,CAAC,CAAC,sCAAsC;QACxC,CAAC,CAAC,mBAAmB,CAAC;IACxB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,OAAO,CACL,gBAAM,SAAS,EAAE,sBAAsB,SAAS,EAAE,aAChD,eAAK,SAAS,EAAC,yGAAyG,aACtH,cAAK,SAAS,EAAE,kBAAkB,YAChC,KAAC,GAAG,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC5C,EACL,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACb,gBACE,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAE,uBAAuB,uBAAuB,EAAE,2FAGrD,CACT,IACG,EACN,gBACE,EAAE,EAAC,kBAAkB,EACrB,SAAS,EAAE;mFAC8D,uBAAuB,EAAE,EAClG,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAe,CAAC,EAClD,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAE,gBAAgB,GAC7B,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,iBACE,SAAS,EAAC,uHAAuH,EACjI,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,EAAE,CAAC,CAAC;gBACd,CAAC,YAED,KAAC,GAAG,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GACzC,CACV,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,gCAAO,EACZ,SAAS,EAAC,qDAAqD,EAC/D,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;oBACd,EAAE,EAAE,cAAc,EAAE,CAAC;oBACrB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC,YAED,cAAK,SAAS,EAAC,mCAAmC,+CAAY,GACvD,CACV,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"SearchBarInner.js","sourceRoot":"","sources":["../../../src/ui-kit/SearchBar/SearchBarInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAMjC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAC/B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC;IAE9C,MAAM,kBAAkB,GAAG,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAChF,MAAM,uBAAuB,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;IACrE,MAAM,uBAAuB,GAAG,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,QAAQ,CAAC;IACjF,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,OAAO,CACL,gBAAM,SAAS,EAAE,sBAAsB,SAAS,EAAE,aAChD,eAAK,SAAS,EAAC,yGAAyG,aACtH,cAAK,SAAS,EAAE,kBAAkB,YAChC,KAAC,GAAG,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC5C,EACL,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACb,gBACE,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAE,uBAAuB,uBAAuB,EAAE,2FAGrD,CACT,IACG,EACN,gBACE,EAAE,EAAC,kBAAkB,EACrB,SAAS,EAAE;mFAC8D,uBAAuB,EAAE,EAClG,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAe,CAAC,EAClD,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAE,gBAAgB,GAC7B,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,iBACE,SAAS,EAAC,uHAAuH,EACjI,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,CAAC,EAAE,CAAC,CAAC;gBACd,CAAC,YAED,KAAC,GAAG,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GACzC,CACV,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,gCAAO,EACZ,SAAS,EAAC,qDAAqD,EAC/D,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;oBACd,EAAE,EAAE,cAAc,EAAE,CAAC;oBACrB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACvB,CAAC,YAED,cAAK,SAAS,EAAC,oBAAoB,+CAAY,GACxC,CACV,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -6,10 +6,10 @@ const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
 export const Tabs = JSX(({ tabs, currentTabIndex, onTabClick }) => {
     return (_jsx("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab(currentTabIndex, onTabClick)) }));
 });
-const tabDescriptionStyle = (isActive = false) => `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`;
+const tabDescriptionStyle = (isActive = false) => `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
 const renderTab = (currentTabIndex, onTabClick) => (tab, index) => {
     const isActive = currentTabIndex === index;
-    return (_jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": isActive, children: [tab?.icon ? renderIcon(tab, isActive) : null, _jsxs("div", { children: [tab?.title ? _jsx("h3", { className: "font-medium m-0 text-base", children: tab?.title }) : null, tab?.description ? (_jsx("span", { className: tabDescriptionStyle(isActive), children: tab?.description })) : null] })] }, String(index)));
+    return (_jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": isActive, children: [tab?.icon ? renderIcon(tab, isActive) : null, _jsxs("div", { children: [tab?.title ? _jsx("h3", { className: "m-0 text-l font-medium", children: tab?.title }) : null, tab?.description ? (_jsx("span", { className: tabDescriptionStyle(isActive), children: tab?.description })) : null] })] }, String(index)));
 };
 const renderIcon = (tab, isActive) => (_jsx("div", { className: "h-full mt-1", children: _jsx(Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC,MAAM,SAAS,GAAG,0DAA0D,CAAC;AAC7E,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAE1E,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,cAAK,SAAS,EAAC,4CAA4C,EAAC,IAAI,EAAC,SAAS,YACvE,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,GAC9C,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CAC/C,sBAAsB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;AAEhE,MAAM,SAAS,GACb,CAAC,eAAuB,EAAE,UAA2B,EAAE,EAAE,CAAC,CAAC,GAAQ,EAAE,KAAa,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,eAAe,KAAK,KAAK,CAAC;IAE3C,OAAO,CACL,eAEE,SAAS,EAAE,gEACT,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAChC,EAAE,EACF,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,mBACjB,QAAQ,aAEtB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7C,0BACG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAC,2BAA2B,YAAE,GAAG,EAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC/E,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAClB,eAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,CAAC,YAAG,GAAG,EAAE,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,IAAI,IACJ,KAdD,MAAM,CAAC,KAAK,CAAC,CAed,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAE,QAAiB,EAAE,EAAE,CAAC,CAClD,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,GAAG,IACF,SAAS,EAAE,gBAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrD,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,UAAU,EAC9B,KAAK,EAAE,CAAC,QAAQ,GAChB,GACE,CACP,CAAC"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/ui-kit/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGjC,MAAM,SAAS,GAAG,0DAA0D,CAAC;AAC7E,MAAM,gBAAgB,GAAG,gDAAgD,CAAC;AAE1E,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,cAAK,SAAS,EAAC,4CAA4C,EAAC,IAAI,EAAC,SAAS,YACvE,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,GAC9C,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CAC/C,iBAAiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;AAE3D,MAAM,SAAS,GACb,CAAC,eAAuB,EAAE,UAA2B,EAAE,EAAE,CAAC,CAAC,GAAQ,EAAE,KAAa,EAAE,EAAE;IACpF,MAAM,QAAQ,GAAG,eAAe,KAAK,KAAK,CAAC;IAE3C,OAAO,CACL,eAEE,SAAS,EAAE,gEACT,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAChC,EAAE,EACF,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,mBACjB,QAAQ,aAEtB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAC7C,0BACG,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAC,wBAAwB,YAAE,GAAG,EAAE,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EAC5E,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,CAClB,eAAM,SAAS,EAAE,mBAAmB,CAAC,QAAQ,CAAC,YAAG,GAAG,EAAE,WAAW,GAAQ,CAC1E,CAAC,CAAC,CAAC,IAAI,IACJ,KAdD,MAAM,CAAC,KAAK,CAAC,CAed,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,UAAU,GAAG,CAAC,GAAQ,EAAE,QAAiB,EAAE,EAAE,CAAC,CAClD,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,GAAG,IACF,SAAS,EAAE,gBAAgB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrD,KAAK,EAAE,GAAG,EAAE,IAAI,IAAI,UAAU,EAC9B,KAAK,EAAE,CAAC,QAAQ,GAChB,GACE,CACP,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-const TEXT_CLASSES = 'font-sans font-light text-sm';
+const TEXT_CLASSES = 'font-sans text-s-light';
 const LINK_CLASSES = 'inline-block border border-solid bg-transparent text-center no-underline';
 export const TopItem = JSX(({ className = '', text, href, target, active, flat, onClick, children, ariaLabel, bgColor = 'bg-white', }) => (_jsx("a", { className: `${getLinkClasses(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: _jsx("span", { className: getTextClasses(bgColor, active, flat), children: text || children }) })));
 const getLinkClasses = (bgColor, active = false, flat = false) => {

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

@@ -1 +1 @@
-{"version":3,"file":"TopItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TopItem/TopItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAiBxC,MAAM,YAAY,GAAG,8BAA8B,CAAC;AACpD,MAAM,YAAY,GAAG,0EAA0E,CAAC;AAEhG,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CACxB,CAAC,EACC,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,UAAU,GACrB,EAAE,EAAE,CAAC,CACJ,YACE,SAAS,EAAE,GAAG,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,SAAS,EAAE,EAClE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAC,qBAAqB,gBACb,SAAS,YAErB,eAAM,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,YAAG,IAAI,IAAI,QAAQ,GAAQ,GAC/E,CACL,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAuB,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE;IAC/E,IAAI,OAAO,GAAG,oBAAoB,CAAC;IACnC,IAAI,MAAM,EAAE;QACV,OAAO,GAAG,cAAc,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;KAC3F;IAED,OAAO,GAAG,OAAO,IAAI,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAuB,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE;IAC/E,IAAI,OAAO,KAAK,UAAU,EAAE;QAC1B,OAAO,cAAc,YAAY,EAAE,CAAC;KACrC;IACD,MAAM,cAAc,GAAG,GACrB,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAC/B,0BAA0B,CAAC;IAE3B,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc,IAAI,YAAY,EAAE,CAAC;AAC5E,CAAC,CAAC"}
+{"version":3,"file":"TopItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TopItem/TopItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAiBxC,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAC9C,MAAM,YAAY,GAAG,0EAA0E,CAAC;AAEhG,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CACxB,CAAC,EACC,SAAS,GAAG,EAAE,EACd,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,UAAU,GACrB,EAAE,EAAE,CAAC,CACJ,YACE,SAAS,EAAE,GAAG,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,SAAS,EAAE,EAClE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAC,qBAAqB,gBACb,SAAS,YAErB,eAAM,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,YAAG,IAAI,IAAI,QAAQ,GAAQ,GAC/E,CACL,CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAuB,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE;IAC/E,IAAI,OAAO,GAAG,oBAAoB,CAAC;IACnC,IAAI,MAAM,EAAE;QACV,OAAO,GAAG,cAAc,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;KAC3F;IAED,OAAO,GAAG,OAAO,IAAI,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAuB,EAAE,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE;IAC/E,IAAI,OAAO,KAAK,UAAU,EAAE;QAC1B,OAAO,cAAc,YAAY,EAAE,CAAC;KACrC;IACD,MAAM,cAAc,GAAG,GACrB,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAC/B,0BAA0B,CAAC;IAE3B,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,cAAc,IAAI,YAAY,EAAE,CAAC;AAC5E,CAAC,CAAC"}

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

@@ -11,7 +11,7 @@ export const Accordion = JSX<AccordionProps>(
     return (
       <section className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}>
         {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
-        {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
+        {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (

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

@@ -23,7 +23,7 @@ export const AccordionItem = JSX<AccordionItemProps>(
           onClick={handleToggle}
         >
           <span
-            className={`text-m-title-xs pr-2.5 font-medium flex ${
+            className={`text-m-title-xs font-medium pr-2.5 flex ${
               hasContent ? 'group-hover:text-primary-main' : ''
             }`}
           >
@@ -32,7 +32,7 @@ export const AccordionItem = JSX<AccordionItemProps>(
             ) : null}
             {label}
           </span>
-          {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
+          {hasContent ? <Img className="w-6" image={icon} width="24" height="24" asSVG /> : null}
         </button>
         {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
       </li>

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

@@ -8,7 +8,12 @@
         "benefitType": "description"
       },
       "icon": {
-        "icon": "ClockIcon"
+        "icon": "ClockIcon",
+        "format": "webp",
+        "size": {
+          "width": 70,
+          "height": 70
+        }
       }
     },
     {
@@ -18,7 +23,12 @@
         "benefitType": "description"
       },
       "icon": {
-        "icon": "SignDocsIcon"
+        "icon": "SignDocsIcon",
+        "format": "webp",
+        "size": {
+          "width": 70,
+          "height": 70
+        }
       }
     }
   ]

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

@@ -3,25 +3,20 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { BenefitItem, BenefitsBlockContent } from './BenefitsBlockContent';
+import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
 import { DescriptionType, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', headingType = 'h2', title, benefitList, ...rest }) => {
+  ({ className = '', title, benefitList, ...rest }) => {
     return (
       <BlockWrapper
         className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`}
         {...rest}
       >
         {title ? (
-          <Heading
-            headingType={headingType}
-            as="h2"
-            className="max-w-[47rem] text-center"
-            title={title}
-          />
+          <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
         ) : null}
         {benefitList?.length ? renderBenefits(benefitList) : null}
       </BlockWrapper>
@@ -29,29 +24,29 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
   },
 );
 
-const renderBenefits = (benefits: BenefitItem[]) => {
+const renderBenefits = (benefits: BenefitItemProps[]) => {
   return (
-    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-9">
+    <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
       {benefits.map(renderStep)}
     </div>
   );
 };
 
-const renderStep = (benefit: BenefitItem, i: number) => {
+const renderStep = (benefit: BenefitItemProps, i: number) => {
   const description = benefit?.description || undefined;
 
   return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-[46px]">
-      {benefit?.icon ? (
+    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+      {benefit?.icon?.icon ? (
         <Img
-          className="h-[70px] w-[70px] min-w-[70px] min-h-[70px] mr-5"
+          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-main-divider"
           image={benefit.icon}
-          width="70"
-          height="70"
+          asSVG
         />
       ) : null}
-      <div>
-        {benefit?.label ? <h3 className="font-medium text-xl-light m-0">{benefit.label}</h3> : null}
+      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+      <div className="ml-5">
+        {benefit?.label ? <h3 className="text-h6 m-0">{benefit.label}</h3> : null}
         {renderDescription(description)}
       </div>
     </div>

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { TitleProp } from '../../model/HeadlineType';
 import type { EmptyOption } from '../../model/EmptyOptionType';
 
 /**
@@ -37,7 +37,7 @@ export type DescriptionType = EmptyOption | TextBenefitDef | ListBenefitDef;
 /**
  * @title Преимущество
  */
-export interface BenefitItem {
+export interface BenefitItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
@@ -48,10 +48,10 @@ export interface BenefitItem {
 /**
  * @title Блок преимущества
  */
-export type BenefitsBlockContent = HeadingCommonProps & {
+export type BenefitsBlockContent = TitleProp & {
   /**
    * @title Список преимуществ
    * @maxItems 6
    */
-  benefitList?: BenefitItem[];
+  benefitList?: BenefitItemProps[];
 };

package/mobile/src/components/Bonus/Bonus.tsx

@@ -1,21 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { BonusContent } from './BonusContent';
+import { Headline } from '../Headline/Headline';
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>((props) => {
-  const { className = '', title, description, bonusItems, ...rest } = props;
+  const { context, className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+    <BlockWrapper
+      className={`font-sans bg-white p-[50px] pb-9 ${className}`}
+      context={context}
+      {...rest}
+    >
       <div className="container">
-        {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
-        {description ? (
-          <div className="text-xl-light text-center mt-[10px]">{description}</div>
-        ) : null}
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          align="center"
+        />
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems
             ? bonusItems.map((_, i) => {

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

@@ -1,24 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
 import { getElementsColsValue } from './getElementsColsValue';
+import { Headline } from '../Headline/Headline';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, subtitle, bonusBenefits, ...rest }) => {
+  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => {
     return (
       <BlockWrapper
         className={`font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`}
+        context={context}
         {...rest}
       >
-        {title ? <Heading headingType="h3" className="mb-[10px]" title={title} /> : null}
-        {subtitle ? <span className="text-md font-normal">{subtitle}</span> : null}
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={subtitle}
+          headlineVersion="M"
+          align="center"
+        />
         {bonusBenefits?.length ? (
-          <div className={`grid gap-1 ${getElementsColsValue(className)}`}>
+          <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
             {bonusBenefits.map(renderBonusBenefit)}
           </div>
         ) : null}

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

@@ -76,7 +76,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
     : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn ? 'text-l text-white' : `text-m-md`;
+  const btnDescClassName = isActiveBtn ? 'text-l font-light text-white' : `text-m font-light`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
 
   return (
@@ -85,7 +85,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex
+      className={`box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`}
     >
       <Img
@@ -96,7 +96,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
         asSVG
       />
       <div className="border-0">
-        <div className={`font-medium ${btnTitleClassName}`}>{tab?.title}</div>
+        <div className={`${btnTitleClassName}`}>{tab?.title}</div>
         <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
       </div>
     </button>

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

@@ -2,11 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { CatalogCard } from './CatalogCard';
 import type { CatalogCardType, CatalogContent } from './CatalogContent';
+import { Headline } from '../Headline/Headline';
 
 export interface CatalogProps extends CatalogContent, UniBlockProps {}
 
@@ -24,10 +23,16 @@ export const Catalog = JSX<CatalogProps>(
         className={`bg-white relative font-sans p-12 overflow-hidden text-center ${className}`}
         {...rest}
       >
-        {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
-        {description ? <Description className="mb-6" description={description} /> : null}
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          align="center"
+        />
         <div
-          className="flex duration-1000 gap-3.5"
+          className="flex duration-1000 gap-3.5 mt-8"
           style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
           role="list"
         >

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { Picture } from '../../model/Picture';
+import type { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -28,11 +28,9 @@ export const CatalogCard = JSX<CatalogCardProps>(
         {title ? (
           <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
         ) : null}
-        {description ? (
-          <div className="text-m-md text-left mb-4 font-light">{description}</div>
-        ) : null}
+        {description ? <div className="text-m-light text-left mb-4">{description}</div> : null}
         {colors?.length ? (
-          <div className="flex mb-4 text-m-md text-secondary-text font-light">
+          <div className="flex mb-4 text-m-light text-secondary-text">
             <div className="mr-1.5">Доступные цвета: </div>
             {colors.map(renderColorOption)}
           </div>

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

@@ -15,7 +15,7 @@ export interface HeaderCellProps {
 
 const headingStyle = (isFillGradient = false): string => (isFillGradient ? 'text-white' : '');
 const subtitleStyle = (isFillGradient = false): string =>
-  `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+  `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
 
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (

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

@@ -26,7 +26,7 @@ const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
   ({ label, description }: CellData, i: number) =>
     (
-      <div key={String(i)} className="flex justify-between text-m-sm py-3.5">
+      <div key={String(i)} className="flex justify-between text-s py-3.5">
         <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
           {rowHeader}
         </div>

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

@@ -51,7 +51,7 @@ const renderButton = ({ header, buttonVersion }) => (
     href={header.link.href}
     target={header.link.target}
     version={buttonVersion}
-    className="font-medium text-m-sm mt-4 py-[11px]"
+    className="text-s font-medium mt-4 py-[11px]"
   >
     {header.link.text}
   </Button>
@@ -62,7 +62,7 @@ const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
     <a
       role="link"
       onClick={onToggleColumn}
-      className={`font-medium text-m-sm cursor-pointer ${
+      className={`text-s font-medium cursor-pointer ${
         isFillGradient ? 'text-white/80' : 'text-primary-main'
       }`}
     >

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

@@ -15,7 +15,7 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  `text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+  `text-s py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
     isLastRow ? 'border-b-0' : 'border-solid'
   }`;
 

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'text-left text-m text-secondary-text';
+const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -45,7 +45,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
       <div className={`grid gap-[18px] pt-2 ${className}`}>
         {renderInput({
           placeholder: 'Хочу продать',
-          rates: currencyRatesBuy,
+          rates: currencyRatesSell,
           selected: calcState.selectSell,
           setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
           value: calcState.inputSell,
@@ -58,7 +58,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
         })}
         {renderInput({
           placeholder: 'Получу',
-          rates: currencyRatesSell,
+          rates: currencyRatesBuy,
           selected: calcState.selectBuy,
           setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
           value: calcState.inputBuy,

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

@@ -60,7 +60,7 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
 
   return (
-    <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
+    <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
       {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>

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

@@ -15,14 +15,14 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
 
     return (
       <div className={className}>
-        <span className="text-primary-text font-medium text-sm">{title}</span>
+        <span className="text-primary-text text-s font-medium">{title}</span>
         {links?.length ? (
           <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
-                className="font-normal text-sm"
+                className="text-s"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}

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

@@ -10,7 +10,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">
-        <span className="font-normal text-xs text-secondary-text">
+        <span className="text-xs-light text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
@@ -20,7 +20,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
-              className="font-normal"
+              className=""
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}

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

@@ -10,7 +10,7 @@ interface TextInformationLinkProps extends LinkProps {
 export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`text-xs text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
+      className={`text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/mobile/src/components/Gallery/Gallery.tsx

@@ -28,9 +28,7 @@ export const Gallery = JSX<GalleryProps>(
             <Heading headingType="h3" className={`text-center ${headingClassName}`} title={title} />
           ) : null}
           {description ? (
-            <div className="font-normal text-m-md max-w-[600px] text-center mb-5">
-              {description}
-            </div>
+            <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
           ) : null}
         </div>
         {renderCardsLayout(orientation, cards, context)}
@@ -60,7 +58,7 @@ function renderCard(card: GalleryCard, key: number) {
             <Img className="mb-3.5" image={card.image} />
           </div>
         ) : null}
-        {card.title ? <h3 className={`font-medium text-m-title-xs m-0`}>{card.title}</h3> : null}
+        {card.title ? <h3 className={`text-m-title-xs font-medium m-0`}>{card.title}</h3> : null}
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null}
       </div>
@@ -82,7 +80,7 @@ function renderButton(button) {
 function renderDescription(card: GalleryCard) {
   return (
     <div
-      className={`text-secondary-text mt-1 text-m-sm ${
+      className={`text-secondary-text mt-1 text-s ${
         card.version === 'secondary' ? 'text-white opacity-80' : ''
       }`}
     >
@@ -97,8 +95,8 @@ function renderItems(items: GalleryItem[], isDotted, version: BlockVersion = 'pr
       {items.map((item, i) => (
         <div key={String(i)}>
           {isDotted ? <div className={getListStyle(version)} /> : null}
-          <span className="text-m-md font-medium">{item.title}</span>
-          <span className={`text-m-sm pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`}>
+          <span className="text-m font-medium">{item.title}</span>
+          <span className={`text-s pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`}>
             {item.text}
           </span>
         </div>

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -44,10 +44,8 @@ function renderCardTitle(title: string, className: string) {
 function renderItems(items: GalleryItem[], isDotted: boolean, version: BlockVersion = 'primary') {
   return (
     <List
-      className={`max-w-[308px] mt-2 text-sm ${
-        version === 'primary' ? '!text-secondary-text' : ''
-      }`}
-      itemClassName="mt-1 first:mt-0"
+      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+      itemClassName="mt-1 text-left first:mt-0"
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
       version={version}

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -6,6 +6,7 @@ import { cardStyleMap, cardVersionMap, cardWidthMap, galleryLengthForScrollMap }
 import { GalleryCardInner } from './GalleryCardInner';
 import type { GalleryCard } from './GalleryContent';
 import type { GalleryInnerProps } from './GalleryInner';
+import { Headline } from '../Headline/Headline';
 
 export interface GalleryContainerProps extends Omit<GalleryInnerProps, 'className'> {
   activeCardIndex: number;
@@ -22,14 +23,16 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
     return (
       <div>
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
-        <div className="flex flex-col items-center mb-8">
-          {title ? <Heading headingType="h2" className="text-center" title={title} /> : null}
-          {description ? (
-            <div className="text-xl-light max-w-[600px] mt-2.5">{description}</div>
-          ) : null}
-        </div>
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="L"
+          align="center"
+        />
         <div
-          className={`flex ${
+          className={`flex mt-8 ${
             cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
           } duration-1000`}
           style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}