@redneckz/wildless-cms-uni-blocks 0.3.86 → 0.3.87

package/mobile/src/ui-kit/Checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio,
         checked:border-primary-main m-0`}
         type="checkbox"
         onChange={(e) => {
-          onChange(e.target.checked);
+          onChange(e.target.checked as boolean);
         }}
         checked={checked}
       />
@@ -37,7 +37,7 @@ export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio,
           viewBox="0 0 11 9"
         />
       )}
-      {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
+      {text ? <span className="font-sans ml-3 text-l cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -48,7 +48,7 @@ export const Foldable = JSX<FoldableProps>(
 
     const buttonClassName =
       foldButtonClasses ||
-      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer';
+      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-l flex justify-center cursor-pointer';
     const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
 
     return blocks ? (

package/mobile/src/ui-kit/Heading/Heading.tsx

@@ -5,7 +5,7 @@ const HeadingClass: Record<HeadingType, string> = {
   h0: 'text-m-title',
   h1: 'text-m-title',
   h2: 'text-m-title',
-  h3: 'text-m-title-md',
+  h3: 'text-h6',
   h4: 'text-m-title-xs',
   h5: 'text-m-title-xs',
   h6: 'text-m-title-xs',

package/mobile/src/ui-kit/Input/Input.tsx

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputProps } from './InputProps';
-import { ChangeEvent } from 'react';
 
 export const Input = JSX<InputProps>(
   ({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const validInputValue = e.target.validity.valid ? e.target.value : value;
+    const handleChange = (e) => {
+      const validInputValue = e.target.validity.valid ? (e.target.value as string) : value;
       onChange(validInputValue);
     };
 
@@ -18,7 +17,7 @@ export const Input = JSX<InputProps>(
         pattern={pattern}
         placeholder={placeholder}
         value={value}
-        onChange={(e) => handleChange(e)}
+        onChange={handleChange}
       />
     );
   },

package/mobile/src/ui-kit/InputRange/InputRange.tsx

@@ -29,12 +29,12 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-base text-secondary-text pl-4">{title}</span> : null}
+          {title ? <span className="text-l text-secondary-text pl-4">{title}</span> : null}
           <input
-            className={`m-0 mt-[5px] font-sans text-title w-full h-14 border border-solid border-main-stroke rounded-md
+            className={`m-0 mt-[5px] font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
                         outline-none p-0 pl-4 box-border text-primary-text`}
             value={addSpacesBetweenNumbers(value)}
-            onChange={(e) => handleChange(e.target.value)}
+            onChange={(e) => handleChange(e.target.value as string)}
             onBlur={handleBlur}
           />
           <div className="absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]">
