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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/Carousel/Carousel.example.json

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

package/mobile/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/mobile/src/components/Carousel/CarouselContent.ts

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

package/mobile/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/mobile/src/components/CarouselCard/CarouselCardContent.ts

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

package/mobile/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>
   ),
 );
 

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -1,12 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
 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 { Text } from '../../ui-kit/Text/Text';
-import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
@@ -19,8 +16,8 @@ export interface CarouselInvestmentCardProps extends CarouselInvestmentCardConte
 const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
 
 const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  1: 'flex gap-y-2 flex-col',
-  2: 'flex gap-y-2 gap-x-10 flex-wrap',
+  1: 'flex-col',
+  2: 'gap-x-10 flex-wrap',
 };
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
@@ -32,7 +29,6 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     description,
     image,
     title,
-    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -46,9 +42,8 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     return (
       <BlockWrapper
         className={[
-          'relative text-left border border-solid box-border p-9 w-[697px]',
-          VersionStyleMap[version],
-          BorderVersionStyleMap[version],
+          'relative box-border text-left p-9 w-[697px]',
+          'border border-solid border-gray group-data-secondary:border-white/50',
           className,
         ].join(' ')}
         {...rest}
@@ -61,17 +56,15 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
               </div>
             ) : null}
             {additionalDescription ? (
-              <Text
-                size="text-m"
-                font="font-light"
-                color={VersionAdditionalStyleMap[version] as TextColor}
-              >
+              <Text size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
                 {additionalDescription}
               </Text>
             ) : null}
           </div>
           {cardsList.length ? (
-            <ul className={`list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`}>
+            <ul
+              className={`list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`}
+            >
               {renderCardList(cardsList, columnsMode)}
             </ul>
           ) : null}

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -13,20 +13,28 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 const MAX_LINKS_COUNT = 12;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ className = '', additionalDescription, description, links, title, ...rest }) => {
+  ({
+    className = '',
+    additionalDescription,
+    description,
+    links,
+    title,
+    version = 'secondary',
+    ...rest
+  }) => {
     return (
       <BlockWrapper
-        className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
+        className={`flex w-full p-10 overflow-hidden justify-between ${className}`}
+        version={version}
         {...rest}
       >
         <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
           <Headline
+            className="p-0"
             title={title}
-            as="h1"
             description={description}
+            as="h1"
             align="text-left"
-            className="p-0"
-            bgColorHeadline="secondary"
           />
           {additionalDescription ? (
             <div className="pt-6">
@@ -45,6 +53,7 @@ const renderLinks = (links: LinkProps[]) => {
 
   return (
     <Carousel
+      version=""
       className="min-w-[832px] w-[832px]"
       isBlur={false}
       isCyclic={true}

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,29 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
-const descriptionStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white/80',
-};
-
-const BORDER_STYLE = 'box-border border-solid border border-gray ';
-
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
+    className = '',
     title,
     headlineSmallVersion = 'H6',
     description,
@@ -33,40 +26,39 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     button = {},
     version = 'primary',
     isDotted = true,
-    align = 'center',
+    align = 'text-center',
+    ...rest
   }) => {
     return (
-      <section
-        className={[
+      <BlockWrapper
+        className={style(
           'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
-          BORDER_STYLE,
-          AlignText[align],
-          VersionStyleMap[version],
-        ].join(' ')}
+          'box-border border-solid border border-gray',
+          align,
+          className,
+        )}
         role="listitem"
+        version={version}
+        {...rest}
       >
         <div className="flex flex-col h-full">
-          {renderImage(icon, version)}
+          {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {renderItems(items, isDotted, version)}
-          {renderAdditionalDescription(additionalDescription, version)}
+          {renderAdditionalDescription(additionalDescription)}
         </div>
-        {renderButton({ button, buttonClassName: 'mt-6' })}
-      </section>
+        {renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })}
+      </BlockWrapper>
     );
   },
 );
 
-const renderImage = (image?: Picture, version?: BlockVersion) => (
+const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
-      <Img
-        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
-        image={getIconWithVersion(image, version)}
-        asSVG
-      />
+      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} asSVG />
     ) : null}
   </div>
 );
@@ -81,10 +73,14 @@ const renderDescription = (description?: string, title?: string) =>
     </div>
   ) : null;
 
-const renderAdditionalDescription = (additionalDescription?: string, version = 'primary') =>
+const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
     <div className="mt-auto">
-      <Text size="text-m" font="font-light" color={descriptionStyleMap[version]}>
+      <Text
+        size="text-m"
+        font="font-light"
+        color="text-secondary-text group-data-secondary:text-white/80"
+      >
         {additionalDescription}
       </Text>
     </div>
@@ -97,6 +93,5 @@ const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersio
       itemClassName="text-left"
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
-      version={version}
     />
   ) : null;

package/mobile/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -1,8 +1,8 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineSmallProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Элемент списка
@@ -45,7 +45,7 @@ export type CarouselProductCardContent = HeadlineSmallProps & {
   version?: BlockVersion;
   /**
    * @title Выравнивание
-   * @default center
+   * @default text-center
    */
-  align?: AlignType;
+  align?: TextAlign;
 };

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -11,11 +10,8 @@ import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent'
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
-    <BlockWrapper
-      className={`font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
-      {...rest}
-    >
+  ({ className = '', title, icon, list = [], ...rest }) => (
+    <BlockWrapper className={`border border-gray flex min-w-[536px] ${className}`} {...rest}>
       <div className="w-[200px] min-w-[200px] self-center">
         {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
         {icon?.src ? <Img image={icon} /> : null}