@redneckz/wildless-cms-uni-blocks 0.2.107 → 0.2.111

package/lib/ui-kit/Title/Title.mobile.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const SizeTableClass = {
+    XL: 'text-m-title',
+    L: 'text-m-title',
+    M: 'text-m-title-md',
+    S: 'text-m-title-xs',
+    '2XS': 'text-m-title-xs',
+    '3XS': 'text-m-title-xs',
+};
+export const Title = JSX(({ size = 'L', className, children, ...rest }) => {
+    const Tag = size === 'XL' || size === 'L' ? 'h1' : 'h2';
+    return (_jsx(Tag, { className: getClasses(SizeTableClass[size], className), ...rest, children: children }));
+});
+const getClasses = (...classes) => classes.filter(Boolean).join(' ');
+//# sourceMappingURL=Title.mobile.js.map

package/lib/ui-kit/Title/Title.mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.mobile.js","sourceRoot":"","sources":["../../../src/ui-kit/Title/Title.mobile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,CAAC,MAAM,cAAc,GAA8B;IACvD,EAAE,EAAE,cAAc;IAClB,CAAC,EAAE,cAAc;IACjB,CAAC,EAAE,iBAAiB;IACpB,CAAC,EAAE,iBAAiB;IACpB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpF,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACxD,OAAO,CACL,KAAC,GAAG,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YAClE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,GAAG,OAA+B,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC"}

package/lib/ui-kit/Title/TitleProps.d.ts

@@ -1,10 +1,4 @@
-export declare enum SizeTableClass {
-    'XL' = "text-title-lg",
-    'L' = "text-title",
-    'M' = "text-title-sm",
-    'S' = "text-title-xs"
-}
-export declare type TitleSize = keyof typeof SizeTableClass;
+export declare type TitleSize = 'XL' | 'L' | 'M' | 'S' | '2XS' | '3XS';
 export interface TitleProps extends Partial<HTMLHeadingElement> {
     size?: TitleSize;
 }

package/lib/ui-kit/Title/TitleProps.js

@@ -1,8 +1,2 @@
-export var SizeTableClass;
-(function (SizeTableClass) {
-    SizeTableClass["XL"] = "text-title-lg";
-    SizeTableClass["L"] = "text-title";
-    SizeTableClass["M"] = "text-title-sm";
-    SizeTableClass["S"] = "text-title-xs";
-})(SizeTableClass || (SizeTableClass = {}));
+export {};
 //# sourceMappingURL=TitleProps.js.map

package/lib/ui-kit/Title/TitleProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"TitleProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Title/TitleProps.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,sCAAsB,CAAA;IACtB,kCAAkB,CAAA;IAClB,qCAAqB,CAAA;IACrB,qCAAqB,CAAA;AACvB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB"}
+{"version":3,"file":"TitleProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Title/TitleProps.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.107",
+  "version": "0.2.111",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -14,11 +14,21 @@
       "require": "./dist/index.js",
       "types": "./lib/index.d.ts"
     },
+    "./mobile": {
+      "import": "./mobile/lib/index.js",
+      "require": "./mobile/dist/index.js",
+      "types": "./mobile/lib/index.d.ts"
+    },
     "./lib/*.js": {
       "import": "./lib/*.js",
       "require": "./dist/*.js",
       "types": "./lib/*.d.ts"
     },
