@redneckz/wildless-cms-uni-blocks 0.13.2 → 0.13.4

package/src/components/CarouselCard/CarouselCard.tsx

@@ -14,21 +14,27 @@ const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transp
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className, title, description, button, ...rest }) => (
-    <BlockWrapper className={style('sm:pl-12 sm:pb-9', className)} defaultPadding="p-0" {...rest}>
+    <BlockWrapper
+      className={style('sm:pl-6xl sm:pb-4xl', 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')}>
+        <div
+          className={style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light')}
+        >
           <Headline
             title={title}
             description={description}
             headlineVersion={titleSize}
             align="text-left"
-            isPadding={false}
+            isEmbedded={true}
           />
           {renderButtonsSection([button], {
-            className: 'mt-6xl sm:justify-center',
+            className: 'mt-m sm:mt-6xl sm:justify-center',
             isVertical: true,
           })}
         </div>

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -28,7 +28,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         title={title}
         description={description}
         headlineVersion="XS"
-        isPadding={false}
+        isEmbedded={true}
         align="text-left"
         className="mb-m"
       />

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.fixture.tsx

@@ -17,27 +17,27 @@ const five: Picture = {
 const cardsList = [
   {
     parameter: 'IR',
-    parameterDesccription: 'cтрана эмитента',
+    parameterDescription: 'cтрана эмитента',
   },
   {
     parameter: 'RU',
-    parameterDesccription: 'страна риска',
+    parameterDescription: 'страна риска',
   },
   {
     parameter: '09.03.2022',
-    parameterDesccription: 'дата погашения',
+    parameterDescription: 'дата погашения',
   },
   {
     parameter: 'Ba3',
-    parameterDesccription: 'рейтинг MOODY’S',
+    parameterDescription: 'рейтинг MOODY’S',
   },
   {
     parameter: 'BB-',
-    parameterDesccription: 'рейтинг FITCH',
+    parameterDescription: 'рейтинг FITCH',
   },
   {
     parameter: 'Borets Finance Designated Activity Company',
-    parameterDesccription: 'эмитент',
+    parameterDescription: 'эмитент',
   },
 ];
 

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -14,11 +14,9 @@ import type {
 
 export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
 
-const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
-
 const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  1: 'flex-col',
-  2: 'gap-x-10 flex-wrap',
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
 };
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
@@ -43,7 +41,7 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         }
         backImage={image?.src ? <Img image={image} /> : null}
       >
-        <div className="flex justify-between mb-4">
+        <div className="flex justify-between mb-m">
           {description ? (
             <div className="w-1/3">
               <Text size="text-h6">{description}</Text>
@@ -57,12 +55,9 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         </div>
         {cardsList.length ? (
           <ul
-            className={style(
-              'list-none m-0 p-0 flex gap-y-2',
-              cardColumnsModeStyleMap[columnsMode],
-            )}
+            className={style('list-none m-0 p-0 grid gap-xs', cardColumnsModeStyleMap[columnsMode])}
           >
-            {renderCardList(cardsList, columnsMode)}
+            {renderCardList(cardsList)}
           </ul>
         ) : null}
       </BaseTile>
@@ -70,17 +65,10 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
   ),
 );
 
-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 ? (
-        <div className="pr-2.5">
-          <Text size={getItemListFontSize(columnsMode)}>{item.parameter}</Text>
-        </div>
-      ) : null}
+const renderCardList = (cardsList: CardsListItem[]) =>
+  cardsList.map((item, i) => (
+    <li key={String(i)}>
+      {item?.parameter ? <Text size="text-h6">{item.parameter}</Text> : null}
       {item?.parameterDescription ? (
         <Text size="text-m" font="font-light" color="text-secondary-text">
           {item.parameterDescription}
@@ -88,4 +76,3 @@ const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
       ) : null}
     </li>
   ));
-};

package/src/{ui-kit/LinkButton/LinkButton.tsx → components/CarouselLinks/CarouselLinkButton.tsx}

@@ -1,21 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import { Img } from '../Img/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main px-xl py-lg
   text-l font-light bg-white text-primary-text flex
   justify-between items-center group-hover/link:text-primary-main z-10`;
 
-const LINK_BORDER_CLASS_NAME =
-  'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
+const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-80 top-0';
 
-export type LinkButtonProps = LinkProps & {
+export type CarouselLinkButtonProps = LinkProps & {
   className?: string;
 };
 
-export const LinkButton = JSX<LinkButtonProps>(
+export const CarouselLinkButton = JSX<CarouselLinkButtonProps>(
   ({ text, href = '', target = '', className = '' }) => {
     const link = useLink();
     const adjustedProps = link({ href, target });

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -6,7 +6,7 @@ const link = {
   text: 'Аудиторские заключения',
   href: '#',
 };
-const links = Array(24).fill(link);
+const links = Array(10).fill(link);
 
 const description = `Акционерное общество «Российский Сельскохозяйственный банк»* —
   один из крупнейших банков в России. Был основан в 2000 году в целях развития
@@ -28,7 +28,7 @@ export default {
       additionalDescription={additionalDescription}
       maxLinksCount={MAX_LINKS_COUNT}
       version="secondary"
-      block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
+      block={{ type: 'Carousel', blocks: new Array(1).fill(link).flat() }}
     />
   ),
 };

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -2,11 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 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 { CarouselLinkButton } from './CarouselLinkButton';
 import type { CarouselLinksContent } from './CarouselLinksContent';
-import { style } from '../../utils/style';
 
 export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {
   maxLinksCount?: number;
@@ -28,7 +28,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
     >
       <div className="mr-xl flex-auto">
         <Headline
-          isPadding={false}
+          isEmbedded={true}
           title={title}
           description={description}
           as="h1"
@@ -39,7 +39,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             className="pt-m"
             description={additionalDescription}
             align="text-left"
-            isPadding={false}
+            isEmbedded={true}
           />
         ) : null}
       </div>
