@redneckz/wildless-cms-uni-blocks 0.6.46 → 0.6.48

package/src/components/Carousel/Carousel.tsx

@@ -57,9 +57,11 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 Carousel.childrenTypes = [
   'CarouselCard',
   'CarouselCatalogCard',
-  'CarouselTariffsCard',
+  'CarouselInvestmentCard',
   'CarouselProductCard',
   'CarouselProgramsCard',
+  'CarouselRecommendationCard',
+  'CarouselTariffsCard',
   'CarouselInvestmentCard',
 ];
 

package/src/components/CarouselCard/CarouselCard.tsx

@@ -7,7 +7,7 @@ import type { CarouselCardContent } from './CarouselCardContent';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
   normal: 'min-w-[1007px]',

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -3,7 +3,7 @@ import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
- * @title Карточка какусели
+ * @title Карточка карусели
  */
 export interface CarouselCardContent extends HeadlineCommonProps {
   /**

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -22,7 +22,7 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, version = 'primary' }) => (
     <section
-      className={`border box-border border-main-stroke p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
+      className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
       role="listitem"
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -20,7 +20,7 @@ const descriptionStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white/80',
 };
 
-const BORDER_STYLE = 'box-border border-solid border border-main-stroke ';
+const BORDER_STYLE = 'box-border border-solid border border-gray ';
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -13,7 +13,7 @@ export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, U
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
     <BlockWrapper
-      className={`font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
+      className={`font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
       {...rest}
     >
       <div className="w-[200px] min-w-[200px] self-end">

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -44,4 +44,13 @@ export default {
       />
     </div>
   ),
+  gray: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-4"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -7,7 +7,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { List } from '../../ui-kit/List/List';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { SocialMedia } from '../Footer/SocialMedia';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { BlockVersion, BlockVersionWithGray } from '../../model/BlockVersion';
+import { VersionWithGrayStyleMap } from '../../model/BlockVersion';
+
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 import type { UniBlockProps } from '../../model/JSXBlock';
 
@@ -35,8 +37,8 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={`relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[version]}
-        ${VersionStyleMap[version]}
+        ${BorderVersionStyleMap[getOmitVersion(version)]}
+        ${VersionWithGrayStyleMap[version]}
         ${className}`}
         {...rest}
       >
@@ -51,7 +53,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               />
             ) : null}
             {socialMedia.length ? (
-              <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={getOmitVersion(version)}
+              />
             ) : null}
             {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
           </div>
@@ -60,3 +66,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     );
   },
 );
+
+const getOmitVersion = (version: BlockVersionWithGray): BlockVersion =>
+  version === 'gray' ? 'primary' : version;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,4 +1,4 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersionWithGray } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
@@ -41,5 +41,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
-  version?: BlockVersion;
+  version?: BlockVersionWithGray;
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,3 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -6,11 +10,7 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
-import { VNode } from '../../model/VNode';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -24,7 +24,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={`font-sans relative bg-white border border-main-stroke min-w-[322px] p-8 
+        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8
         ${getHitStyle(isHighlighting)}
         ${className}`}
         {...rest}

package/src/components/Catalog/CatalogCard.tsx

@@ -19,7 +19,7 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CatalogCard = JSX<CatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors }) => (
     <section
-      className={`border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
+      className={`border border-solid box-border border-gray p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
       role="listitem"
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -59,7 +59,7 @@ const renderShowMoreToggleButton = ({
       <div className={FIRST_CELL_CLASSES} />
       <button
         onClick={onClick}
-        className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+        className="mt-5 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">
           {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}

package/src/components/ComparisonTable/TableColumn.tsx

@@ -28,10 +28,7 @@ export const TableColumn = JSX<TableColumnProps>(
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
 
     return (
-      <div
-        className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}
-        role="row"
-      >
+      <div className={`border border-gray rounded-md p-4 mb-3.5 ${gradientClassName}`} role="row">
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (

package/src/components/ComparisonTable/constants.ts

@@ -1,5 +1,5 @@
 export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-export const BORDER_CLASSES = 'border-main-stroke border-solid border';
+export const BORDER_CLASSES = 'border-gray border-solid border';
 export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
 export const COLS_LENGTH_FOR_SCROLL = 3;

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -4,6 +4,7 @@ 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_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -20,8 +21,8 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
     <thead>
       <tr>
         <th className={TABLE_HEAD_STYLE}>Валюта</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Купить</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Продать</th>
       </tr>
     </thead>
     <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>

package/src/components/Gallery/Gallery.mobile.tsx

@@ -45,7 +45,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
 function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
-      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-main-stroke p-4
+      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-gray p-4
       ${VersionStyleMap[card.version ?? 'primary']}`}
       key={key}
     >

package/src/components/Gallery/GalleryContainer.tsx

@@ -36,7 +36,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
 function renderCard({ card, version }: GalleryCardData, i: number) {
   return (
     <section
-      className={`box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
+      className={`box-border border-solid border border-gray p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${
         VersionStyleMap[card.version ?? 'primary']
       } w-full col-span-4`}

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -9,7 +9,7 @@ export interface Month {
    * @default {
    *   "format": "webp",
    *   "size": {
-   *       "width": 210
+   *       "width": 210,
    *       "height": 190
    *   }
    * }

package/src/components/Header/DropdownMenu.tsx

@@ -17,46 +17,48 @@ interface DropdownMenuProps {
   bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>(({ className, items, activeItem, bgColor }) => {
-  const link = useLink();
+export const DropdownMenu = JSX<DropdownMenuProps>(
+  ({ className = '', items, activeItem, bgColor }) => {
+    const link = useLink();
 
-  const [visible, setVisible] = useState(false);
-  const handleToggle = useCallback(() => setVisible((_) => !_), []);
+    const [visible, setVisible] = useState(false);
+    const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-  const handleClickOutside = useCallback(() => setVisible(false), []);
-  const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+    const handleClickOutside = useCallback(() => setVisible(false), []);
+    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
-  return (
-    <div
-      className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
-      ref={ref}
-    >
-      <button
-        className="flex justify-between items-center cursor-pointer h-6 ml-6"
-        aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-        onClick={handleToggle}
-      >
-        {Array(3).fill(bgColor).map(renderDot)}
-      </button>
+    return (
       <div
-        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
-        aria-hidden={!visible}
+        className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+        ref={ref}
       >
-        {items?.map((item, i) => (
-          <a
-            key={item.href || String(i)}
-            className={`text-l-light pb-4 hover:text-primary-main ${
-              item === activeItem ? 'text-primary-main' : ''
-            }`}
-            {...link(item)}
-          >
-            {item.text}
-          </a>
-        ))}
+        <button
+          className="flex justify-between items-center cursor-pointer h-6 ml-6"
+          aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+          onClick={handleToggle}
+        >
+          {Array(3).fill(bgColor).map(renderDot)}
+        </button>
+        <div
+          className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+          aria-hidden={!visible}
+        >
+          {items?.map((item, i) => (
+            <a
+              key={item.href || String(i)}
+              className={`text-l-light pb-4 hover:text-primary-main ${
+                item === activeItem ? 'text-primary-main' : ''
+              }`}
+              {...link(item)}
+            >
+              {item.text}
+            </a>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />

package/src/components/Header/HeaderBurger.tsx

@@ -23,11 +23,11 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Img image="CloseIcon" width="24" height="24" asSVG />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" asSVG />
         </button>
         <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
-            image="GeolocationIcon"
+            image={{ icon: 'GeolocationIcon' }}
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -91,8 +91,8 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
 
 function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
-    ? 'shadow-dark-blue/42 border-primary-main'
-    : `ease-in duration-300 border-main-stroke`;
+    ? 'shadow-dark-blue border-primary-main'
+    : `ease-in duration-300 border-gray`;
 
   return (
     <button
@@ -132,7 +132,7 @@ function renderDoneIcon(isActive: boolean) {
   return isActive ? (
     <Img
       className={`h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`}
-      image="DoneIcon"
+      image={{ icon: 'DoneIcon' }}
       width="24"
       height="24"
     />

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -49,12 +49,10 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
         {colums?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">
-              {joinList(<div className="w-px h-4 bg-main-stroke" />)(
-                colums.map(renderInvestmentColumn),
-              )}
-              <div className="absolute right-[30px] w-px h-4 bg-main-stroke" />
+              {joinList(<div className="w-px h-4 bg-gray" />)(colums.map(renderInvestmentColumn))}
+              <div className="absolute right-[30px] w-px h-4 bg-gray" />
             </div>
-            <div className="border-t border-main-stroke -mt-2 ml-9 mr-8" />
+            <div className="border-t border-gray -mt-2 ml-9 mr-8" />
             <div className="flex justify-between text-primary-text mt-3 -mx-10">
               {colums.map(renderInvestmentColumnTitle)}
             </div>

package/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -10,7 +10,7 @@ export const LinkDocsHorizontalList = JSX<LinkDocsVerticalListProps>(
         ? documents.map((doc, i) => (
             <LinkDocsListItem
               key={String(i)}
-              className={hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''}
+              className={hasBorder ? 'rounded-md border-gray border border-solid p-4' : ''}
               doc={doc}
               icon={icon}
             />

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkDocsItem } from './LinkDocsContent';
 import type { Picture } from '../../model/Picture';
+import type { LinkDocsItem } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsVerticalListProps {
@@ -20,9 +20,7 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
           ? documents.map((doc, i) => (
               <div key={String(i)} role="listitem">
                 <LinkDocsListItem
-                  className={
-                    hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''
-                  }
+                  className={hasBorder ? 'rounded-md border-gray border border-solid p-4' : ''}
                   doc={doc}
                   icon={icon}
                 />

package/src/components/OfficeMap/OfficeMap.tsx

@@ -3,17 +3,18 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { nearbyOffices } from './nearbyOffices';
-import type { OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
+import type { OfficeMapContent, WorkScheduleWeek } from './OfficeMapContent';
 import { renderCurrentDaySchedule, renderDay, renderNearbyOffice } from './renderFunctions';
 import { useOfficeMap } from './useOfficeMap';
 
+export interface OfficeMapProps extends OfficeMapContent, UniBlockProps {}
 export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
   // TODO: useOfficeMap endpoint had use /api/v1/branches. This endpoint now is`t correct/
   // TODO: useOfficeMap has return MOCK OBJECT!
   // TODO: Fix this when endpoint /api/v1/branches (or new endpoint) had returning right data
   const resultOfficeMap = useOfficeMap('000');
   const { name, address, gpsLatitude, gpsLongitude, workSchedule } =
-    resultOfficeMap as OfficeMapProps;
+    resultOfficeMap as OfficeMapContent;
   const {
     workingMonday,
     workingTuesday,

package/src/components/OfficeMap/OfficeMapContent.ts

@@ -14,7 +14,10 @@ export type WorkSchedule = {
   workingSunday: boolean;
 };
 
-export interface OfficeMapProps {
+/**
+ * @title Карта офиса
+ */
+export interface OfficeMapContent {
   name?: string;
   address: string;
   workSchedule: WorkSchedule;

package/src/components/OfficeMap/renderFunctions.tsx

@@ -1,5 +1,5 @@
-import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
 
 export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkScheduleWeek) => {
   const hasTime = /\d+/gi.test(lunchHour as string);
@@ -10,7 +10,7 @@ export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkSc
       <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4">
         {workTime ? workTime : null}
       </div>
-      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-golden border-golden">
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-yellow border-golden">
         {lunchHour ? lunchHourText : null}
       </div>
     </div>

package/src/components/ProductGallery/ProductGallery.tsx

@@ -91,7 +91,7 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
 
 function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProps) {
   const btnClassName = isActive
-    ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
+    ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
     : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
   const btnTitleClassName = isActive

package/src/components/ProductTile/ProductTile.ui.json

@@ -2,7 +2,7 @@
   "content": {
     "benefits": {
       "items": {
-        "md": {
+        "__html": {
           "ui:widget": "html"
         },
         "type": {

package/src/components/ProductTile/ProductTileContent.ts

@@ -2,7 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { MarkdownTextProps } from '../../ui-kit/MarkdownText/MarkdownTextProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Стандартный
@@ -16,9 +16,9 @@ type TextBenefit = DescriptionProps &
 /**
  * @title Форматированный текст
  */
-type MarkdownTextContent = MarkdownTextProps & {
-  /** @default md */
-  type: 'md';
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
 };
 
 /**
@@ -27,7 +27,7 @@ type MarkdownTextContent = MarkdownTextProps & {
  *  "type": "default"
  * }
  */
-export type Benefit = TextBenefit | MarkdownTextContent;
+export type Benefit = TextBenefit | RichText;
 
 /**
  * @title Продуктовая плитка

package/src/components/ProductTile/renderBenefit.tsx

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { assertUnreachable } from '../../utils/assertUnreachable';
@@ -17,7 +17,7 @@ export const renderBenefit =
   (benefit: Benefit, i: number) => {
     const { type } = benefit;
 
-    if (!(type === 'default' || type === 'md')) {
+    if (!(type === 'default' || type === 'rte')) {
       return null;
     }
 
@@ -31,8 +31,8 @@ export const renderBenefit =
             {benefit.description}
           </Text>,
         ];
-      case 'md':
-        return <MarkdownText md={benefit.md} />;
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
       default:
         assertUnreachable(benefit);
     }

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

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "__html": "<p class=\"h1\">Заголовок 1</p>\n<p class=\"h2\">Заголовок 2</p>\n<p class=\"h3\">Заголовок 3</p>\n<p class=\"h4\">Заголовок 4</p>\n<p class=\"h5\">Заголовок 5</p>\n<p class=\"h6\">Заголовок 6</p>\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"
+  }
+}

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

@@ -0,0 +1,29 @@
+import '../../setup-fixture';
+import { RichTextBlock } from './RichTextBlock';
+
+const HTML = `
+  <p class="h1">Заголовок 1</p>
+  <p class="h2">Заголовок 2</p>
+  <p class="h3">Заголовок 3</p>
+  <p class="h4">Заголовок 4</p>
+  <p class="h5">Заголовок 5</p>
+  <p class="h6">Заголовок 6</p>
+  <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
+  <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
+  <ul>
+    <li>Список с точками</li>
+    <li>Список с точками</li>
+  </ul>
+  <ol>
+    <li>Нумерованный список</li>
+    <li>Нумерованный список</li>
+  </ol>
+`;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" __html={HTML} />
+    </div>
+  ),
+};

package/src/components/RichTextBlock/RichTextBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import type { RichTextBlockContent } from './RichTextBlockContent';
+
+interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
+
+export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
+  const { __html, ...rest } = props;
+
+  return (
+    <BlockWrapper {...rest}>
+      <RichText __html={__html} />
+    </BlockWrapper>
+  );
+});

package/src/components/RichTextBlock/RichTextBlock.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/src/components/RichTextBlock/RichTextBlockContent.ts

@@ -0,0 +1,6 @@
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+
+/**
+ * @title Форматированный текст
+ */
+export type RichTextBlockContent = RichTextProps;