@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.13

package/src/components/Carousel/Carousel.tsx

@@ -1,15 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
-import type { CarouselContent } from './CarouselContent';
+import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
-import { renderControlButtons } from './renderControlButtons';
+import type { CarouselContent } from './CarouselContent';
+import type { BlockDef } from '../../model/ContentPageDef';
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -18,36 +21,36 @@ export interface CarouselProps extends CarouselContent, UniBlockProps {
 
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
-    className = '',
+    className,
     itemCount,
     visibleItemCount = 0,
-    isBlur = true,
-    isCyclic = false,
+    noCardBorder,
+    isAlignCenter,
+    showDots,
     arrowsPadded = true,
-    isPadding = true,
-    showDots = false,
-    isAlignCenter = false,
-    showArrows = true,
     isGap = true,
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
     const count = itemCount || childBlocks?.length;
 
-    const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
-    const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
-    const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
+    const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] =
+      useCarouselControls(
+        {
+          itemCount: count,
+          visibleItemCount,
+        },
+        Math.floor(visibleItemCount / 2),
+      );
 
-    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
-      itemCount: count,
-      isCyclic,
-    });
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({ itemCount: count });
     const [dotsActiveIndex] = scroll.visibleIndicesRange;
+    // TODO Remove
     const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
 
     return (
-      <BlockWrapper className={className} defaultPadding={getPaddingStyle(isPadding)} {...rest}>
-        <div className={style(getAlignStyle(isAlignCenter), 'relative max-w-full')}>
+      <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+        <div className={style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full')}>
           <SwipeListContainer
             containerRef={containerRef}
             visibleItemCount={visibleItemCount}
@@ -57,30 +60,36 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
           >
             {renderChildren({
               ...rest,
-              renderProps: isBankHistoryCarousel
-                ? (block, options) =>
-                    renderBlock(block, options, {
-                      blocksLength: childBlocks?.length,
-                      activeIndex: activeIndex,
-                    })
-                : renderBlock,
+              renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) =>
+                renderBlock(block, options, {
+                  className: style(
+                    'h-full min-w-80 sm:min-w-96',
+                    noCardBorder
+                      ? ''
+                      : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+                  ),
+                  blockIndex,
+                  isActive: activeIndex === blockIndex,
+                }),
             })}
           </SwipeListContainer>
-          {renderControlButtons({
-            showArrows,
-            showDots,
-            scrollButtonsProps: {
-              scroll,
-              arrowsPadded,
-              isBlur,
-              onScrollLeft: decreaseActiveIndex,
-              onScrollRight: increaseActiveIndex,
-              hasEdgeBlocks: isBankHistoryCarousel,
-              activeIndex,
-              itemCount: count,
-            },
-            dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
-          })}
+          <CarouselScrollButtons
+            scroll={scroll}
+            arrowsPadded={arrowsPadded}
+            onScrollLeft={decreaseActiveIndex}
+            onScrollRight={increaseActiveIndex}
+            hasEdgeBlocks={isBankHistoryCarousel}
+            activeIndex={activeIndex}
+            itemCount={count}
+          />
+          {showDots ? (
+            <SwipeListControlDots
+              containerRef={containerRef}
+              activeIndex={dotsActiveIndex}
+              dotCount={count}
+              listType="horizontal-list"
+            />
+          ) : null}
         </div>
       </BlockWrapper>
     );
@@ -100,8 +109,3 @@ Carousel.childrenTypes = [
   'CarouselInvestmentCard',
   'CarouselEventCard',
 ];
-
-const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-6xl' : '');
-
-const getAlignStyle = (isAlignCenter: boolean): string =>
-  isAlignCenter ? 'flex justify-center' : '';

package/src/components/Carousel/CarouselContent.ts

@@ -9,18 +9,12 @@ export type CarouselContent = UniBlockContent & {
    * @enumNames ["auto", "1", "2", "3", "4"]
    */
   visibleItemCount?: 0 | 1 | 2 | 3 | 4;
-  /** @title Добавление блюра на стрелках*/
-  isBlur?: boolean;
   /** @title Добавление отступа на стрелках */
   arrowsPadded?: boolean;
-  /** @title Цикличность */
-  isCyclic?: boolean;
-  /** @title Внутренний отступ  */
-  isPadding?: boolean;
   /** @title Выравнивать по центру  */
   isAlignCenter?: boolean;
-  /** @title отображение кнопок-стрелок*/
-  showArrows?: boolean;
-  /** @title отсупы между карточками*/
+  /** @title Отступы между карточками */
   isGap?: boolean;
+  /** @title Не показывать контур на карточках */
+  noCardBorder?: boolean;
 };