@@ -53,21 +53,21 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
 
   return (
     <Carousel
-      className="sm:w-2/3 w-full p-0 sm:p-2xl"
+      className="sm:w-2/3 w-full p-0 sm:p-xs"
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
-      showDots={true}
+      showDots={false}
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className={style('flex flex-wrap self-start sm:w-[672px] w-full sm:mx-5xl')}
+          className={style('flex flex-wrap self-start w-full sm:w-[672px]')}
         >
           {links
             .slice(groupIndex * maxLinksCount, (groupIndex + 1) * maxLinksCount)
             .map((link, index) => (
-              <LinkButton key={String(index)} className="sm:m-2xs" {...link} />
+              <CarouselLinkButton key={String(index)} className="sm:m-2xs" {...link} />
             ))}
         </div>
       ))}

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

@@ -96,12 +96,12 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard className="col-span-12" {...CAROUSEL_RECOMMENDATION_CARD} />
     </div>
   ),
   secondary: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="secondary"
@@ -110,7 +110,7 @@ export default {
     </div>
   ),
   secondaryCenter: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="secondary"
@@ -120,7 +120,7 @@ export default {
     </div>
   ),
   gray: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="gray"
@@ -129,7 +129,7 @@ export default {
     </div>
   ),
   socialMediaWithoutText: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="gray"
@@ -138,7 +138,7 @@ export default {
     </div>
   ),
   cardWithoutList: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="gray"

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -103,12 +103,12 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard className="col-span-12" {...CAROUSEL_RECOMMENDATION_CARD} />
     </div>
   ),
   secondary: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="secondary"
@@ -117,7 +117,7 @@ export default {
     </div>
   ),
   secondaryCenter: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="secondary"
@@ -127,7 +127,7 @@ export default {
     </div>
   ),
   gray: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="gray"
@@ -136,7 +136,7 @@ export default {
     </div>
   ),
   socialMediaWithoutText: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="gray"
