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

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

@@ -4,89 +4,227 @@ import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import { Blocks } from '../Blocks';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
+import { CARD } from '../CarouselCard/CarouselCard.fixture.mobile';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
+import { CATALOG_CARD } from '../CarouselCatalogCard/CatalogCard';
+import {
+  PRODUCT_CARD,
+  PRODUCT_CARD_SMALL,
+} from '../CarouselProductCard/CarouselProductCard.fixture';
+import { Picture } from '../../model/Picture';
+
+const catalogImage: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 117,
+    height: 117,
+  },
+  title: 'pay-ring',
+};
 
 const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
-const carouselBlock = {
-  type: 'Carousel',
-  blocks: new Array(6)
-    .fill({
-      type: 'CarouselTariffsCard',
-      content: TARIFFS_CARD,
-    })
-    .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Carousel className="col-span-12" block={carouselBlock} options={options} />
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: [
+            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+            { type: 'CarouselCard', content: CARD, style: ['col-span-4'] },
+          ],
+        }}
+        options={options}
+      />
     </div>
   ),
-  'arrowsPadded with cyclic': (
+  catalog: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        block={carouselBlock}
+        isBlur={false}
+        isCyclic={true}
+        isPadding={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselCatalogCard',
+            content: { ...CATALOG_CARD, image: catalogImage },
+            style: ['col-span-12'],
+          }),
+        }}
         options={options}
-        arrowsPadded={false}
+      />
+    </div>
+  ),
+  tariffs: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={0}
+        isBlur={true}
         isCyclic={true}
+        isAlignCenter={true}
+        showArrows={false}
+        block={{
+          type: 'Carousel',
+          blocks: [
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD_HIT,
+              style: ['col-span-4'],
+            },
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+              style: ['col-span-4'],
+            },
+            {
+              type: 'CarouselTariffsCard',
+              content: TARIFFS_CARD,
+              style: ['col-span-4'],
+            },
+          ],
+        }}
+        options={options}
       />
     </div>
   ),
-
-  'no-blur with cyclic': (
+  product: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
         isBlur={false}
         isCyclic={true}
-        block={carouselBlock}
+        isPadding={false}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>
   ),
-  'one visible cards with dots': (
+  'mini-product': (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={1}
+        isBlur={true}
+        isPadding={false}
+        showArrows={false}
         showDots={true}
-        block={carouselBlock}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD_SMALL,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>
   ),
-  'only one cards align center': (
+  program: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        isPadding={true}
+        showArrows={false}
+        showDots={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(1)
-            .fill({
-              type: 'CarouselTariffsCard',
-              content: TARIFFS_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: TARIFFS_CARD_HIT } : _)),
+          blocks: new Array(3).fill({
+            type: 'CarouselProgramsCard',
+            content: BUSINESS_CARD,
+            style: ['col-span-4'],
+          }),
         }}
         options={options}
-        isAlignCenter={true}
       />
     </div>
   ),
-
-  tariffs: (
+  recommendations: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={0}
-        isBlur={true}
-        isCyclic={false}
-        isAlignCenter={true}
-        block={carouselBlock}
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  recommendationsSecondary: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isPadding={false}
+        isCyclic={true}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselRecommendationCard',
+            content: { version: 'secondary', ...CAROUSEL_RECOMMENDATION_CARD },
+            style: ['col-span-4'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+  'bank history': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={true}
+        isPadding={false}
+        showArrows={false}
+        showDots={true}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(3).fill({
+            type: 'CarouselBankHistoryCard',
+            content: BANK_HISTORY_CARD,
+            style: ['col-span-4'],
+          }),
+        }}
         options={options}
       />
     </div>

package/src/components/Carousel/Carousel.fixture.tsx

@@ -97,6 +97,7 @@ export default {
         isBlur={true}
         isCyclic={false}
         isAlignCenter={true}
+        isGap={false}
         block={{
           type: 'Carousel',
           blocks: new Array(6)
@@ -131,7 +132,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={4}
+        visibleItemCount={3}
         isBlur={true}
         block={{
           type: 'Carousel',
@@ -148,6 +149,10 @@ export default {
               type: 'CarouselProductCard',
               content: PRODUCT_CARD_SMALL,
             },
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD_SMALL,
+            },
           ],
         }}
         options={options}

package/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/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/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/src/components/Carousel/itemsGap.ts

@@ -1 +1 @@
-export const ITEMS_GAP = 4;
+export const ITEMS_GAP = 16;

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

@@ -0,0 +1,18 @@
+import '../../setup-fixture';
+
+import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
+import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+
+export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
+  title: '1796г.',
+  description:
+    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselBankHistoryCard className="col-span-12" {...BANK_HISTORY_CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 
+import { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
 import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
@@ -9,6 +10,13 @@ export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
     "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
 };
 
+const options: BlockRendererOptions = {
+  key: 'card-0',
+};
+
+const commonProps = { ...BANK_HISTORY_CARD, options };
+
 export default {
   default: <CarouselBankHistoryCard {...BANK_HISTORY_CARD} />,
+  active: <CarouselBankHistoryCard activeIndex={0} {...commonProps} />,
 };

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

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+
+interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {}
+
+export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
+  ({ 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>
+  ),
+);

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

@@ -4,6 +4,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { style } from '../../utils/style';
+import { Text } from '../../ui-kit/Text/Text';
 import { ComparisonTableBody } from './ComparisonTableBody';
 import type { ComparisonTableContent } from './ComparisonTableContent';
 import { FIRST_CELL_CLASSES } from './constants';
@@ -61,11 +62,11 @@ const renderShowMoreToggleButton = ({
       <div className={FIRST_CELL_CLASSES} />
       <button
         onClick={onClick}
-        className="mt-5 flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+        className="mt-m py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
       >
-        <div className="font-sans text-xs-light font-medium py-3">
+        <Text size="text-xs" font="font-medium">
           {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
-        </div>
+        </Text>
       </button>
     </div>
   </div>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -38,7 +38,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           target={link.target}
           className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="text-xs-light font-medium py-[11px]">{link.text}</div>
+          <div className="text-xs font-light font-medium py-[11px]">{link.text}</div>
         </Button>
       </div>
     )}

package/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/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/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/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/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/src/components/Footer/HorizontalNavigation.tsx

@@ -14,7 +14,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(({ className
             <HorizontalNavigationLink
               key={String(i)}
               index={i}
-              className="text-l-light max-w-[292px]"
+              className="text-l font-light max-w-[292px]"
               {..._}
             />
           ))}

package/src/components/Footer/SocialMedia.tsx

@@ -18,7 +18,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
           <MediaButton key={String(index)} buttonSize={buttonSize} {..._} />
         ))}
       </div>
-      <Text size="text-s-light" color="text-secondary-text">
+      <Text size="text-s" font="font-light" color="text-secondary-text">
         {children}
       </Text>
     </div>

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