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

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,81 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion, VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
-import { BenefitBlockItemProps, DescriptionDef } from './BenefitsBlockContent';
-
-const benefitsTextStyleMap = {
-  primary: '',
-  secondary: 'text-white',
-};
-
-const benefitsDescriptionStyleMap = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white opacity-80',
-};
-
-const benefitsIconStyleMap = {
-  primary: 'bg-main-divider text-primary-main',
-  secondary: 'bg-white/30 text-black',
-};
+import type {
+  BenefitBlockItemProps,
+  BenefitsBlockContent,
+  DescriptionDef,
+  ListBenefitDef,
+  TextBenefitDef,
+} from './BenefitsBlockContent';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, version = 'primary', ...rest }) => (
-    <BlockWrapper
-      className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`}
-      {...rest}
-    >
+  ({ className = '', title, benefitList, ...rest }) => (
+    <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
       {title ? (
-        <Heading
-          headingType="h3"
-          as="h2"
-          className={`max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`}
-          title={title}
-        />
+        <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}
       {benefitList?.length ? (
         <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-          {benefitList.map(renderStep(version))}
+          {benefitList.map(renderStep)}
         </div>
       ) : null}
     </BlockWrapper>
   ),
 );
 
-const renderStep = (version: BlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
   const description = benefit.description;
 
   return (
     <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
       {benefit?.icon?.icon ? (
         <Img
-          className={`w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`}
-          image={getIconWithVersion(benefit.icon, version)}
+          className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
+          image={benefit.icon}
           asSVG
         />
       ) : null}
       {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
       <div className="ml-5">
-        {benefit?.label ? (
-          <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[version]}`}>{benefit.label}</h3>
-        ) : null}
-        {renderDescription(description, version)}
+        {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
+        {renderDescription(description)}
       </div>
     </div>
   );
 };
 