@@ -145,7 +145,7 @@ export default {
     </div>
   ),
   cardWithoutList: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <CarouselRecommendationCard
         className="col-span-12"
         version="gray"

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

@@ -27,24 +27,23 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('relative group-data-gray:bg-main-divider/50', className)}
+        className={style('relative group-data-gray:bg-main-divider/50 space-y-m', className)}
         defaultPadding="p-6xl"
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
           <Headline
-            className="mb-xs"
             title={title}
             description={description}
             headlineVersion="S"
-            isPadding={false}
+            isEmbedded={true}
             align={align}
           />
           {items.length ? (
-            <List className="flex flex-col gap-2" items={items} listItemSize="S" />
+            <List className="flex flex-col gap-xs" items={items} listItemSize="S" />
           ) : null}
           {renderIcon(icon)}
-          {socialMedia.length ? <SocialMedia className="mt-5" media={socialMedia} /> : null}
+          {socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
         </LinkWrapper>
       </BlockWrapper>
     );

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -28,7 +28,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('relative min-h-[218px] group-data-gray:bg-main-divider/50', className)}
+        className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
         defaultPadding="p-0"
         {...rest}
       >
@@ -43,7 +43,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
                   title={title}
                   description={description}
                   headlineVersion="S"
-                  isPadding={false}
+                  isEmbedded={true}
                   align={align}
                 />
               ) : null

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

@@ -1,10 +1,10 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 
 const imageMonth: Picture = {
   src: 'monthly-payment.png',
@@ -67,11 +67,6 @@ export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
 
 const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD} />;
 
-const CAROUSEL_TARIFFS_CARD_HIT = (
-  <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD_HIT} />
-);
-
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
-  hit: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD_HIT}</div>,
 };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -66,11 +66,6 @@ export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
 
 const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-4" {...TARIFFS_CARD} />;
 