+    "./mobile/lib/*.js": {
+      "import": "./mobile/lib/*.js",
+      "require": "./mobile/dist/*.js",
+      "types": "./mobile/lib/*.d.ts"
+    },
     "./lib/common.css": "./lib/common.css",
     "./fonts/ubuntu/*": "./fonts/ubuntu/*",
     "./lib/content-page-repository": {
@@ -44,9 +54,13 @@
   },
   "files": [
     "lib",
+    "mobile/lib",
     "dist",
+    "mobile/dist",
     "bundle",
+    "mobile/bundle",
     "fonts",
+    "mobile/src",
     "src"
   ],
   "repository": {
@@ -57,16 +71,22 @@
   },
   "scripts": {
     "start": "npm run cosmos",
-    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:icons && npm run build:design",
+    "start:mobile": "npm run cosmos:mobile",
+    "prebuild": "rimraf ./mobile/src",
+    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:design && npm run build:mobile && npm run build:design:mobile",
+    "prebuild:mobile": "rimraf ./mobile/src && node ./scripts/prebuild-mobile.js ./src ./mobile",
+    "build:mobile": "npm run --prefix ./mobile build",
     "postbuild": "npm run size",
     "build:design": "npm run cosmos:export || exit 0",
     "postbuild:design": "copyfiles --up 1 \"./docs/**/*\" ./build || exit 0",
+    "build:design:mobile": "npm run cosmos:export:mobile || exit 0",
+    "postbuild:design:mobile": "copyfiles --up 1 \"./docs/mobile/**/*\" ./build || exit 0",
     "build:lib": "rimraf ./lib && tsc --build --verbose",
     "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
-    "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir dist",
-    "bundle": "rimraf ./bundle && rollup -c && npm run build:schema && npm run build:schema:sort",
+    "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir ./dist",
+    "bundle": "rimraf ./bundle && rollup --config rollup.config.js && npm run build:schema",
     "build:schema": "ts-json-schema-generator --path './src/**/*Content.ts' --additional-properties --unstable --validation-keywords enumNames --validation-keywords required --minify --no-type-check -o ./bundle/blocks.schema.json",
-    "build:schema:sort": "node ./scripts/sort-bundle.js",
+    "postbuild:schema": "node ./scripts/sort-json-schema.js ./bundle/blocks.schema.json",
     "build:style": "postcss ./src/**/*.css --env production --dir ./lib",
     "build:icons": "svgo -f ./src/icons -o ./cosmos-static/icons",
     "size": "size-limit",
@@ -75,9 +95,13 @@
     "test": "jest --coverage",
     "precosmos": "npm run build:icons",
     "cosmos": "cosmos",
+    "precosmos:mobile": "npm run build:icons",
+    "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
     "precosmos:export": "npm run build:icons",
-    "cosmos:export": "cosmos-export",
-    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0"
+    "cosmos:export": "rimraf ./build && cosmos-export",
+    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0",
+    "precosmos:export:mobile": "npm run build:icons",
+    "cosmos:export:mobile": "rimraf ./build && cosmos-export --config cosmos.config.mobile.json"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -110,6 +134,7 @@
     "husky": "^8.0.1",
     "jest": "^28.1.3",
     "lint-staged": "^13.0.1",
+    "npm-watch": "^0.11.0",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
     "postcss-loader": "^7.0.0",

package/src/components/BaseTile/BaseTile.tsx

@@ -33,18 +33,18 @@ export const BaseTile = JSX<BaseTileProps>(
       <div className={`font-sans flex flex-col grow h-full items-start`}>
         {title && (
           <Title
-            size={titleSize || getTitleSizeByClassName(className)}
+            size={getTitleSize(titleSize, className)}
             className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
           >
             {title}
           </Title>
         )}
-        <div className={`flex grow w-full justify-between`}>
-          <div className={`flex flex-col justify-between items-start`}>
+        <div className="flex grow w-full justify-between">
+          <div className="flex flex-col justify-between items-start">
             <div>
-              {description ? (
+              {description && (
                 <div className={`font-normal text-base mt-4 max-w-[600px]`}>{description}</div>
-              ) : null}
+              )}
               {children}
               {items?.length ? renderItems(items, version) : null}
             </div>
@@ -63,7 +63,11 @@ export const BaseTile = JSX<BaseTileProps>(
   },
 );
 
-function getTitleSizeByClassName(className = '') {
+function getTitleSize(titleSize, className = '') {
+  if (titleSize) {
+    return titleSize;
+  }
+
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
     return 'S';
@@ -78,7 +82,12 @@ function renderItems(items: string[] = [], version?: BlockVersion) {
   return (
     <section className="max-w-[600px] mt-5" role="list">
       {items.map((_, i) => (
-        <BlockItem key={String(i)} className={i ? 'mt-2.5' : ''} text={_} version={version} />
+        <BlockItem
+          key={String(i)}
+          className={i ? 'mt-2.5' : ''}
+          text={_}
+          white={version !== 'primary'}
+        />
       ))}
     </section>
   );
@@ -90,7 +99,7 @@ function renderButton({ icon, asSVG, ...button }: BaseTileIconButton, i: number)
   return icon ? (
     <Button
       key={String(i)}
-      appendLeft={<Icon name={icon} asSVG width="24" height="24" />}
+      appendLeft={<Icon name={icon} asSVG={asSVG} width="24" height="24" />}
       {...button}
     />
   ) : (

package/src/components/{MobileBlocks.ts → Blocks.mobile.ts}

@@ -1,18 +1,19 @@
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
-import { Footer } from './Footer/Footer.mobile';
-import { Gallery } from './Gallery/Gallery.mobile';
+import { Footer } from './Footer/Footer';
+import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
-import { ProductBlock } from './ProductBlock/ProductBlock.mobile';
+import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductTile } from './ProductTile/ProductTile';
+import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 
-export const MobileBlocks = {
+export const Blocks = {
   ExchangeRateTile,
   Footer,
   Gallery,
@@ -26,4 +27,5 @@ export const MobileBlocks = {
   TextBlock,
   Tile,
   Navigation,
+  StepsBlock,
 };

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

@@ -0,0 +1,19 @@
+import { mobileContext } from '../../setup-fixture';
+
+import type { ContentPageDef } from '../../types';
+import { Blocks } from '../Blocks.mobile';
+import { ContentPage } from './ContentPage';
+import { toMobilePage } from './toMobilePage';
+
+import data from './ContentPage.page.json';
+
+export default {
+  default: (
+    <ContentPage
+      className="bg-secondary-text"
+      context={mobileContext}
+      blocksRegistry={Blocks}
+      data={toMobilePage(data as ContentPageDef)}
+    />
+  ),
+};

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -1,10 +1,8 @@
-import { context, mobileContext } from '../../setup-fixture';
+import { context } from '../../setup-fixture';
 
 import type { ContentPageDef } from '../../types';
 import { Blocks } from '../Blocks';
-import { MobileBlocks } from '../MobileBlocks';
 import { BlockDecorator, ContentPage } from './ContentPage';
-import { toMobilePage } from './toMobilePage';
 
 import data from './ContentPage.page.json';
 
@@ -36,14 +34,6 @@ export default {
       data={data as ContentPageDef}
     />
   ),
-  mobile: (
-    <ContentPage
-      className="bg-secondary-text"
-      context={mobileContext}
-      blocksRegistry={MobileBlocks}
-      data={toMobilePage(data as ContentPageDef)}
-    />
-  ),
   editor: (
     <div style={{ background: "url('grid.svg')", height: '100%' }}>
       <ContentPage

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -126,7 +126,7 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
           <div className="flex items-center">
             <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
             <div
-              className="w-80 text-xxs leading-4 text-secondary-text"
+              className="w-80 text-2xs leading-4 text-secondary-text"
               aria-label="Соглашение на обработку персональных данных"
             >
               Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно

package/src/components/Gallery/Gallery.example.json

@@ -53,19 +53,6 @@
       "description": "Описание 4",
       "href": "/credit-cards",
       "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 140,
-          "height": 140
-        }
-      },
-      "title": "Заголовок 5",
-      "description": "Описание 5",
-      "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
     }
   ]
 }

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
-import { Gallery, GalleryProps } from './Gallery';
-import { Gallery as MobileGallery } from './Gallery.mobile';
+import { Gallery } from './Gallery';
+import type { GalleryProps } from './GalleryProps';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -211,9 +211,4 @@ export default {
       <Gallery className="col-span-12" {...onlyTitleProps} />
     </div>
   ),
-  mobile: (
-    <div className="container grid grid-cols-12">
-      <MobileGallery className="col-span-12" {...defaultProps} />
-    </div>
-  ),
 };

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { GalleryProps } from './Gallery';
-import type { GalleryCard } from './GalleryContent';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img';
 import { Title } from '../../ui-kit/Title/Title';
+import type { GalleryCard } from './GalleryContent';
+import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], className }) => {
   return (

package/src/components/Gallery/Gallery.tsx

@@ -1,8 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { GalleryContent } from './GalleryContent';
 import { GalleryInner } from './GalleryInner';
-import type { UniBlockProps } from '../../types';
-
-export interface GalleryProps extends GalleryContent, UniBlockProps {}
+import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);

package/src/components/Gallery/GalleryCardInner.tsx

@@ -28,7 +28,7 @@ export const GalleryCardInner = JSX<GalleryCard>(
             </section>
           ) : null}
         </div>
