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

package/mobile/src/ui-kit/BenefitItem/renderBenefitIcon.tsx

@@ -0,0 +1,24 @@
+import type { IconVersion } from '../../model/IconVersion';
+import type { Picture } from '../../model/Picture';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+
+export const renderBenefitIcon = (
+  icon: Picture | undefined,
+  benefitsVersion: IconVersion = 'normal',
+) =>
+  icon ? (
+    <div
+      className={style(
+        'w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon',
+        benefitsVersion === 'normal'
+          ? 'bg-secondary-light text-primary-main'
+          : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black',
+      )}
+    >
+      <Img
+        className="w-6 h-6"
+        image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
+      />
+    </div>
+  ) : null;

package/mobile/src/ui-kit/BenefitItem/renderBenefitLabel.tsx

@@ -0,0 +1,12 @@
+import { Text } from '../Text/Text';
+
+export const renderBenefitLabel = (label?: string, i?: number) =>
+  label ? (
+    <Text
+      key={`label-${i}`}
+      color="text-primary-text group-data-secondary:text-white"
+      size="text-h6"
+    >
+      {label}
+    </Text>
+  ) : null;

package/mobile/src/ui-kit/BenefitItem/renderBenefitText.tsx

@@ -0,0 +1,14 @@
+import { RichText } from '../RichText/RichText';
+import type { ComplexBenefitContent } from './BenefitItemContent';
+import { renderBenefitDescription } from './renderBenefitDescription';
+import { renderBenefitLabel } from './renderBenefitLabel';
+
+export const renderBenefitText = (_: ComplexBenefitContent, i?: number) =>
+  _.type === 'rte' && '__html' in _ && _.__html ? (
+    <RichText key={`rte-${i}`} {..._} />
+  ) : (
+    [
+      'label' in _ ? renderBenefitLabel(_.label, i) : null,
+      'description' in _ ? renderBenefitDescription(_.description, i) : null,
+    ]
+  );

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

@@ -1,35 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { deviation } from '../../utils/deviation';
-import { style } from '../../utils/style';
-import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
-import type { BenefitsListContent } from './BenefitsListContent';
-import { renderBenefit } from './renderBenefit';
+import { BenefitsListProps } from './BenefitsListProps';
+import { DefaultBenefitsList } from './DefaultBenefitsList';
+import { TabularBenefitsList } from './TabularBenefitsList';
 
