@redneckz/wildless-cms-uni-blocks 0.11.3 → 0.12.4

package/mobile/src/ui-kit/Heading/Heading.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import type { HeadingProps, HeadingType } from './HeadingProps';
 import { headingTag } from './headingTag';
 
@@ -17,7 +18,9 @@ export const Heading = JSX<HeadingProps>(
     const Tag = headingTag(as);
 
     return (
-      <Tag className={`font-sans m-0 ${styles[headingType]} ${className}`}>{title || children}</Tag>
+      <Tag className={style('font-sans m-0', styles[headingType], className)}>
+        {title || children}
+      </Tag>
     );
   },
 );

package/mobile/src/ui-kit/Icon/RoundedIcon.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { Picture } from '../../model/Picture';
+import { style } from '../../utils/style';
 import { Icon } from './Icon';
 import type { IconBgVersion } from './IconProps';
-import { style } from '../../utils/style';
-import type { Picture } from '../../model/Picture';
 
 export interface RoundedIconProps extends Picture {
   iconBgVersion?: IconBgVersion;
@@ -20,7 +20,7 @@ export const RoundedIcon = JSX<RoundedIconProps>(
     const height = String(size?.height || 24);
 
     return icon ? (
-      <div className={style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion])}>
+      <div className={style('rounded-icon p-2.5', iconBgStyles[iconBgVersion])}>
         <Icon {...rest} width={width} height={height} name={icon} />
       </div>
     ) : null;

package/mobile/src/ui-kit/Img/Img.tsx

@@ -1,5 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ImgInner } from './ImgInner';
+import { Icon } from '../Icon/Icon';
+import { ImgAsPicture } from './ImgAsPicture';
 import type { ImageProps } from './ImgProps';
 
-export const Img = JSX<ImageProps>((props) => <ImgInner {...props} isMobile={true} />);
+export const Img = JSX<ImageProps>(
+  ({ className = '', image, imageClassName = '', pathPrefix, ...iconProps }) => {
+    if (!image?.src && !image?.icon) {
+      return null;
+    }
+
+    return image.icon ? (
+      <Icon
+        className={className}
+        imageClassName={imageClassName}
+        iconVersion={image?.iconVersion}
+        name={image.icon}
+        {...iconProps}
+      />
+    ) : (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image}
+        pathPrefix={pathPrefix}
+      />
+    );
+  },
+);

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Router, useRouter } from '../../hooks/useRouter';
 import type { ImgSource, Picture } from '../../model/Picture';
 import { adjustHref } from '../../utils/adjustHref';
+import { style } from '../../utils/style';
 import { isURL, joinPath } from '../../utils/url';
 import type { ImageProps } from './ImgProps';
 
@@ -9,13 +10,11 @@ const sourcesComparator = (a: Picture, b: Picture) =>
   a?.media && b?.media ? a.media - b.media : 0;
 
 export const ImgAsPicture = JSX<ImageProps>(
-  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
+  ({ className = '', image, imageClassName = '', pathPrefix }) => {
     const router = useRouter();
 
-    const pictureStyles = isMobile ? 'flex' : 'flex-none';
-
     return (
-      <picture className={`${pictureStyles} ${className}`}>
+      <picture className={className}>
         {image?.sources?.length
           ? image.sources
               .filter((_) => _?.src)
@@ -31,38 +30,26 @@ export const ImgAsPicture = JSX<ImageProps>(
               ))
           : null}
         {image?.src
-          ? renderImg(
-              { ...image, src: adjustSrc(router, pathPrefix)(image.src) },
-              imageClassName,
-              isMobile,
-            )
+          ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName)
           : null}
       </picture>
     );
   },
 );
 
-const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
-  const style = {
-    width: image.size?.width ? `${image.size?.width}px` : '100%',
-    height: image.size?.height ? `${image.size?.height}px` : 'auto',
-  };
-
-  const title = image.title || '';
-  const alt = image.alt || image.title;
-  const imgStyle = isMobile ? 'm-auto' : 'm-0';
-
-  return (
-    <img
-      src={image.src}
-      className={`${imgStyle} ${imageClassName}`}
-      alt={alt}
-      title={title}
-      style={style}
-      {...image.size}
-    />
-  );
-};
+const renderImg = (image: Picture, imageClassName = '') => (
+  <img
+    src={image.src}
+    className={style('object-contain', imageClassName)}
+    alt={image.alt || image.title}
+    title={image.title || ''}
+    style={{
+      width: image.size?.width ? `${image.size?.width}px` : '100%',
+      height: image.size?.height ? `${image.size?.height}px` : 'auto',
+    }}
+    {...image.size}
+  />
+);
 
 const adjustSrc = (router: Router, pathPrefix?: string) => (src: string | undefined) =>
   src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -8,6 +8,5 @@ export interface ImageContent {
 export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
-  isMobile?: boolean;
   pathPrefix?: string;
 }

