@redneckz/wildless-cms-uni-blocks 0.6.36 → 0.6.38

package/src/components/Blocks.ts

@@ -8,9 +8,9 @@ import { BusinessBlock } from './BusinessBlock/BusinessBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
@@ -22,8 +22,8 @@ import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { ImgBlock } from './ImgBlock/ImgBlock';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
-import { InvestmentGallery } from './InvestmentGallery/InvestmentGallery';
 import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
@@ -32,6 +32,7 @@ import { OfficeMap } from './OfficeMap/OfficeMap';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { OtherProductsItem } from './OtherProductsItem/OtherProductsItem';
+import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -48,6 +49,7 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
+import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -73,12 +75,13 @@ export const Blocks: BlocksRegistry = {
   GracePeriod,
   Header,
   Headline,
+  ImgBlock,
   InsuranceAmountBlock,
   InvestmentInfo,
-  InvestmentGallery,
   LinkDocs,
   MiniGallery,
   MobileAppTile,
+  ParagraphBlock,
   PictureText,
   Placeholder,
   ProductBlock,
@@ -99,4 +102,5 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
+  CarouselInvestmentCard,
 };

package/src/components/Bonus/Bonus.tsx

@@ -12,7 +12,7 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`font-sans bg-white p-12 pb-9 ${className}`} {...rest}>
       <div className="container">
         <Headline
           className="!p-0"
@@ -76,6 +76,4 @@ const renderBonusCount = (_: BonusCountDef) => (
 );
 
 const renderBonusImage = (_: BonusImageDef) =>
