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

package/mobile/lib/ui-kit/Text/TextProps.d.ts

@@ -2,11 +2,11 @@ import type { BlockVersionMolecule } from '../../model/BlockVersion';
 /**
  * @title Размер текста
  */
-export declare 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 declare type TextSize = '' | 'text-xs' | 'text-s' | 'text-m' | 'text-l' | 'text-xl';
 /**
  * @title Размер текста
  */
-export declare type TitleSize = '' | 'text-h6' | 'text-h5' | 'text-h5-light' | 'text-h4' | 'text-h3' | 'text-h2' | 'text-h1' | 'text-h0' | 'title-extra' | 'title-huge';
+export declare type TitleSize = '' | 'text-h6' | 'text-h5' | 'text-h4' | 'text-h3' | 'text-h2' | 'text-h1' | 'text-h0' | 'title-extra' | 'title-huge';
 /**
  * @title Цвет текста
  */

package/mobile/lib/ui-kit/TopItem/TopItem.js

@@ -4,13 +4,14 @@ import { useLink } from '../../hooks/useLink.js';
 import { style } from '../../utils/style.js';
 export const TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
     const link = useLink({ isRemote: true });
+    console.log('link', link);
     const { href, target, text, onClick } = link(rest);
     return (_jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, children: _jsx("span", { className: getTextStyle(active, flat), children: text || children }) }));
 });
 const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
     ? 'rounded-md border-primary-main group-data-transparent:border-white'
     : 'border-transparent', flat ? '' : 'px-4 py-2');
