@redneckz/wildless-cms-uni-blocks 0.2.116 → 0.3.2

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
@@ -52,16 +52,16 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Icon name="LoupeIcon" className="h-full" asSVG />
+          <Icon name="LoupeIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
-          <Icon name="ProfileIcon" className="h-full" asSVG />
+          <Icon name="ProfileIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
+          <Icon name={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Headline/Headline.mobile.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -11,7 +11,7 @@ export const Headline = JSX<HeadlineProps>(
   ({ bgColor = 'transparent', className = '', title, description, image }) => {
     return (
       <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && <Heading type="h2" className="text-primary-text" text={title} />}
+        {title && <Heading headingType="h2" className="text-primary-text" title={title} />}
         {description && (
           <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
         )}

package/src/components/Headline/Headline.tsx

@@ -18,7 +18,9 @@ export const Headline = JSX<HeadlineProps>(
     const textClasses = alignText[align];
     return (
       <section className={`p-[50px] ${bgColor} ${className}`}>
-        {title && <Heading type="h2" className={`text-primary-text ${textClasses}`} text={title} />}
+        {title && (
+          <Heading headingType="h2" className={`text-primary-text ${textClasses}`} title={title} />
+        )}
         {description && (
           <p className={`font-normal text-base mt-4 ${textClasses}`}>{description}</p>
         )}

package/src/components/Headline/HeadlineContent.ts

@@ -1,14 +1,16 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { Picture } from '../../model/Picture';
-import type { AlignType, BaseTileTitleProps } from '../BaseTile/BaseTileProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { AlignType } from '../BaseTile/BaseTileProps';
 
 /**
  * @title Заголовок
  */
-export interface HeadlineContent extends BaseTileTitleProps {
-  description?: string;
-  image?: Picture;
-  align?: AlignType;
-  // TODO: image for mobile
-  bgColor?: BgColorVersion;
-}
+export type HeadlineContent = HeadingContent &
+  DescriptionContent &
+  ImageContent & {
+    align?: AlignType;
+    // TODO: image for mobile
+    bgColor?: BgColorVersion;
+  };

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { LinkDocsContent } from './LinkDocsContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
+import { LinkDocsVerticalList } from './LinkDocsVerticalList';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -13,17 +13,21 @@ export const LinkDocs = JSX<LinkDocsProps>(
     context,
     title,
     subtitle,
-    icon = 'DocIcon',
+    icon = 'DocIconMonoColor',
     documents,
     listMode = 'vertical',
     hasBorder = true,
   }) => {
     return (
-      <section className={`py-6 px-4 bg-white ${className}`}>
+      <section className={`font-sans py-6 px-4 bg-white ${className}`}>
         {title ? (
-          <Heading type="h2" className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`} text={title} />
+          <Heading
+            headingType="h2"
+            className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`}
+            title={title}
+          />
         ) : null}
-        {subtitle ? <h3 className="mb-5 text-center text-m-base">{subtitle}</h3> : null}
+        {subtitle ? <h3 className="mb-5 text-center text-m-md">{subtitle}</h3> : null}
         {listMode === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
         ) : (

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { LinkDocsList } from './LinkDocsList';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AlignType } from '../BaseTile/BaseTileProps';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
+import { LinkDocsList } from './LinkDocsList';
 
 const titleAlignStyleMap: Record<AlignType, string> = {
   left: 'text-left',
@@ -37,11 +37,11 @@ export const LinkDocs = JSX<LinkDocsProps>(
       <section className={`font-sans p-[50px] bg-white ${className}`}>
         {title ? (
           <Heading
-            type="h2"
+            headingType="h2"
             className={`${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${
               titleAlignStyleMap[align ?? 'center']
             }`}
-            text={title}
+            title={title}
           />
         ) : null}
         {subtitle ? (

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../../icons/IconName';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';
 
 /**

package/src/components/LinkDocs/LinkDocsList.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { LinkDocsListItem } from './LinkDocsListItem';
-import type { IconName } from '../../icons/IconName';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
 
 export interface LinkDocsListProps {

package/src/components/LinkDocs/LinkDocsListItem.mobile.tsx

@@ -5,7 +5,7 @@ import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={`flex h-full ${className}`}
-    iconClassName="mr-2.5 min-w-6 min-h-6"
+    iconClassName="mr-3 min-w-6 min-h-6"
     doc={doc}
     icon={icon}
   />

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -5,7 +5,7 @@ import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={className}
-    iconClassName="mr-4 min-w-6 min-h-6 text-primary-text"
+    iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
     textClassName="self-center"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName } from '../../icons/IconName';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { LinkDocsItem } from './LinkDocsContent';
 
 export interface LinkDocsListItemProps {

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../icons/IconName';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { LinkDocsItem } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
 

package/src/components/LinkDocs/linkDocsContentExample.ts

@@ -3,7 +3,6 @@ import type { LinkDocsContent } from './LinkDocsContent';
 export const linkDocsContentExample: LinkDocsContent = {
   title: 'Дополнительные документы',
   subtitle: 'Ответы на часто задаваемые вопросы',
-  icon: 'DocIcon',
   documents: [
     { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
     { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -12,7 +12,7 @@ const image: Picture = {
   title: 'domovoj-kupon',
 };
 
-const defaultProps: MiniGalleryProps = {
+export const defaultProps: MiniGalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   context,

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,32 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { MobileAppTileContent } from './MobileAppTileContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { BaseTile } from '../BaseTile/BaseTile';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
+import type { MobileAppTileContent } from './MobileAppTileContent';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, context, title = 'Мобильное приложение', qr, buttons = [] }) => {
+  ({ className = '', context, title = 'Мобильное приложение', qr, buttons = [] }) => {
     return (
-      <Tile className={className} context={context} title={title} buttons={buttons}>
-        <div className="flex items-center">
-          {qr?.src && qr?.href && (
-            <a href={qr.href} target="_blank">
-              <img
-                src={qr.src}
-                alt={title}
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
+          className,
+        )} ${getTileMinHeight(className)} `}
+      >
+        <BaseTile
+          context={context}
+          title={
+            title && (
+              <Heading
+                headingType={getTileHeadingType(className)}
                 title={title}
-                width="164"
-                height="164"
-                className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
+                className={`whitespace-pre-wrap max-w-[600px]`}
               />
-            </a>
-          )}
-          <span className="font-normal text-sm text-secondary-text ml-4">
-            Наведите камеру телефона на QR-код и скачайте приложение
-          </span>
-        </div>
-      </Tile>
+            )
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+        >
+          <div className="flex items-center">
+            {qr?.src && qr?.href && (
+              <a href={qr.href} target="_blank">
+                <img
+                  src={qr.src}
+                  alt={title}
+                  title={title}
+                  width="164"
+                  height="164"
+                  className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
+                />
+              </a>
+            )}
+            <span className="font-normal text-sm text-secondary-text ml-4">
+              Наведите камеру телефона на QR-код и скачайте приложение
+            </span>
+          </div>
+        </BaseTile>
+      </section>
     );
   },
 );

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,4 +1,6 @@
-import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 /**
  * @title QR код
@@ -13,17 +15,11 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export interface MobileAppTileContent {
-  /** @title Заголовок */
-  title?: string;
-  description?: string;
-  /**
-   * @title Кнопки
-   * @maxItems 4
-   */
-  buttons?: BaseTileIconButton[];
-  // TODO: description для мобильной версии
-  qr?: QRCode;
-  /** @title Ссылка */
-  href?: string; // TODO: для мобильной версии
-}
+export type MobileAppTileContent = HeadingContent &
+  DescriptionContent &
+  ButtonContent & {
+    // TODO: description для мобильной версии
+    qr?: QRCode;
+    /** @title Ссылка */
+    href?: string; // TODO: для мобильной версии
+  };

package/src/components/PictureText/PictureText.tsx

@@ -4,15 +4,15 @@ import type { PictureTextContent } from './PictureTextContent';
 
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
-export const PictureText = JSX<PictureTextProps>(({ className, title, image, benefits }) => {
+export const PictureText = JSX<PictureTextProps>(({ className = '', title, image, benefits }) => {
   return (
     <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
-      <Heading type="h2" className="text-center" text={title} />
+      <Heading headingType="h2" className="text-center" title={title} />
       <div className={'flex justify-center mt-9'}>
         {image?.src && <Img className="mr-6" image={image} />}
         {benefits?.length ? (
@@ -32,6 +32,7 @@ function renderBenefit(benefit: Benefit, i: number) {
           name={benefit.icon}
           width="48"
           height="48"
+          asSVG
         />
       )}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">

package/src/components/PictureText/PictureTextContent.ts

@@ -1,10 +1,13 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
+export type TitleWithImageContent = HeadingContent & ImageContent;
+
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends Pick<BaseTileCommonProps, 'title' | 'image'> {
+export interface PictureTextContent extends TitleWithImageContent {
   /** @title Список преимуществ */
   benefits?: Benefit[];
 }

package/src/components/Placeholder/PlaceholderContent.ts

@@ -1,6 +1,6 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+
 /**
  * @hidden
  */
-export interface PlaceholderContent {
-  title?: string;
-}
+export type PlaceholderContent = HeadingContent;

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

@@ -19,6 +19,7 @@ export default {
         className="col-span-12"
         context={context}
         title={'Потребительский кредит наличными'}
+        headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={[
           {
@@ -74,6 +75,7 @@ export default {
         context={context}
         className="col-span-12"
         title={'Потребительский кредит наличными'}
+        headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={[
@@ -131,6 +133,7 @@ export default {
         className="col-span-12"
         context={context}
         title={'Оплата проходит \nв 180 странах мира'}
+        headingType="h2"
         breadcrumbs={[]}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         items={[

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,20 +1,31 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
-export interface ProductBlockInnerCommonProps extends BaseTileCommonProps {
-  /**
-   * @title Преимущества
-   * @minItems 2
-   * @maxItems 3
-   */
-  benefits?: Benefit[];
-}
+export type ProductBlockInnerContent = HeadingContent &
+  HeadingTypeContent &
+  DescriptionContent &
+  ListContent &
+  ButtonContent &
+  ImageContent & {
+    /**
+     * @title Преимущества
+     * @minItems 2
+     * @maxItems 3
+     */
+    benefits?: Benefit[];
+    version?: BlockVersion;
+  };
 
 /**
  * @title Продуктовый блок
  */
-export interface ProductBlockContent extends ProductBlockInnerCommonProps {
+export interface ProductBlockContent extends ProductBlockInnerContent {
   /** @title Хлебные крошки */
   breadcrumbs?: LinkProps[];
 }

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

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
-import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
 
-export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
+export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className,
+    className = '',
     context,
     title,
-    headingType,
+    headingType = 'h2',
     description,
     benefits,
     buttons,
@@ -21,21 +25,32 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`${className || ''}`}>
+      <div className={`${className}`}>
         <div>
           <BaseTile
             context={context}
-            title={title}
-            headingType={headingType || 'h2'}
-            description={description}
-            items={items}
-            buttons={buttons}
+            title={
+              title && (
+                <Heading
+                  headingType={headingType}
+                  title={title}
+                  className={`whitespace-pre-wrap max-w-[600px]`}
+                />
+              )
+            }
+            buttons={
+              buttons?.length ? (
+                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              ) : null
+            }
           >
+            {description && <Description description={description} />}
             {benefits?.length ? (
               <div className="mt-[19px]">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
+            {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && (

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
-import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
 
-export type ProductBlockInnerProps = ProductBlockInnerCommonProps & UniBlockProps;
+export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className,
+    className = '',
     context,
     title,
-    headingType,
+    headingType = 'h2',
     description,
     benefits,
     buttons,
@@ -21,22 +25,34 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`flex grow justify-between items-stretch ${className || ''}`}>
+      <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={'flex flex-col'}>
           <BaseTile
             context={context}
-            title={title}
-            headingType={headingType || 'h2'}
-            description={description}
-            items={items}
-            buttons={buttons}
-            version={version}
+            title={
+              title && (
+                <Heading
+                  headingType={headingType}
+                  title={title}
+                  className={`whitespace-pre-wrap max-w-[600px]`}
+                />
+              )
+            }
+            buttons={
+              buttons?.length ? (
+                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              ) : null
+            }
           >
+            {description && (
+              <Description className="mt-4 max-w-[600px]" description={description} />
+            )}
             {benefits?.length ? (
               <div className="flex gap-6 mt-6 mb-3.5">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
+            {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && <Img className="mt-auto" image={image} />}

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

@@ -20,6 +20,7 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           name={benefit.icon}
           width="24"
           height="24"
+          asSVG
         />
       )}
       <div className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>

package/src/components/ProductBlock/renderBenefit.tsx

@@ -24,6 +24,7 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           name={benefit.icon}
           width="24"
           height="24"
+          asSVG
         />
       )}
       <div className="flex gap-1 flex-col h-full max-w-[149px]">