@@ -45,7 +45,7 @@ export const InputRange = JSX<InputRangeProps>(
               max={max}
               step={step}
               value={value}
-              onChange={(e) => handleChange(e.target.value)}
+              onChange={(e) => handleChange(e.target.value as string)}
               style={inputStyle}
             />
           </div>

package/mobile/src/ui-kit/SVG.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 
-interface SVGPathOptions {
+export interface SVGPathOptions {
   fill?: string;
   stroke?: string;
   strokeLinecap?: 'inherit' | 'butt' | 'round' | 'square';
@@ -9,7 +9,7 @@ interface SVGPathOptions {
   strokeMiterlimit?: string;
 }
 
-interface SVGPath extends SVGPathOptions {
+export interface SVGPath extends SVGPathOptions {
   d: string;
 }
 

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -12,7 +12,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
     const { term, setTerm } = context.useSearch();
 
     const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
-    const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'font-light text-base';
+    const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'text-l-light';
     const SearchBarInputClassName = isMobile
       ? ' placeholder-transparent font-normal'
       : 'font-light h-full';
@@ -35,10 +35,10 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
         </div>
         <input
           id="search-bar-input"
-          className={`h-12 pl-12 w-full peer text-base text-black border border-solid rounded box-border
+          className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded box-border
               outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`}
           value={term}
-          onChange={(e) => setTerm(e.target.value)}
+          onChange={(e) => setTerm(e.target.value as string)}
           type="text"
           name="search-bar-input"
           placeholder={inputPlaceholder}

package/mobile/src/ui-kit/Select/Select.tsx

@@ -16,7 +16,7 @@ export const Select = JSX<SelectProps>(
         id={id}
         name={name || id}
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={(e) => onChange(e.target.value as string)}
       >
         {children}
       </select>

package/mobile/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -26,14 +26,14 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       children,
     };
 
-    const handleScroll = (e: UIEvent) => {
+    const handleScroll = (e) => {
       const {
         scrollLeft,
         clientWidth,
         childElementCount,
         scrollWidth,
         children: childrenCollection,
-      } = e.currentTarget as HTMLElement;
+      } = e?.currentTarget as HTMLElement;
 
       // horizontal PADDING / 2 to compensate padding-margin combo of child container
       // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -14,7 +14,7 @@ export interface SwipeListControlDotsProps {
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
   ({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = (idx: number) => (e: Event) => {
+    const handleClick = (idx: number) => (e) => {
       if (idx === activeIndex) {
         return;
       }
@@ -27,7 +27,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
 
     return showDots && children?.length ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
-        {children?.map((_, idx) => (
+        {children?.map((_, idx: number) => (
           <div
             key={String(idx)}
             onClick={handleClick(idx)}
@@ -45,9 +45,9 @@ const getDotStyles = (
   currentIdx: number,
   activeIndex: number,
   indexFraction: number,
-): Record<string, string> | null => {
+): Record<string, string> | undefined => {
   if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
-    return null;
+    return;
   }
 
   const leftIndexMod = 1 - indexFraction;

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SwipeListControlItem } from './SwipeListControlItem';
-import { getContainerStyle } from './utils/getContainerStyle';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlItem } from './SwipeListControlItem';
 import { SwipeContainer } from './SwipeListControlProps';
+import { getContainerStyle } from './utils/getContainerStyle';
 
 /**
  * @title Список
@@ -10,7 +10,7 @@ import { SwipeContainer } from './SwipeListControlProps';
 export interface SwipeListControlListProps extends SwipeContainer {
   className?: string;
   activeIndex: number;
-  onScroll?: (e: UIEvent) => void;
+  onScroll?: (e) => void;
 }
 
 export const SwipeListControlList = JSX<SwipeListControlListProps>(

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -28,7 +28,7 @@ const renderTab =
         }`}
         role="tab"
         onClick={() => onTabClick(index)}
-        aria-selected={String(isActive)}
+        aria-selected={isActive}
       >
         {tab?.icon ? renderIcon(tab, isActive) : null}
         <div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.86",
+  "version": "0.3.87",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -104,7 +104,6 @@
     "clean:actual": "rimraf ./cypress/snapshots/actual || exit 0"
   },
   "peerDependencies": {
-    "@testing-library/react": "^12.1.5",
     "cypress": "^10.6.0",
     "cypress-visual-regression": "^1.7.0",
     "react": ">=16.8.0",
@@ -122,6 +121,8 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@size-limit/file": "^7.0.8",
+    "@testing-library/react": "^12.1.5",
+    "@types/glob": "^8.0.0",
     "@types/jest": "^28.1.5",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
     "@typescript-eslint/experimental-utils": "^5.30.6",
@@ -134,6 +135,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-local-eslint-rules": "./eslint-rules",
     "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.15.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",

package/src/common.css

@@ -10,8 +10,8 @@ html {
   --color-primary-main: 66, 171, 68;
   --color-primary-hover: 36, 131, 65;
   --color-primary-active: 36, 95, 52;
-  --color-secondary-hover: 216, 242, 217;
-  --color-secondary-active: 197, 226, 198;
+  --color-secondary-hover: 36, 131, 65;
+  --color-secondary-active: 36, 95, 52;
   --color-gradient-from: 141, 189, 76;
   --color-gradient-to: 69, 172, 69;
 }
@@ -20,18 +20,18 @@ html {
   --color-primary-main: 131, 184, 62;
   --color-primary-hover: 92, 146, 29;
   --color-primary-active: 60, 94, 16;
-  --color-secondary-hover: 232, 244, 217;
-  --color-secondary-active: 216, 227, 202;
+  --color-secondary-hover: 92, 146, 29;
+  --color-secondary-active: 60, 94, 16;
   --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
   --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
-  --color-primary-main: 225, 186, 30;
+  --color-primary-main: 221, 182, 61;
   --color-primary-hover: 187, 151, 39;
   --color-primary-active: 126, 99, 12;
-  --color-secondary-hover: 241, 236, 221;
-  --color-secondary-active: 229, 222, 199;
+  --color-secondary-hover: 187, 151, 39;
+  --color-secondary-active: 126, 99, 12;
   --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
   --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
 }

package/src/components/Accordion/Accordion.tsx

@@ -37,7 +37,7 @@ export const Accordion = JSX<AccordionProps>(
             title={title}
           />
         ) : null}
-        {description ? <div className="mb-2.5 text-base">{description}</div> : null}
+        {description ? <div className="mb-2.5 text-l">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -65,7 +65,7 @@ const renderDescription = (description?: DescriptionType) => {
   }
 
   return description ? (
-    <div className="font-light text-base text-secondary-text mt-2">
+    <div className="text-l-light text-secondary-text mt-2">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/Blocks.spec.tsx

@@ -1,16 +1,13 @@
 import { setup } from '@redneckz/uni-jsx';
 import { render } from '@testing-library/react';
 import { useState } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import runtime from 'react/jsx-runtime';
 import { Blocks } from './Blocks';
 import type { ContentPageContext } from './ContentPage/ContentPageContext';
 
-setup(jsx, jsxs);
+const { jsx, jsxs } = runtime as any;
 
-jest.mock('../ui-kit/BlockWrapper', () => ({
-  __esModule: true,
-  BlockWrapper: ({ children }) => <section>{children}</section>,
-}));
+setup(jsx, jsxs);
 
 const emptyFn = () => {
   /* For sure */

package/src/components/Bonus/Bonus.fixture.tsx

@@ -5,6 +5,7 @@ import type { BonusContent } from './BonusContent';
 export const BONUS: BonusContent = {
   title: 'Начисление баллов',
   description:
+    /* eslint-disable max-len */
     'Получайте 1% бонусными баллами с любых покупок и 1,5% баллами с покупок в категории «Путешествия». Обменивайте бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
   bonusItems: [
     {

package/src/components/Bonus/Bonus.tsx

@@ -14,7 +14,7 @@ export const Bonus = JSX<BonusProps>((props) => {
       <div className="container">
         {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
         {description ? (
-          <div className="text-md font-light text-center mt-[10px]">{description}</div>
+          <div className="text-xl-light text-center mt-[10px]">{description}</div>
         ) : null}
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems
@@ -26,10 +26,8 @@ export const Bonus = JSX<BonusProps>((props) => {
                   >
                     <div className="flex justify-between w-full">
                       <div className="mr-4">
-                        <div className="text-title-sm">{_.title}</div>
-                        <div className="text-md font-light mt-[14px] max-w-[488px]">
-                          {_.description}
-                        </div>
+                        <div className="text-h4">{_.title}</div>
+                        <div className="text-xl-light mt-[14px] max-w-[488px]">{_.description}</div>
                       </div>
                       {_.bonusCount ? (
                         <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -39,7 +39,7 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
         />
       ) : null}
       <div>
-        {bonusBenefit?.label ? <span className="title-2xs m-0">{bonusBenefit.label}</span> : null}
+        {bonusBenefit?.label ? <span className="text-h6 m-0">{bonusBenefit.label}</span> : null}
       </div>
     </div>
   );

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -6,12 +6,12 @@ import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { getBonusCalculatorParams } from './useBonusCalculatorParams';
+import { useBonusCalculatorParams } from './useBonusCalculatorParams';
 
 export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
-  ({ context, className = '', sourceBookDir, buttons }) => {
+  ({ context, className = '', sourceBookDir = '', buttons }) => {
     const [travelExpenseValue, setTravelExpenseValue] = context.useState(DEFAULT_TRAVEL_MIN_SUM);
     const [restExpenseValue, setRestExpenseValue] = context.useState(DEFAULT_REST_MIN_SUM);
     const userInputParams = {
@@ -19,7 +19,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
       restExpenseValue,
     };
     const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
-      getBonusCalculatorParams(context, userInputParams, sourceBookDir);
+      useBonusCalculatorParams(context, userInputParams, sourceBookDir);
 
     return (
       <section className={className}>

package/src/components/Calculator/Calculator.tsx

@@ -75,8 +75,8 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
   const btnClassName = isActiveBtn
     ? '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-md-new mb-1.5' : `text-base mb-[3px]`;
-  const btnDescClassName = isActiveBtn ? 'text-base text-white' : `text-m-md`;
+  const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+  const btnDescClassName = isActiveBtn ? 'text-l text-white' : `text-m-md`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
 
   return (

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -13,9 +13,9 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => {
     return (
       <div className={`mb-5 ${className}`}>
-        {title ? <div className="text-base font-light">{title}</div> : null}
+        {title ? <div className="text-l-light">{title}</div> : null}
         {value ? (
-          <div className="text-title font-normal">
+          <div className="text-h3">
             {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
           </div>
         ) : null}

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -9,7 +9,7 @@ import { renderButtonSection } from './renderButtonSection';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
-import { getCreditCalculatorParams } from './useCreditCalculatorParams';
+import { useCreditCalculatorParams } from './useCreditCalculatorParams';
 
 export const ANNUITY = 'annuity';
 export const DIFFERENTIAL = 'differential';
@@ -43,7 +43,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
       moneyValue,
       monthsValue,
     };
-    const calculatorParams = getCreditCalculatorParams(context, userInputParams, sourceBookDir);
+    const calculatorParams = useCreditCalculatorParams(context, userInputParams, sourceBookDir);
 
     return (
       <section className={className}>

package/src/components/Calculator/Rate.tsx

@@ -9,7 +9,7 @@ export interface RateProps {
 
 export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
   <div>
-    <div className="text-sm font-light ml-3">{title}</div>
+    <div className="text-l-light ml-3">{title}</div>
     <div className="flex justify-start">
       <span
         className={`block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}

package/src/components/Calculator/renderProposal.tsx

@@ -4,10 +4,8 @@ import { Button } from '../../ui-kit/Button/Button';
 export function renderProposal(monthlyPayment: number) {
   return (
     <div className="box-border ">
-      <div className="text-base font-light">Ежемесячный платёж</div>
-      <div className="text-title mb-3 font-normal">
-        {addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽
-      </div>
+      <div className="text-l-light">Ежемесячный платёж</div>
+      <div className="text-h3 mb-3">{addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽</div>
       <Button className="mt-[50px] w-full" text="Отправить заявку" version="primary" href="#" />
     </div>
   );

package/src/components/Calculator/useBonusCalculatorParams.ts

@@ -28,10 +28,10 @@ export interface BonusCalculatorParams
   yearBonus: number;
 }
 
-export const getBonusCalculatorParams = (
+export const useBonusCalculatorParams = (
   context: ContentPageContext,
   userInputParams: BonusCalculatorUserInputParams,
-  sourceBookDir,
+  sourceBookDir: string,
 ) => {
   const { travelExpenseValue, restExpenseValue } = userInputParams;
   const bonusCalculatorSourceBookParams =

package/src/components/Calculator/useCreditCalculatorParams.ts

@@ -35,7 +35,7 @@ export type CreditCalculatorData = {
   rows: CreditCalculatorSourceBookParams[];
 };
 
-export const getCreditCalculatorParams = (
+export const useCreditCalculatorParams = (
   context: ContentPageContext,
   userInputParams: CreditCalculatorUserInputParams,
   sourceBookDir?: string,

package/src/components/Catalog/Catalog.tsx

@@ -21,10 +21,10 @@ export const Catalog = JSX<CatalogProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
+        className={`bg-white relative font-sans p-12 overflow-hidden text-center ${className}`}
         {...rest}
       >
-        {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
+        {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
         {description ? <Description className="mb-6" description={description} /> : null}
         <div
           className="flex duration-1000 gap-3.5"

package/src/components/Catalog/CatalogCard.tsx

@@ -22,18 +22,21 @@ export const CatalogCard = JSX<CatalogCardProps>(
         className={`border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
         role="listitem"
       >
-        {image?.src ? <Img className="mb-5" image={image} /> : null}
+        {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
         {title ? (
-          <Heading headingType="h6" as="h5" className="text-left mb-1.5" title={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-md text-left mb-4">{description}</div> : null}
         {colors?.length ? (
-          <div className="flex mb-4 text-m-md text-secondary-text">
-            Доступные цвета: {colors.map(renderColorOption)}
+          <div className="flex mb-4 text-m-md text-secondary-text font-light">
+            <div className="mr-1.5">Доступные цвета: </div>
+            {colors.map(renderColorOption)}
           </div>
         ) : null}
-        {price ? <div className="text-title-sm text-left">{price}&nbsp;₽</div> : null}
-        {button?.text ? <Button className="mt-6 w-full" {...button} /> : null}
+        {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
+        {button?.text ? <Button className="mt-5 w-full" {...button} /> : null}
       </section>
     );
   },

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

@@ -19,7 +19,7 @@ const subtitleStyle = (isFillGradient = false): string =>
 
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (
-    <div role="columnheader" scope="col">
+    <div role="columnheader">
       {icon ? (
         <Img
           className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -32,7 +32,7 @@ export default {
       className="bg-main"
       context={context}
       blocksRegistry={Blocks}
-      data={normalizePage(data as ContentPageDef)}
+      data={normalizePage(data as ContentPageDef) as ContentPageDef}
     />
   ),
   editor: (

package/src/components/ContentPage/ContentPage.page.json

@@ -487,7 +487,7 @@
       "content": {
         "title": "Потребительский кредит наличными",
         "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
-        "headingType": "h2",
+        "headlineVersion": "XL",
         "backwardButton": {
           "href": "https://rshb.ru",
           "text": "Кнопка возврата",
@@ -2355,4 +2355,4 @@
       }
     }
   ]
-}
+}

package/src/components/ContentPage/ContentPage.tsx

@@ -26,7 +26,7 @@ export type BlocksRegistry = Record<string, JSXBlock>;
 
 export interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
-  data: ContentPageDef;
+  data?: ContentPageDef;
   blockDecorator?: BlockDecorator;
 }
 
@@ -45,9 +45,10 @@ export const ContentPage = JSX<ContentPageProps>(
     className = '',
     context,
     blocksRegistry,
-    data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
+    data = {},
     blockDecorator = defaultBlockDecorator,
   }) => {
+    const { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' } = data;
     const { header } = slots;
 
     return (

package/src/components/ContentPage/ContentPageContext.tsx

@@ -36,7 +36,7 @@ export type SetStateHook = <State>(
 ) => [State, (action: SetStateAction<State>) => void];
 
 export interface IntersectionObserverTagProps {
-  Tag: string;
+  tag: keyof HTMLElementTagNameMap;
   className?: string;
   anchor?: string;
   children?: VNode;
@@ -44,9 +44,7 @@ export interface IntersectionObserverTagProps {
   observerOptions?: IntersectionObserverInit;
 }
 
-export type IntersectionObserverComponent = (
-  props: IntersectionObserverTagProps & Record<string, any>,
-) => VNode;
+export type IntersectionObserverComponent = (props: IntersectionObserverTagProps) => VNode;
 
 export interface ContentPageContext {
   useRouter: () => Router;

package/src/components/ContentPage/ContentPageHead.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { VNode as _VNode } from '../../model/VNode';
 import type { ContentPageMeta } from '../../types';
-
 export interface ContentPageHeadProps {
-  HeadComponent: <Props, Context, VNode>(props: Props, context?: Context) => VNode;
+  HeadComponent: <Props, Context, VNode = _VNode>(props: Props, context?: Context) => VNode;
   data: ContentPageMeta;
 }