@redneckz/wildless-cms-uni-blocks 0.12.6 → 0.12.7

package/mobile/src/components/OfficeMap/renderFunctions.tsx

@@ -1,4 +1,5 @@
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
 import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
 
 export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkScheduleWeek) => {
@@ -29,11 +30,11 @@ export const renderNearbyOffice = (
 ) => (
   <div className="flex mr-4" key={`nearbyOffice${index}`}>
     <Icon name={icon} width="16" height="16" className="mr-1" />
-    {title ? <span className="text-m">{title}&nbsp;</span> : null}
-    <span className="text-m-light">
+    {title ? <Text size="text-m">{title}&nbsp;</Text> : null}
+    <Text size="text-m" font="font-light">
       {distance ? ` (${distance})` : null}
       {time ? `, ${time}` : null}
-    </span>
+    </Text>
   </div>
 );
 export const renderDay = (
@@ -46,12 +47,12 @@ export const renderDay = (
   >
     <div className="flex justify-between items-center w-full pb-1 text-l text-primary-text">
       <div>{title}</div>
-      {status ? null : <div className="text-m-light text-error">Выходной</div>}
+      {status ? null : <div className="text-m font-light text-error">Выходной</div>}
       {status && workTime ? <div>{workTime}</div> : null}
     </div>
     {status && lunchHour ? renderLunchHour(lunchHour) : null}
     {description ? (
-      <div className="pb-1 text-s-light text-secondary-text">{description}</div>
+      <div className="pb-1 text-s font-light text-secondary-text">{description}</div>
     ) : null}
   </div>
 );
@@ -60,12 +61,12 @@ const renderLunchHour = (lunchHour: string) => {
   const hasTime = /\d+/gi.test(lunchHour);
 
   return hasTime ? (
-    <div className="flex justify-between items-center w-full pb-1 text-m-light text-error">
+    <div className="flex justify-between items-center w-full pb-1 text-m font-light text-error">
       <div>Перерыв</div>
       <div>{lunchHour}</div>
     </div>
   ) : (
-    <div className="flex justify-between items-center w-full pb-1 text-m-light text-primary-main">
+    <div className="flex justify-between items-center w-full pb-1 text-m font-light text-primary-main">
       <div>{lunchHour}</div>
     </div>
   );

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -3,6 +3,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type {
   OfficeServicesBlockContent,
@@ -27,6 +28,10 @@ const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
     {itemList.icon ? (
       <Img className="mr-3 min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
     ) : null}
-    {itemList.label ? <span className="text-l-light">{itemList.label}</span> : null}
+    {itemList.label ? (
+      <Text size="text-l" font="font-light">
+        {itemList.label}
+      </Text>
+    ) : null}
   </li>
 );

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -66,7 +66,9 @@ const renderBlock = (blockName: string, data?: string, iconName?: IconName | und
   <div className="flex mb-4">
     <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" />
     <div className="flex flex-col first:pb-1">
-      <Text size="text-m-light">{blockName}</Text>
+      <Text size="text-m" font="font-light">
+        {blockName}
+      </Text>
       {data ? (
         <Text size="text-h6" color="text-green">
           {data}

package/mobile/src/components/SafeDepositRental/RentalPeriod.tsx

@@ -12,7 +12,7 @@ interface RentalPeriodProps {
 
 export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
   <div className="mb-6">
-    <span className="block text-m-light mb-[3px]">Срок аренды</span>
+    <span className="block text-m font-light mb-1">Срок аренды</span>
     <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
   </div>
 ));

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -10,6 +10,7 @@ import { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRent
 import { Region, useGetRegions } from './useGetRegions';
 import { useSafeBoxes } from './useSafeBoxes';
 import { getBranch, getCoordinates } from './utils';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 
 export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
 
@@ -58,7 +59,11 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
             onClick={handleShowMap}
             onChange={handleChangeSafeDepositState}
           />
-          {footnote ? <p className="text-s-light text-secondary-text">{footnote}</p> : null}
+          {footnote ? (
+            <Paragraph size="text-s" font="font-light">
+              {footnote}
+            </Paragraph>
+          ) : null}
         </div>
         {points.length && showMap ? <YandexMap points={points} className="h-[640px]" /> : null}
       </BlockWrapper>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -4,6 +4,7 @@ import { RegionsAndBranches } from './RegionsAndBranches';
 import { RenderRadioButtons } from './RenderRadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
+import { Text } from '../../ui-kit/Text/Text';
 import type { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRentalTypes';
 import type { Region } from './useGetRegions';
 import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from './useSafeBoxes';
@@ -50,7 +51,9 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
           selectedBoxSize={selectedBoxSize}
           onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
         />
-        <span className="text-secondary-text text-l-light">Тип договора</span>
+        <Text size="text-l" font="font-light" color="text-secondary-text">
+          Тип договора
+        </Text>
         <div className="flex justify-between items-center mt-5">
           <RenderRadioButtons />
           <Button text="Офисы на карте" version="primary" onClick={onClick} />

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -19,7 +19,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
         <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" />
 
-        <span className="text-s-light text-white opacity-80 mt-2 inline-block">
+        <span className="text-s font-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
         </span>
       </div>
@@ -30,7 +30,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 const renderTotal = (label: string, total: string | number, className = '') => {
   return (
     <div className={className}>
-      <div className="text-m-light text-secondary-text mb-1">{label}</div>
+      <div className="text-m font-light text-secondary-text mb-1">{label}</div>
       <span className="text-h3 text-primary-text">{total}</span>
     </div>
   );

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -8,7 +8,7 @@ export type StyleType = {
 
 export const STEPS_BLOCK_STYLE: StyleType = {
   description:
-    'text-white/80 text-l-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
+    'text-white/80 text-l font-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
   iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
   iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
   iconConnector: 'bg-white group-data-primary:bg-secondary-light',

package/mobile/src/components/TariffsTable/TableTileHeader.tsx

@@ -5,7 +5,11 @@ import type { TariffsTableRowHeader } from './TariffsTableContent';
 
 export const TableTileHeader = JSX<TariffsTableRowHeader>(({ title, icon }) => (
   <div className="mb-2">
-    {title ? <Text size="text-l-light">{title}</Text> : null}
+    {title ? (
+      <Text size="text-l" font="font-light">
+        {title}
+      </Text>
+    ) : null}
     {icon ? <Img className="ml-auto min-w-6" image={icon} width="24" height="24" /> : null}
   </div>
 ));

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -40,7 +40,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
             {header?.icon ? (
               <Img className="mr-3.5 max-w-6" image={header.icon} width="24" height="24" />
             ) : null}
-            {header?.title ? <div className="text-m-light">{header?.title}</div> : null}
+            {header?.title ? <div className="text-m font-light">{header?.title}</div> : null}
           </div>
         </div>
         {data?.length ? (

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -39,7 +39,7 @@ export const TextBlock = JSX<TextBlockProps>(
 
 const renderIcon = () => (
   <div
-    className={`rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`}
+    className={`rounded-full h-4 w-4 text-center text-xs font-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`}
   >
     i
   </div>

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -16,7 +16,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
       {isWithText(props) ? (
         <div>
-          {aboveText ? <div className="text-xs-light text-left">{aboveText}</div> : null}
+          {aboveText ? <div className="text-xs font-light text-left">{aboveText}</div> : null}
           <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}

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

@@ -3,6 +3,7 @@ import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
 import type { PreventableEvent } from '../PreventableEvent';
 import { SVG } from '../SVG';
+import { Text } from '../../ui-kit/Text/Text';
 import type { CheckboxProps } from './CheckboxProps';
 
 const CHECK_PATHS = [
@@ -59,7 +60,13 @@ export const Checkbox = JSX<CheckboxProps>(
             aria-disabled={Boolean(disabled)}
           />
           {value ? icon : null}
-          {text ? <span className="font-sans ml-3 text-l-light">{text}</span> : null}
+          {text ? (
+            <div className="ml-3">
+              <Text size="text-l" font="font-light">
+                {text}
+              </Text>
+            </div>
+          ) : null}
         </label>
       </div>
     );

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

@@ -39,7 +39,7 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
     <div className="container z-40 fixed bottom-0 left-0 right-0 pointer-events-none">
       <div className="bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
         <div className="flex-1">
-          <Paragraph size="text-s-light" color="text-primary-text">
+          <Paragraph size="text-s" font="font-light" color="text-primary-text">
             АО «Россельхозбанк» использует
             <LinkWrapper
               isRemote

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

@@ -29,7 +29,7 @@ export const Dialog = JSX<DialogProps>(({ className, isOpened, head, children, o
   return isOpened ? (
     <div
       className={style(
-        'fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar',
+        'fixed inset-0 bg-white text-l font-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar',
         className,
       )}
       role="dialog"

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Img } from '../Img/Img';
 import { InnerTableBodyItem } from './InnerTableBodyItem';
@@ -25,10 +26,12 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
         return (
           <div key={key} className="w-full">
             <div
-              className="flex p-4 bg-gray text-xl-light text-center justify-center cursor-pointer relative"
+              className="flex p-4 bg-gray text-center justify-center cursor-pointer relative"
               onClick={() => toggleTables(key)}
             >
-              {_.title}
+              <Text size="text-xl" font="font-light">
+                {_.title}
+              </Text>
               <Img
                 image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
                 className="absolute right-[22px]"

package/mobile/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -52,7 +52,7 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
       className="flex border-main-divider border border-t-0 border-x-0 border-solid"
     >
       {headerColumn?.data ? (
-        <div className={`text-xl-light w-[214px] pb-5 ${rowIdx === 0 ? 'pt-8' : 'pt-6'}`}>
+        <div className={`text-xl fontd-light w-[214px] pb-5 ${rowIdx === 0 ? 'pt-8' : 'pt-6'}`}>
           {headerColumn.data}
         </div>
       ) : null}
@@ -68,7 +68,7 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
               key={`row${i}`}
               className="flex flex-col flex-grow justify-center pt-6 pb-5 odd:bg-main-divider"
             >
-              {_?.data ? <div className="text-xl-light mb-3">{_.data}</div> : null}
+              {_?.data ? <div className="text-xl font-light mb-3">{_.data}</div> : null}
               {_?.cols ? renderCols(_.cols, activeColumnIndex) : null}
             </div>
           ))}

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -17,7 +17,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
           {currencies.map((currency, idx) => (
             <div
               key={currency}
-              className={`rounded-md text-xl-light px-4 py-3 cursor-pointer ${
+              className={`rounded-md text-xl font-light px-4 py-3 cursor-pointer ${
                 idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'
               }`}
               onClick={() => setActiveTabIndex(idx)}

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

@@ -74,7 +74,7 @@ const closestValue = (list: number[]) => (_: number) =>
 const renderRangeCaption = (items: string[]) => (
   <div className="flex justify-between my-2">
     {items.map((item, i) => (
-      <Text key={String(i)} size="text-s-light" color="text-secondary-text">
+      <Text key={String(i)} size="text-s" font="font-light" color="text-secondary-text">
         {item}
       </Text>
     ))}

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

@@ -4,7 +4,7 @@ import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../Img/Img';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
-  text-l-light bg-white text-primary-text flex w-[316px]
+  text-l font-light bg-white text-primary-text flex w-[316px]
   justify-between items-center group-hover/link:text-primary-main z-10`;
 
 const LINK_BORDER_CLASS_NAME =

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

@@ -5,7 +5,7 @@ import { ListItem } from './ListItem';
 import type { ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
-  S: 'text-l-light',
+  S: 'text-l font-light',
   M: 'text-h6',
   L: 'text-h5',
 };

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

@@ -56,7 +56,7 @@ const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) =>
   return (
     <a
       className={style(
-        'text-l-light text-secondary-text hover:text-primary-main no-underline',
+        'text-l font-light text-secondary-text hover:text-primary-main no-underline',
         'overflow-x-hidden overflow-ellipsis whitespace-nowrap',
       )}
       href={href}

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

@@ -18,7 +18,7 @@ const dotStyle =
 
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 
-interface SwipeListControlDotsProps {
+export interface SwipeListControlDotsProps {
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   dotCount?: number;

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

@@ -21,6 +21,8 @@ const renderTag = (tag: string, key: number) => (
     key={String(key)}
     role="listitem"
   >
-    <Text size="text-m-light">{tag}</Text>
+    <Text size="text-m" font="font-light">
+      {tag}
+    </Text>
   </div>
 );

package/mobile/src/ui-kit/Text/TextProps.ts

@@ -3,18 +3,7 @@ import type { BlockVersionMolecule } from '../../model/BlockVersion';
 /**
  * @title Размер текста
  */
-export type TextSize =
-  | ''
-  | 'text-xs'
-  | 'text-xs-light'
-  | 'text-s-light'
-  | 'text-s'
-  | 'text-m-light'
-  | 'text-m'
-  | 'text-l-light'
-  | 'text-l'
-  | 'text-xl-light'
-  | 'text-xl';
+export type TextSize = '' | 'text-xs' | 'text-s' | 'text-m' | 'text-l' | 'text-xl';
 
 /**
  * @title Размер текста
@@ -23,7 +12,6 @@ export type TitleSize =
   | ''
   | 'text-h6'
   | 'text-h5'
-  | 'text-h5-light'
   | 'text-h4'
   | 'text-h3'
   | 'text-h2'

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

@@ -43,7 +43,7 @@ const getLinkStyle = (active = false, flat = false) =>
 
 const getTextStyle = (active = false, flat = false) =>
   style(
-    'font-sans text-s-light',
+    'font-sans text-s font-light',
     active
       ? 'text-primary-main'
       : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.12.6",
+  "version": "0.12.7",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/Footnote.tsx

@@ -9,7 +9,7 @@ interface FootnoteProps {
 }
 
 export const Footnote = JSX<FootnoteProps>(({ link }) => (
-  <Paragraph size="text-s-light" color="text-secondary-text">
+  <Paragraph size="text-s" font="font-light" color="text-secondary-text">
     <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
     {link ? (
       <Button

package/src/components/ApplicationForm/InputControl.tsx

@@ -25,7 +25,7 @@ export const InputControl = JSX<InputControlProps>(
       />
       <div className="h-2">
         {error ? (
-          <Text size="text-xs-light" color="text-error">
+          <Text size="text-xs" font="font-light" color="text-error">
             {error}
           </Text>
         ) : null}

package/src/components/ApplicationForm/PhoneInputControl.tsx

@@ -16,7 +16,7 @@ export const PhoneInputControl = JSX<InputControlProps>(
       />
       <div className="h-2">
         {error ? (
-          <Text size="text-xs-light" color="text-error">
+          <Text size="text-xs" font="font-light" color="text-error">
             {error}
           </Text>
         ) : null}

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -24,7 +24,7 @@ export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseTy
           title={responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
           className="mb-1"
         />
-        <Text size="text-l-light" color="text-secondary-text">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
           {responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее'}
         </Text>
       </div>

package/src/components/ApplicationForm/SelectControl.tsx

@@ -11,7 +11,7 @@ export const SelectControl = JSX<SelectControlProps>((props) => (
     <Select {...props} valid={!props.error} />
     <div className="h-2">
       {props.error ? (
-        <Text size="text-xs-light" color="text-error">
+        <Text size="text-xs" font="font-light" color="text-error">
           {props.error}
         </Text>
       ) : null}

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -15,7 +15,9 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
   <div className="flex justify-between gap-5 mb-7">
     <div className="w-1/2">
       <label>
-        <Text size="text-m-light">Сумма кредита, ₽</Text>
+        <Text size="text-m" font="font-light">
+          Сумма кредита, ₽
+        </Text>
       </label>
       <InputRange
         items={ITEMS_CREDIT_AMOUNT}
@@ -26,7 +28,9 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
     </div>
     <div className="w-1/2">
       <label>
-        <Text size="text-m-light">Срок кредита, месяцев</Text>
+        <Text size="text-m" font="font-light">
+          Срок кредита, месяцев
+        </Text>
       </label>
       <InputRange
         items={ITEMS_CREDIT_TERM}

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -60,7 +60,7 @@ const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;
 
   return description && benefitType ? (
-    <div className="mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80">
+    <div className="mt-2 text-l font-light text-secondary-text group-data-secondary:text-white/80">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/Blocks.mobile.ts

@@ -3,9 +3,13 @@ import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
+import { CarouselCard } from './CarouselCard/CarouselCard';
+import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
+import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
@@ -31,6 +35,10 @@ export const Blocks: BlocksRegistry = {
   BonusBenefitsBlock,
   CardTransfer,
   Carousel,
+  CarouselCard,
+  CarouselCatalogCard,
+  CarouselProductCard,
+  CarouselBankHistoryCard,
   CarouselTariffsCard,
   ComparisonTable,
   Footer,

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type { BusinessCardItemProps, BusinessCardProps } from './BusinessBlockContent';
 
 export const BusinessCard = JSX<BusinessCardProps>((props) => {
@@ -31,7 +32,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
         <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
-      <span className="text-xl-light">{text}</span>
+      <Text size="text-xl" font="font-light">
+        {text}
+      </Text>
     </li>
   );
 };

package/src/components/Calculator/Calculator.tsx

@@ -74,8 +74,8 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
     : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
   const btnDescClassName = isActive
-    ? 'text-l-light text-white'
-    : `text-m-light text-secondary-text`;
+    ? 'text-l font-light text-white'
+    : `text-m font-light text-secondary-text`;
   const iconClassName = isActive ? '' : `text-primary-main`;
   const iconVersion = tab?.icon?.iconVersion;
   const activeIconStyle = isActive ? 'white' : 'normal';

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -15,7 +15,7 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => (
     <div className={style('mb-7', className)}>
       {title ? (
-        <Text size="text-l-light" color="text-secondary-text">
+        <Text size="text-l" font="font-light" color="text-secondary-text">
           {title}
         </Text>
       ) : null}

package/src/components/Calculator/Rate.tsx

@@ -23,7 +23,7 @@ export const Rate = JSX<RateProps>(
     fractionDigits = 2,
   }) => (
     <div>
-      <Text size="text-l-light" color="text-secondary-text">
+      <Text size="text-l" font="font-light" color="text-secondary-text">
         {title}
       </Text>
       <div className="relative">

package/src/components/Calculator/UnknownRate.tsx

@@ -9,14 +9,14 @@ export interface UnknownRateProps {
 
 export const UnknownRate = JSX<UnknownRateProps>(({ title = 'Ставка' }) => (
   <div>
-    <Text size="text-l-light" color="text-secondary-text">
+    <Text size="text-l" font="font-light" color="text-secondary-text">
       {title}
     </Text>
     <div className="mt-1 pt-1 pl-5 pb-1.5">
       <Icon name="PercentIcon" width="90" height="85" />
     </div>
     <div className="w-[250px] mt-3.5">
-      <Paragraph size="text-xl-light" color="text-primary-text">
+      <Paragraph size="text-xl" font="font-light" color="text-primary-text">
         Процентная ставка для срока <strong>1-30 дней</strong> устанавливается при обращении в Банк
       </Paragraph>
     </div>

package/src/components/Calculator/renderFootnote.tsx

@@ -2,7 +2,7 @@ import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 
 export const renderFootnote = (text?: string) =>
   text ? (
-    <Paragraph size="text-s-light" color="text-secondary-text">
+    <Paragraph size="text-s" font="font-light" color="text-secondary-text">
       {text}
     </Paragraph>
   ) : null;

package/src/components/Calculator/renderProposal.tsx

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