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

package/src/components/Calculator/useRefinancingCalculatorParams.ts

@@ -0,0 +1,136 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_REFINANCING_CALCULATOR_PARAMS, REFINANCING_CALC_DEFAULT_DIR } from './constants';
+import { getLimitRangeByKeys } from './rangeHelpers';
+import { useCalculatorParams } from './useCalculatorParams';
+import { RefinancingCalculatorParamsViewSettings } from './CalculatorContent';
+import { getRefinancingCalculatorLimitParams } from './getRefinancingCalculatorLimitParams';
+import { getRefinancingCalculatorRateParams } from './getRefinancingCalculatorRateParams';
+import { getMonthlyPayment } from './getMonthlyPayment';
+
+export interface CommonRefinancingParams {
+  isSalaryClient: boolean;
+  isInsurance: boolean;
+  isExtraMoney: boolean;
+}
+export interface RefinancingCalculatorSourceBookRateParams extends CommonRefinancingParams {
+  minSum: number;
+  maxSum: number;
+  minSumOld: number;
+  maxSumOld: number;
+  minSumExtra: number;
+  maxSumExtra: number;
+  minMonths: number;
+  maxMonths: number;
+  rate: number;
+}
+
+export interface RefinancingCalculatorSourceBookLimitParams extends CommonRefinancingParams {
+  minSum: number;
+  maxSum: number;
+  minSumOld: number;
+  maxSumOld: number;
+  minSumExtra: number;
+  maxSumExtra: number;
+  minMonths: number;
+  maxMonths: number;
+}
+
+export interface RefinancingCalculatorUserInputParams extends CommonRefinancingParams {
+  isAnnuity: boolean;
+  moneyValue: number;
+  oldMonthlyPayment: number;
+  moneyExtra: number;
+  monthsValue: number;
+}
+
+export interface RefinancingCalculatorParams
+  extends RefinancingCalculatorSourceBookRateParams,
+    RefinancingCalculatorUserInputParams {
+  monthlyPayment: number;
+  benefit: number;
+}
+
+export type RefinancingCalculatorData = {
+  rateRows?: RefinancingCalculatorSourceBookRateParams[];
+  limitRows?: RefinancingCalculatorSourceBookLimitParams[];
+};
+
+export const useRefinancingCalculatorParams = (
+  userInputParams: RefinancingCalculatorUserInputParams,
+  sourceBookDir?: string,
+  paramsViewSettings?: RefinancingCalculatorParamsViewSettings,
+): RefinancingCalculatorParams => {
+  let { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
+  const data = useCalculatorParams<RefinancingCalculatorData>(
+    sourceBookDir || REFINANCING_CALC_DEFAULT_DIR,
+  );
+  const rateRows = data?.rateRows || [DEFAULT_REFINANCING_CALCULATOR_PARAMS];
+  const limitRows = data?.limitRows || [];
+  const sourceBookLimitParams = getRefinancingCalculatorLimitParams({
+    limitRows,
+    userInputParams,
+    paramsViewSettings,
+  });
+
+  const { minSum, maxSum } = getLimitRangeByKeys(
+    ['minSum', 'maxSum'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  const { minSumOld, maxSumOld } = getLimitRangeByKeys(
+    ['minSumOld', 'maxSumOld'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  const { minSumExtra, maxSumExtra } = getLimitRangeByKeys(
+    ['minSumExtra', 'maxSumExtra'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  const { minMonths, maxMonths } = getLimitRangeByKeys(
+    ['minMonths', 'maxMonths'],
+    sourceBookLimitParams,
+    rateRows,
+  );
+
+  moneyValue = clamp(moneyValue, minSum, maxSum);
+  oldMonthlyPayment = clamp(oldMonthlyPayment, minSumOld, maxSumOld);
+  moneyExtra = clamp(moneyExtra, minSumExtra, maxSumExtra);
+  monthsValue = clamp(monthsValue, minMonths, maxMonths);
+
+  const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
+    rateRows,
+    userInputParams,
+    paramsViewSettings,
+    moneyValue,
+    monthsValue,
+    oldMonthlyPayment,
+    moneyExtra,
+  });
+  const { rate } = refinancingCalculatorSourceBookRateParams;
+  const monthlyPayment = getMonthlyPayment(rate, userInputParams);
+
+  const benefit = userInputParams.oldMonthlyPayment - monthlyPayment;
+
+  return useMemo(
+    () => ({
+      ...refinancingCalculatorSourceBookRateParams,
+      ...userInputParams,
+      minSum,
+      maxSum,
+      minMonths,
+      maxMonths,
+      moneyValue,
+      monthsValue,
+      oldMonthlyPayment,
+      moneyExtra,
+      monthlyPayment,
+      benefit,
+    }),
+    [userInputParams, data],
+  );
+};

package/src/components/CardTransfer/CardTransfer.tsx

@@ -44,7 +44,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     return (
       <BlockWrapper
         className={style('flex flex-col items-center', className)}
-        defaultPadding="p-default"
+        defaultPadding="p-6xl"
         {...rest}
       >
         {title ? (

package/src/components/Carousel/Carousel.tsx

@@ -101,7 +101,7 @@ Carousel.childrenTypes = [
   'CarouselEventCard',
 ];
 
-const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default' : '');
+const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-6xl' : '');
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';

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

@@ -9,7 +9,7 @@ interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, U
 
 export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
   ({ title, description, className }) => (
-    <BlockWrapper className={style(className)} defaultPadding="p-default">
+    <BlockWrapper className={style(className)} defaultPadding="p-6xl">
       <Headline
         headlineVersion="S"
         title={title}

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -25,7 +25,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
               description={description}
               align="text-left"
               className={style(
-                'absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue',
+                'absolute z-10 h-[385px] w-[440px] p-3xl text-white shadow-dark-blue',
                 getActiveBlockPosition(orderNumber, blocksLength),
                 getBackgroundColor(orderNumber),
               )}

package/src/components/CarouselCard/CarouselCard.tsx

@@ -9,13 +9,13 @@ import { titleSize } from './titleSize';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full hidden sm:block';
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (
     <section
       className={style(
-        'flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]',
+        'flex pl-6xl sm:p-lg border-box h-full sm:max-w-[375px]',
         getCardWidth(className, carouselVersion),
         className,
       )}

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -3,9 +3,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Headline } from '../Headline/Headline';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
@@ -21,25 +20,22 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={style(
-        'border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left',
+        'border box-border border-gray p-6xl sm:p-7 h-full flex flex-col justify-left gap-m',
         className,
       )}
       {...rest}
     >
-      {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
-      {title ? (
-        <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
-      ) : null}
-      {description ? (
-        <div className="mb-4">
-          <Paragraph size="text-m" align="text-left" font="font-light">
-            {description}
-          </Paragraph>
-        </div>
-      ) : null}
+      {image?.src ? <Img className="flex justify-center" image={image} /> : null}
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion="XS"
+        isPadding={false}
+        align="text-left"
+      />
       {colors?.length ? (
-        <div className="flex mb-4 text-secondary-text">
-          <div className="mr-1.5">
+        <div className="flex text-secondary-text">
+          <div className="mr-xs">
             <Text size="text-s" align="text-left" font="font-light">
               Цвета:
             </Text>
@@ -52,7 +48,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
           {price}&nbsp;₽
         </Text>
       ) : null}
-      {renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })}
+      {renderButtonsSection([button], { buttonClassName: 'w-full' })}
     </BlockWrapper>
   ),
 );

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -18,7 +18,7 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
           {icon?.icon ? <Img image={icon} /> : null}
           {icon?.src ? <Img image={icon} /> : null}
           {title ? (
-            <Heading headingType="h6" as="h4" className="text-left pt-3 mb-2" title={title} />
+            <Heading headingType="h6" as="h4" className="text-left pt-s mb-xs" title={title} />
           ) : null}
           {description ? (
             <div className="mb-4">

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -44,10 +44,10 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     >
       <BaseTile
         className="h-full"
-        defaultPadding="p-m"
+        defaultPadding="p-xl"
         padding={padding}
         title={
-          title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
+          title ? <Heading headingType="h4" as="h3" className="mb-m z-10" title={title} /> : null
         }
         backImage={image?.src ? <Img image={image} /> : null}
       >

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -18,7 +18,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
       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 font-light">
+      <div className="flex flex-col max-w-96 pr-xl text-white text-xl font-light">
         <Headline
           isPadding={false}
           title={title}
@@ -28,7 +28,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
         />
         {additionalDescription ? (
           <Headline
-            className="pt-s"
+            className="pt-m"
             description={additionalDescription}
             align="text-left"
             isPadding={false}

package/src/components/CarouselProductCard/CarouselProductCard.fixture.tsx

@@ -53,7 +53,7 @@ export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
   icon: image,
   button: buttonPrimary,
   isDotted,
-  isFullWidth: false,
+  isButtonFullWidth: false,
 };
 
 const CAROUSEL_PRODUCT_CARD = <CarouselProductCard {...PRODUCT_CARD} />;
@@ -63,7 +63,7 @@ const CAROUSEL_PRODUCT_CARD_SECONDARY = (
     version="secondary"
     isDotted={true}
     button={buttonPrimaryIcon}
-    isFullWidth={false}
+    isButtonFullWidth={false}
   />
 );
 const CAROUSEL_PRODUCT_CARD_SMALL = <CarouselProductCard {...PRODUCT_CARD_SMALL} />;

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -13,13 +13,14 @@ 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 { alignTextStyle } from './alignTextStyle';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
     additionalDescription,
-    align = 'text-center',
+    align = alignTextStyle,
     button = {},
     className = '',
     description,
@@ -27,7 +28,9 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     href,
     icon,
     isDotted = true,
-    isFullWidth = true,
+    isButtonFullWidth = true,
+    isImageFullWidth = false,
+    isTopPosition = false,
     items = [],
     target,
     title,
@@ -46,60 +49,61 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
         version={version}
         {...rest}
       >
-        <LinkWrapper className="p-s" href={href} target={target}>
-          {renderImage(icon)}
+        <LinkWrapper className="p-m flex flex-col gap-xs" href={href} target={target}>
           {renderCardTitle(headlineSmallVersion, title)}
-          {renderDescription(description, title)}
+          {renderDescription(description)}
           {renderItems(items, isDotted, version)}
           {renderAdditionalDescription(additionalDescription)}
+          {renderImage(icon, isImageFullWidth, isTopPosition)}
         </LinkWrapper>
         {renderButtonsSection([button], {
-          className: style('p-s pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
-          isVertical: isFullWidth,
+          className: style('p-m pt-0', isButtonFullWidth ? '' : 'self-center'),
+          isVertical: isButtonFullWidth,
         })}
       </BlockWrapper>
     );
   },
 );
 
-const renderImage = (image?: Picture) => (
-  <div className="flex justify-center">
-    {image?.src ? <Img className="mb-5" image={image} /> : null}
-    {image?.icon ? <Img className={`w-8 h-8 min-w-8 mb-5`} image={image} /> : null}
+const renderImage = (image?: Picture, isImageFullWidth?: boolean, isTopPosition?: boolean) => (
+  <div
+    className={style(
+      'flex gap-lg',
+      isTopPosition ? 'order-first' : 'order-last',
+      !isImageFullWidth ? 'justify-center' : '',
+    )}
+  >
+    {image?.src ? <Img className="shrink-0" image={image} /> : null}
+    {image?.icon ? (
+      <Img
+        className={style('shrink-0', !isImageFullWidth ? 'w-8 h-8 min-w-8' : '')}
+        image={image}
+      />
+    ) : null}
   </div>
 );
 
 const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? (
-    <div>
-      <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text>
-    </div>
-  ) : null;
+  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
 
-const renderDescription = (description?: string, title?: string) =>
-  description ? (
-    <div className={title ? 'mt-2' : ''}>
-      <Paragraph size="text-l">{description}</Paragraph>
-    </div>
-  ) : null;
+const renderDescription = (description?: string) =>
+  description ? <Paragraph size="text-l">{description}</Paragraph> : null;
 
 const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
-    <div className="mt-auto">
-      <Text
-        size="text-m"
-        font="font-light"
-        color="text-secondary-text group-data-secondary:text-white/80"
-      >
-        {additionalDescription}
-      </Text>
-    </div>
+    <Text
+      size="text-m"
+      font="font-light"
+      color="text-secondary-text group-data-secondary:text-white/80"
+    >
+      {additionalDescription}
+    </Text>
   ) : null;
 
 const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
   items?.length ? (
     <List
-      className={style('max-w-[308px] mt-2', version === 'primary' ? '!text-secondary-text' : '')}
+      className={style('text-s', version === 'primary' ? '!text-secondary-text' : '')}
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
       listItemSize="S"

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -27,8 +27,10 @@ export type CarouselProductCardContent = UniBlockContent &
     /** @title Список */
     items?: ListProps[];
     align?: TextAlign;
-    /**
-     * @title По всей ширине
-     */
-    isFullWidth?: boolean;
+    /** @title  Изображение на всю ширину */
+    isImageFullWidth?: boolean;
+    /**  @title  Картинка сверху над текстом */
+    isTopPosition?: boolean;
+    /** @title Кнопка по всей ширине */
+    isButtonFullWidth?: boolean;
   };

package/src/components/CarouselProductCard/alignTextStyle.mobile.tsx

@@ -0,0 +1 @@
+export const alignTextStyle = 'text-left';

package/src/components/CarouselProductCard/alignTextStyle.tsx

@@ -0,0 +1 @@
+export const alignTextStyle = 'text-center';

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -18,17 +18,17 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style('border border-gray', className)}
-        defaultPadding="p-lg sm:p-0"
+        defaultPadding="p-3xl sm:p-0"
         {...rest}
       >
         <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
           <div className="min-w-[200px] flex justify-center">
             {icon?.src || icon?.icon ? <Img image={icon} /> : null}
           </div>
-          <div className="sm:px-3 py-xl">
-            {title ? <Heading className="mb-2 sm:mb-3.5" headingType="h6" title={title} /> : null}
+          <div className="sm:px-s p-5xl">
+            {title ? <Heading className="mb-xs sm:mb-m" headingType="h6" title={title} /> : null}
             {list.length ? (
-              <div className="flex flex-col gap-2 sm:gap-3">{list?.map(renderList)}</div>
+              <div className="flex flex-col gap-xs sm:gap-s">{list?.map(renderList)}</div>
             ) : null}
           </div>
         </LinkWrapper>
@@ -38,7 +38,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-1 sm:flex-col">
+  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-2xs sm:flex-col">
     {_.title ? (
       <Text size="text-l" font={cardTitleFont}>
         {_.title}

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

@@ -33,12 +33,12 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
-        defaultPadding="p-default"
+        defaultPadding="p-6xl"
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
           <Headline
-            className="mb-2"
+            className="mb-xs"
             title={title}
             description={description}
             headlineVersion="S"

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -34,7 +34,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
           BORDER_STYLE,
           className,
         )}
-        defaultPadding="p-s"
+        defaultPadding="p-m"
         version={version}
         {...rest}
       >

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

@@ -1,2 +1,2 @@
 export const getPaddingStyle = (isHighlighting = false): string =>
-  isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный
+  isHighlighting ? 'p-6xl mt-6' : 'mt-6 p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -27,7 +27,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     return (
       <BlockWrapper
         className={style('overflow-hidden relative', className)}
-        defaultPadding="p-default"
+        defaultPadding="p-6xl"
         {...rest}
       >
         <Heading

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

@@ -16,21 +16,16 @@ export type HeaderCellProps = ImageContent &
 
 const headingStyle = (isFillGradient = false): string => (isFillGradient ? 'text-white' : '');
 const subtitleStyle = (isFillGradient = false): string =>
-  `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+  `text-s mb-m ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
 
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (
-    <div role="columnheader">
+    <div className="space-y-4" role="columnheader">
       {icon ? (
-        <Img
-          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-          image={icon}
-          width="63"
-          height="63"
-        />
+        <Img className="h-16 w-16 min-w-16 min-h-16" image={icon} width="64" height="64" />
       ) : null}
       {image?.src && (
-        <div className="mb-3.5">
+        <div>
           <Img image={image} />
         </div>
       )}

package/src/components/ComparisonTable/TableCell.tsx

@@ -34,7 +34,7 @@ const descriptionStyle = (isFillGradient = false): string =>
   `text-s opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
 
 const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient?: boolean) => (
-  <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
+  <div key={String(i)} className="first:pt-2xl pt-xl last:pb-2xl">
     {label ? <h4 className={labelStyle(isFillGradient)}>{label}</h4> : null}
     {description ? <div className={descriptionStyle(isFillGradient)}>{description}</div> : null}
   </div>

package/src/components/ComparisonTable/TableColumn.tsx

@@ -28,7 +28,7 @@ export const TableColumn = JSX<TableColumnProps>(
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
 
     return (
-      <div className={`border border-gray rounded-md p-4 mb-3.5 ${gradientClassName}`} role="row">
+      <div className={`border border-gray rounded-md p-m mb-m ${gradientClassName}`} role="row">
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (
@@ -46,7 +46,7 @@ export const TableColumn = JSX<TableColumnProps>(
             href={header.link.href}
             target={header.link.target}
             version={buttonVersion}
-            className="text-s font-medium mt-4 py-[11px]"
+            className="text-s font-medium mt-m py-s"
           >
             {header.link.text}
           </Button>

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -20,7 +20,7 @@ export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className, contacts, info, version = 'secondary', ...rest }) => (
     <BlockWrapper
       className={style('flex', className)}
-      defaultPadding="p-default"
+      defaultPadding="p-6xl"
       version={version}
       {...rest}
     >
@@ -40,7 +40,7 @@ const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
   column ? (
     <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
-        <div className="mt-6 first:mt-0" key={String(key)}>
+        <div className="mt-xl first:mt-0" key={String(key)}>
           <Headline
             className="!p-0"
             title={title}
@@ -49,13 +49,13 @@ const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
             align="text-left"
           />
           {additionalDescription ? (
-            <div className="mt-1.5 opacity-80">
+            <div className="mt-xs opacity-80">
               <Paragraph size="text-m" font="font-light">
                 {additionalDescription}
               </Paragraph>
             </div>
           ) : null}
-          {button?.href ? <Button className="mt-6" {...button} /> : null}
+          {button?.href ? <Button className="mt-xl" {...button} /> : null}
         </div>
       ))}
     </div>

package/src/components/ContentPage/ContentPage.tsx

@@ -83,7 +83,7 @@ ContentPage.slots = () => ['header', 'footer'];
 function renderLikeControl() {
   return (
     <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
-      <LikeControl className="rounded-tl-lg sticky bottom-0 pointer-events-auto" />
+      <LikeControl className="rounded-tl-3xl sticky bottom-0 pointer-events-auto" />
     </div>
   );
 }