package/src/components/Carousel/CarouselScrollButtons.tsx

@@ -1,33 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
-import { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import type { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
 
 export interface CarouselScrollButtonsProps {
   scroll: SwipeListScroll;
-  arrowsPadded: boolean;
-  isBlur: boolean;
-  onScrollLeft: () => void;
-  onScrollRight: () => void;
-  hasEdgeBlocks?: boolean;
   activeIndex: number;
   itemCount: number;
+  arrowsPadded?: boolean;
+  hasEdgeBlocks?: boolean;
+  onScrollLeft: () => void;
+  onScrollRight: () => void;
 }
 
 const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-40';
-const blurBaseStyle = 'absolute top-0 bottom-0 z-40 w-[84px] pointer-events-none';
+const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
 
 export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
   ({
     scroll,
+    activeIndex,
+    itemCount,
     arrowsPadded,
-    isBlur,
+    hasEdgeBlocks,
     onScrollLeft,
     onScrollRight,
-    hasEdgeBlocks,
-    activeIndex,
-    itemCount,
   }) => {
     const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
 
@@ -53,17 +51,17 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
     }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
 
     return (
-      <div>
-        {renderBlur(isBlur, scroll)}
+      <div className="hidden @lg:block">
+        {renderBlur(scroll)}
         {canMoveLeft ? (
           <ScrollLeftButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'left-8' : 'left-0')}
+            className={style(scrollButtonStyle, arrowsPadded ? 'left-1 @lg:left-8' : 'left-0')}
             onClick={handleScrollLeft}
           />
         ) : null}
         {canMoveRight ? (
           <ScrollRightButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'right-8' : 'right-0')}
+            className={style(scrollButtonStyle, arrowsPadded ? 'right-1 @lg:right-8' : 'right-0')}
             onClick={handleScrollRight}
           />
         ) : null}
@@ -72,14 +70,20 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
   },
 );
 