-const renderDescription = (description: DescriptionDef | undefined, version: BlockVersion) => {
+const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;
 
   return description && benefitType ? (
-    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`}>
+    <div className="mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/src/components/Bonus/Bonus.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 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 { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
@@ -12,38 +12,30 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`font-sans bg-white p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
       <div className="container">
-        <Headline
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          {...rest}
-        />
+        <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems?.length
-            ? bonusItems.map((_, i) => {
-                return (
-                  <div
-                    key={String(i)}
-                    className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
-                  >
-                    <div className="flex justify-between w-full">
-                      <div className="flex flex-col justify-between mr-4">
-                        <div>
-                          <div className="text-h4">{_.title}</div>
-                          <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
-                        </div>
-                        {_?.buttons?.length ? <ButtonSection buttons={_?.buttons} /> : null}
+            ? bonusItems.map((_, i) => (
+                <div
+                  key={String(i)}
+                  className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
+                >
+                  <div className="flex justify-between w-full">
+                    <div className="flex flex-col justify-between mr-4">
+                      <div>
+                        <div className="text-h4">{_.title}</div>
+                        <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
                       </div>
-                      {_.bonusItemContent?.bonusType
-                        ? renderBonusItemContent(_.bonusItemContent)
-                        : null}
+                      {renderButtonsSection(_?.buttons)}
                     </div>
+                    {_.bonusItemContent?.bonusType
+                      ? renderBonusItemContent(_.bonusItemContent)
+                      : null}
                   </div>
-                );
-              })
+                </div>
+              ))
             : null}
         </div>
       </div>

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -26,13 +26,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
       className={`font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`}
       {...rest}
     >
-      <Headline
-        className="!p-0 mb-8"
-        title={title}
-        description={subtitle}
-        headlineVersion="M"
-        {...rest}
-      />
+      <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />
       {bonusBenefits?.length ? (
         <div
           className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -9,7 +9,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 
 export const BusinessBlock = JSX<BusinessBlockProps>(
   ({ className = '', title, cards, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
       <Heading headingType="h3" title={title} className="text-center mb-8" />
       <div className="flex gap-5">
         {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderButton } 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 type { BusinessCardItemProps, BusinessCardProps } from './BusinessBlockContent';
@@ -17,7 +17,7 @@ export const BusinessCard = JSX<BusinessCardProps>((props) => {
       ) : null}
       {title ? <Heading headingType="h4" title={title} className="mb-6" /> : null}
       {cardItems?.length ? <ul>{cardItems.map((_, i) => renderItem(_, String(i)))}</ul> : null}
-      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+      {renderButtonsSection([button], { buttonClassName: 'mt-6' })}
     </div>
   );
 });

package/src/components/ButtonBlock/ButtonBlock.tsx

@@ -1,17 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import type { ButtonBlockContent } from './ButtonBlockContent';
 
 interface ButtonBlockProps extends ButtonBlockContent, UniBlockProps {}
 
-export const ButtonBlock = JSX<ButtonBlockProps>((props) => {
-  const { className, button, ...rest } = props;
-
-  return (
-    <BlockWrapper className={className} {...rest}>
-      {button ? renderButton({ button }) : null}
-    </BlockWrapper>
-  );
-});
+export const ButtonBlock = JSX<ButtonBlockProps>(({ button, ...rest }) => (
+  <BlockWrapper {...rest}>{renderButtonsSection([button])}</BlockWrapper>
+));

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { CommonCalculatorProps } from './CalculatorContent';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import type { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
 import { Rate } from './Rate';
-import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useBonusCalculatorParams } from './useBonusCalculatorParams';
@@ -60,7 +60,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
         </div>
         <div className="w-full max-w-[350px]">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
-          {renderButtonSection(buttons)}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/Calculator.tsx

@@ -40,10 +40,7 @@ export const Calculator = JSX<CalculatorProps>(
     });
 
     return (
-      <BlockWrapper
-        className={`box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`box-border overflow-hidden relative w-100 ${className}`} {...rest}>
         <div className="bg-white">
           {tabsNav.length > 1
             ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { CommonCalculatorProps } from './CalculatorContent';
+import type { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
-import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
@@ -96,7 +96,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
             onChange={(text: string) => toggleIsAnnuity(text === ANNUITY)}
           />
-          {renderButtonSection(buttons)}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -2,12 +2,12 @@
 
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 import { Rate } from './Rate';
-import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderWantedSumInput } from './renderWantedSumInput';
@@ -78,7 +78,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
             onChange={(text: string) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH)}
           />
-          {renderButtonSection(buttons)}
+          {renderButtonsSection(buttons, { className: 'mt-7', isVertical: true })}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/CardTransfer/CardTransfer.tsx

@@ -37,10 +37,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper
-        className={`p-12 flex flex-col items-center font-sans bg-white ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
         <form className="w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput

package/src/components/Carousel/Carousel.example.json

@@ -1,5 +1,6 @@
 {
   "isBlur": false,
   "visibleItemCount": 1,
-  "isCycle": false
+  "isCycle": false,
+  "isPadding": true
 }

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,14 +1,14 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
-import { Carousel } from './Carousel';
-import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
+import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
+import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Carousel } from './Carousel';
 
 const options = {
   blocksRegistry: Blocks,
@@ -59,12 +59,10 @@ export default {
         isBlur={false}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselCatalogCard',
-              content: CATALOG_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: CATALOG_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselCatalogCard',
+            content: CATALOG_CARD,
+          }),
         }}
         options={options}
       />
@@ -98,12 +96,10 @@ export default {
         isBlur={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselProductCard',
-              content: PRODUCT_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD,
+          }),
         }}
         options={options}
       />
@@ -117,12 +113,10 @@ export default {
         isBlur={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselProductCard',
-              content: PRODUCT_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: PRODUCT_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselProductCard',
+            content: PRODUCT_CARD,
+          }),
         }}
         options={options}
       />
