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

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/BonusCalculatorForm.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 { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -12,14 +13,14 @@ export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockPro
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
   ({ context, className = '', sourceBookDir = '', buttons }) => {
-    const [travelExpenseValue, setTravelExpenseValue] = context.useState(DEFAULT_TRAVEL_MIN_SUM);
-    const [restExpenseValue, setRestExpenseValue] = context.useState(DEFAULT_REST_MIN_SUM);
+    const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
+    const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
     const userInputParams = {
       travelExpenseValue,
       restExpenseValue,
     };
     const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
-      useBonusCalculatorParams(context, userInputParams, sourceBookDir);
+      useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
       <section className={className}>

package/mobile/src/components/Calculator/Calculator.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 { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -28,8 +29,8 @@ export const Calculator = JSX<CalculatorProps>(
     const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
     );
-    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-    const [tabsShift, setTabsShift] = context.useState(0);
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const [tabsShift, setTabsShift] = useState(0);
 
     const handleNextClick = () => setTabsShift(tabsShift + 1);
     const handlePrevClick = () => setTabsShift(tabsShift - 1);
@@ -41,10 +42,10 @@ export const Calculator = JSX<CalculatorProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`}
+        className={`box-border overflow-hidden relative font-sans w-100 text-primary-text ${className}`}
         {...rest}
       >
-        <div>
+        <div className="bg-white">
           {tabsNav.length > 1
             ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
             : null}
@@ -76,7 +77,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 +86,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 +97,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/Calculator/CreditCalculatorForm.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 { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { CommonCalculatorProps } from './CalculatorContent';
@@ -29,12 +30,12 @@ export interface CreditCalculatorProp extends CommonCalculatorProps, UniBlockPro
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
   ({ context, className = '', sourceBookDir, buttons }) => {
-    const [isAnnuity, toggleIsAnnuity] = context.useState(false);
-    const [isInsurance, toggleIsInsurance] = context.useState(true);
-    const [isSalaryClient, toggleIsSalaryClient] = context.useState(false);
-    const [isStateEmployee, toggleIsStateEmployee] = context.useState(false);
-    const [moneyValue, setMoneyValue] = context.useState(DEFAULT_SUM);
-    const [monthsValue, setMonthsValue] = context.useState(DEFAULT_MONTHS);
+    const [isAnnuity, toggleIsAnnuity] = useState(false);
+    const [isInsurance, toggleIsInsurance] = useState(true);
+    const [isSalaryClient, toggleIsSalaryClient] = useState(false);
+    const [isStateEmployee, toggleIsStateEmployee] = useState(false);
+    const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
     const userInputParams = {
       isAnnuity,
       isInsurance,
@@ -43,7 +44,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
       moneyValue,
       monthsValue,
     };
-    const calculatorParams = useCreditCalculatorParams(context, userInputParams, sourceBookDir);
+    const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
 
     return (
       <section className={className}>

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/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/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 { 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/mobile/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/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/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/mobile/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/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

@@ -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/mobile/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/mobile/src/components/Footer/Footer.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/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/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/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}