@redneckz/wildless-cms-uni-blocks 0.11.2 → 0.12.3

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/BusinessBlock/BusinessCard.tsx

@@ -28,7 +28,7 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>

package/src/components/ButtonsBlock/ButtonsBlock.example.json

@@ -0,0 +1,14 @@
+{
+  "content": {
+    "buttons": [
+      {
+        "href": "#",
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary",
+        "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
+        "iconRight": { "format": "webp", "size": { "width": 24, "height": 24 } }
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,26 @@
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonsBlock } from './ButtonsBlock';
+
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: '/credit-cards',
+    text: 'Оформить',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: '/details',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 p-4">
+      <ButtonsBlock className="col-span-12" buttons={buttons} />
+    </div>
+  ),
+};

package/src/components/ButtonsBlock/ButtonsBlock.fixture.tsx

@@ -0,0 +1,26 @@
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonsBlock } from './ButtonsBlock';
+
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: '/credit-cards',
+    text: 'Оформить',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: '/details',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 p-4">
+      <ButtonsBlock className="col-span-12" buttons={buttons} />
+    </div>
+  ),
+};

package/src/components/{ButtonBlock/ButtonBlock.tsx → ButtonsBlock/ButtonsBlock.tsx}

@@ -3,12 +3,12 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import type { ButtonBlockContent } from './ButtonBlockContent';
+import type { ButtonsBlockContent } from './ButtonsBlockContent';
 
-interface ButtonBlockProps extends ButtonBlockContent, UniBlockProps {}
+interface ButtonsBlockProps extends ButtonsBlockContent, UniBlockProps {}
 
