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

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,6 +1,7 @@
 // TEMP
 
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -24,8 +25,8 @@ export interface DepositCalculatorProp
 
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   ({ context, className = '', buttons, rate }) => {
-    const [moneyValue, setMoneyValue] = context.useState<number>(DEFAULT_SUM);
-    const [monthsValue, setMonthsValue] = context.useState<number>(DEFAULT_MONTHS);
+    const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
 
     const income = 948841;
     const finallySum = 1218841;

package/src/components/Calculator/MortgageCalculatorForm.tsx

@@ -1,5 +1,6 @@
 // TEMP
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { CommonCalculatorProps, MortgageCalculatorParams } from './CalculatorContent';
@@ -20,10 +21,10 @@ export interface MortgageCalculatorProp
 
 export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
   ({ context, className = '', buttons }) => {
-    const [moneyValue, setMoneyValue] = context.useState<number>(1000000);
-    const [monthsValue, setMonthsValue] = context.useState<number>(12);
-    const [isInsurance, toggleIsInsurance] = context.useState(false);
-    const [isFullInsurance, toggleIsFullInsurance] = context.useState(false);
+    const [moneyValue, setMoneyValue] = useState(1000000);
+    const [monthsValue, setMonthsValue] = useState(12);
+    const [isInsurance, toggleIsInsurance] = useState(false);
+    const [isFullInsurance, toggleIsFullInsurance] = useState(false);
 
     const calculatorParams = {}; // getCalculatorParams(context, { isAnnuity: isInsurance });
 

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -14,7 +14,7 @@ export const renderCalculatorBlock =
     return (
       <section
         key={String(i)}
-        className={`box-border relative flex shrink-0 basis-full ${className}`}
+        className={`box-border relative bg-white flex shrink-0 self-start basis-full ${className}`}
         role="listitem"
       >
         <div className="box-border p-9 w-full">

package/src/components/Calculator/useBonusCalculatorParams.ts

@@ -1,4 +1,3 @@
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { BONUS_CALC_DEFAULT_DIR, DEFAULT_BONUS_CALCULATOR_PARAMS } from './constants';
 import { getBonus } from './getBonus';
 import { useCalculatorParams } from './useCalculatorParams';
@@ -29,16 +28,13 @@ export interface BonusCalculatorParams
 }
 
 export const useBonusCalculatorParams = (
-  context: ContentPageContext,
   userInputParams: BonusCalculatorUserInputParams,
   sourceBookDir: string,
 ) => {
   const { travelExpenseValue, restExpenseValue } = userInputParams;
   const bonusCalculatorSourceBookParams =
-    useCalculatorParams<BonusCalculatorSourceBookParams>(
-      context.useAsyncData,
-      sourceBookDir || BONUS_CALC_DEFAULT_DIR,
-    ) || DEFAULT_BONUS_CALCULATOR_PARAMS;
+    useCalculatorParams<BonusCalculatorSourceBookParams>(sourceBookDir || BONUS_CALC_DEFAULT_DIR) ||
+    DEFAULT_BONUS_CALCULATOR_PARAMS;
 
   const [monthBonus, yearBonus] = getBonus(
     bonusCalculatorSourceBookParams,

package/src/components/Calculator/useCalculatorParams.ts

@@ -1,6 +1,6 @@
-import type { AsyncDataHook } from '../ContentPage/ContentPageContext';
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 
-export function useCalculatorParams<Data>(useAsyncData: AsyncDataHook, dir: string) {
+export function useCalculatorParams<Data>(dir: string) {
   const { data } = useAsyncData<Data>(
     `/wcms-resources/${dir}.json`,
     fetchCalculatorSourceBookParams,

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -1,4 +1,3 @@
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { CREDIT_CALC_DEFAULT_DIR, DEFAULT_CREDIT_CALCULATOR_PARAMS } from './constants';
 import { getMonthlyPayment } from './getMonthlyPayment';
 import { useCalculatorParams } from './useCalculatorParams';
@@ -36,16 +35,12 @@ export type CreditCalculatorData = {
 };
 
 export const useCreditCalculatorParams = (
-  context: ContentPageContext,
   userInputParams: CreditCalculatorUserInputParams,
   sourceBookDir?: string,
 ): CreditCalculatorParams => {
   const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
 
-  const data = useCalculatorParams<CreditCalculatorData>(
-    context.useAsyncData,
-    sourceBookDir || CREDIT_CALC_DEFAULT_DIR,
-  );
+  const data = useCalculatorParams<CreditCalculatorData>(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
   const creditCalculatorSourceBookParams =
     data?.rows?.find((_) => {
       return (

package/src/components/Catalog/Catalog.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 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 { Headline } from '../Headline/Headline';
 import { CatalogCard } from './CatalogCard';
 import type { CatalogCardType, CatalogContent } from './CatalogContent';
 
@@ -16,7 +16,7 @@ const CARD_SHIFT = 430;
 
 export const Catalog = JSX<CatalogProps>(
   ({ context, cards = [], className = '', title, description, ...rest }) => {
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     return (
       <BlockWrapper
@@ -24,10 +24,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/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/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
@@ -24,8 +25,8 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
         column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
       })) || [];
 
-    const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
-      new Array(columns?.length).fill(!visibleRowLength),
+    const [columnsViewState, setColumnsViewState] = useState(
+      new Array<boolean>(columns?.length || 0).fill(!visibleRowLength),
     );
 
     const handleToggleColumn = (i: number) => {

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -19,7 +20,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     isColoredFirstColumn = false,
     ...rest
   }) => {
-    const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
+    const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
 
     return (
@@ -64,7 +65,7 @@ const renderShowMoreToggleButton = ({
           onClick={onClick}
           className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
         >
-          <div className="font-sans font-medium text-xs py-[11px]">
+          <div className="font-sans text-xs-light font-medium py-[11px]">
             {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
           </div>
         </button>

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
-import { ComparisonTableRows } from './ComparisonTableRows';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
-import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
 import { Column, RowHeader } from './ComparisonTableContent';
+import { ComparisonTableRows } from './ComparisonTableRows';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
 
 interface ComparisonTableBodyProps {
   context: ContentPageContext;
@@ -29,7 +30,7 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
       }))
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const tableArrowScrollProps = useTableArrowScrollControl({
       columnsLength: colData.length,

package/src/components/ComparisonTable/HeaderCell.mobile.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/src/components/ComparisonTable/HeaderCell.tsx

@@ -38,7 +38,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           target={link.target}
           className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="font-medium text-xs py-[11px]">{link.text}</div>
+          <div className="text-xs-light font-medium py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

package/src/components/ComparisonTable/TableCell.mobile.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/src/components/ComparisonTable/TableCell.tsx

@@ -29,9 +29,9 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
 });
 
 const labelStyle = (isFillGradient = false): string =>
-  `text-xl-light font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
+  `text-xl m-0 ${isFillGradient ? 'text-white' : ''}`;
 const descriptionStyle = (isFillGradient = false): string =>
-  `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
+  `text-s opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
 
 const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
   <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">

package/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/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/src/components/ContentPage/ContentPage.tsx

@@ -1,4 +1,5 @@
-import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
+import type { UNIComponent } from '@redneckz/uni-jsx';
+import { JSX } from '@redneckz/uni-jsx';
 import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import { style2className } from '../../utils/style2className';
 import type { BlockContent } from '../BlockContent';
@@ -17,10 +18,7 @@ export type BlockDecorator<VNode = any> = (
   index?: number | string,
 ) => any;
 
-export type JSXBlock<BlockProps = BlockContent> = (
-  props: PropsWithChildren<UniBlockProps & BlockProps, any>,
-  context?: any,
-) => any;
+export type JSXBlock<BlockProps = BlockContent> = UNIComponent<BlockProps & UniBlockProps>;
 
 export type BlocksRegistry = Record<string, JSXBlock>;
 

package/src/components/ContentPage/ContentPageContext.tsx

@@ -9,32 +9,13 @@ export interface Router {
   replace: (url: string) => void;
 }
 
-export interface LikeService {
-  likeCount: number;
-  like: () => void;
-  dislike: () => void;
-}
-
-export type HandlerDecorator = <F extends Function>(handler: F, targetContent: any) => F;
+export type HandlerDecorator = <F extends Function>(handler: F, targetContent?: any) => F;
 
 export interface Search {
   term: string;
   setTerm: (t: string) => void;
 }
 
-export type AsyncDataHook = <Data, Err = any>(
-  key: string,
-  fetcher: (fetcherKey: string) => Promise<Data>,
-) => { data?: Data; error?: Err };
-
-export type GeolocationHook = (defaultLocation: string) => [string, () => void];
-
-export type SetStateAction<S> = S | ((prevState: S) => S);
-
-export type SetStateHook = <State>(
-  initialState: State | (() => State),
-) => [State, (action: SetStateAction<State>) => void];
-
 export interface IntersectionObserverTagProps {
   tag: keyof HTMLElementTagNameMap;
   className?: string;
@@ -48,12 +29,6 @@ export type IntersectionObserverComponent = (props: IntersectionObserverTagProps
 
 export interface ContentPageContext {
   useRouter: () => Router;
-  useState: SetStateHook;
-  useAsyncData: AsyncDataHook;
-  useGeolocation: GeolocationHook;
-  useLikeService: () => LikeService;
-  useSearch: () => Search;
-  useEffect: <Deps extends any[]>(effect: () => (() => void) | void, deps?: Deps) => void;
   handlerDecorator?: HandlerDecorator;
   IntersectionObserverTag: IntersectionObserverComponent;
 }

package/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/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
@@ -30,7 +31,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     const { useRouter, handlerDecorator } = context;
     const router = useRouter();
 
-    const [calcState, setCalcState] = context.useState<CalcState>({
+    const [calcState, setCalcState] = useState<CalcState>({
       inputSell: '',
       inputBuy: '',
       selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
@@ -45,7 +46,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 +59,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
         })}
         {renderInput({
           placeholder: 'Получу',
-          rates: currencyRatesSell,
+          rates: currencyRatesBuy,
           selected: calcState.selectBuy,
           setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
           value: calcState.inputBuy,

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -19,7 +19,7 @@ export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlock
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
-    const currencyRates = useExchangeRates(context.useAsyncData);
+    const currencyRates = useExchangeRates();
 
     const currencyRatesBuy = currencyRates.filter((_) => _.buy);
     currencyRatesBuy.unshift({ code: Currency.RUB });

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

@@ -26,7 +26,7 @@ export const Footer = JSX<FooterProps>(
     context,
     horizontalNavigationTitle,
   }) => {
-    const sitemap = useSitemap(context.useAsyncData);
+    const sitemap = useSitemap();
     const dispositions = sitemap?.dispositions;
 
     return (
@@ -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/src/components/Footer/HorizontalNavigation.mobile.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/src/components/Footer/Sitemap.tsx

@@ -11,7 +11,7 @@ export interface SitemapProps extends UniBlockProps {
 }
 
 export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) => {
-  const sitemap = useSitemap(context.useAsyncData);
+  const sitemap = useSitemap();
   const mergedItems = mergeTopItems(sitemap.topItems, items);
   const linkParams = {
     router: context.useRouter(),
@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) =>
   };
 
   return (
-    <div className={`flex items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
+    <div className={`flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );

package/src/components/Footer/TextInformation.mobile.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/src/components/Footer/TextInformation.tsx

@@ -10,7 +10,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5">
-        <span className="font-light 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,6 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
-              className="font-light"
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}

package/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/src/components/Gallery/Gallery.mobile.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/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/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)` }}