-const getTextStyle = (active = false, flat = false) => style('font-sans text-s-light', active
+const getTextStyle = (active = false, flat = false) => style('font-sans text-s font-light', active
     ? 'text-primary-main'
     : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 //# sourceMappingURL=TopItem.js.map

package/mobile/lib/ui-kit/TopItem/TopItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TopItem/TopItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAa1C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC/F,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAEnD,OAAO,CACL,YACE,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,CAAC,EACvD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAC,qBAAqB,gBACb,IAAI,YAEhB,eAAM,SAAS,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,YAAG,IAAI,IAAI,QAAQ,GAAQ,GACpE,CACL,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE,CACpD,KAAK,CACH,0EAA0E,EAC1E,MAAM;IACJ,CAAC,CAAC,oEAAoE;IACtE,CAAC,CAAC,oBAAoB,EACxB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CACxB,CAAC;AAEJ,MAAM,YAAY,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE,CACpD,KAAK,CACH,wBAAwB,EACxB,MAAM;IACJ,CAAC,CAAC,mBAAmB;IACrB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,yBAAyB,CAAC,EACxF,mFAAmF,CACpF,CAAC"}
+{"version":3,"file":"TopItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TopItem/TopItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAa1C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC/F,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC1B,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;IAEnD,OAAO,CACL,YACE,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,CAAC,EACvD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAC,qBAAqB,gBACb,IAAI,YAEhB,eAAM,SAAS,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,YAAG,IAAI,IAAI,QAAQ,GAAQ,GACpE,CACL,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE,CACpD,KAAK,CACH,0EAA0E,EAC1E,MAAM;IACJ,CAAC,CAAC,oEAAoE;IACtE,CAAC,CAAC,oBAAoB,EACxB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CACxB,CAAC;AAEJ,MAAM,YAAY,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE,CACpD,KAAK,CACH,6BAA6B,EAC7B,MAAM;IACJ,CAAC,CAAC,mBAAmB;IACrB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,yBAAyB,CAAC,EACxF,mFAAmF,CACpF,CAAC"}

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

package/mobile/src/components/Carousel/Carousel.tsx

@@ -5,12 +5,11 @@ import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
-import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
+import { renderControlButtons } from './renderControlButtons';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -21,19 +20,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
     itemCount,
-    visibleItemCount,
+    visibleItemCount = 0,
     isBlur = true,
     isCyclic = false,
     arrowsPadded = true,
     isPadding = true,
     showDots = false,
     isAlignCenter = false,
+    showArrows = true,
+    isGap = true,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
     const count = itemCount || childBlocks?.length;
 
-    const [activeIndex, setActiveIndex] = useState<number>(Math.floor((visibleItemCount || 0) / 2));
+    const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
     const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
     const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
 
@@ -51,7 +52,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
             snapAlign="snap-start"
-            gap={ITEMS_GAP}
+            gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
             {renderChildren({
@@ -65,17 +66,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
                 : renderBlock,
             })}
           </SwipeListContainer>
-          <CarouselScrollButtons
-            scroll={scroll}
-            isBlur={isBlur}
-            arrowsPadded={arrowsPadded}
-            onScrollLeft={decreaseActiveIndex}
-            onScrollRight={increaseActiveIndex}
-            hasEdgeBlocks={isBankHistoryCarousel}
-            activeIndex={activeIndex}
-            itemCount={count}
-          />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
+          {renderControlButtons({
+            showArrows,
+            showDots,
+            scrollButtonsProps: {
+              scroll,
+              arrowsPadded,
+              isBlur,
+              onScrollLeft: decreaseActiveIndex,
+              onScrollRight: increaseActiveIndex,
+              hasEdgeBlocks: isBankHistoryCarousel,
+              activeIndex,
+              itemCount: count,
+            },
+            dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
+          })}
         </div>
       </BlockWrapper>
     );
@@ -100,16 +105,3 @@ const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default'
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';
-
-const renderDots = (
-  containerRef: { current: HTMLDivElement | null },
-  dotsActiveIndex: number,
-  itemCount: number | undefined,
-) => (
-  <SwipeListControlDots
-    containerRef={containerRef}
-    activeIndex={dotsActiveIndex}
-    dotCount={itemCount}
-    listType={'horizontal-list'}
-  />
-);

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -19,4 +19,8 @@ export type CarouselContent = UniBlockContent & {
   isPadding?: boolean;
   /** @title Выравнивать по центру  */
   isAlignCenter?: boolean;
+  /** @title отображение кнопок-стрелок*/
+  showArrows?: boolean;
+  /** @title отсупы между карточками*/
+  isGap?: boolean;
 };

package/mobile/src/components/Carousel/CarouselScrollButtons.tsx

@@ -4,7 +4,7 @@ import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowBu
 import { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 
-interface CarouselScrollButtonsProps {
+export interface CarouselScrollButtonsProps {
   scroll: SwipeListScroll;
   arrowsPadded: boolean;
   isBlur: boolean;

package/mobile/src/components/Carousel/renderControlButtons.tsx

@@ -0,0 +1,24 @@
+import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
+import {
+  SwipeListControlDots,
+  SwipeListControlDotsProps,
+} from '../../ui-kit/SwipeListControl/SwipeListControlDots';
+
+interface renderControlButtonsProps {
+  showArrows: boolean;
+  showDots: boolean;
+  scrollButtonsProps: CarouselScrollButtonsProps;
+  dotsProps: SwipeListControlDotsProps;
+}
+
+export const renderControlButtons = ({
+  showArrows,
+  showDots,
+  scrollButtonsProps,
+  dotsProps,
+}: renderControlButtonsProps) => {
+  return [
+    showArrows ? <CarouselScrollButtons key="0" {...scrollButtonsProps} /> : null,
+    showDots ? <SwipeListControlDots key="1" {...dotsProps} listType="horizontal-list" /> : null,
+  ];
+};

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -3,83 +3,21 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+import { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
-interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {
-  blocksLength?: number;
-  activeIndex?: number;
-}
+interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {}
 
 export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
-  ({ title, description, blocksLength = 0, activeIndex, options }) => {
-    const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
-    const isActive = orderNumber === activeIndex;
-
-    return (
-      <BlockWrapper className="flex h-[485px]" defaultPadding="p-0">
-        {isActive ? (
-          <div className="relative flex items-center w-full">
-            <Headline
-              headlineVersion="M"
-              title={title}
-              description={description}
-              align="text-left"
-              className={style(
-                'absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue',
-                getActiveBlockPosition(orderNumber, blocksLength),
-                getBackgroundColor(orderNumber),
-              )}
-            />
-          </div>
-        ) : (
-          <div className="flex w-full items-center justify-center">
-            <div
-              className={style(
-                'flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]',
-                getBackgroundColor(orderNumber),
-              )}
-            >
-              <span className={getTextColor(orderNumber)}>{title}</span>
-            </div>
-          </div>
-        )}
-      </BlockWrapper>
-    );
-  },
+  ({ title, description, className }) => (
+    <BlockWrapper className={style(className)} defaultPadding="p-default">
+      <Headline
+        headlineVersion="S"
+        title={title}
+        description={description}
+        align="text-left"
+        className="text-primary-text"
+        isPadding={false}
+      />
+    </BlockWrapper>
+  ),
 );
-
-const getBackgroundColor = (orderNumber: number) => {
-  const division = orderNumber % 3;
-  switch (division) {
-    case 0:
-      return 'bg-primary-main';
-    case 1:
-      return 'bg-green-light';
-    case 2:
-      return 'bg-yellow-light';
-    default:
-      return 'bg-primary-main';
-  }
-};
-
-const getTextColor = (orderNumber: number) => {
-  const division = orderNumber % 3;
-  switch (division) {
-    case 1:
-      return 'gradient-color-text-on-yellow';
-    case 2:
-      return 'gradient-color-text-on-yellow';
-    default:
-      return 'gradient-color-text-on-green';
-  }
-};
-
-const getActiveBlockPosition = (orderNumber: number, blocksLength: number) => {
-  if (orderNumber === 0) {
-    return 'left-9';
-  } else if (orderNumber === blocksLength - 1) {
-    return 'right-9';
-  } else {
-    return '-left-[25px]';
-  }
-};

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -18,7 +18,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       className={style('flex w-full overflow-hidden justify-between', className)}
       {...rest}
     >
-      <div className="flex flex-col max-w-96 pr-m text-white text-xl-light">
+      <div className="flex flex-col max-w-96 pr-m text-white text-xl font-light">
         <Headline
           isPadding={false}
           title={title}

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { Text } from '../../ui-kit/Text/Text';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -34,7 +35,11 @@ export const ErrorBlock = JSX<ErrorBlockProps>(
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (
-        <div className="font-sans text-xl-light mb-7 max-w-[613px] text-center">{subtitle}</div>
+        <div className="mb-7 max-w-[613px] text-center">
+          <Text size="text-xl" font="font-light">
+            {subtitle}
+          </Text>
+        </div>
       ) : null}
       {button?.text ? (
         <Button className="py-4 px-9" version={button?.version} {...button}>

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -23,7 +23,7 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
             className="whitespace-pre-wrap text-h4 mb-5"
           />
           <div className="pl-11">
-            <Text size="text-m-light" align="text-left" color="text-secondary-text">
+            <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
               {actuality}
             </Text>
           </div>
@@ -34,7 +34,12 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
               <thead>
                 <tr>
                   <th>
-                    <Text size="text-m-light" align="text-left" color="text-secondary-text">
+                    <Text
+                      size="text-m"
+                      font="font-light"
+                      align="text-left"
+                      color="text-secondary-text"
+                    >
                       Валюта
                     </Text>
                   </th>

package/mobile/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 export const renderTableHeader = (title: string) => {
   return (
     <th className="pl-11">
-      <Text size="text-m-light" align="text-left" color="text-secondary-text">
+      <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
         {title}
       </Text>
     </th>

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-light text-secondary-text';
+const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
 const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {

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

@@ -39,7 +39,7 @@ const renderContactsGroup = (item: ContactGroup, i: number) => (
 const renderContact = (item: ContactInfo, index: number) => (
   <div className="mb-4" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="mt-1 text-s-light text-secondary-text">{item.description}</div>
+    <div className="mt-1 text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 
@@ -56,7 +56,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a className="text-xl-light text-primary-text no-underline" href={`mailto:${text}`}>
+        <a className="text-xl font-light text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

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

@@ -2,12 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
-import { textInformationTextSize } from './textInformationTextSize';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
   <div className={className}>
     <div className="pt-4 xl:pt-5">
-      <Text size={textInformationTextSize} color="text-secondary-text">
+      <Text size="text-xs" font="font-light" color="text-secondary-text">
         {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
       </Text>
     </div>

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

@@ -15,7 +15,7 @@ export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
 
     return (
       <a
-        className={`text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
+        className={`text-xs font-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
         href={href}
         target={target}
         onClick={onClick}

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -50,7 +50,7 @@ const renderCalendar = (calendar: CalendarItem[]) => {
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s-light text-primary-text mt-3">
+            <div className="text-s font-light text-primary-text mt-3">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -53,7 +53,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
             <a
               key={item.href || String(i)}
               className={style(
-                'text-l-light pb-4 hover:text-primary-main',
+                'text-l font-light pb-4 hover:text-primary-main',
                 item === activeItem ? 'text-primary-main' : '',
               )}
               {...link(linkProps)}