-        {button?.href && <Button className="mt-6" {...button} />}
+        {button?.text && <Button className="mt-6" {...button} />}
       </div>
     );
   },

package/src/components/Gallery/GalleryContent.ts

@@ -11,12 +11,9 @@ export interface GalleryCard {
   /** @title Описание */
   description?: string;
   image?: Picture;
-  /** @title Ссылка */
+  /** @title Кнопка */
   button?: BaseTileIconButton;
-  /**
-   * @title Список
-   * @minItems 4
-   */
+  /** @title Список */
   items?: string[];
   version?: BlockVersion;
 }
@@ -29,6 +26,9 @@ export interface GalleryContent {
   title?: string;
   /** @title Описание */
   description?: string;
-  /** @title Карточки */
+  /**
+   * @title Карточки
+   * @minItems 4
+   */
   cards?: GalleryCard[];
 }

package/src/components/Gallery/GalleryProps.ts

@@ -0,0 +1,4 @@
+import type { UniBlockProps } from '../../types';
+import { GalleryContent } from './GalleryContent';
+
+export interface GalleryProps extends GalleryContent, UniBlockProps {}

package/src/components/MiniGallery/MiniGallery.example.json

@@ -45,17 +45,6 @@
       },
       "title": "Заголовок 4",
       "description": "Описание 4"
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 120,
-          "height": 70
-        }
-      },
-      "title": "Заголовок 5",
-      "description": "Описание 5"
     }
   ]
 }

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

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 
-export interface ProductBlockProps extends ProductBlockInnerCommonProps, UniBlockProps {}
+export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from '../../setup-fixture';
 