package/mobile/src/ui-kit/List/List.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
+import type { ListItemSize } from './ListContent';
 import { ListItem } from './ListItem';
-import type { ListItemSize, ListProps } from './ListProps';
+import type { ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   S: 'text-l-light',

package/mobile/src/ui-kit/List/ListContent.ts

@@ -1,4 +1,11 @@
+/**
+ * @title Размер пунктов списка
+ * @enumNames ["Маленький", "Средний", "Большой"]
+ */
+export type ListItemSize = 'S' | 'M' | 'L';
+
 export interface ListContent {
   /** @title Список */
   items?: string[];
+  listItemSize?: ListItemSize;
 }

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import type { ListItemSize } from './ListProps';
+import type { ListItemSize } from './ListContent';
 
 /**
  * @title Параметры элемента списка

package/mobile/src/ui-kit/List/ListProps.ts

@@ -1,12 +1,6 @@
 import type { BulletsProps } from '../../model/Bullets';
 import type { ListContent } from './ListContent';
 
-/**
- * @title Размер пунктов списка
- * @enumNames ["Маленький", "Средний", "Большой"]
- */
-export type ListItemSize = 'S' | 'M' | 'L';
-
 /**
  * @title Содержимое списка
  */
@@ -16,5 +10,4 @@ export type ListProps = ListContent &
     className?: string;
     /** @title Отступ */
     hasIndent?: boolean;
-    listItemSize?: ListItemSize;
   };

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -4,7 +4,7 @@ import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObs
 import { mapChildren } from '../../utils/mapChildren';
 import { style } from '../../utils/style';
 import { getContainerHeight } from './getContainerHeight';
-import type { SwipeContainerProps } from './SwipeListControlProps';
+import type { SwipeListContainerContent } from './SwipeListControlContent';
 import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
@@ -14,12 +14,14 @@ type SwipeListItemWidthAuto = 0;
 /**
  * @title Список
  */
