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

package/mobile/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/mobile/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/mobile/src/components/CarouselProductCard/alignTextStyle.tsx

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

package/mobile/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/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.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/mobile/src/components/CarouselTariffsCard/getPaddingStyle.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/mobile/src/components/ComparisonTable/HeaderCell.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/mobile/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/mobile/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/mobile/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>
   );
 }

package/mobile/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -15,20 +15,20 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
     const fourRates: CurrencyInformation[] = topNRates(currencies, 4);
 
     return (
-      <BlockWrapper className={className} {...rest}>
-        <div className="flex flex-row flex-grow-0 justify-between mb-8">
+      <BlockWrapper className={style('space-y-3xl', className)} {...rest}>
+        <div className="flex flex-row flex-grow-0 justify-between space-y-lg">
           <Heading
             headingType="h4"
             title={'Курс обмена валют в ' + officeName}
-            className="whitespace-pre-wrap text-h4 mb-5"
+            className="whitespace-pre-wrap text-h4"
           />
-          <div className="pl-11">
+          <div className="pl-6xl">
             <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
               {actuality}
             </Text>
           </div>
         </div>
-        <div className="flex flex-row pt-4 text-left">
+        <div className="flex flex-row pt-m text-left">
           {fourRates.length > 0 ? (
             <table className={style('h-fit w-fit', className)}>
               <thead>

package/mobile/src/components/ExchangeRateOffice/renderCurrencies.tsx

@@ -29,7 +29,7 @@ export const renderCurrencyRow = ({
           {title ? (
             <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />
           ) : null}
-          <span className="ml-2">{title}</span>
+          <span className="ml-xs">{title}</span>
         </div>
       </td>
       {renderCurrency(buyPrice, buyDifference)}
@@ -44,7 +44,7 @@ const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(
 
 const renderCurrency = (price?: number, difference?: number) => {
   return (
-    <td className="pt-4 pl-11">
+    <td className="pt-m pl-5xl">
       <div>{formatCurrency(price)}</div>
       <div
         className={style(
@@ -60,7 +60,7 @@ const renderCurrency = (price?: number, difference?: number) => {
 
 const renderOffice = (price?: number, officeName = '') => {
   return (
-    <td className="pt-4 pl-11">
+    <td className="pt-m pl-5xl">
       <div>{formatCurrency(price)}</div>
       <div className="font-normal text-sm text-green">{officeName}</div>
     </td>

package/mobile/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -2,7 +2,7 @@ import { Text } from '../../ui-kit/Text/Text';
 
 export const renderTableHeader = (title: string) => {
   return (
-    <th className="pl-11">
+    <th className="pl-5xl">
       <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
         {title}
       </Text>

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -4,7 +4,7 @@ import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
-const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
+const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-5xl`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -33,17 +33,17 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const currency = exchangeCurrencyItem?.currency?.currency;
 
   return (
-    <tr key={currency} className="pb-1 text-h6">
-      <td className="pt-4">
+    <tr key={currency} className="pb-2xs text-h6">
+      <td className="pt-m">
         <div className="flex items-center">
           {currency ? (
             <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
           ) : null}
-          <span className="ml-2">{currency}</span>
+          <span className="ml-xs">{currency}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
+      <td className="pt-m pl-5xl">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
+      <td className="pt-m pl-5xl">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
     </tr>
   );
 };

package/mobile/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -7,11 +7,11 @@ interface CurrentLocationProps {
 }
 
 export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
-  <div className={`flex ${className}`}>
+  <div className={`flex gap-s ${className}`}>
     <Img image={{ icon: 'GpsIcon' }} width="24" height="24" />
-    <div className="ml-3">
-      {address ? <p className="text-primary-main  m-0 mb-1 text-l">{address}</p> : null}
-      <p className="text-secondary-text m-0 text-m">Курс указан для заданного офиса</p>
+    <div className="space-y-2xs">
+      {address ? <p className="text-primary-main text-l">{address}</p> : null}
+      <p className="text-secondary-text text-m">Курс указан для заданного офиса</p>
     </div>
   </div>
 ));

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -31,7 +31,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
           className="h-full"
           title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
         >
-          <div className="flex gap-xxl">
+          <div className="flex gap-6xl">
             <div>
               {currencyRates ? (
                 <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />

package/mobile/src/components/Footer/Contacts.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { Text } from '../../ui-kit/Text/Text';
 import type { ContactGroup, ContactInfo } from './FooterContent';
+import { style } from '../../utils/style';
 
 export interface ContactsProps {
   className?: string;
@@ -10,7 +11,7 @@ export interface ContactsProps {
 }
 
 export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
-  <div className={className}>
+  <div className={style('space-y-xl', className)}>
     {items?.length ? items.map(renderContactsGroup) : null}
     {hasButton ? (
       <Button
@@ -26,20 +27,20 @@ export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }
 ));
 
 const renderContactsGroup = (item: ContactGroup, i: number) => (
-  <div className="mb-6" key={String(i)}>
-    <div className="mb-4">
+  <div className="space-y-m" key={String(i)}>
+    <div className="">
       <Text size="text-l" font="font-medium">
         {item?.title}
       </Text>
     </div>
-    <div>{item.items?.map(renderContact)}</div>
+    <div className="space-y-m">{item.items?.map(renderContact)}</div>
   </div>
 );
 
 const renderContact = (item: ContactInfo, index: number) => (
-  <div className="mb-4" key={String(index)}>
+  <div className="space-y-2xs" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="mt-1 text-s font-light text-secondary-text">{item.description}</div>
+    <div className="text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 

package/mobile/src/components/Footer/Footer.tsx

@@ -38,7 +38,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       <SocialMedia className="mb-4" media={socialMedia} />
       {mobileApps?.map(renderButton)}
       <HorizontalNavigation
-        className="pt-4 pb-7 border-y border-main-divider"
+        className="pt-m pb-2xl border-y border-main-divider"
         title={horizontalNavigationTitle}
         links={relatedEnterprises}
       />

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

package/mobile/src/components/Header/Header.tsx

@@ -27,7 +27,7 @@ export const Header = JSX<HeaderMobileProps>(
 
     return (
       <BlockWrapper tag="header" defaultPadding="" version={version} {...rest}>
-        <div className="container px-4 py-1 box-border">
+        <div className="container px-4 py-2xs box-border">
           <HeaderTop
             bgColor={bgColor}
             logo={logo}

package/mobile/src/components/Header/HeaderBurger.tsx

@@ -48,7 +48,7 @@ const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-s mb-4 hover:text-primary-main">
       {icon ? <Img className="text-primary-main pr-1" image={icon} width="24" height="24" /> : null}
-      <span className="font-medium pl-0.5">{text}</span>
+      <span className="font-medium pl-3xs">{text}</span>
     </a>
   );
 };

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -46,12 +46,12 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
     );
 
     return (
-      <nav className="relative mt-3 flex items-center justify-between">
-        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-3 mt-2">
+      <nav className="relative mt-s flex items-center justify-between">
+        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-s mt-xs">
           {subItems.map((_, i) => (
             <HeaderSubMenuItem
               key={String(i)}
-              className={style('ml-8 first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
+              className={style('ml-3xl first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
               active={_ === activeSubItem}
               observerOptions={observerOptions}
               onVisibilityChange={subItemsVisibilityHandlers[i]}

package/mobile/src/components/Headline/Headline.tsx

@@ -29,7 +29,7 @@ export const Headline = JSX<HeadlineProps>(
     return (
       <BlockWrapper
         className={className}
-        defaultPadding={isPadding ? 'p-default' : ''}
+        defaultPadding={isPadding ? 'p-6xl' : ''}
         version={version}
         isTheme={isTheme}
         {...rest}

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -15,25 +15,25 @@ export const headlineVersionStyles: Record<
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
     descriptionWeight: 'font-normal',
-    descriptionStyle: 'mt-m',
+    descriptionStyle: 'mt-xl',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-s',
+    descriptionStyle: 'mt-m',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-s',
+    descriptionStyle: 'mt-m',
   },
   M: {
     title: { headingType: 'h3', as: 'h2' },
     descriptionSize: 'text-xl',
     descriptionWeight: 'font-light',
-    descriptionStyle: 'mt-text',
+    descriptionStyle: 'mt-s',
   },
   S: {
     title: { headingType: 'h4', as: 'h2' },

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -19,7 +19,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
   }) => (
     <BlockWrapper
       className={style('relative', 'grid grid-cols-12', gapStyles[gap], className)}
-      defaultPadding={isPadding ? 'p-default' : ''}
+      defaultPadding={isPadding ? 'p-6xl' : ''}
       version={version}
       isTheme={isTheme}
       {...rest}

package/mobile/src/components/HorizontalLayout/gapStyles.ts

@@ -1,11 +1,11 @@
 import type { GapVersion } from './HorizontalLayoutContent';
 
 export const gapStyles: Record<GapVersion, string> = {
-  XXL: 'gap-12',
-  XL: 'gap-10',
-  L: 'gap-8',
-  M: 'gap-4',
-  S: 'gap-2',
-  XS: 'gap-1',
+  XXL: 'gap-6xl',
+  XL: 'gap-5xl',
+  L: 'gap-3xl',
+  M: 'gap-m',
+  S: 'gap-xs',
+  XS: 'gap-2xs',
   '': '',
 };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -23,13 +23,13 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={style('box-border overflow-hidden relative px-0', className)}
-        defaultPadding="p-default"
+        className={style('box-border overflow-hidden relative px-0 space-y-2xl', className)}
+        defaultPadding="p-6xl"
         {...rest}
       >
-        {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}
+        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
         {insuranceTabs?.length > 1 ? (
-          <div className="p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md">
+          <div className="p-xs bg-secondary-light w-fit mx-auto rounded-md">
             {insuranceTabs.map((item, i) =>
               renderNavButton({
                 title: item?.title,

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -74,8 +74,8 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
 
   return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-12">
-      <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
+    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-6xl">
+      <div className={`w-full flex flex-nowrap gap-3.5 pb-6xl ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
           renderNavButton({
             slide,