@redneckz/wildless-cms-uni-blocks 0.14.63 → 0.14.65

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -5,16 +5,9 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import { Img } from '../../ui-kit/Img/Img';
-import { TEXT_SIZE_MAP } from '../../ui-kit/List/List';
+import { List } from '../../ui-kit/List/List';
 import { Text } from '../../ui-kit/Text/Text';
-import { style } from '../../utils/style';
-import {
-  type BenefitBlockItemProps,
-  type BenefitsBlockContent,
-  type DescriptionDef,
-  type ListBenefitDef,
-  type TextBenefitDef,
-} from './BenefitsBlockContent';
+import { type BenefitBlockItemProps, type BenefitsBlockContent } from './BenefitsBlockContent';
 import { defaultIconSize } from './defaultIconSize';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
@@ -35,70 +28,36 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ),
 );
 
-const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
+const renderBenefit = (
+  { label, description, items, icon, iconBgVersion, isDotted = false }: BenefitBlockItemProps,
+  i: number,
+) => (
   <div
     key={String(i)}
     className="flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]"
     role="listitem"
   >
-    {benefit?.icon?.icon ? (
+    {icon?.icon ? (
       <RoundedIcon
         className="shrink-0"
         defaultIconSize={defaultIconSize}
-        iconBgVersion={benefit?.iconBgVersion || ''}
-        {...benefit?.icon}
+        iconBgVersion={iconBgVersion || ''}
+        {...icon}
       />
     ) : null}
-    {benefit?.icon?.src ? <Img className="shrink-0" image={benefit.icon} /> : null}
-    {benefit?.label ? (
-      <div className="@sm:h-full">
-        <Heading headingType="h6">{benefit.label}</Heading>
-        {renderDescription(benefit.description)}
+    {icon?.src ? <Img className="shrink-0" image={icon} /> : null}
+    {label ? (
+      <div className="@sm:h-full space-y-xs">
+        <Heading headingType="h6">{label}</Heading>
+        <Text
+          size="text-l"
+          color="text-secondary-text group-data-secondary:text-white/80"
+          font="font-light"
+        >
+          {description}
+        </Text>
+        <List className="text-secondary-text" listItemSize="S" items={items} isDotted={isDotted} />
       </div>
     ) : null}
   </div>
 );
-
-const renderDescription = (description: DescriptionDef | undefined) => {
-  const benefitType = description?.benefitType || null;
-
-  return description && benefitType ? (
-    <div className="mt-xs text-l font-light text-secondary-text group-data-secondary:text-white/80">
-      {benefitType === 'list'
-        ? renderListBenefit(description as ListBenefitDef)
-        : renderTextBenefit(description as TextBenefitDef)}
-    </div>
-  ) : null;
-};
-
-const renderTextBenefit = (description?: TextBenefitDef) =>
-  description?.name ? (
-    <Text
-      size="text-l"
-      color="text-secondary-text group-data-secondary:text-white/80"
-      font="font-light"
-    >
-      {description.name}
-    </Text>
-  ) : null;
-
-const renderListBenefit = (description?: ListBenefitDef) => {
-  const listStyleType = description?.bullets ? 'list-disc pl-3xl' : '';
-
-  return description?.items && description.items.length > 0 ? (
-    <ul
-      className={style(
-        listStyleType,
-        description.listItemSize ? TEXT_SIZE_MAP[description.listItemSize] : '',
-      )}
-    >
-      {description.items.map((_, i) => (
-        <li key={`benefitListItem-${i}`}>
-          <Text color="text-secondary-text group-data-secondary:text-white/80" font="font-light">
-            {_}
-          </Text>
-        </li>
-      ))}
-    </ul>
-  ) : null;
-};

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -1,48 +1,18 @@
-import { type LabelProps, type TitleProps } from '../../model/HeadlineType';
+import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
 import { type IconBgVersion } from '../../ui-kit/Icon/IconProps';
-import { type ListContent } from '../../ui-kit/List/ListContent';
-
-/**
- * @title Пункты описания
- */
-export type TextBenefitDef = {
-  /** @title Описание */
-  name?: string;
-  /** @default text */
-  benefitType?: 'text';
-};
-
-/**
- * @title Список
- */
-export type ListBenefitDef = ListContent & {
-  /** @title Буллиты */
-  bullets?: boolean;
-  /** @default list */
-  benefitType?: 'list';
-};
-
-/** @title Не выбрано * */
-export type EmptyDescription = {
-  /** @default "" */
-  benefitType: '';
-};
-
-/**
- * @title Вид контента
- * @default { "benefitType": "" }
- */
-export type DescriptionDef = EmptyDescription | TextBenefitDef | ListBenefitDef;
+import { type ListProps } from '../../ui-kit/List/ListContent';
 
 /**
  * @title Преимущество
  */
 export type BenefitBlockItemProps = LabelProps &
-  IconProps & {
+  IconProps &
+  DescriptionProps &
+  ListProps & {
     /** @title Описание */
-    description?: DescriptionDef;
+    description?: string;
     iconBgVersion?: IconBgVersion;
   };
 

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -18,7 +18,6 @@
         "rounded": false
       }
     ],
-    "version": "primary",
-    "listItemSize": "S"
+    "version": "primary"
   }
 }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -29,7 +29,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     icon,
     items = [],
     isDotted,
-    listItemSize = 'S',
     socialMedia = [],
     target,
     title,
@@ -73,7 +72,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             imageAlign="center"
           >
             <BenefitsList benefits={benefits} />
-            <List items={items} listItemSize={listItemSize} isDotted={isDotted} />
+            <List items={items} isDotted={isDotted} listItemSize="S" />
             {renderAdditionalDescription(additionalDescription, align)}
           </BaseTile>
         </LinkWrapper>

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { List } from '../../ui-kit/List/List';
+import { Text } from '../../ui-kit/Text/Text';
 import { joinList } from '../../utils/joinList';
 import {
   type InvestmentCell,
@@ -115,7 +116,7 @@ const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
         investmentCellSizeMap[cellSize]
       } ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-s' : 'px-5xl'}`}
     >
-      <div className="text-center">{cell.text}</div>
+      <Text align="text-center">{cell.text}</Text>
     </div>
   ) : null;
 };

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -56,7 +56,6 @@ export default {
         description="Описание"
         image={image}
         qr={qr}
-        headingType="h3"
         items={listItems}
         buttons={[
           {
@@ -76,7 +75,6 @@ export default {
         className="col-span-12"
         title="Обновлённое мобильное приложение «Урожай»"
         qr={qr}
-        headingType="h3"
         items={listItems}
         buttons={[buttonStore, buttonPlay]}
       />
@@ -88,7 +86,6 @@ export default {
         className="col-span-12"
         title="Обновлённое мобильное приложение «Урожай»"
         qr={qr}
-        headingType="h3"
         items={listItems}
         buttons={[buttonStore, buttonPlay]}
       />

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -5,11 +5,10 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { type MobileAppTileContent } from './MobileAppTileContent';
-import { renderList } from './renderList';
-
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
@@ -19,10 +18,8 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     align = 'text-left',
     buttons = [],
     description,
-    headingType = 'h4',
     image,
     items,
-    listItemSize,
     qr,
     additionalDescription = '',
     title = 'Мобильное приложение',
@@ -45,13 +42,11 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
           padding={padding}
           defaultPadding="p-6xl"
           title={
-            title ? (
-              <Heading
-                headingType={headingType}
-                title={title}
-                className={style('whitespace-pre-wrap', align)}
-              />
-            ) : null
+            <Heading
+              headingType="h3"
+              title={title}
+              className={style('whitespace-pre-wrap', align)}
+            />
           }
           rightImage={img}
           buttons={renderButtonsSection(buttons, { className: 'flex-wrap' })}
@@ -68,7 +63,10 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               'flex-col items-start @xl:flex-row @xl:items-center',
             )}
           >
-            {renderList(items, listItemSize, additionalDescription)}
+            <List items={items} listItemSize="M" />
+            <Text size="text-m" font-weight="font-light" color="text-secondary-text">
+              {additionalDescription}
+            </Text>
             {qr?.src ? (
               <div
                 className={style(

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,11 +1,12 @@
 import {
   type AdditionalDescriptionProps,
+  type DescriptionProps,
   type HeadlineCommonProps,
+  type TitleProps,
 } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type Picture } from '../../model/Picture';
 import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
-import { type HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type ListContent } from '../../ui-kit/List/ListContent';
 
@@ -15,7 +16,8 @@ import { type ListContent } from '../../ui-kit/List/ListContent';
 export type MobileAppTileContent = UniBlockContent &
   AdditionalDescriptionProps &
   HeadlineCommonProps &
-  HeadingCommonProps &
+  TitleProps &
+  DescriptionProps &
   ButtonsSectionContent &
   ListContent &
   ImageContent & {

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

@@ -8,7 +8,6 @@ import { type ProductBlockContent } from './ProductBlockContent';
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
 const description =
   'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.';
-const label = 'Самое лучшее предложение';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -125,11 +124,6 @@ export default {
       <ProductBlock className="col-span-12" {...props} items={items} />
     </div>
   ),
-  'primary with label': (
-    <div className="container grid grid-cols-12">
-      <ProductBlock className="col-span-12" {...props} benefits={benefits} label={label} />
-    </div>
-  ),
   'primary with insurance': (
     <div className="container grid grid-cols-12">
       <ProductBlock
@@ -182,17 +176,6 @@ export default {
       <ProductBlock className="col-span-12" {...props} items={items} version="secondary" />
     </div>
   ),
-  'secondary with label': (
-    <div className="container grid grid-cols-12">
-      <ProductBlock
-        className="col-span-12"
-        {...props}
-        benefits={benefits}
-        label={label}
-        version="secondary"
-      />
-    </div>
-  ),
   'image bottom': (
     <div className="container grid grid-cols-12">
       <ProductBlock

package/src/components/ProductBlock/ProductBlock.tsx

@@ -2,24 +2,17 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getBorderStyle } from '../../utils/getBorderStyle';
 import { style } from '../../utils/style';
 import { type ProductBlockContent } from './ProductBlockContent';
 
 export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
-export const ProductBlock = JSX<ProductBlockProps>(
-  ({ className, padding, showBorder, ...rest }) => (
-    <BlockWrapper
-      className={style(
-        'overflow-hidden flex flex-col gap-3xl box-border',
-        getBorderStyle(showBorder),
-        className,
-      )}
-      padding="p-0"
-      {...rest}
-    >
-      <BaseProductTile defaultPadding="p-6xl" padding={padding} className="grow h-full" {...rest} />
-    </BlockWrapper>
-  ),
-);
+export const ProductBlock = JSX<ProductBlockProps>(({ className, padding, ...rest }) => (
+  <BlockWrapper
+    className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
+    padding="p-0"
+    {...rest}
+  >
+    <BaseProductTile defaultPadding="p-6xl" padding={padding} className="grow h-full" {...rest} />
+  </BlockWrapper>
+));

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -8,6 +8,4 @@ export type ProductBlockContent = UniBlockContent &
   BaseProductTileContent & {
     /** @title Отображать кнопку возврата */
     backwardButton?: boolean;
-    /** @title Показывать рамку вокруг блока */
-    showBorder?: boolean;
   };

package/src/components/RichTextBlock/RichTextBlock.example.json

@@ -1,5 +1,6 @@
 {
   "content": {
-    "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
+    "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n",
+    "richVersion": ""
   }
 }

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

@@ -3,6 +3,32 @@ import '../../setup-fixture';
 import { RichTextBlock } from './RichTextBlock';
 import { type RichTextBlockContent } from './RichTextBlockContent';
 
+const RICH_TEXT_TABLE = `
+    <table>
+      <thead>
+        <tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>
+          <td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td>
+        </tr>
+        <tr>
+          <td><p><a href="rshb.ru">Акционерное общество\\n
+          «Негосударственный пенсионный фонд\\n
+          «Первый национальный пенсионный фонд»</p></td>
+          <td><p>Россия, г. Москва, ул. Большая Дмитровка,\\n
+          д. 23, стр.1</a></p></td>
+          <td><p>2,2%</p></td>
+        </tr>
+        <tr><td><p>ПАО «Полюс»</p></td><td><p>PLZL</p></td><td><p>0,5%</p></td></tr>
+        <tr><td><p>Полиметалл Интернэшнл плс</p></td><td><p>POLY</p></td><td><p>0,5%</p></td></tr>
+        <tr><td><p>ПАО «ГМК «Норильский никель»<br></p></td><td><p>GMKN<br></p></td><td><p>0,5%</p></td></tr>
+        <tr><td><p>ПАО «Лензолото»<br></p></td><td><p>LNZL<br></p></td><td><p>0,5%</p></td></tr>
+      </tbody>
+    </table>
+`;
+
 const HTML = `
   <p class="h1">Заголовок 1</p>
   <p class="h2">Заголовок 2</p>
@@ -13,29 +39,24 @@ const HTML = `
   <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
   <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
   <ul>
-    <li>Список с точками</li>
-    <li>Список с точками</li>
+    <li>Приобретение горюче-смазочных материалов</li>
+    <li>Приобретение минеральных удобрений, средств защиты растений</li>
+    <li>Приобретение молодняка сельскохозяйственных животных</li>
   </ul>
   <ol>
     <li>Нумерованный список</li>
     <li>Нумерованный список</li>
   </ol>
+  ${RICH_TEXT_TABLE}
 `;
 
-export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
-  __html:
-    '<table>' +
-    '<thead><tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr></thead>' +
-    '<tbody>' +
-    '<tr><td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>' +
-    '<td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td></tr>' +
-    '<tr><td><p><a href="rshb.ru">Акционерное общество\n' +
-    '«Негосударственный пенсионный фонд\n' +
-    '«Первый национальный пенсионный фонд»</p></td><td><p>Россия, г. Москва, ул. Большая Дмитровка,\n' +
-    'д. 23, стр.1</a></p></td><td><p>2,2%</p></td></tr>' +
-    '</tbody>' +
-    '</table>',
-  richVersion: 'horizontal-separator',
+export const RICH_TEXT_SECONDARY: RichTextBlockContent = {
+  __html: HTML,
+  richVersion: 'secondary',
+};
+export const RICH_CARD: RichTextBlockContent = {
+  padding: 'p-xl',
+  __html: HTML,
 };
 
 export default {
@@ -44,9 +65,14 @@ export default {
       <RichTextBlock className="col-span-12" __html={HTML} />
     </div>
   ),
-  'horizontal-separator': (
+  padding: (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" __html={HTML} padding="p-xl" />
+    </div>
+  ),
+  secondary: (
     <div className="container grid grid-cols-12">
-      <RichTextBlock className="col-span-12" {...RICH_TEXT_SEPARATOR} />
+      <RichTextBlock className="col-span-12" __html={HTML} richVersion="secondary" />
     </div>
   ),
 };

package/src/components/RichTextBlock/RichTextBlock.fixture.tsx

@@ -3,6 +3,32 @@ import '../../setup-fixture';
 import { RichTextBlock } from './RichTextBlock';
 import { type RichTextBlockContent } from './RichTextBlockContent';
 
+const RICH_TEXT_TABLE = `
+    <table>
+      <thead>
+        <tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>
+          <td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td>
+        </tr>
+        <tr>
+          <td><p><a href="rshb.ru">Акционерное общество\\n
+          «Негосударственный пенсионный фонд\\n
+          «Первый национальный пенсионный фонд»</p></td>
+          <td><p>Россия, г. Москва, ул. Большая Дмитровка,\\n
+          д. 23, стр.1</a></p></td>
+          <td><p>2,2%</p></td>
+        </tr>
+        <tr><td><p>ПАО «Полюс»</p></td><td><p>PLZL</p></td><td><p>0,5%</p></td></tr>
+        <tr><td><p>Полиметалл Интернэшнл плс</p></td><td><p>POLY</p></td><td><p>0,5%</p></td></tr>
+        <tr><td><p>ПАО «ГМК «Норильский никель»<br></p></td><td><p>GMKN<br></p></td><td><p>0,5%</p></td></tr>
+        <tr><td><p>ПАО «Лензолото»<br></p></td><td><p>LNZL<br></p></td><td><p>0,5%</p></td></tr>
+      </tbody>
+    </table>
+`;
+
 const HTML = `
   <p class="h1">Заголовок 1</p>
   <p class="h2">Заголовок 2</p>
@@ -13,44 +39,24 @@ const HTML = `
   <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
   <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
   <ul>
-    <li>Список с точками</li>
-    <li>Список с точками</li>
+    <li>Приобретение горюче-смазочных материалов</li>
+    <li>Приобретение минеральных удобрений, средств защиты растений</li>
+    <li>Приобретение молодняка сельскохозяйственных животных</li>
   </ul>
   <ol>
     <li>Нумерованный список</li>
     <li>Нумерованный список</li>
   </ol>
+  ${RICH_TEXT_TABLE}
 `;
 
-export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
-  __html:
-    '<table>' +
-    '<thead><tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr></thead>' +
-    '<tbody>' +
-    '<tr><td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>' +
-    '<td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td></tr>' +
-    '<tr><td><p><a href="rshb.ru">Акционерное общество\n' +
-    '«Негосударственный пенсионный фонд\n' +
-    '«Первый национальный пенсионный фонд»</p></td><td><p>Россия, г. Москва, ул. Большая Дмитровка,\n' +
-    'д. 23, стр.1</a></p></td><td><p>2,2%</p></td></tr>' +
-    '</tbody>' +
-    '</table>',
-  richVersion: 'horizontal-separator',
+export const RICH_TEXT_SECONDARY: RichTextBlockContent = {
+  __html: HTML,
+  richVersion: 'secondary',
 };
 export const RICH_CARD: RichTextBlockContent = {
   padding: 'p-xl',
-  __html:
-    '<h4>Заголовок 4</h4><p><br></p>' +
-    '<table>' +
-    '<thead><tr><th><p>Эмитент</p></th><th><p>Код</p></th></tr></thead>' +
-    '<tbody>' +
-    '<tr><td><p>ПАО «Полюс»</p></td><td><p>PLZL</p></td></tr>' +
-    '<tr><td><p>Полиметалл Интернэшнл плс</p></td><td><p>POLY</p></td></tr>' +
-    '<tr><td><p>ПАО «ГМК «Норильский никель»<br></p></td><td><p>GMKN<br></p></td></tr>' +
-    '<tr><td><p>ПАО «Лензолото»<br></p></td><td><p>LNZL<br></p></td></tr>' +
-    '</tbody>' +
-    '</table>',
-  richVersion: 'striped',
+  __html: HTML,
 };
 
 export default {
@@ -59,9 +65,14 @@ export default {
       <RichTextBlock className="col-span-12" __html={HTML} />
     </div>
   ),
-  'horizontal-separator': (
+  padding: (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" __html={HTML} padding="p-xl" />
+    </div>
+  ),
+  secondary: (
     <div className="container grid grid-cols-12">
-      <RichTextBlock className="col-span-12" {...RICH_TEXT_SEPARATOR} />
+      <RichTextBlock className="col-span-12" __html={HTML} richVersion="secondary" />
     </div>
   ),
 };

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { type Tariff } from './useSafeBoxes';
 
 export interface SafeDepositRentalTotalProps {
@@ -17,14 +19,18 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="@xl:hidden order-3 mb-xs text-s font-light text-secondary-text">
-        {imageDescription}
-      </span>
+      <div className="@xl:hidden order-3 mb-xs">
+        <Paragraph size="text-s" font="font-light" color="text-secondary-text">
+          {imageDescription}
+        </Paragraph>
+      </div>
       <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
         <Img image={{ icon: 'PackA4Icon' }} className="@xl:h-60" />
-        <span className="hidden @xl:inline text-s font-light text-white opacity-80 whitespace-pre-line">
-          {imageDescription}
-        </span>
+        <div className="hidden @xl:inline opacity-80 whitespace-pre-line">
+          <Paragraph size="text-s" font="font-light" color="text-white">
+            {imageDescription}
+          </Paragraph>
+        </div>
       </div>
     </div>
   );
@@ -33,7 +39,9 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 const renderTotal = (label: string, total: string | number) => {
   return (
     <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
-      <div className="text-l font-light text-secondary-text">{label}</div>
+      <Text size="text-l" font="font-light" color="text-secondary-text">
+        {label}
+      </Text>
       <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
     </div>
   );