-  _.image ? (
-    <Img className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full`} image={_.image} />
-  ) : null;
+  _.image ? <Img className={`w-12 h-12 min-w-12 p-3 rounded-full`} image={_.image} /> : null;

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -23,7 +23,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
+      className={`font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline

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-[50px] pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`font-sans bg-white 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/Calculator/BonusCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
@@ -16,7 +16,9 @@ export interface BonusCalculatorProps extends CommonCalculatorProps {
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
   ({ className = '', sourceBookDir = '', buttons, footnote }) => {
     const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
+    const handleTravelExpenseValue = useCallback((_: number) => setTravelExpenseValue(_), []);
     const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
+    const handleRestExpenseValue = useCallback((_: number) => setRestExpenseValue(_), []);
     const userInputParams = {
       travelExpenseValue,
       restExpenseValue,
@@ -36,7 +38,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
               step: 500,
               isShowItems: false,
             },
-            setTravelExpenseValue,
+            handleTravelExpenseValue,
           )}
           {renderWantedSumInput(
             'Сумма покупок в остальных категориях, ₽',
@@ -48,7 +50,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
               step: 500,
               isShowItems: false,
             },
-            setRestExpenseValue,
+            handleRestExpenseValue,
           )}
         </div>
         <div>

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps } from './CalculatorContent';
@@ -37,7 +37,9 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
     const [isStateEmployee, toggleIsStateEmployee] = useState(false);
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
+    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
     const userInputParams = {
       isAnnuity,
       isInsurance,
@@ -54,9 +56,9 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
           {renderWantedSumInput(
             'Сумма кредита, ₽',
             { ...calculatorParams, step: 500 },
-            setMoneyValue,
+            handleMoneyValue,
           )}
-          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue)}
+          {renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue)}
           <div className="mt-7">
             <Checkbox
               text="Получаю зарплату на счёт в Россельхозбанке"

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -1,7 +1,7 @@
 // TEMP
 
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -34,6 +34,7 @@ const depositTypeItems = [
 export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
   ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+    const handleMoneyValue = useCallback((_: number) => setMoneyValue(_), []);
     const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
     const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
     const userInputParams = {
@@ -41,6 +42,7 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
       monthsValue,
       isMonthlyInterestPayment,
     };
+    const handleMonthsValue = useCallback((_: number) => setMonthsValue(_), []);
 
     const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
     const { income, finalSum, rate } = calculatorParams;
@@ -53,14 +55,14 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
             {
               ...calculatorParams,
             },
-            setMoneyValue,
+            handleMoneyValue,
           )}
           {renderMonthsInput(
             'Срок вклада, месяцев',
             {
               ...calculatorParams,
             },
-            setMonthsValue,
+            handleMonthsValue,
           )}
         </div>
         <Rate rate={rate || 1} rateBlockClassName="tracking-[-25px]" unit="%" />

package/src/components/Calculator/renderProposal.tsx

@@ -1,12 +1,12 @@
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Button } from '../../ui-kit/Button/Button';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 
 export function renderProposal(monthlyPayment: number) {
   return (
     <div className="box-border ">
       <div className="text-l-light">Ежемесячный платёж</div>
       <div className="text-h3 mb-3">{addSpacesBetweenNumbers(Math.round(monthlyPayment))} ₽</div>
-      <Button className="mt-[50px] w-full" text="Отправить заявку" version="primary" href="#" />
+      <Button className="mt-12 w-full" text="Отправить заявку" version="primary" href="#" />
     </div>
   );
 }

package/src/components/CardTransfer/CardTransfer.tsx

@@ -38,7 +38,7 @@ export const CardTransfer = JSX<CardTransferProps>(
 
     return (
       <BlockWrapper
-        className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
+        className={`p-12 flex flex-col items-center font-sans bg-white ${className}`}
         {...rest}
       >
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}

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

@@ -1,10 +1,11 @@
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import { Carousel } from './Carousel';
+import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 
 const options = {
   blocksRegistry: Blocks,
@@ -86,4 +87,22 @@ export default {
       />
     </div>
   ),
+  investment: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={true}
+        isCyclic={false}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselInvestmentCard',
+            content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
+            style: ['col-span-2'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -17,7 +17,7 @@ export interface CarouselProps extends CarouselContent, UniBlockProps {
 const ITEMS_GAP = 4;
 
 const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
-const scrollButtonStyle = 'absolute top-1/2 z-50';
+const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
@@ -57,6 +57,7 @@ Carousel.childrenTypes = [
   'CarouselTariffsCard',
   'CarouselLinks',
   'CarouselProgramsCard',
+  'CarouselInvestmentCard',
 ];
 
 const renderScrollButtons = ({

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

@@ -42,7 +42,7 @@ export default {
     </div>
   ),
   mini: (
-    <div className="container flex">
+    <div className="container grid grid-cols-12">
       <CarouselCard {...CARD_MINI} />
     </div>
   ),

package/src/components/CarouselCard/CarouselCard.tsx

@@ -10,8 +10,8 @@ export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: `w-[${1007 + 48}px]`,
-  mini: `w-[${350 + 48}px]`,
+  normal: 'min-w-[1007px]',
+  mini: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -0,0 +1,28 @@
+{
+  "image": {
+    "format": "webp",
+      "size": {
+        "width": 180,
+        "height": 180
+      }
+    },
+  "title": "Заголовок",
+  "description": "Описание",
+  "additionalDescription": "Описание 1-2",
+  "columnsMode": "1",
+  "cardsList":[
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    },
+    {
+      "parameter": "Параметр",
+      "parameterDescription": "Описание пункта"
+    }
+  ],
+  "version": "primary"
+}

package/src/components/{InvestmentGallery/InvestmentGallery.fixture.tsx → CarouselInvestmentCard/CarouselInvestmentCard.fixture.tsx}

@@ -1,6 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
-import { InvestmentGallery, InvestmentGalleryProps } from './InvestmentGallery';
+import { CarouselInvestmentCard } from './CarouselInvestmentCard';
+import type { CarouselInvestmentCardContent } from './CarouselInvestmentCardContent';
 
 const five: Picture = {
   src: '5.svg',
@@ -12,7 +13,7 @@ const five: Picture = {
   title: 'five',
 };
 
-const cardListExample = [
+const cardsList = [
   {
     parameter: 'IR',
     parameterDesccription: 'cтрана эмитента',
@@ -39,40 +40,33 @@ const cardListExample = [
   },
 ];
 
-const cardCoomonProps = {
+export const INVESTMENT_CARD_WITH_SINGLE_COLUMN: CarouselInvestmentCardContent = {
   title: 'Borets Finance DAC 17/09/26',
   description: 'BRTS-26 XS2230649225',
   additionalDescription: 'Краткосрочная',
+  cardsList,
+  columnsMode: 1,
+  image: five,
 };
 
-export const shortProps: InvestmentGalleryProps = {
-  title: 'Примеры еврооблигаций (Московская Биржа)',
-  cards: [
-    {
-      ...cardCoomonProps,
-      columnsMode: 'double',
-      cardList: cardListExample,
-      image: five,
-    },
-    {
-      ...cardCoomonProps,
-      columnsMode: 'single',
-      cardList: cardListExample,
-      image: five,
-    },
-    {
-      ...cardCoomonProps,
-      columnsMode: 'double',
-      cardList: cardListExample,
-      image: five,
-    },
-  ],
+export const INVESTMENT_CARD_WITH_DOUBLE_COLUMN: CarouselInvestmentCardContent = {
+  title: 'Borets Finance DAC 17/09/26',
+  description: 'BRTS-26 XS2230649225',
+  additionalDescription: 'Краткосрочная',
+  cardsList,
+  columnsMode: 2,
+  image: five,
 };
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 mb-1">
-      <InvestmentGallery className="col-span-12" {...shortProps} />
+    <div className="container grid grid-cols-12">
+      <CarouselInvestmentCard className="col-span-4" {...INVESTMENT_CARD_WITH_SINGLE_COLUMN} />
+    </div>
+  ),
+  'with-double-columns': (
+    <div className="container grid grid-cols-12">
+      <CarouselInvestmentCard className="col-span-4" {...INVESTMENT_CARD_WITH_DOUBLE_COLUMN} />
     </div>
   ),
 };

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -0,0 +1,83 @@
+import { BaseTile } from '../BaseTile/BaseTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import type {
+  CardColumnsMode,
+  CardsListItem,
+  CarouselInvestmentCardContent,
+} from './CarouselInvestmentCardContent';
+import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { UniBlockProps } from '../../model/JSXBlock';
+
+export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
+
+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',
+};
+
+export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
+  ({
+    additionalDescription,
+    cardsList = [],
+    className = '',
+    columnsMode = 1,
+    description,
+    image,
+    title,
+    version = 'primary',
+    ...rest
+  }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} />
+    ) : null;
+
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
+    return (
+      <BlockWrapper
+        className={`relative text-left border border-solid box-border
+        p-9 w-[697px]
+        ${BorderVersionStyleMap[version]}
+        ${className}`}
+        {...rest}
+      >
+        <BaseTile title={tileTitle} image={tileImage}>
+          <div className="flex justify-between mb-4">
+            {description ? <span className="text-h6 w-1/3">{description}</span> : null}
+            {additionalDescription ? (
+              <span className="text-m-light text-secondary-text">{additionalDescription}</span>
+            ) : null}
+          </div>
+          {cardsList.length ? (
+            <ul className={`list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`}>
+              {renderCardList(cardsList, columnsMode)}
+            </ul>
+          ) : null}
+        </BaseTile>
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
+  const CARDS_COUNT_MAP = [4, 9];
+  const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
+
+  return visibleCardsList.map((item, i) => (
+    <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
+      {item?.parameter ? (
+        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+      ) : null}
+      {item?.parameterDescription ? (
+        <span className="text-m-light text-secondary-text">{item.parameterDescription}</span>
+      ) : null}
+    </li>
+  ));
+};

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.ui.json

@@ -0,0 +1,9 @@
+{
+  "content": {
+    "items": {
+      "image": {
+        "ui:field": "picture"
+      }
+    }
+  }
+}

package/src/components/{InvestmentGallery/InvestmentGalleryContent.ts → CarouselInvestmentCard/CarouselInvestmentCardContent.ts}

@@ -1,22 +1,35 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
- * @title Количество колонок в списке
+ * @title Карточка галереи инвестиций
+ */
+
+/**
+ * @title Количество колонок
  * @enumNames [
  *   "1 колонка",
  *   "2 колонки",
  *  ]
  */
-export type CardColumnsMode = 'single' | 'double';
+export type CardColumnsMode = 1 | 2;
 
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
+export interface CardsListItem {
+  /** @title Параметр */
+  parameter?: string;
+  /** @title Описание */
+  parameterDescription?: string;
+}
+export interface CarouselInvestmentCardContent extends HeadlineCommonProps {
   /** @title Доп. описание карточки  */
   additionalDescription?: string;
+  /** @default 1 */
+  columnsMode?: CardColumnsMode;
+  /**
+   * @title Список
+   */
+  cardsList?: CardsListItem[];
   /**
    * @default {
    *   "format": "webp",
@@ -32,23 +45,5 @@ export interface InvestmentGalleryCardTypes extends HeadlineCommonProps {
    * }
    */
   image?: Picture;
-  columnsMode?: CardColumnsMode;
-  /** @title Описание пункта */
-  cardList?: CardListItem[];
-}
-
-export interface CardListItem {
-  /** @title Параметр */
-  parameter?: string;
-  /** @title Описание */
-  parameterDesccription?: string;
-}
-
-/**
- * @title Карточка
- */
-export interface InvestmentGalleryContent extends TitleProps {
-  /** @title Карточки */
-  cards?: InvestmentGalleryCardTypes[];
   version?: BlockVersion;
 }

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselProgramsCard } from './CarouselProgramsCard';
 import { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,7 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -10,7 +6,11 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { VNode } from '../../model/VNode';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -23,34 +23,29 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
 
     return (
-      <BlockWrapper className={`font-sans ${className}`} {...rest}>
-        <div
-          className={`relative bg-white border border-main-stroke min-w-[322px] p-8 ${getHitStyle(
-            isHighlighting,
-          )}`}
-        >
-          {isHighlighting ? renderHitIcon() : null}
-          {icon?.src ? <Img image={icon} /> : null}
-          {title ? (
-            <Heading
-              className="text-primary-text text-center pt-2"
-              headingType="h5"
-              title={title}
-            />
-          ) : null}
-          {button ? <Button className="w-full mt-4" {...button} /> : null}
-          {rows?.length ? (
-            <Foldable
-              renderFoldableSection={({ isUnfolded }) => (
-                <div>
-                  {visibleRows}
-                  <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
-                </div>
-              )}
-              renderFoldButton={rows.length > 1 ? renderFoldButton : null}
-            />
-          ) : null}
-        </div>
+      <BlockWrapper
+        className={`font-sans relative bg-white border border-main-stroke min-w-[322px] p-8 
+        ${getHitStyle(isHighlighting)}
+        ${className}`}
+        {...rest}
+      >
+        {isHighlighting ? renderHitIcon() : null}
+        {icon?.src ? <Img image={icon} /> : null}
+        {title ? (
+          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
+        ) : null}
+        {button ? <Button className="w-full mt-4" {...button} /> : null}
+        {rows.length ? (
+          <Foldable
+            renderFoldableSection={({ isUnfolded }) => (
+              <div>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </div>
+            )}
+            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+          />
+        ) : null}
       </BlockWrapper>
     );
   },