-interface BenefitsListProps extends BenefitsListContent {
-  className?: string;
-}
-
-const MAX_BENEFITS_LEN_DEVIATION = 16;
-
-const benefitLength = (_: ComplexBenefitContent) =>
-  _.type === 'rte'
-    ? _.__html?.length || 0
-    : Math.max(_.label?.length || 0, _.description?.length || 0);
-
-const isDistortedBenefits = (benefits: ComplexBenefitContent[]) =>
-  deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
-
-export const BenefitsList = JSX<BenefitsListProps>(
-  ({ className, benefitsVersion = 'normal', benefits }) =>
-    benefits?.length ? (
-      <div
-        className={style(
-          'flex gap-x-m gap-y-s',
-          isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap',
-          className,
-        )}
-      >
-        {benefits.map(renderBenefit(benefitsVersion))}
-      </div>
-    ) : null,
+export const BenefitsList = JSX<BenefitsListProps>(({ isTabularBenefits, ...rest }) =>
+  isTabularBenefits ? <TabularBenefitsList {...rest} /> : <DefaultBenefitsList {...rest} />,
 );

package/mobile/src/ui-kit/BenefitsList/BenefitsListContent.ts

@@ -6,10 +6,12 @@ import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
  */
 export interface BenefitsListContent {
   benefitsVersion?: IconVersion;
+  /** @title Табличный вид преимуществ */
+  isTabularBenefits?: boolean;
   /**
    * @title Список преимуществ
    * @minItems 2
-   * @maxItems 4
+   * @maxItems 8
    */
   benefits?: ComplexBenefitContent[];
 }

package/mobile/src/ui-kit/BenefitsList/BenefitsListProps.ts

@@ -0,0 +1,5 @@
+import type { BenefitsListContent } from './BenefitsListContent';
+
+export interface BenefitsListProps extends BenefitsListContent {
+  className?: string;
+}

package/mobile/src/ui-kit/BenefitsList/DefaultBenefitsList.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { deviation } from '../../utils/deviation';
+import { style } from '../../utils/style';
+import { BenefitItem } from '../BenefitItem/BenefitItem';
+import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
+import type { BenefitsListProps } from './BenefitsListProps';
+
+const MAX_BENEFITS_LEN_DEVIATION = 16;
+
+const benefitLength = (_: ComplexBenefitContent) =>
+  _.type === 'rte'
+    ? _.__html?.length || 0
+    : Math.max(_.label?.length || 0, _.description?.length || 0);
+
+const isDistortedBenefits = (benefits: ComplexBenefitContent[]) =>
+  deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
+
+export const DefaultBenefitsList = JSX<BenefitsListProps>(
+  ({ className, benefitsVersion = 'normal', benefits }) =>
+    benefits?.length ? (
+      <div
+        className={style(
+          'flex gap-x-m gap-y-s',
+          isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap',
+          className,
+        )}
+      >
+        {benefits.map((_, i) => (
+          <BenefitItem key={String(i)} benefitsVersion={benefitsVersion} {..._} />
+        ))}
+      </div>
+    ) : null,
+);

package/mobile/src/ui-kit/BenefitsList/TabularBenefitsList.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { renderBenefitText } from '../BenefitItem/renderBenefitText';
+import type { BenefitsListProps } from './BenefitsListProps';
+
+export const TabularBenefitsList = JSX<BenefitsListProps>(({ className, benefits }) =>
+  benefits?.length ? (
+    <div
+      className={style(
+        'grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs',
+        className,
+      )}
+    >
+      {benefits.flatMap(renderBenefitText)}
+    </div>
+  ) : null,
+);

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

@@ -2,36 +2,44 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
+import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
 import { CloseButton } from '../Dialog/CloseButton';
 import { useDialogProps } from '../Dialog/useDialogProps';
 import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
 import { Paragraph } from '../Paragraph/Paragraph';
 
-export interface CookiePopupProps {
+interface CookiePopupProps {
   termLink?: LinkCommonProps;
   personalDataPolicyLink?: LinkCommonProps;
 }
 
-export const COOKIE_DIALOG_ID = 'cookie';
-export const LOCAL_STORAGE_NAME = 'cookieClose';
+const COOKIE_DIALOG_ID = 'cookie';
+const DIALOG_INITIAL_DELAY = 3 * 1000;
 
 export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicyLink }) => {
-  const { isOpened, onClose } = useDialogProps(
-    COOKIE_DIALOG_ID,
-    !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME),
+  const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+
+  useDebouncedEffect(
+    () => {
+      if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
+        open();
+      }
+    },
+    [],
+    DIALOG_INITIAL_DELAY,
   );
 
   const handleClose = useCallback(() => {
-    globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
+    globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
 
-    onClose && onClose();
-  }, [onClose]);
+    close();
+  }, [close]);
 
   return isOpened ? (
     <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,14 +29,14 @@ 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"
     >
       <div className="relative container pb-12 min-h-full">
         <div className="sticky bg-white pt-6 top-0">
-          <CloseButton className="absolute top-10 -right-12" onClick={onClose} />
+          <CloseButton className="absolute top-0 -right-12" onClick={onClose} />
           {head}
         </div>
         {children}

package/mobile/src/ui-kit/Dialog/useDialogProps.ts

@@ -7,9 +7,9 @@ import { useDialogHandlers } from './useDialogHandlers';
 
 export function useDialogProps(
   id: string,
-  initOpen = false,
-): DialogProps & DialogInitialParams & { wasOpened: boolean } {
-  const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
+  isOpenedOnInit = false,
+): DialogProps & DialogInitialParams & { wasOpened: boolean; open: () => void; close: () => void } {
+  const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
   const [params, setParams] = useState<DialogInitialParams>({ id });
 
   const wasOpened = useRef(isOpened);
@@ -27,20 +27,22 @@ export function useDialogProps(
     [id],
   );
 
+  const handleClose = useCallback(() => {
+    close();
+    defaultEventBus.fire('dialog', { type: 'close' });
+  }, []);
+
   useDialogHandlers({
     onOpen: handleOpen,
     onClose: close,
   });
 
-  const handleCloseAsEventSource = useCallback(() => {
-    close();
-    defaultEventBus.fire('dialog', { type: 'close' });
-  }, []);
-
   return {
     ...params,
     isOpened,
     wasOpened: wasOpened.current,
-    onClose: handleCloseAsEventSource,
+    open,
+    close,
+    onClose: handleClose,
   };
 }

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/Paragraph/Paragraph.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ParagraphProps } from './ParagraphProps';
+import { style } from '../../utils/style';
 
-export const Paragraph = JSX<ParagraphProps>(({ children, ...style }) => (
-  <p className={['font-sans', ...Object.values(style)].join(' ')}>{children}</p>
+export const Paragraph = JSX<ParagraphProps>(({ children, ...styleProps }) => (
+  <p className={style('font-sans', Object.values(styleProps))}>{children}</p>
 ));

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/Text.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { FontWeight, TextAlign, TextColor, TextSize, TitleSize } from './TextProps';
+import { style } from '../../utils/style';
 
 interface TextProps {
   size?: TextSize | TitleSize;
@@ -8,6 +9,6 @@ interface TextProps {
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>(({ children, ...style }) => (
-  <span className={['font-sans', ...Object.values(style)].join(' ')}>{children}</span>
+export const Text = JSX<TextProps>(({ children, ...styleProps }) => (
+  <span className={style('font-sans', Object.values(styleProps))}>{children}</span>
 ));

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,14 +12,11 @@ export type TitleSize =
   | ''
   | 'text-h6'
   | 'text-h5'
-  | 'text-h5-light'
   | 'text-h4'
   | 'text-h3'
   | 'text-h2'
   | 'text-h1'
   | 'text-h0'
-  | 'text-m-title'
-  | 'text-m-title-xs'
   | 'title-extra'
   | 'title-huge';
 

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.5",
+  "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>
   );
 };