@redneckz/wildless-cms-uni-blocks 0.13.1 → 0.13.3

package/mobile/src/components/Calculator/renderCalculatorBlock.tsx

@@ -15,8 +15,8 @@ export const renderCalculatorBlock = (block: CalculatorBlockDef, i: number) => {
       className="box-border relative bg-white flex shrink-0 self-start basis-full"
       role="listitem"
     >
-      <div className="box-border p-9 w-full">
-        {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
+      <div className="box-border p-4xl w-full space-y-xl">
+        {block?.title ? <Heading className="text-center" title={block.title} /> : null}
         <EmbeddedBlock {...block} />
       </div>
     </section>

package/mobile/src/components/Calculator/renderInitialFeeInput.tsx

@@ -21,7 +21,6 @@ export function renderInitialFeeInput(
 
   return (
     <InputRange
-      className="mt-7"
       title={title}
       items={[
         `От ${toLocalNumberFormat(0)(minSum)} рублей`,

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -49,7 +49,7 @@ export const CardTransfer = JSX<CardTransferProps>(
       >
         {title ? (
           <Heading
-            className="pb-5 xl:pb-9 self-start xl:self-center"
+            className="pb-lg xl:pb-4xl self-start xl:self-center"
             headingType="h2"
             title={title}
           />
@@ -65,7 +65,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           {button?.text ? (
             <button
               type="submit"
-              className={style('w-full p-4 mt-5 xl:mt-6', buttonStyle)}
+              className={style('w-full p-m mt-lg', buttonStyle)}
               disabled={isDisabled}
               {...link(button)}
             >

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

@@ -15,7 +15,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
         description={description}
         align="text-left"
         className="text-primary-text"
-        isPadding={false}
+        isEmbedded={true}
       />
     </BlockWrapper>
   ),

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

@@ -14,18 +14,22 @@ 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-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',

package/mobile/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/mobile/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/mobile/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/mobile/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,7 +53,7 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
 
   return (
     <Carousel
-      className="sm:w-2/3 w-full p-0 sm:p-2xl"
+      className="@container-normal sm:w-2/3 w-full p-0 sm:p-2xl"
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
@@ -67,7 +67,7 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
           {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/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.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/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -71,7 +71,7 @@ const renderIconBlock = (icon?: Picture) => (
 
 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>
@@ -85,8 +85,8 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
 );
 
 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" />
+  <div className="absolute -top-6 -right-4 h-14 w-14 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="24" height="24" />
     <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
       ХИТ
     </Paragraph>

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

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

package/mobile/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/mobile/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/mobile/src/components/ComparisonTable/TableCell.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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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">

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -39,11 +39,11 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
           data-theme={colorPalette}
         >
           {slots?.header ? (
-            <div className="relative z-10 mb-5 shadow-[0_8px_32px_0px_#00000014]">
+            <div className="relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]">
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}
             </div>
           ) : null}
-          <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-1">
+          <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
             {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>

package/mobile/src/components/DepositFiltration/DepositFiltration.tsx

@@ -54,7 +54,7 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
 
     return (
       <BlockWrapper
-        className={style(className)}
+        className={style('space-y-2xs', className)}
         defaultPadding="p-0"
         version="transparent"
         {...rest}

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -22,20 +22,20 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   return null;
 };
 
-const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
+const getErrorBlockStyle = (text: string) => (text ? 'py-20' : 'mb-16 mt-24');
 
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button, ...rest }) => (
     <BlockWrapper
-      className={style('flex flex-col justify-center items-center', className)}
-      defaultPadding={getErrorBlockStyle(button?.text as string)}
+      className={style('flex flex-col gap-lg justify-center items-center', className)}
+      defaultPadding={style('py-xs', getErrorBlockStyle(button?.text as string))}
       version="transparent"
       {...rest}
     >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
-      {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
+      {title ? <Heading headingType="h1" className="text-left" title={title} /> : null}
       {subtitle ? (
-        <div className="mb-7 max-w-[613px] text-center">
+        <div className="max-w-[613px] text-center">
           <Text size="text-xl" font="font-light">
             {subtitle}
           </Text>

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

@@ -23,8 +23,8 @@ export const renderCurrencyRow = ({
   sellOfficeName,
 }: CurrencyInformation) => {
   return (
-    <tr key={title} className="pb-1 text-h6">
-      <td className="pt-4">
+    <tr key={title} className="pb-2xs text-h6">
+      <td className="pt-m">
         <div className="flex items-center">
           {title ? (
             <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />

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

@@ -42,14 +42,9 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   return (
     <tr key={currency} className="pb-2xs text-h6">
       <td className="pt-m">
-        <div className="flex items-center">
+        <div className="flex items-center gap-xs">
           {currency ? (
-            <Img
-              image={{ icon: CURRENCY_ICONS_MAP[currency] }}
-              width="24"
-              height="24"
-              className="mr-2"
-            />
+            <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
           ) : null}
           <Text size="text-h6">{currency}</Text>
         </div>

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

@@ -72,7 +72,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
             ),
         })}
         {button?.text ? (
-          <Button className="py-4" version={button?.version} {...button}>
+          <Button className="py-4 px-9" version={button?.version} {...button}>
             {button.text}
           </Button>
         ) : null}

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

@@ -24,7 +24,7 @@ export function renderInput(props: InputProps) {
   return (
     <div className="relative flex">
       <Input
-        className="shrink-0 text-l w-full appearance-none mr-[-90px]"
+        className="shrink-0 text-l w-full appearance-none -mr-24"
         placeholder={placeholder}
         type="text"
         value={value}

package/mobile/src/components/Footer/buttonStylesWithText.ts

@@ -6,6 +6,6 @@ export const buttonStylesWithText = (text: string, buttonSize: ButtonSize) =>
   text
     ? ''
     : style(
-        'group/media flex items-center justify-center box-border',
+        'py-m group/media flex items-center justify-center box-border',
         buttonSizeStyles[buttonSize],
       );

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

@@ -4,6 +4,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
 import type { CalendarItem, GracePeriodContent } from './GracePeriodContent';
+import { style } from '../../utils/style';
 
 interface MappedCalendarItemProps extends CalendarItem {
   flexBasis?: string;
@@ -13,14 +14,8 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
-      <Headline
-        className="mb-4"
-        title={title}
-        description={description}
-        headlineVersion="M"
-        isPadding={false}
-      />
+    <BlockWrapper className={style('space-y-m', className)} defaultPadding="p-6xl" {...rest}>
+      <Headline title={title} description={description} headlineVersion="M" isEmbedded={true} />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>
   ),
@@ -44,19 +39,19 @@ const renderCalendar = (calendar: CalendarItem[]) => {
     }));
 
   return (
-    <div className="w-full flex flex-col justify-center mt-13">
-      <div className="flex w-full mb-3 text-h6 text-center">
+    <div className="w-full flex flex-col justify-center gap-s">
+      <div className="flex w-full text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
       <div className="flex gap-s w-full">
         {mappedCalendar.map((_, ind) => (
           <div
             key={`monthItem-${ind}`}
-            className="pr-s border-r border-main-divider last:border-r-0 last:pr-0"
+            className="border-r border-main-divider last:border-r-0 space-y-s"
             style={{ flexBasis: _.flexBasis }}
           >
-            <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s font-light text-primary-text mt-s">
+            <div className="flex gap-s">{renderMonthImages(_)}</div>
+            <div className="text-s font-light text-primary-text">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>
@@ -79,7 +74,7 @@ const renderMonthImages = (item: MappedCalendarItemProps) =>
     _.image?.src ? (
       <div
         key={`monthImage-${_.image.src}`}
-        className="h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
+        className="h-52 border-r pr-s border-main-divider last:border-r-0"
       >
         <Img image={_.image} className="flex" />
       </div>

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

@@ -35,13 +35,13 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
           .map((_, i) => (
             <div
               key={String(i)}
-              className="w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
+              className="w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
             />
           ))}
       </button>
       <div
         className={style(
-          'absolute flex flex-col rounded-md bg-white p-6 pb-2',
+          'absolute flex flex-col rounded-md bg-white p-xl pb-xs',
           visible ? '' : 'hidden',
         )}
         aria-hidden={!visible}
@@ -53,7 +53,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
             <a
               key={item.href || String(i)}
               className={style(
-                'text-l font-light pb-4 hover:text-primary-main',
+                'text-l font-light pb-m hover:text-primary-main',
                 item === activeItem ? 'text-primary-main' : '',
               )}
               {...link(linkProps)}

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

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

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

@@ -32,7 +32,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
     const openLocationDialog = useCallback(() => locationDialog.open(), []);
 
     return (
-      <div className={style('flex items-center gap-5', className)}>
+      <div className={style('flex items-center gap-lg', className)}>
         <TopItem flat={true} href="#" text={currentLocation?.name} onClick={openLocationDialog} />
         {officesLink ? <TopItem flat={true} href={officesLink} text="Офисы и банкоматы" /> : null}
         <HeaderSecondaryMenuButton

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

@@ -32,7 +32,7 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
     <button
       className={style(
         'group/btn border-0 flex shrink-0 items-center',
-        isGrayBg ? 'p-3 rounded-full' : 'p-0 bg-inherit',
+        isGrayBg ? 'p-s rounded-full' : 'p-0 bg-inherit',
         isGrayBg && !isRounded ? 'bg-main-divider' : '',
         isRounded
           ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'