@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.2

package/src/components/Headline/Headline.fixture.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import '../../setup-fixture';
 
 import { Headline } from './Headline';
@@ -9,85 +10,81 @@ export const HEADLINE: HeadlineContent = {
   align: 'text-center',
 };
 
-export const HEADLINE_PRIMARY: HeadlineContent = {
-  ...HEADLINE,
-  bgColorHeadline: 'primary',
-};
-
-export const HEADLINE_SECONDARY: HeadlineContent = {
-  ...HEADLINE,
-  bgColorHeadline: 'secondary',
-};
+const Wrapper: FC = ({ children }) => (
+  <div className="container grid grid-cols-12 group" data-ver="primary">
+    {children}
+  </div>
+);
 
 export default {
   default: (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} />
-    </div>
+    </Wrapper>
   ),
   'default left alignment': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} align="text-left" />
-    </div>
+    </Wrapper>
   ),
   'default right alignment': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} align="text-right" />
-    </div>
+    </Wrapper>
   ),
   'default difficult XXL': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="XXL" />
-    </div>
+    </Wrapper>
   ),
   'default difficult XL': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="XL" />
-    </div>
+    </Wrapper>
   ),
   'default difficult L': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="L" />
-    </div>
+    </Wrapper>
   ),
   'default difficult M': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="M" />
-    </div>
+    </Wrapper>
   ),
   'default difficult S': (
-    <div className="container grid grid-cols-12">
+    <Wrapper>
       <Headline className="col-span-12" {...HEADLINE} headlineVersion="S" />
-    </div>
+    </Wrapper>
   ),
   'primary left alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-left" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} align="text-left" />
+    </Wrapper>
   ),
   'primary center alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} />
+    </Wrapper>
   ),
   'primary right alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_PRIMARY} align="text-right" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} align="text-right" />
+    </Wrapper>
   ),
   'secondary left alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-left" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-left" />
+    </Wrapper>
   ),
   'secondary center alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} />
+    </Wrapper>
   ),
   'secondary right alignment': (
-    <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" {...HEADLINE_SECONDARY} align="text-right" />
-    </div>
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-right" />
+    </Wrapper>
   ),
 };

package/src/components/Headline/Headline.tsx

@@ -4,43 +4,43 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { TextSize } from '../../ui-kit/Text/TextProps';
+import { style } from '../../utils/style';
 import type { HeadlineContent } from './HeadlineContent';
-import { headlineStyles } from './headlineStyles';
 import { headlineVersionStyles } from './headlineVersionStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
-    className = '',
+    className,
     title,
     description,
     headlineVersion = 'XL',
-    bgColorHeadline = 'transparent',
     align = 'text-center',
     as,