-const CAROUSEL_TARIFFS_CARD_HIT = (
-  <CarouselTariffsCard className="col-span-4" {...TARIFFS_CARD_HIT} />
-);
-
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD}</div>,
-  hit: <div className="container grid grid-cols-12">{CAROUSEL_TARIFFS_CARD_HIT}</div>,
 };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -10,10 +10,8 @@ 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 { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import { getPaddingStyle } from './getPaddingStyle';
 import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
@@ -21,27 +19,13 @@ export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, Un
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({
-    className = '',
-    title,
-    align = 'text-center',
-    icon,
-    isHighlighting = false,
-    button,
-    cardCells = [],
-    ...rest
-  }) => {
+  ({ className = '', title, align = 'text-center', icon, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper
-        className={style('relative flex flex-col', className)}
-        defaultPadding={getPaddingStyle(isHighlighting)}
-        {...rest}
-      >
-        {isHighlighting ? renderHitIcon() : null}
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
         {renderIconBlock(icon)}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
@@ -64,14 +48,12 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="basis-full self-center">
-    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-  </div>
+  <div className="self-center">{icon?.src || icon?.icon ? <Img image={icon} /> : null}</div>
 );
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
-    className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
+    className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
     onClick={onToggle}
   >
     <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
@@ -83,12 +65,3 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
     />
   </button>
 );
-
-const renderHitIcon = (): VNode => (
-  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />
-    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
-      ХИТ
-    </Paragraph>
-  </div>
-);

package/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -7,7 +7,7 @@ export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode =>
   const { title, description, buttons } = cell;
 
   return (
-    <div key={String(i)} className="py-5 border-b border-main-divider">
+    <div key={String(i)} className="py-lg border-b border-main-divider">
       {title ? (
         <div className="opacity-80">
           <Text size="text-m" color="text-secondary-text">
@@ -16,7 +16,7 @@ export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode =>
         </div>
       ) : null}
       {description ? (
-        <div className="mt-1">
+        <div className="mt-2xs">
           <Text size="text-xl" color="text-primary-text">
             {description}
           </Text>

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -30,11 +30,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
         defaultPadding="p-6xl"
         {...rest}
       >
-        <Heading
-          headingType="h2"
-          className="max-w-[47rem] text-center mb-9 mx-auto"
-          title={title}
-        />
+        <Heading headingType="h2" className="text-center mb-4xl mx-auto" title={title} />
         <ComparisonTableBody
           columns={columns}
           rowHeaders={rowHeaders}
@@ -58,11 +54,11 @@ const renderShowMoreToggleButton = ({
   onClick: () => void;
 }) => (
   <div className="pr-6xl">
-    <div className="flex w-full">
+    <div className="flex gap-m w-full">
       <div className={FIRST_CELL_CLASSES} />
       <button
         onClick={onClick}
-        className="mt-m py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+        className="py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
       >
         <Text size="text-xs" font="font-medium">
           {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}

package/src/components/ComparisonTable/TableCarouselContainer.tsx

@@ -8,7 +8,7 @@ export interface TableCarouselContainerProps {
 }
 
 const carouselContainerClassesMap: Record<TableVersion, string> = {
-  comparison: 'flex gap-4 duration-1000',
+  comparison: 'flex gap-m duration-1000',
   tariff: 'flex flex-grow duration-1000',
 };
 

package/src/components/ComparisonTable/TableCell.mobile.tsx

@@ -26,7 +26,7 @@ const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
   ({ label, description }: CellData, i: number) =>
     (
-      <div key={String(i)} className="flex justify-between text-s py-3.5">
+      <div key={String(i)} className="flex justify-between text-s py-s">
         <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
           {rowHeader}
         </div>

package/src/components/ComparisonTable/TableCell.tsx

@@ -15,7 +15,7 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
     !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'
   } ${isFillGradient ? GRADIENT : ''}`;
 
-  const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
+  const cellClasses = `mx-2xl h-full ${DIVIDER_CLASSES} ${
     isFillGradient && isFirstRow ? 'border-t' : ''
   } ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
 

package/src/components/ComparisonTable/TableColumn.tsx

@@ -68,7 +68,7 @@ const renderToggleButton = ({
   isFillGradient,
   showRow,
 }: RenderToggleButtonProps) => (
-  <div className="mt-5" role="cell">
+  <div className="mt-lg" role="cell">
     <a
       role="link"
       onClick={onToggleColumn}

package/src/components/ComparisonTable/TableRow.tsx

@@ -20,7 +20,7 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  `text-s py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+  `text-s py-2xl ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
     isLastRow ? 'border-b-0' : 'border-solid'
   }`;
 

package/src/components/ComparisonTable/TableRowContainer.tsx

@@ -2,6 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 
 export const TableRowContainer = JSX(({ children }) => (
   <div className="self-start flex flex-col" role="row">
-    <div className="flex">{children}</div>
+    <div className="flex gap-xl">{children}</div>
   </div>
 ));

package/src/components/ComparisonTable/constants.ts

@@ -1,6 +1,6 @@
 export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
 export const BORDER_CLASSES = 'border-gray border-solid border';
 export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
+export const FIRST_CELL_CLASSES = 'w-52';
 export const COLS_LENGTH_FOR_SCROLL = 3;
 export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -31,22 +31,22 @@ export const ContactsBlock = JSX<ContactsBlockProps>(
 );
 
 const renderBlocks = (info: ContactBlockProps[][]) => (
-  <div className="flex grow basis-0">
+  <div className="flex gap-5xl grow basis-0">
     {info.map((column, index) => renderBlocksColumn({ column, index }))}
   </div>
 );
 
 const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
   column ? (
-    <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
+    <div className="flex flex-col gap-xl grow basis-0" key={`col-${String(index)}`}>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
-        <div className="mt-xl first:mt-0" key={String(key)}>
+        <div key={String(key)}>
           <Headline
             title={title}
             description={description}
             headlineVersion="XS"
             align="text-left"
-            isPadding={false}
+            isEmbedded={true}
           />
           {additionalDescription ? (
             <div className="mt-xs opacity-80">