-import { ProductTile } from './ProductTile';
 import type { Picture } from '../../model/Picture';
+import { ProductTile } from './ProductTile';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
@@ -31,16 +31,16 @@ export default {
         description="Потребительский кредит на любые цели, без залога и поручительства"
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 5 млн Р',
+            label: 'до 5 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 12,5%',
+            label: 'от 12,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 5 лет',
+            label: 'до 5 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -63,16 +63,16 @@ export default {
         description={'Потребительский кредит на любые цели, без залога и поручительства'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 3 млн Р',
+            label: 'до 3 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 12,5%',
+            label: 'от 12,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 3 лет',
+            label: 'до 3 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -96,16 +96,16 @@ export default {
         description={'Без переоформления залогой недвижимости на банк'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 10 млн Р',
+            label: 'до 10 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 21,5%',
+            label: 'от 21,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 10 лет',
+            label: 'до 10 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -129,16 +129,16 @@ export default {
         description={'Для людей в возрасте до 75 лет'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 3 млн Р',
+            label: 'до 3 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 16,8%',
+            label: 'от 16,8%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 5 лет',
+            label: 'до 5 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[

package/src/components/ProductTile/ProductTile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { ProductTileContent } from './ProductTileContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Tile } from '../Tile/Tile';
+import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -12,31 +12,32 @@ export const ProductTile = JSX<ProductTileProps>((props) => {
   return (
     <Tile {...props}>
       <div className="flex mt-5 mb-1">
+        {benefits?.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
         {benefits?.length ? (
-          <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
-        ) : null}
-        {benefits?.length ? (
-          <div className="pt-1">{benefits.map((_, i) => renderBenefitLabel(_, i, version))}</div>
+          <div className="pt-1">
+            {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+          </div>
         ) : null}
       </div>
     </Tile>
   );
 });
 
-function renderBenefitLabel(benefit: Benefit, i: number, version = 'primary') {
-  const labelStyleMap: Record<BlockVersion, string> = {
-    primary: 'text-secondary-text',
-    secondary: 'text-white',
-  };
+function renderBenefitLabel(benefit: Benefit, i: number) {
   return (
-    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
     </div>
   );
 }
-function renderBenefitDescription(benefit: Benefit, i: number) {
+
+function renderBenefitDescription(benefit: Benefit, i: number, version = 'primary') {
+  const labelStyleMap: Record<BlockVersion, string> = {
+    primary: 'text-secondary-text',
+    secondary: 'text-white',
+  };
   return (
-    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );

package/src/components/ProductTile/ProductTileContent.ts

@@ -5,6 +5,9 @@ import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
  * @title Продуктовая плитка
  */
 export interface ProductTileContent extends Omit<BaseTileCommonProps, 'align'> {
-  /** @title Преимущества */
+  /**
+   * @title Преимущества
+   * @maxItems 7
+   */
   benefits?: Omit<Benefit, 'icon'>[];
 }