+    version = '',
     ...rest
   }) => {
-    const style = headlineStyles[bgColorHeadline];
-    const specificStyle = headlineVersionStyles[headlineVersion];
+    const versionStyle = headlineVersionStyles[headlineVersion];
 
     return (
       <BlockWrapper
-        className={`flex flex-col p-12 ${specificStyle.wrapper} ${style.wrapper} ${className}`}
+        className={style('flex flex-col p-12', versionStyle.wrapper, className)}
+        version={version}
         {...rest}
       >
         {title ? (
           <Heading
-            className={`whitespace-pre-wrap ${style.titleColor} ${align}`}
-            {...specificStyle?.title}
-            as={as || specificStyle?.title.as}
+            className={style('whitespace-pre-wrap', align)}
+            {...versionStyle?.title}
+            as={as || versionStyle?.title.as}
             title={title}
           />
         ) : null}
         {description ? (
           <Paragraph
-            color={style.descriptionColor || style.titleColor}
-            size={specificStyle.descriptionSize as TextSize}
+            color="group-data-secondary:text-white/80"
+            size={versionStyle.descriptionSize as TextSize}
             align={align}
           >
             {description}

package/src/components/Headline/HeadlineContent.ts

@@ -1,4 +1,3 @@
-import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
@@ -11,7 +10,6 @@ export type HeadlineContent = HeadlineProps & {
   /** @title Изображение (моб.) */
   image?: Picture;
   align?: TextAlign;
-  bgColorHeadline?: BlockVersionWithTransparent;
   /** @hidden */
   as?: HeadingTagType;
 };

package/src/components/HorizontalLayout/HorizontalLayout.fixture.tsx

@@ -47,7 +47,6 @@ export default {
           ],
         }}
         options={options}
-        version="secondary"
         gap="XS"
       />
     </div>

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -1,40 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { gapStyles } from './gapStyles';
 import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
 
 export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
 
 export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
-  ({
-    className = '',
-    gap = 'XS',
-    isPadding = false,
-    version = 'transparent',
-    options,
-    ...rest
-  }) => {
-    const paddingStyle = isPadding ? 'p-12' : '';
-
-    return (
-      <BlockWrapper
-        className={[
-          'grid grid-cols-12',
-          paddingStyle,
-          GapStyleMap[gap],
-          LayoutBackgroundStyleMap[version],
-          className,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        {...rest}
-      >
-        {renderChildren({ ...rest, options: options })}
-      </BlockWrapper>
-    );
-  },
+  ({ className = '', gap = 'XS', isPadding = false, version = 'transparent', ...rest }) => (
+    <BlockWrapper
+      className={style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className)}
+      version={version}
+      {...rest}
+    >
+      {renderChildren(rest)}
+    </BlockWrapper>
+  ),
 );
 
 HorizontalLayout.childrenTypes = {

package/src/components/HorizontalLayout/HorizontalLayoutContent.ts

@@ -1,5 +1,3 @@
-import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
-
 /**
  * @title Отсуп между компонентами
  * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
@@ -10,7 +8,6 @@ export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
  * @title Горизонтальный компоновщик
  */
 export interface HorizontalLayoutContent {
-  version?: BlockVersionWithTransparent;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */
   isPadding?: boolean;

package/src/components/HorizontalLayout/gapStyles.ts

@@ -0,0 +1,11 @@
+import type { GapVersion } from './HorizontalLayoutContent';
+
+export const gapStyles: Record<GapVersion, string> = {
+  XXL: 'gap-12',
+  XL: 'gap-10',
+  L: 'gap-8',
+  M: 'gap-4',
+  S: 'gap-2',
+  XS: 'gap-1',
+  '': '',
+};

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -22,7 +22,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={`box-border py-12 overflow-hidden relative font-sans w-100 bg-white ${className}`}
+        className={`box-border py-12 overflow-hidden relative w-100 ${className}`}
         {...rest}
       >
         {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -44,7 +44,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   }
 
   return (
-    <BlockWrapper className={`font-sans bg-white px-9 py-12 ${className}`} {...rest}>
+    <BlockWrapper className={`px-9 py-12 ${className}`} {...rest}>
       <div className="container text-m-light">
         {colums?.length ? (
           <div>

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

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
@@ -16,22 +18,23 @@ export const LinkDocs = JSX<LinkDocsProps>(
     documents,
     orientation = 'vertical',
     hasBorder = true,
+    align,
     ...rest
   }) => (
-    <section
-      className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
-    >
+    <BlockWrapper className={style('py-6 px-4 overflow-x-hidden', className)} {...rest}>
       <Headline
         className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
         title={title}
         description={description}
-        {...rest}
+        align={align}
+        headlineVersion="M"
+        as="h2"
       />
       {orientation === 'vertical' ? (
         <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
       ) : (
         <LinkDocsHorizontalList hasBorder={hasBorder} documents={documents} icon={icon} />
       )}
-    </section>
+    </BlockWrapper>
   ),
 );

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';
@@ -23,7 +24,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
     ...rest
   }) => (
-    <BlockWrapper className={`font-sans text-primary-text p-12 bg-white ${className}`} {...rest}>
+    <BlockWrapper className={style('p-12', className)} {...rest}>
       <Headline
         className="!p-0"
         title={title}
@@ -31,7 +32,6 @@ export const LinkDocs = JSX<LinkDocsProps>(
         align={align}
         headlineVersion="M"
         as="h2"
-        {...rest}
       />
       <LinkDocsList
         className={`mt-8 ${linkColumnsModeStyleMap[columnsMode]}`}

package/src/components/LinkDocs/LinkDocsList.tsx

@@ -21,7 +21,7 @@ export const LinkDocsList = JSX<LinkDocsListProps>(
             role="listitem"
           >
             <LinkDocsListItem
-              className="group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+              className="group/item flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
               doc={doc}
               icon={icon}
             />

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -7,7 +7,7 @@ export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', do
     className={`flex h-full box-border ${className}`}
     iconClassName="mr-2.5 min-w-6 min-h-6"
     textClassName="self-center text-l-light"
-    suffixClassName="text-secondary-text group-hover:text-primary-main"
+    suffixClassName="text-secondary-text group-hover/item:text-primary-main"
     doc={doc}
     icon={icon}
   />

package/src/components/LinkList/LinkList.tsx

@@ -7,7 +7,7 @@ import type { LinkListContent } from './LinkListContent';
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
 export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => (
-  <BlockWrapper className={`font-sans bg-white mt-2.5 ${className}`} {...rest}>
+  <BlockWrapper className={`mt-2.5 ${className}`} {...rest}>
     <ul className="flex flex-col text-s text-secondary-text p-0">
       {documents?.length ? renderLinkListItem(documents) : null}
     </ul>

package/src/components/MiniGallery/MiniGallery.tsx

@@ -6,5 +6,5 @@ import type { MiniGalleryContent } from './MiniGalleryContent';
 export interface MiniGalleryProps extends MiniGalleryContent, UniBlockProps {}
 
 export const MiniGallery = JSX<MiniGalleryProps>((props) => (
-  <GalleryInner {...props} version="mini" />
+  <GalleryInner {...props} galleryVersion="mini" />
 ));

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+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 type { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import type { MobileAppTileContent } from './MobileAppTileContent';
@@ -28,16 +26,14 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     description,
     ...rest
   }) => {
-    const textColorClass = version === 'primary' ? 'text-primary-text' : '';
     const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-    const buttonsWithClass = buttons?.map((_) => ({ ..._, className: 'min-w-[168px]' }));
 
     return (
       <BlockWrapper
-        className={`flex justify-between font-sans p-12 box-border relative min-h-80
-        ${getTileMinHeight(className)}
-        ${VersionStyleMap[version]}
-        ${className}`}
+        className={`flex justify-between p-12 box-border relative min-h-80 ${getTileMinHeight(
+          className,
+        )} ${className}`}
+        version={version}
         {...rest}
       >
         <BaseTile
@@ -48,16 +44,14 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 headingType={headingType}
                 as="h3"
                 title={title}
-                className={`whitespace-pre-wrap mb-7 w-full
-                  ${textColorClass} ${AlignText[alignTitle]}`}
+                className={`whitespace-pre-wrap mb-7 w-full ${AlignText[alignTitle]}`}
               />
             ) : null
           }
-          buttons={
-            buttons?.length ? (
-              <ButtonSection buttons={buttonsWithClass} className="flex gap-4 mt-8" {...rest} />
-            ) : null
-          }
+          buttons={renderButtonsSection(buttons, {
+            className: 'mt-8',
+            buttonClassName: 'min-w-[168px]',
+          })}
         >
           {renderDescription(description)}
           <div className="flex flex-1 items-center mb-3">
@@ -66,7 +60,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 <Img className="w-fit" image={qr} />
               </div>
             ) : null}
-            {renderList(version, items)}
+            {renderList(items)}
           </div>
         </BaseTile>
         {image?.src ? (
@@ -79,9 +73,9 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   },
 );
 
-const renderList = (version: ListItemVersion, items?: string[]) => {
+const renderList = (items?: string[]) => {
   return items?.length ? (
-    <List items={items} itemClassName="text-l-light mb-2 last:mb-0" version={version} />
+    <List items={items} itemClassName="text-l-light mb-2 last:mb-0" />
   ) : (
     <span className="text-m-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -13,7 +13,7 @@ export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, Un
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   ({ className = '', title, servicesList, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-8 flex flex-col ${className}`} {...rest}>
+    <BlockWrapper className={`p-8 flex flex-col ${className}`} {...rest}>
       {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
       {servicesList?.length ? (
         <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>

package/src/components/ParagraphBlock/ParagraphBlock.fixture.tsx

@@ -17,13 +17,8 @@ export default {
   colors: (
     <div className="container grid grid-cols-12">
       <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
-      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-error" />
-      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-green" />
-      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-main" />
-      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-main" />
-      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-text" />
-      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-secondary-text" />
-      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-white" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" version="secondary" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" version="transparent" />
     </div>
   ),
   alignment: (

package/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -6,14 +6,12 @@ import type { ParagraphBlockContent } from './ParagraphBlockContent';
 
 interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
 
-export const ParagraphBlock = JSX<ParagraphBlockProps>((props) => {
-  const { className, text, size, color, align, font, ...rest } = props;
-
-  return (
-    <BlockWrapper className={className} {...rest}>
-      <Paragraph size={size} color={color} align={align} font={font}>
-        {text}
+export const ParagraphBlock = JSX<ParagraphBlockProps>(
+  ({ text, size, align, font, children, ...rest }) => (
+    <BlockWrapper {...rest}>
+      <Paragraph size={size} align={align} font={font}>
+        {text || children}
       </Paragraph>
     </BlockWrapper>
-  );
-});
+  ),
+);

package/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -1,9 +1,12 @@
-import type { ParagraphProps } from '../../ui-kit/Paragraph/ParagraphProps';
+import type { FontWeight, TextAlign, TextSize } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Параграф
  */
-export interface ParagraphBlockContent extends ParagraphProps {
+export interface ParagraphBlockContent {
+  size?: TextSize;
+  align?: TextAlign;
+  font?: FontWeight;
   /** @title Текст */
   text?: string;
 }

package/src/components/PictureText/PictureText.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
@@ -19,24 +18,14 @@ export const PictureText = JSX<PictureTextProps>(
     description,
     image,
     benefits,
-    version = 'primary',
     sum,
     monthLimit,
     directionRight = false,
+    version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper
-      className={`relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`}
-      {...rest}
-    >
-      <Headline
-        className="!p-0"
-        title={title}
-        description={description}
-        headlineVersion="M"
-        bgColorHeadline={version}
-        {...rest}
-      />
+    <BlockWrapper className={`relative py-12 px-24 ${className}`} version={version} {...rest}>
+      <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
       <div className={'flex justify-center gap-[122px] mt-[30px]'}>
         {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
         <div className="w-[558px] m-auto">

package/src/components/Placeholder/Placeholder.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -15,9 +16,12 @@ export const Placeholder = JSX<PlaceholderProps>(
   ({ className, title, description = 'Блок в разработке...', ...rest }) => {
     return (
       <BlockWrapper
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
+        className={style(
+          'p-9 box-border',
           className,
-        )} ${getTileMinHeight(className)} `}
+          getTileRightPadding(className),
+          getTileMinHeight(className),
+        )}
         {...rest}
       >
         <Headline
@@ -25,7 +29,6 @@ export const Placeholder = JSX<PlaceholderProps>(
           title={title}
           description={description}
           headlineVersion={getTileHeadingType(className)}
-          {...rest}
         />
         <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
       </BlockWrapper>

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

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image and benefits */) => {
-  const { className = '', version = 'primary' } = props;
+  const { className = '', ...rest } = props;
 
   return (
-    <section className={`font-sans bg-white px-4 py-6 ${VersionStyleMap[version]} ${className}`}>
+    <BlockWrapper className={`px-4 py-6 ${className}`} {...rest}>
       <ProductBlockInner {...props} />
-    </section>
+    </BlockWrapper>
   );
 });