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

package/src/common.css

@@ -84,7 +84,10 @@ html {
     height: 4px;
     background: transparent;
     border-radius: 5px;
-    background-image: linear-gradient(#42ab44, #42ab44);
+    background-image: linear-gradient(
+      rgb(var(--color-primary-main)),
+      rgb(var(--color-primary-main))
+    );
     background-repeat: no-repeat;
   }
 
@@ -93,30 +96,45 @@ html {
     height: 18px;
     width: 18px;
     border-radius: 50%;
-    background: #fff;
+    background: rgb(var(--color-primary-main));
     cursor: pointer;
     box-shadow: none;
-    border: 3px solid #42ab44;
   }
 
   input[type='range'].slider::-moz-range-thumb {
     height: 12px;
     width: 12px;
     border-radius: 50%;
-    background: #fff;
+    background: rgb(var(--color-primary-main));
     cursor: pointer;
     box-shadow: none;
-    border: 3px solid #42ab44;
   }
 
   input[type='range'].slider::-ms-thumb {
     height: 18px;
     width: 18px;
     border-radius: 50%;
-    background: #fff;
+    background: rgb(var(--color-primary-main));
     cursor: pointer;
     box-shadow: none;
-    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider:disabled {
+    background-image: linear-gradient(rgb(201, 202, 204), rgb(201, 202, 204));
+    pointer-events: none;
+    cursor: default;
+  }
+
+  input[type='range'].slider:disabled::-webkit-slider-thumb {
+    background: rgb(201, 202, 204);
+  }
+
+  input[type='range'].slider:disabled::-moz-range-thumb {
+    background: rgb(201, 202, 204);
+  }
+
+  input[type='range'].slider:disabled::-ms-thumb {
+    background: rgb(201, 202, 204);
   }
 
   /* Hide arrows */

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

@@ -27,12 +27,12 @@ export const Accordion = JSX<AccordionProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`p-[50px] font-sans bg-white text-primary-text ${className}`}
+        className={`p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`}
         {...rest}
       >
         {title ? (
           <Heading
-            headingType="h4"
+            headingType="h3"
             className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
             title={title}
           />

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

@@ -9,10 +9,7 @@ export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockPr
 
 export const AccordionItem = JSX<AccordionItemProps>(
   ({ label, labelIcon, blocks, bordered, context }) => {
-    const { hasContent, icon, handleToggle } = useActiveHandler({
-      context,
-      blocks,
-    });
+    const { hasContent, icon, handleToggle } = useActiveHandler({ blocks });
 
     return (
       <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
@@ -23,7 +20,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 +29,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/src/components/Accordion/AccordionItem.tsx

@@ -9,7 +9,6 @@ export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockPr
 
 export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, blocks, context }) => {
   const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
-    context,
     blocks,
     initialState: isExpanded,
   });
@@ -17,12 +16,12 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, block
   return (
     <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
       <button
-        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
-            ${hasContent ? 'group cursor-pointer' : ''}
+        className={`border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full
+            font-sans text-h6 ${hasContent ? 'group cursor-pointer' : ''}
           `}
         onClick={handleToggle}
       >
-        <span className={`text-xl-light pr-2.5 font-medium`}>{label}</span>
+        <span className={`text-xl font-medium pr-2.5`}>{label}</span>
         {hasContent ? (
           <Img image={icon} className="text-primary-main" width="24" height="24" asSVG />
         ) : null}

package/src/components/Accordion/AccordionItemInner.tsx

@@ -5,7 +5,7 @@ import type { AccordionItemProps } from './AccordionItem';
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
   return (
     <div className="grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden">
-      {renderBlocksList({ context, blocks, className: '!p-0 mb-5' })}
+      {renderBlocksList({ context, blocks, className: '!p-0 mb-3.5' })}
     </div>
   );
 });

package/src/components/Accordion/useActiveHandler.ts

@@ -1,8 +1,9 @@
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { IconName } from '../../icons/IconName';
 import { ActiveHandler } from '../../ui-kit/BlocksList/BlocksListProps';
 
-export const useActiveHandler = ({ context, blocks, initialState = false }: ActiveHandler) => {
-  const [isActive, setIsActive] = context.useState(initialState);
+export const useActiveHandler = ({ blocks, initialState = false }: ActiveHandler) => {
+  const [isActive, setIsActive] = useState(initialState);
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'MinusIcon' : 'PlusIcon';
 

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

@@ -1,6 +1,7 @@
 import { context } from '../../react/setup-fixture';
 
 import { BenefitsBlock } from './BenefitsBlock';
+import type { Picture } from '../../model/Picture';
 
 const itemsList = [
   'Комиссия за выдачу',
@@ -9,8 +10,18 @@ const itemsList = [
   'частичное погашение кредита',
 ];
 
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  alt: 'Потребительский кредит наличными',
+  size: {
+    width: 70,
+    height: 70,
+  },
+};
+
 export default {
-  description: (
+  'desc-img': (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
         context={context}
@@ -23,7 +34,7 @@ export default {
               name: 'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
               benefitType: 'text',
             },
-            icon: { icon: 'ClockIcon' },
+            icon: image,
           },
           {
             label: 'Оформление по паспорту',
@@ -31,7 +42,7 @@ export default {
               name: 'Обеспечение не требуется. Кредит можно получить на любые цели',
               benefitType: 'text',
             },
-            icon: { icon: 'SignDocsIcon' },
+            icon: image,
           },
           {
             label: 'Без залога и поручительства',
@@ -39,7 +50,7 @@ export default {
               name: 'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
               benefitType: 'text',
             },
-            icon: { icon: 'ComfortableCompIcon' },
+            icon: image,
           },
           {
             label: 'Деньги за 3 дня',
@@ -47,12 +58,56 @@ export default {
               name: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
               benefitType: 'text',
             },
-            icon: { icon: 'ActualBalanceIcon' },
+            icon: image,
           },
         ]}
       />
     </div>
   ),
+  'desc-icon': (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefitList={[
+          {
+            label: 'Без комиссии',
+            description: {
+              name: 'Комиссия за выдачу ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'MoneyIcon' },
+          },
+          {
+            label: 'Оформление',
+            description: {
+              name: 'Обеспечение ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'PersonalCardIcon' },
+          },
+          {
+            label: 'Без залога ',
+            description: {
+              name: 'Единовременное перечисление ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'CalendarTickIcon' },
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description: {
+              name: 'Рассмотрение  ',
+              benefitType: 'text',
+            },
+            icon: { icon: 'GlobalIcon' },
+          },
+        ]}
+      />
+    </div>
+  ),
+
   list: (
     <div className="container grid grid-cols-12">
       <BenefitsBlock

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

@@ -1,6 +1,7 @@
-import { setup } from '@redneckz/uni-jsx';
+import { setupHooks } from '@redneckz/uni-jsx/lib/hooks';
+import { setup } from '@redneckz/uni-jsx/lib/setup';
 import { render } from '@testing-library/react';
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 import runtime from 'react/jsx-runtime';
 import { Blocks } from './Blocks';
 import type { ContentPageContext } from './ContentPage/ContentPageContext';
@@ -8,35 +9,28 @@ import type { ContentPageContext } from './ContentPage/ContentPageContext';
 const { jsx, jsxs } = runtime as any;
 
 setup(jsx, jsxs);
+setupHooks(React as any);
 
 const emptyFn = () => {
   /* For sure */
 };
 
 const context: ContentPageContext = {
-  useState,
-  useEffect,
   useRouter: () => ({
     pathname: '/credits',
     query: {},
     push: emptyFn,
     replace: emptyFn,
   }),
-  useAsyncData: () => ({}),
-  useGeolocation: (defaultLocation) => [defaultLocation, emptyFn],
-  useLikeService: () => ({
-    likeCount: 0,
-    like: emptyFn,
-    dislike: emptyFn,
-  }),
   handlerDecorator: (): any => emptyFn,
-  useSearch: () => ({
-    term: '',
-    setTerm: emptyFn,
-  }),
   IntersectionObserverTag: ({ children }) => children,
 };
 
+jest.mock('@redneckz/uni-jsx/lib/hooks/useAsyncData', () => ({
+  __esModule: true,
+  useAsyncData: () => ({}),
+}));
+
 describe('Blocks', () => {
   beforeEach(() => {
     jest.resetModules();

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

@@ -75,7 +75,7 @@ export default {
             nav: {
               title: 'Ипотека с господдержкой',
               description: 'Ставка от 6%, срок до 30 лет',
-              icon: { icon: 'WalletAdd2Icon' },
+              icon: { icon: 'StateMortgageIcon' },
             },
             calculatorBlock: MORTGAGE_CALCULATOR_BLOCK,
           },

package/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/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}>