-const renderBlur = (isBlur: boolean, scroll: SwipeListScroll) =>
-  isBlur ? (
-    <div>
-      {scroll.canScrollLeft ? (
-        <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
-      ) : null}
-      {scroll.canScrollRight ? (
-        <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
-      ) : null}
-    </div>
-  ) : null;
+const renderBlur = (scroll: SwipeListScroll) => (
+  <div>
+    {scroll.canScrollLeft ? (
+      <div
+        className={style(
+          blurBaseStyle,
+          'left-0 bg-opacity-from-white group-data-secondary:bg-none',
+        )}
+      />
+    ) : null}
+    {scroll.canScrollRight ? (
+      <div
+        className={style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none')}
+      />
+    ) : null}
+  </div>
+);

package/src/components/Carousel/renderControlButtons.tsx

@@ -1,24 +1,22 @@
-import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
 import {
   SwipeListControlDots,
   SwipeListControlDotsProps,
 } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
+import { CarouselScrollButtons, CarouselScrollButtonsProps } from './CarouselScrollButtons';
 
 interface renderControlButtonsProps {
-  showArrows: boolean;
   showDots: boolean;
   scrollButtonsProps: CarouselScrollButtonsProps;
   dotsProps: SwipeListControlDotsProps;
 }
 
 export const renderControlButtons = ({
-  showArrows,
   showDots,
   scrollButtonsProps,
   dotsProps,
 }: renderControlButtonsProps) => {
   return [
-    showArrows ? <CarouselScrollButtons key="0" {...scrollButtonsProps} /> : null,
+    <CarouselScrollButtons key="0" {...scrollButtonsProps} />,
     showDots ? <SwipeListControlDots key="1" {...dotsProps} listType="horizontal-list" /> : null,
   ];
 };

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.tsx

@@ -1,6 +1,5 @@
 import '../../setup-fixture';
 
-import { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
 import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
@@ -10,13 +9,9 @@ export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
     "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
 };
 
-const options: BlockRendererOptions = {
-  key: 'card-0',
-};
-
-const commonProps = { ...BANK_HISTORY_CARD, options };
+const commonProps = { ...BANK_HISTORY_CARD };
 
 export default {
   default: <CarouselBankHistoryCard {...BANK_HISTORY_CARD} />,
-  active: <CarouselBankHistoryCard activeIndex={0} {...commonProps} />,
+  active: <CarouselBankHistoryCard isActive={true} blockIndex={0} {...commonProps} />,
 };

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.mobile.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
@@ -9,7 +8,7 @@ interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, U
 
 export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
   ({ title, description, className }) => (
-    <BlockWrapper className={style(className)} defaultPadding="p-6xl">
+    <BlockWrapper className={className} defaultPadding="p-6xl">
       <Headline
         headlineVersion="S"
         title={title}

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -6,80 +6,47 @@ import { Headline } from '../Headline/Headline';
 import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
 interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {
-  blocksLength?: number;
-  activeIndex?: number;
+  blockIndex?: number;
+  isActive?: boolean;
 }
 
 export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
-  ({ title, description, blocksLength = 0, activeIndex, options }) => {
-    const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
-    const isActive = orderNumber === activeIndex;
-
-    return (
-      <BlockWrapper className="flex h-[485px]" defaultPadding="p-0">
+  ({ className, title, description, blockIndex = 0, isActive, ...rest }) => (
+    <BlockWrapper
+      className={style(
+        'relative flex h-[485px]',
+        isActive ? 'w-[440px] z-10' : 'w-[340px]',
+        className,
+      )}
+      defaultPadding="p-0"
+      {...rest}
+    >
+      <div className={style('basis-full self-center', getBackColor(blockIndex))}>
         {isActive ? (
-          <div className="relative flex items-center w-full">
-            <Headline
-              headlineVersion="M"
-              title={title}
-              description={description}
-              align="text-left"
-              className={style(
-                'absolute z-10 h-[385px] w-[440px] p-3xl text-white shadow-dark-blue',
-                getActiveBlockPosition(orderNumber, blocksLength),
-                getBackgroundColor(orderNumber),
-              )}
-            />
-          </div>
+          <Headline
+            headlineVersion="M"
+            title={title}
+            description={description}
+            padding="p-3xl"
+            align="text-left"
+            className="h-96 text-white shadow-dark-blue"
+          />
         ) : (
-          <div className="flex w-full items-center justify-center">
-            <div
-              className={style(
-                'flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]',
-                getBackgroundColor(orderNumber),
-              )}
-            >
-              <span className={getTextColor(orderNumber)}>{title}</span>
-            </div>
+          <div className="h-[300px] flex justify-center items-center font-mohave text-title-large tracking-[-0.03em]">
+            <span className={getTextColor(blockIndex)}>{title}</span>
           </div>
         )}
-      </BlockWrapper>
-    );
-  },
+      </div>
+    </BlockWrapper>
+  ),
 );
 
-const getBackgroundColor = (orderNumber: number) => {
-  const division = orderNumber % 3;
-  switch (division) {
-    case 0:
-      return 'bg-primary-main';
-    case 1:
-      return 'bg-green-light';
-    case 2:
-      return 'bg-yellow-light';
-    default:
-      return 'bg-primary-main';
-  }
-};
-
-const getTextColor = (orderNumber: number) => {
-  const division = orderNumber % 3;
-  switch (division) {
-    case 1:
-      return 'gradient-color-text-on-yellow';
-    case 2:
-      return 'gradient-color-text-on-yellow';
-    default:
-      return 'gradient-color-text-on-green';
-  }
-};
+const getBackColor = (blockIndex: number) =>
+  ['bg-primary-main', 'bg-green-light', 'bg-yellow-light'][blockIndex % 3];
 
-const getActiveBlockPosition = (orderNumber: number, blocksLength: number) => {
-  if (orderNumber === 0) {
-    return 'left-9';
-  } else if (orderNumber === blocksLength - 1) {
-    return 'right-9';
-  } else {
-    return '-left-[25px]';
-  }
-};
+const getTextColor = (blockIndex: number) =>
+  [
+    'gradient-color-text-on-green',
+    'gradient-color-text-on-yellow',
+    'gradient-color-text-on-yellow',
+  ][blockIndex % 3];

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

@@ -22,7 +22,7 @@ export const CARD: CarouselCardContent = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <CarouselCard className="col-span-4" {...CARD} />
+      <CarouselCard className="col-span-12" {...CARD} />
     </div>
   ),
 };

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

@@ -47,7 +47,7 @@ export default {
   ),
   mini: (
     <div className="container grid grid-cols-12">
-      <CarouselCard {...CARD_MINI} />
+      <CarouselCard className="col-span-4" {...CARD_MINI} />
     </div>
   ),
 };

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,44 +1,38 @@
-import type { CarouselCardContent } from './CarouselCardContent';
-import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { getCardWidth } from './getCardWidth';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import type { CarouselCardContent } from './CarouselCardContent';
 import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full hidden sm:block';