-interface SwipeListContainerProps extends SwipeContainerProps {
+interface SwipeListContainerProps extends SwipeListContainerContent {
   className?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
+  gap?: number;
+  padding?: number;
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
 }

package/mobile/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { style } from '../../utils/style';
 import { SwipeListContainer } from './SwipeListContainer';
+import type { SwipeListControlContent } from './SwipeListControlContent';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import type { SwipeListControlProps } from './SwipeListControlProps';
 import { useSwipeListScroll } from './useSwipeListScroll';
 
 const DEFAULT_GAP = 14;
@@ -14,9 +15,18 @@ const DEFAULT_GAP = 14;
  */
 const DEFAULT_PADDING = 16;
 
+interface SwipeListControlProps extends SwipeListControlContent {
+  className?: string;
+  version?: BlockVersion;
+  gap?: number;
+  padding?: number;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
-    className = '',
+    className,
+    version,
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
@@ -24,7 +34,6 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     children,
     onVisibleIndicesChange,
     listType = 'horizontal-list',
-    version,
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;
 

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlContent.ts

@@ -1,11 +1,24 @@
-import type { UniBlockContent } from '../../model/JSXBlock';
-import type { SwipeContainerProps } from './SwipeListControlProps';
+/**
+ * @title Вид
+ * @enumNames ["Горизонтальный", "Вертикальный"]
+ */
+export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+
+/**
+ * @title Минимальная высота
+ * @enumNames ['Стандартная', 'Маленькая']
+ */
+export type ContainerMinHeight = 866 | 720;
+
+export interface SwipeListContainerContent {
+  listType?: SwipeListControlType;
+  minHeight?: ContainerMinHeight;
+}
 
 /**
  * @title Swipe-контроллер
  */
-export type SwipeListControlContent = UniBlockContent &
-  SwipeContainerProps & {
-    /** @title Точки-индикаторы */
-    showDots?: boolean;
-  };
+export interface SwipeListControlContent extends SwipeListContainerContent {
+  /** @title Точки-индикаторы */
+  showDots?: boolean;
+}

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { style } from '../../utils/style';
-import type { SwipeListControlType } from './SwipeListControlProps';
+import type { SwipeListControlType } from './SwipeListControlContent';
 
 const containerStyles: Record<SwipeListControlType, string> = {
   'horizontal-list': 'mx-auto mt-5 w-fit',

package/mobile/src/ui-kit/Tags/Tags.tsx

@@ -1,24 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import type { TagsContent } from './TagsContent';
 
-export interface TagsProps extends TagsContent {
-  /** @hidden */
+interface TagsProps extends TagsContent {
   className?: string;
 }
 
-export const Tags = JSX<TagsProps>((props) => {
-  const { tags, className = '' } = props;
-
-  return tags?.length ? (
-    <div className={`flex flex-wrap gap-2 ${className}`}>{tags.map(renderTag)}</div>
-  ) : null;
-});
+export const Tags = JSX<TagsProps>(({ className, tags }) =>
+  tags?.length ? (
+    <div className={style('flex flex-wrap gap-xs', className)} role="list">
+      {tags.map(renderTag)}
+    </div>
+  ) : null,
+);
 
 const renderTag = (tag: string, key: number) => (
-  <span
+  <div
+    className="py-2 px-2.5 border-solid border rounded-md border-gray"
     key={String(key)}
-    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-gray"
+    role="listitem"
   >
-    {tag}
-  </span>
+    <Text size="text-m-light">{tag}</Text>
+  </div>
 );

package/mobile/src/utils/avg.ts

@@ -0,0 +1,3 @@
+import { sum } from './sum';
+
+export const avg = (items: number[] = []) => (items?.length ? sum(items) / items.length : 0);

package/mobile/src/utils/deviation.ts

@@ -0,0 +1,4 @@
+import { avg } from './avg';
+
+export const deviation = (items: number[]): number =>
+  items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.11.3",
+  "version": "0.12.4",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -4,7 +4,6 @@ import { CorporateLeadAPI } from '../../api/CorporateLeadAPI';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { style } from '../../utils/style';
 import { ApplicationFormAcquiring } from './ApplicationFormAcquiring';
 import { ApplicationFormBusinessCard } from './ApplicationFormBusinessCard';
 import type { ApplicationFormContent } from './ApplicationFormContent';
@@ -39,7 +38,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   }, []);
 
   return (
-    <BlockWrapper className={style('font-sans bg-white p-default pb-9', className)} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <div className="container max-w-[978px]">
         {title ? <Heading headingType="h3" title={title} className="text-center mb-8" /> : null}
         {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })}

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -9,7 +9,7 @@ interface ResponseNotificationProps {
 
 export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseType }) => {
   const responseOK = responseType === 'OK';
-  const backgroundColor = responseOK ? 'bg-responce-ok' : 'bg-responce-fail';
+  const backgroundColor = responseOK ? 'bg-ok' : 'bg-fail';
 
   return (
     <div className={`flex items-center mt-5 p-5 rounded-md ${backgroundColor}`}>

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -3,6 +3,7 @@ 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 { style } from '../../utils/style';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -15,7 +16,11 @@ interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
+    <BlockWrapper
+      className={style('flex flex-col items-center', className)}
+      defaultPadding="p-default"
+      {...rest}
+    >
       {title ? (
         <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}

package/src/components/Bonus/Bonus.tsx

@@ -14,7 +14,7 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={`p-default pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <div className="container">
         <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
         <div className="flex flex-wrap w-full mt-9">

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -24,7 +24,8 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={`font-sans text-primary-text bg-white p-default flex flex-col text-center ${className}`}
+      className={style('flex flex-col text-center', className)}
+      defaultPadding="p-default"
       {...rest}
     >
       <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -7,13 +7,11 @@ import { BusinessCard } from './BusinessCard';
 
 export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps {}
 
-export const BusinessBlock = JSX<BusinessBlockProps>(
-  ({ className = '', title, cards, ...rest }) => (
-    <BlockWrapper className={`p-default 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}
-      </div>
-    </BlockWrapper>
-  ),
-);
+export const BusinessBlock = JSX<BusinessBlockProps>(({ className, title, cards, ...rest }) => (
+  <BlockWrapper className={className} defaultPadding="p-default" {...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}
+    </div>
+  </BlockWrapper>
+));

package/src/components/ButtonsBlock/ButtonsBlock.tsx

@@ -8,7 +8,7 @@ import type { ButtonsBlockContent } from './ButtonsBlockContent';
 interface ButtonsBlockProps extends ButtonsBlockContent, UniBlockProps {}
 
 export const ButtonsBlock = JSX<ButtonsBlockProps>(({ buttons, className, ...rest }) => (
-  <BlockWrapper className={style('!bg-transparent', className)} {...rest}>
+  <BlockWrapper className={style('!bg-transparent', className)} defaultPadding="p-0" {...rest}>
     {renderButtonsSection(buttons)}
   </BlockWrapper>
 ));

package/src/components/Calculator/Calculator.tsx

@@ -42,7 +42,8 @@ export const Calculator = JSX<CalculatorProps>(
 
     return (
       <BlockWrapper
-        className={style('box-border overflow-hidden relative w-100', className)}
+        className={style('box-border overflow-hidden relative', className)}
+        defaultPadding="p-0"
         {...rest}
       >
         <div className="bg-white">

package/src/components/CardTransfer/CardTransfer.tsx

@@ -42,7 +42,11 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={style('p-default flex flex-col items-center', className)} {...rest}>
+      <BlockWrapper
+        className={style('flex flex-col items-center', className)}
+        defaultPadding="p-default"
+        {...rest}
+      >
         {title ? (
           <Heading
             className="pb-5 xl:pb-9 self-start xl:self-center"

package/src/components/Carousel/Carousel.tsx

@@ -45,14 +45,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
 
     return (
-      <BlockWrapper
-        className={style(
-          getPaddingStyle(isPadding),
-          'group-data-secondary:bg-primary-main group-data-secondary:text-white',
-          className,
-        )}
-        {...rest}
-      >
+      <BlockWrapper className={className} defaultPadding={getPaddingStyle(isPadding)} {...rest}>
         <div className={style(getAlignStyle(isAlignCenter), 'relative max-w-full')}>
           <SwipeListContainer
             containerRef={containerRef}

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -16,7 +16,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
     const isActive = orderNumber === activeIndex;
 
     return (
-      <BlockWrapper className="flex h-[485px]">
+      <BlockWrapper className="flex h-[485px]" defaultPadding="p-0">
         {isActive ? (
           <div className="relative flex items-center w-full">
             <Headline

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -7,6 +7,7 @@ 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 { style } from '../../utils/style';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
 
 export interface CarouselCatalogCardProps extends CarouselCatalogCardContent, UniBlockProps {}
@@ -19,7 +20,10 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
-      className={`border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`}
+      className={style(
+        'border box-border border-gray min-w-[392px] h-full flex flex-col justify-left',
+        className,
+      )}
       {...rest}
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -13,7 +13,7 @@ export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlo
 export const CarouselEventCard = JSX<CarouselEventCardProps>(
   ({ className = '', icon, title, description, href, target, ...rest }) => {
     return (
-      <BlockWrapper className={style('w-[365px]', className)} {...rest}>
+      <BlockWrapper className={style('w-[365px]', className)} defaultPadding="p-0" {...rest}>
         <LinkWrapper className="flex flex-col" href={href} target={target}>
           {icon?.icon ? <Img image={icon} /> : null}
           {icon?.src ? <Img image={icon} /> : null}

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 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 { style } from '../../utils/style';
-import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
   CardsListItem,
@@ -23,9 +23,10 @@ const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
   ({
+    className,
+    padding,
     additionalDescription,
     cardsList = [],
-    className = '',
     columnsMode = 1,
     description,
     image,
@@ -34,17 +35,21 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
   }) => (
     <BlockWrapper
       className={style(
-        'box-border text-left p-9 w-[697px]',
+        'box-border text-left w-[697px]',
         'border border-solid border-gray group-data-secondary:border-white/50',
         className,
       )}
+      defaultPadding="p-0"
       {...rest}
     >
       <BaseTile
+        className="h-full"
+        padding={padding}
+        defaultPadding="p-m"
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
         }
-        backImage={image?.src ? <Img className="m-0" image={image} /> : null}
+        backImage={image?.src ? <Img image={image} /> : null}
       >
         <div className="flex justify-between mb-4">
           {description ? (