@@ -136,12 +130,10 @@ export default {
         isBlur={false}
         block={{
           type: 'Carousel',
-          blocks: new Array(6)
-            .fill({
-              type: 'CarouselProgramsCard',
-              content: BUSINESS_CARD,
-            })
-            .map((_, i) => (i === 1 ? { ..._, content: BUSINESS_CARD } : _)),
+          blocks: new Array(6).fill({
+            type: 'CarouselProgramsCard',
+            content: BUSINESS_CARD,
+          }),
         }}
         options={options}
       />

package/src/components/Carousel/Carousel.tsx

@@ -9,6 +9,7 @@ import {
   useSwipeListScroll,
 } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import type { CarouselContent } from './CarouselContent';
+import { style } from '../../utils/style';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -16,11 +17,19 @@ export interface CarouselProps extends CarouselContent, UniBlockProps {
 
 const ITEMS_GAP = 4;
 
-const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
 const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
-  ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
+  ({
+    className = '',
+    itemCount,
+    visibleItemCount,
+    isBlur = true,
+    isCyclic = false,
+    isPadding = true,
+    ...rest
+  }) => {
     const { blocks: childBlocks } = rest.block || {};
     const count = itemCount || childBlocks?.length || 0;
 
@@ -30,7 +39,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     });
 
     return (
-      <BlockWrapper className={`font-sans p-12 ${className}`} {...rest}>
+      <BlockWrapper className={style(getPaddingStyle(isPadding), className)} {...rest}>
         <div className="relative max-w-full">
           <SwipeListContainer
             containerRef={containerRef}
@@ -80,3 +89,5 @@ const renderScrollButtons = ({
     ) : null}
   </div>
 );
+
+const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');

package/src/components/Carousel/CarouselContent.ts

@@ -11,4 +11,6 @@ export interface CarouselContent {
   isBlur?: boolean;
   /** @title Цикличность */
   isCyclic?: boolean;
+  /** @title Внутренний отступ  */
+  isPadding?: boolean;
 }

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -13,21 +13,21 @@ export const CARD: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
   description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
-  version: 'normal',
+  carouselVersion: 'normal',
 };
 
 export const CARD_NEW: CarouselCardContent = {
   title: 'РСХБ?',
   description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
-  version: 'normal',
+  carouselVersion: 'normal',
 };
 
 export const CARD_MINI: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
   description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
-  version: 'mini',
+  carouselVersion: 'mini',
 };
 
 export default {

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Headline } from '../Headline/Headline';
 import type { CarouselCardContent } from './CarouselCardContent';
 
@@ -15,8 +15,10 @@ const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(
-  ({ className = '', button, description, title, version = 'normal' }) => (
-    <section className={`flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[version]} ${className}`}>
+  ({ className = '', button, description, title, carouselVersion = 'normal' }) => (
+    <section
+      className={`flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
+    >
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
@@ -29,7 +31,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
             headlineVersion="L"
             align="text-left"
           />
-          {button ? <div className="mt-14">{renderButton({ button })}</div> : null}
+          {renderButtonsSection([button], { className: 'mt-14' })}
         </div>
       </div>
     </section>

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -14,5 +14,5 @@ export interface CarouselCardContent extends HeadlineCommonProps {
    * }
    */
   button?: ButtonWithIconProps;
-  version?: CarouselCardVersion;
+  carouselVersion?: CarouselCardVersion;
 }

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -1,18 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
 
-export interface CarouselCatalogCardProps extends CarouselCatalogCardContent {
-  className?: string;
-  version?: BlockVersion;
-}
+export interface CarouselCatalogCardProps extends CarouselCatalogCardContent, UniBlockProps {}
 
 const cardStyleMap: Record<ProductColorVersion, string> = {
   black: 'bg-black',
@@ -20,10 +17,11 @@ 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-gray p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
+  ({ className = '', title, description, image, price, button, colors, ...rest }) => (
+    <BlockWrapper
+      className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`}
       role="listitem"
+      {...rest}
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
       {title ? (
@@ -49,8 +47,8 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
           {price}&nbsp;₽
         </Text>
       ) : null}
-      {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
-    </section>
+      {renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })}
+    </BlockWrapper>
   ),
 );