+const layerBaseStyle = 'z-10 border border-solid w-full h-full';
+const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
 
 export const CarouselCard = JSX<CarouselCardProps>(
-  ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
-    <section
-      className={style(
-        'flex pl-6xl sm:p-lg border-box h-full sm:max-w-[375px]',
-        getCardWidth(className, 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`} />
-        <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
-        <div className="relative h-full bg-white z-10 p-10 border border-solid border-green-light">
+  ({ className, title, description, button, ...rest }) => (
+    <BlockWrapper className={style('sm:pl-12 sm:pb-9', className)} defaultPadding="p-0" {...rest}>
+      <div className="relative">
+        <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
+        <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
+        <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
+        <div className={style(layerBaseStyle, 'relative p-10 bg-white border-green-light')}>
           <Headline
-            className="!p-0"
             title={title}
             description={description}
             headlineVersion={titleSize}
             align="text-left"
-            version={version}
+            isPadding={false}
           />
           {renderButtonsSection([button], {
-            className: 'mt-14 sm:justify-center',
+            className: 'mt-6xl sm:justify-center',
             isVertical: true,
           })}
         </div>
       </div>
-    </section>
+    </BlockWrapper>
   ),
 );

package/src/components/CarouselCard/constants.ts

@@ -1,8 +1,8 @@
 import type { SizeVersion } from '../../model/SizeVersion';
 
 export const cardStyleMap: Record<SizeVersion, string> = {
-  normal: 'min-w-[100%] justify-center items-center m-7 col-span-12',
-  small: 'min-w-auto justify-center items-center m-9 col-span-4',
+  normal: 'min-w-full justify-center items-center m-2xl col-span-12',
+  small: 'min-w-auto justify-center items-center m-4xl col-span-4',
 };
 
 export const cardWidthMap: Record<SizeVersion, string> = {

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -4,9 +4,9 @@ import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { Headline } from '../Headline/Headline';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
 
 export interface CarouselCatalogCardProps extends CarouselCatalogCardContent, UniBlockProps {}
@@ -19,10 +19,8 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
-      className={style(
-        'border box-border border-gray p-6xl sm:p-7 h-full flex flex-col justify-left gap-m',
-        className,
-      )}
+      className={style('flex flex-col justify-left gap-m', className)}
+      defaultPadding="p-6xl sm:p-7"
       {...rest}
     >
       {image?.src ? <Img className="flex justify-center" image={image} /> : null}

package/src/components/CarouselEventCard/CarouselEventCard.fixture.tsx

@@ -16,8 +16,10 @@ export const CAROUSEL_EVENT_CARD: CarouselEventCardContent = {
   icon: image,
 };
 
-const CAROUSEL_EVENT = <CarouselEventCard {...CAROUSEL_EVENT_CARD} />;
-
 export default {
-  default: <div className="container grid grid-cols-12">{CAROUSEL_EVENT}</div>,
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselEventCard className="col-span-4" {...CAROUSEL_EVENT_CARD} />
+    </div>
+  ),
 };

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -5,7 +5,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { Text } from '../../ui-kit/Text/Text';
-import { style } from '../../utils/style';
 import type { CarouselEventCardContent } from './CarouselEventCardContent';
 
 export interface CarouselEventCardProps extends CarouselEventCardContent, UniBlockProps {}
@@ -13,15 +12,15 @@ 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)} defaultPadding="p-0" {...rest}>
+      <BlockWrapper className={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}
           {title ? (
-            <Heading headingType="h6" as="h4" className="text-left pt-s mb-xs" title={title} />
+            <Heading headingType="h6" as="h4" className="text-left mt-s ml-s mb-xs" title={title} />
           ) : null}
           {description ? (
-            <div className="mb-4">
+            <div className="ml-s mb-m">
               <Text font="font-light" size="text-m" color="text-secondary-text">
                 {description}
               </Text>

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -33,15 +33,7 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style(
-        'box-border text-left w-[697px]',
-        'border border-solid border-gray group-data-secondary:border-white/50',
-        className,
-      )}
-      padding="p-0"
-      {...rest}
-    >
+    <BlockWrapper className={style('text-left', className)} padding="p-0" {...rest}>
       <BaseTile
         className="h-full"
         defaultPadding="p-xl"