-export const ButtonBlock = JSX<ButtonBlockProps>(({ button, className, ...rest }) => (
-  <BlockWrapper className={style('!bg-transparent', className)} {...rest}>
-    {renderButtonsSection([button])}
+export const ButtonsBlock = JSX<ButtonsBlockProps>(({ buttons, className, ...rest }) => (
+  <BlockWrapper className={style('!bg-transparent', className)} defaultPadding="p-0" {...rest}>
+    {renderButtonsSection(buttons)}
   </BlockWrapper>
 ));

package/src/components/ButtonsBlock/ButtonsBlock.ui.json

@@ -0,0 +1,14 @@
+{
+  "content": {
+    "buttons": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        },
+        "iconRight": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/ButtonsBlock/ButtonsBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Блок кнопок
+ */
+export interface ButtonsBlockContent {
+  /** @title Кнопки */
+  buttons?: ButtonWithIconProps[];
+}

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.fixture.mobile.tsx

@@ -0,0 +1,18 @@
+import '../../setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CardTransfer } from './CardTransfer';
+
+const button: ButtonProps = {
+  href: '',
+  text: 'Далее',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CardTransfer className="col-span-12" button={button} />
+    </div>
+  ),
+};

package/src/components/CardTransfer/CardTransfer.tsx

@@ -42,9 +42,19 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={style('p-default 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}>
+      <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"
+            headingType="h2"
+            title={title}
+          />
+        ) : null}
+        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput
             name={AMOUNT_KEY}
             valid={!isDisabled}
@@ -55,7 +65,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           {button?.text ? (
             <button
               type="submit"
-              className={style('w-full p-4 mt-6', buttonStyle)}
+              className={style('w-full p-4 mt-5 xl:mt-6', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

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/CarouselCard/CarouselCard.fixture.mobile.tsx

@@ -0,0 +1,28 @@
+import '../../setup-fixture';
+
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselCard } from './CarouselCard';
+import type { CarouselCardContent } from './CarouselCardContent';
+
+const button: ButtonProps = {
+  text: 'Подробнее',
+  href: '/credit-cards',
+  version: 'primary',
+};
+
+export const CARD: CarouselCardContent = {
+  title: 'Контакты и реквизиты',
+  description:
+    'АО «Россельхозбанк» занимает второе место в России по размеру филиальной сети — 66 филиалов во всех регионах страны',
+  button,
+  carouselVersion: 'normal',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselCard className="col-span-4" {...CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,23 +1,24 @@
+import type { CarouselCardContent } from './CarouselCardContent';
+import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { SizeVersion } from '../../model/SizeVersion';
+import { getCardWidth } from './getCardWidth';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Headline } from '../Headline/Headline';
-import type { CarouselCardContent } from './CarouselCardContent';
+import { style } from '../../utils/style';
+import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
-
-const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
-  normal: 'min-w-[970px]',
-  small: 'min-w-[355px]',
-};
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
     <section
-      className={`flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
+      className={style(
+        'flex pb-9 pl-12 sm:p-5 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`} />
@@ -28,11 +29,14 @@ export const CarouselCard = JSX<CarouselCardProps>(
             className="!p-0"
             title={title}
             description={description}
-            headlineVersion="L"
+            headlineVersion={titleSize}
             align="text-left"
             version={version}
           />
-          {renderButtonsSection([button], { className: 'mt-14' })}
+          {renderButtonsSection([button], {
+            className: 'mt-14 sm:justify-center',
+            isVertical: true,
+          })}
         </div>
       </div>
     </section>

package/src/components/CarouselCard/getCardWidth.tsx

@@ -0,0 +1,16 @@
+import type { SizeVersion } from '../../model/SizeVersion';
+import { getColSpan } from '../../utils/getColSpan';
+
+const CARD_WIDTH_MAP: Record<SizeVersion, string> = {
+  normal: 'min-w-[970px]',
+  small: 'min-w-[355px]',
+};
+
+export function getCardWidth(className = '', carouselVersion = 'normal') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 4) {
+    return 'w-[375px]';
+  } else {
+    return CARD_WIDTH_MAP[carouselVersion] as string;
+  }
+}

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

@@ -0,0 +1 @@
+export const titleSize = 'XS';

package/src/components/CarouselCard/titleSize.tsx

@@ -0,0 +1 @@
+export const titleSize = 'L';

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 ? (

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -3,6 +3,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { style } from '../../utils/style';
 import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
@@ -12,33 +13,31 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 const MAX_LINKS_COUNT = 10;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ className = '', additionalDescription, description, links, title, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`flex w-full p-10 overflow-hidden justify-between ${className}`}
-        {...rest}
-      >
-        <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
+  ({ className, additionalDescription, description, links, title, ...rest }) => (
+    <BlockWrapper
+      className={style('flex w-full overflow-hidden justify-between', className)}
+      {...rest}
+    >
+      <div className="flex flex-col max-w-96 pr-m text-white text-xl-light">
+        <Headline
+          isPadding={false}
+          title={title}
+          description={description}
+          as="h1"
+          align="text-left"
+        />
+        {additionalDescription ? (
           <Headline
-            isPadding={false}
-            title={title}
-            description={description}
-            as="h1"
+            className="pt-s"
+            description={additionalDescription}
             align="text-left"
+            isPadding={false}
           />
-          {additionalDescription ? (
-            <Headline
-              className="pt-6"
-              isPadding={false}
-              description={additionalDescription}
-              align="text-left"
-            />
-          ) : null}
-        </div>
-        {links?.length ? renderLinks(links) : null}
-      </BlockWrapper>
-    );
-  },
+        ) : null}
+      </div>
+      {links?.length ? renderLinks(links) : null}
+    </BlockWrapper>
+  ),
 );
 
 const renderLinks = (links: LinkProps[]) => {
@@ -47,6 +46,7 @@ const renderLinks = (links: LinkProps[]) => {
   return (
     <Carousel
       className="min-w-[832px] w-[832px]"
+      version=""
       isBlur={false}
       isCyclic={true}
       itemCount={itemCount}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,17 +1,18 @@
-import { JSX } from '@redneckz/uni-jsx';
+import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
+
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { Picture } from '../../model/Picture';
 import { Text } from '../../ui-kit/Text/Text';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
-import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
@@ -41,10 +42,11 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           align,
           className,
         )}
+        defaultPadding="p-0"
         version={version}
         {...rest}
       >
-        <LinkWrapper className="p-6" href={href} target={target}>
+        <LinkWrapper className="p-s" href={href} target={target}>
           {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
@@ -52,7 +54,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           {renderAdditionalDescription(additionalDescription)}
         </LinkWrapper>
         {renderButtonsSection([button], {
-          className: style('p-6 pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
+          className: style('p-s pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
           isVertical: isFullWidth,
         })}
       </BlockWrapper>
@@ -63,9 +65,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
 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={image} />
-    ) : null}
+    {image?.icon ? <Img className={`w-8 h-8 min-w-8 mb-5`} image={image} /> : null}
   </div>
 );
 

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -13,7 +13,11 @@ export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, U
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, list = [], href, target, ...rest }) => {
     return (
-      <BlockWrapper className={style('border border-gray', className)} {...rest}>
+      <BlockWrapper
+        className={style('border border-gray', className)}
+        defaultPadding="p-0"
+        {...rest}
+      >
         <LinkWrapper className="flex" href={href} target={target}>
           <div className="w-[200px] min-w-[200px] self-center">
             {icon?.icon ? <Img image={icon} /> : null}

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -29,10 +29,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative box-border p-default group-data-gray:bg-main-divider/50',
+          'relative box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
+        defaultPadding="p-default"
         {...rest}
       >
         <LinkWrapper href={href} target={target}>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -30,10 +30,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
+          'relative min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
+        defaultPadding="p-s"
         version={version}
         {...rest}
       >

package/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -9,7 +9,7 @@ export interface CarouselRichTextCardProps extends CarouselRichTextCardContent,
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
   ({ className = '', __html, richVersion = 'striped', ...rest }) => (
-    <BlockWrapper className={style('p-9 border border-gray h-full min-w-96', className)} {...rest}>
+    <BlockWrapper className={style('border border-gray h-full min-w-96', className)} {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   ),

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -28,11 +28,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={style(
-          'relative border border-gray flex flex-col',
-          getPaddingStyle(isHighlighting),
-          className,
-        )}
+        className={style('relative border border-gray flex flex-col', className)}
+        defaultPadding={getPaddingStyle(isHighlighting)}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 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 { ComparisonTableBody } from './ComparisonTableBody';
 import type { ComparisonTableContent } from './ComparisonTableContent';
 import { FIRST_CELL_CLASSES } from './constants';
@@ -23,7 +24,11 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
 
     return (
-      <BlockWrapper className={`py-12 pl-12 overflow-hidden relative ${className}`} {...rest}>
+      <BlockWrapper
+        className={style('overflow-hidden relative', className)}
+        defaultPadding="p-default"
+        {...rest}
+      >
         <Heading
           headingType="h2"
           className="max-w-[47rem] text-center mb-9 mx-auto"