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

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.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/src/components/CarouselTariffsCard/getPaddingStyle.mobile.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/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -1,2 +1,2 @@
 export const getPaddingStyle = (isHighlighting = false): string =>
-  isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';
+  isHighlighting ? 'p-3xl mt-3xl pt-20' : 'p-3xl mt-20';

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">

package/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/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/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/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/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/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/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/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/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/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/src/components/Header/Header.mobile.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/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/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'

package/src/components/Header/HeaderSubMenu.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
 import { findActiveSubItem } from './findActiveSubItem';
-import { style } from '../../utils/style';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 import { projectSettings } from '../../ProjectSettings';
@@ -47,11 +46,14 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
 
     return (
       <nav className="relative mt-s flex items-center justify-between">
-        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-s mt-xs">
+        <div
+          ref={subItemsListRef}
+          className="overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl"
+        >
           {subItems.map((_, i) => (
             <HeaderSubMenuItem
               key={String(i)}
-              className={style('ml-3xl first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
+              className={visibleItemsCount - 1 < i ? 'invisible' : ''}
               active={_ === activeSubItem}
               observerOptions={observerOptions}
               onVisibilityChange={subItemsVisibilityHandlers[i]}
@@ -68,7 +70,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
         ) : null}
         {projectSettings.CHAT_BOT ? (
           <HeaderChatBotButton
-            className="ml-9"
+            className="ml-4xl"
             iconVersion={iconVersion}
             chat={projectSettings.CHAT_BOT}
           />

package/src/components/Header/InternetBankButton.tsx

@@ -9,7 +9,7 @@ interface InternetBankButtonProps {
 }
 
 const BUTTON_STYLE = {
-  default: 'px-5 bg-main-divider rounded hover:text-primary-main',
+  default: 'px-lg bg-main-divider rounded hover:text-primary-main',
   transparent: 'text-white hover:text-primary-hover',
 };
 
@@ -20,7 +20,7 @@ export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, inter
       ariaLabel="Интернет-банк"
       target="_blank"
       className={style(
-        'py-3 ml-3 text-l font-light whitespace-nowrap hover:text-primary-main',
+        'py-s ml-s text-l font-light whitespace-nowrap hover:text-primary-main',
         BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
       )}
     >

package/src/components/Headline/Headline.tsx

@@ -19,7 +19,7 @@ export const Headline = JSX<HeadlineProps>(
     description,
     align = 'text-center',
     as,
-    isPadding = true,
+    isEmbedded = false,
     isTheme = false,
     ...rest
   }) => {
@@ -28,8 +28,8 @@ export const Headline = JSX<HeadlineProps>(
 
     return (
       <BlockWrapper
-        className={className}
-        defaultPadding={isPadding ? 'p-6xl' : ''}
+        className={style(isEmbedded ? '@container-normal' : '', className)}
+        defaultPadding={isEmbedded ? '' : 'p-6xl'}
         version={version}
         isTheme={isTheme}
         {...rest}

package/src/components/Headline/HeadlineContent.ts

@@ -9,6 +9,6 @@ export type HeadlineContent = UniBlockContent &
   HeadlineProps & {
     /** @hidden */
     as?: HeadingTagType;
-    /** @title Внутренний отступ блока */
-    isPadding?: boolean;
+    /** @title Встроенный блок */
+    isEmbedded?: boolean;
   };