@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.12

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,7 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderBlock } from '../../BlockRenderer/renderBlock';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
-import type { AlignTypeWithStretch } from '../../model/AlignType';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
@@ -10,48 +8,29 @@ import type { VerticalLayoutContent } from './VerticalLayoutContent';
 
 export interface VerticalLayoutProps extends VerticalLayoutContent, UniBlockProps {}
 
-const alignStyle: Record<AlignTypeWithStretch, string> = {
-  stretch: 'items-stretch',
-  left: 'items-start',
-  center: 'items-center',
-  right: 'items-end',
-};
-
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
   ({
     className = '',
     gap = '',
-    align = 'stretch',
     isPadding = false,
     isInnerPadding = true,
     version = 'transparent',
     isTheme = false,
     ...rest
-  }) => {
-    const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-
-    return (
-      <BlockWrapper
-        className={style(
-          'relative',
-          'flex flex-col [&>*]:max-w-full',
-          gapStyles[gap],
-          align && alignStyle[align],
-          className,
-        )}
-        defaultPadding={isPadding ? 'p-default' : ''}
-        version={version}
-        isTheme={isTheme}
-        {...rest}
-      >
-        {renderChildren({
-          ...rest,
-          renderProps: (block, options) =>
-            renderBlock(block, options, { className: innerPaddingStyle }),
-        })}
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper
+      className={style('relative flex flex-col', gapStyles[gap], className)}
+      defaultPadding={isPadding ? 'p-6xl' : ''}
+      version={version}
+      isTheme={isTheme}
+      {...rest}
+    >
+      {renderChildren({
+        ...rest,
+        extraProps: { className: 'w-full', padding: isInnerPadding ? '' : 'p-0' },
+      })}
+    </BlockWrapper>
+  ),
 );
 
 VerticalLayout.childrenTypes = [];

package/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -1,4 +1,3 @@
-import type { AlignTypeWithStretch } from '../../model/AlignType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
 
@@ -6,7 +5,6 @@ import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
  * @title Вертикальный компоновщик
  */
 export type VerticalLayoutContent = UniBlockContent & {
-  align?: AlignTypeWithStretch;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */
   isPadding?: boolean;

package/src/content-page-repository/transformDocument.ts

@@ -5,6 +5,7 @@ import { Attachment } from '../model/Attachment';
 import type { TransformationOptions } from './TransformationOptions';
 
 const copyFile = util.promisify(fs.copyFile);
+const stat = util.promisify(fs.stat);
 
 export async function transformDocument(
   attachment: Attachment,
@@ -19,6 +20,7 @@ export async function transformDocument(
   const input = path.join(path.dirname(pagePath), attachment.src);
   const docRelativePath = path.relative(contentDir, input);
   const output = path.join(publicDir, docRelativePath);
+  const inputFileSize = (await stat(input)).size;
 
   try {
     await copyFile(input, output);
@@ -33,5 +35,6 @@ export async function transformDocument(
   return {
     ...attachment,
     src,
+    fileSize: inputFileSize,
   };
 }

package/src/hooks/useCarouselControls.ts

@@ -13,15 +13,20 @@ interface CarouselControlsProps {
   visibleItemCount?: number;
 }
 
-export const useCarouselControls = (props: CarouselControlsProps): [number, CarouselControls] => {
+export const useCarouselControls = (
+  props: CarouselControlsProps,
+  initialIndex = 0,
+): [number, CarouselControls] => {
   const { itemCount, visibleItemCount } = props;
 
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(initialIndex);
 
   const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
   const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
 
-  const canInc = isScrollable(props) && activeIndex < itemCount - (visibleItemCount || 1);
+  const canInc = visibleItemCount
+    ? itemCount > visibleItemCount && activeIndex < itemCount - visibleItemCount
+    : activeIndex < itemCount - 1;
   const canDec = activeIndex > 0;
   const isScrollAvailable = canDec || canInc;
 
@@ -36,7 +41,3 @@ export const useCarouselControls = (props: CarouselControlsProps): [number, Caro
     },
   ];
 };
-
-function isScrollable({ itemCount, visibleItemCount }: CarouselControlsProps): boolean {
-  return Boolean(visibleItemCount && itemCount > visibleItemCount);
-}

package/src/model/Attachment.ts

@@ -1,4 +1,6 @@
 export interface Attachment {
   /** @title */
   src?: string;
+  /** @title размер файла */
+  fileSize?: number;
 }

package/src/model/JSXBlock.ts

@@ -10,7 +10,7 @@ import type { VNode } from './VNode';
  * @title Внутренний отступ
  * @enumNames ["По умолчанию", "Большой", "Средний", "Маленький", "Оч. маленький", "Нулевой"]
  */
-export type UniBlockPadding = '' | 'p-lg' | 'p-m' | 'p-s' | 'p-xs' | 'p-0';
+export type UniBlockPadding = '' | 'p-3xl' | 'p-xl' | 'p-m' | 'p-xs' | 'p-0';
 
 export interface UniBlockContent {
   version?: BlockVersion;

package/src/ui-kit/BaseFiltration/BaseFiltrationInner.tsx

@@ -70,7 +70,7 @@ function renderNotFound({ title, description }: NotFound) {
   return (
     <div className="bg-white py-20">
       {title ? (
-        <div className="mb-2">
+        <div className="mb-xs">
           <Paragraph align="text-center">
             <Text size="text-h4">{title}</Text>
           </Paragraph>

package/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -59,7 +59,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         imageAlign={imageAlign}
         buttons={renderButtonsSection(buttons)}
       >
-        <div className="flex flex-col gap-m">
+        <div className="flex flex-col gap-xl">
           <BenefitsList
             benefitsVersion={benefitsVersion}
             isTabularBenefits={isTabularBenefits}

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,11 +1,11 @@
 import type { Align } from '../../model/Align';
 import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineProps } from '../../model/HeadlineType';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
-import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
+import type { ButtonContent } from '../Button/ButtonProps';
+import type { ImageContent } from '../Img/ImgProps';
+import type { ListContent } from '../List/ListContent';
+import type { RichTextProps } from '../RichText/RichTextProps';
+import type { TagsContent } from '../Tags/TagsContent';
 import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 
 /** @title Доп. настройки картинки */

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -36,26 +36,28 @@ export const BaseTile = JSX<BaseTileProps>(
   }) => (
     <div
       className={style(
-        'relative flex flex-col gap-lg font-sans overflow-hidden',
+        'relative flex flex-col gap-3xl font-sans overflow-hidden',
         padding || defaultPadding,
         className,
       )}
     >
-      {backImage ? <div className="absolute bottom-0 right-0 z-0">{backImage}</div> : null}
       {title ? <div className="relative">{title}</div> : null}
-      <div className="grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-lg">
+      <div className="grow relative flex flex-wrap @xl:flex-nowrap justify-between items-stretch gap-3xl">
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
-            'flex flex-col gap-lg max-w-[600px] xl:max-w-[728px]',
+            'flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]',
             leftImage ? '' : 'grow',
           )}
         >
           {insetTitle}
           <div className="grow">{children}</div>
+          {backImage ? (
+            <div className="mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">{backImage}</div>
+          ) : null}
           {buttons}
         </div>
-        {renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })}
+        {renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })}
       </div>
     </div>
   ),

package/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -13,7 +13,7 @@ export type BenefitItemProps = ComplexBenefitContent & {
 export const BenefitItem = JSX<BenefitItemProps>(({ className, benefitsVersion, ..._ }) => (
   <div
     className={style(
-      'flex gap-s',
+      'flex gap-m',
       'description' in _ && _.description ? 'items-start' : 'items-center',
       className,
     )}

package/src/ui-kit/BlockWrapper.tsx

@@ -24,7 +24,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     className,
     version = 'primary',
     isTheme = true,
-    defaultPadding = 'p-m',
+    defaultPadding = 'p-xl',
     padding,
     block,
     tag = 'section',
@@ -51,7 +51,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     return (
       <Tag
         className={style(
-          'font-sans',
+          '@container font-sans',
           isGroup ? 'group' : '',
           blockStyles[version],
           isHidden ? 'hidden' : '',

package/src/ui-kit/Button/ButtonInner.tsx

@@ -17,7 +17,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           {aboveText ? <div className="text-xs font-light text-left">{aboveText}</div> : null}
-          <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`}>{text}</div>
+          <div className={`text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
       {appendRight ? <div className={iconStyleMap[version]}>{appendRight}</div> : null}

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -18,7 +18,7 @@ export const renderButtonsSection = (
     <div
       className={style(
         'flex',
-        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-s',
+        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-m',
         className,
       )}
     >

package/src/ui-kit/Dialog/Dialog.tsx

@@ -34,9 +34,9 @@ export const Dialog = JSX<DialogProps>(({ className, isOpened, head, children, o
       )}
       role="dialog"
     >
-      <div className="relative container pb-12 min-h-full">
-        <div className="sticky bg-white pt-6 top-0">
-          <CloseButton className="absolute top-0 -right-12" onClick={onClose} />
+      <div className="relative container pb-6xl min-h-full">
+        <div className="sticky bg-white pt-xl top-0">
+          <CloseButton className="absolute top-0 -right-6xl" onClick={onClose} />
           {head}
         </div>
         {children}

package/src/ui-kit/InnerTable/InnerTableBodyItem.tsx

@@ -52,9 +52,7 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
       className="flex border-main-divider border border-t-0 border-x-0 border-solid"
     >
       {headerColumn?.data ? (
-        <div className={`text-xl fontd-light w-[214px] pb-5 ${rowIdx === 0 ? 'pt-8' : 'pt-6'}`}>
-          {headerColumn.data}
-        </div>
+        <div className={`text-xl font-light w-[214px] py-lg `}>{headerColumn.data}</div>
       ) : null}
       <div className="flex flex-grow overflow-hidden">
         <div
@@ -66,9 +64,9 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
           {columns?.map((_, i) => (
             <div
               key={`row${i}`}
-              className="flex flex-col flex-grow justify-center pt-6 pb-5 odd:bg-main-divider"
+              className="flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider"
             >
-              {_?.data ? <div className="text-xl font-light mb-3">{_.data}</div> : null}
+              {_?.data ? <div className="text-xl font-light">{_.data}</div> : null}
               {_?.cols ? renderCols(_.cols, activeColumnIndex) : null}
             </div>
           ))}
@@ -82,7 +80,7 @@ const renderCols = (cols: string[], rowIndex: number) =>
   cols?.length > 0 ? (
     <div className={`flex ${rowIndex} ${rowIndex === 0 ? 'text-secondary-text' : ''} last:mr-3`}>
       {cols.map((data, i) => (
-        <div key={String(i)} className={`w-[76px] text-h6 mr-5 first:ml-8`}>
+        <div key={String(i)} className={`w-20 text-h6 mr-lg first:ml-3xl`}>
           {data}
         </div>
       ))}

package/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -21,7 +21,7 @@ export const TableInnerButton = JSX<TableInnerButtonProps>(({ isOpen, onClick })
       <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать'}</div>
       <Icon
         name={isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-        className="ml-3"
+        className="ml-s"
         iconVersion="white"
         width="20"
         height="20"

package/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -11,13 +11,13 @@ export interface InnerTableHeaderProps {
 
 export const InnerTableHeader = JSX<InnerTableHeaderProps>(
   ({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (
-    <div className="flex justify-between w-full pt-2.5 pb-3">
+    <div className="flex justify-between w-full px-s">
       {currencies && currencies.length > 1 ? (
-        <div className="flex bg-secondary-light p-1.5 rounded-md">
+        <div className="flex bg-secondary-light p-2xs rounded-md">
           {currencies.map((currency, idx) => (
             <div
               key={currency}
-              className={`rounded-md text-xl font-light px-4 py-3 cursor-pointer ${
+              className={`rounded-md text-xl font-light px-m py-s cursor-pointer ${
                 idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'
               }`}
               onClick={() => setActiveTabIndex(idx)}
@@ -36,7 +36,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
             <Icon
               name="DocDownloadIcon"
               iconVersion="color"
-              className="mr-0.5"
+              className="mr-3xs"
               width="20"
               height="20"
             />

package/src/ui-kit/Input/Input.tsx

@@ -38,7 +38,7 @@ export const Input = JSX<InputProps>(
       <div className={style('relative', className)}>
         <label>
           {label ? (
-            <div className="mb-2">
+            <div className="mb-xs">
               <Text size="text-m" font="font-light">
                 {label}
               </Text>

package/src/ui-kit/InputRange/InputRange.tsx

@@ -51,7 +51,7 @@ export const InputRange = JSX<InputRangeProps>((props) => {
         ) : null}
         <input
           className={style(
-            'm-0 mt-2 font-sans text-h3 w-full h-14',
+            'm-0 mt-xs font-sans text-h3 w-full h-14',
             'border border-solid border-gray rounded-md outline-none',
             'p-0 pl-4 box-border',
             'text-primary-text hover:border-primary-hover focus:border-primary-text',

package/src/ui-kit/LinkButton/LinkButton.tsx

@@ -3,8 +3,8 @@ import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../Img/Img';
 
-const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
-  text-l font-light bg-white text-primary-text flex w-[316px]
+const LINK_CLASS_NAME = `absolute border border-primary-main ml-s px-xl py-lg
+  text-l font-light bg-white text-primary-text flex w-80
   justify-between items-center group-hover/link:text-primary-main z-10`;
 
 const LINK_BORDER_CLASS_NAME =
@@ -22,7 +22,7 @@ export const LinkButton = JSX<LinkButtonProps>(
     return text ? (
       <div className={`relative group/link cursor-pointer w-[328px] h-[82px] ${className}`}>
         <a className={LINK_CLASS_NAME} role="link" {...adjustedProps}>
-          <div className="p-0.5">{text}</div>
+          <div className="p-3xs">{text}</div>
           <div className="w-6 h-6">
             <Img
               className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"

package/src/ui-kit/LinkList/LinkList.tsx

@@ -6,7 +6,7 @@ import { linkListStyles } from './linkListStyles';
 
 export const LinkList = JSX<LinkListProps>(({ className = '', items }) =>
   items?.length ? (
-    <ul className={style('flex flex-col p-0', linkListStyles, className)}>
+    <ul className={style('flex flex-col p-0 gap-m sm:gap-xl', linkListStyles, className)}>
       {items.map(renderLinkListItem)}
     </ul>
   ) : null,
@@ -16,7 +16,7 @@ const renderLinkListItem = (item: LinkProps, i: number) => {
   const { text, ...linkProps } = item;
 
   return (
-    <li key={`list_item_${String(i)}`} className="list-none mb-4 sm:mb-6 sm:last:mb-0">
+    <li key={`list_item_${String(i)}`} className="list-none">
       <a className="hover:text-primary-main sm:font-light" role="link" {...linkProps}>
         {text ? text : null}
       </a>

package/src/ui-kit/List/List.fixture.tsx

@@ -6,22 +6,22 @@ const items = ['List Item #1', 'List Item #2', 'List Item #3', 'List Item #4'];
 
 export default {
   'primary dotted (default)': (
-    <div className="bg-white p-default">
+    <div className="bg-white p-6xl">
       <List items={items} listItemSize="L" />
     </div>
   ),
   'primary w/o dots': (
-    <div className="bg-white p-default">
+    <div className="bg-white p-6xl">
       <List items={items} isDotted={false} />
     </div>
   ),
   'secondary dotted': (
-    <div className="group bg-primary-main p-default" data-ver="secondary">
+    <div className="group bg-primary-main p-6xl" data-ver="secondary">
       <List items={items} />
     </div>
   ),
   'secondary w/o dots': (
-    <div className="bg-primary-main p-default" data-ver="secondary">
+    <div className="bg-primary-main p-6xl" data-ver="secondary">
       <List items={items} isDotted={false} />
     </div>
   ),

package/src/ui-kit/List/List.tsx

@@ -11,9 +11,9 @@ const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
 };
 
 const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
-  S: 'ml-2',
-  M: 'ml-3',
-  L: 'ml-4',
+  S: 'ml-xs',
+  M: 'ml-s',
+  L: 'ml-m',
 };
 
 export const List = JSX<ListProps>(
@@ -21,7 +21,7 @@ export const List = JSX<ListProps>(
     items?.length ? (
       <section
         className={style(
-          'flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
+          'flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
           TEXT_SIZE_MAP[listItemSize],
           hasIndent ? ITEM_INDENT_MAP[listItemSize] : '',
           className,

package/src/ui-kit/List/ListItem.tsx

@@ -13,9 +13,9 @@ export interface ListItemProps {
 }
 
 const DOT_SIZE_MAP = {
-  L: 'w-1.5 h-1.5 mr-4',
-  M: 'w-1.5 h-1.5 mr-3',
-  S: 'w-1 h-1 mr-2',
+  L: 'w-1.5 h-1.5 mr-m', // TODO: Действительно нужен этот вариант? отличается только margin
+  M: 'w-1.5 h-1.5 mr-s',
+  S: 'w-1 h-1 mr-xs',
 };
 
 export const ListItem = JSX<ListItemProps>(

package/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -49,7 +49,7 @@ export const LocationDialog = JSX<LocationDialogProps>(
               currentLocation={currentLocation}
               onChangeLocation={handleChangeLocation}
             />
-            <SearchBar onSearch={setQuery} searchTerm={query} className="mb-7" />
+            <SearchBar onSearch={setQuery} searchTerm={query} />
           </div>
         }
       >
@@ -69,7 +69,6 @@ export const LocationDialog = JSX<LocationDialogProps>(
             )}
           </div>
         )}
-
         <ForeignOffices foreignOffices={foreignOffices} />
       </Dialog>
     );
@@ -106,8 +105,8 @@ const renderRegionGroup =
   (onChangeLocation?: (region: Region) => void) =>
   ([letter, regions]: [string, Region[]]) =>
     (
-      <div key={letter} className="break-inside-avoid mb-7 w-[224px]">
-        <div className="mb-2.5">
+      <div key={letter} className="break-inside-avoid mb-2xl w-56">
+        <div className="mb-s">
           <Text size="text-h6">{letter}</Text>
         </div>
         {regions.map(renderRegion(onChangeLocation))}
@@ -116,7 +115,7 @@ const renderRegionGroup =
 
 const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: Region) =>
   (
-    <div key={region.id} className="mb-1">
+    <div key={region.id} className="mb-2xs">
       <button
         className="cursor-pointer hover:text-primary-hover"
         onClick={() => {
@@ -130,8 +129,8 @@ const renderRegion = (onChangeLocation?: (region: Region) => void) => (region: R
 
 const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
   foreignOffices?.length ? (
-    <div className="border-t border-main-divider mt-7 pt-7">
-      <div className="mb-4">
+    <div className="border-t border-main-divider mt-2xs pt-2xs">
+      <div className="mb-m">
         <Text size="text-m" font="font-light" color="text-secondary-text">
           Представительства за рубежом:
         </Text>

package/src/ui-kit/LocationDialog/SearchBar.tsx

@@ -9,7 +9,7 @@ export interface SearchBarInnerProps {
 export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSearch }) => {
   return (
     <form className={`font-sans relative ${className}`}>
-      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
+      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-44 gap-3.5 pointer-events-none">
         {searchTerm ? null : (
           <label htmlFor="search-bar-input" className={`text-secondary-text `}>
             Поиск по филиалам

package/src/ui-kit/Logo/renderTitle.tsx

@@ -8,7 +8,7 @@ const TEXT_COLOR: Record<BgColorVersion, string> = {
 
 export const renderTitle = (title: VNode, bgColor: string, className?: string) => {
   return (
-    <span className={`${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`}>
+    <span className={`${TEXT_COLOR[bgColor]} ml-s font-medium ${className || ''}`}>
       {title || 'Россельхозбанк'}
     </span>
   );

package/src/ui-kit/NumberInput/NumberInput.fixture.tsx

@@ -8,7 +8,7 @@ const ComponentWithInput = ({ fractionDigits = 0 }: { fractionDigits?: number })
 
   return (
     <NumberInput
-      className="col-span-2 mt-2"
+      className="col-span-2 mt-xs"
       label="Числовое поле"
       fractionDigits={fractionDigits}
       value={value}

package/src/ui-kit/RichText/RichText.fixture.tsx

@@ -23,7 +23,7 @@ const HTML = `
 
 export default {
   default: (
-    <section className="p-default">
+    <section className="p-6xl">
       <RichText __html={HTML} />
     </section>
   ),

package/src/ui-kit/SearchDialog/SearchDialog.tsx

@@ -34,10 +34,7 @@ export const SearchDialog = JSX<SearchDialogProps>(({ topItems }) => {
   useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
 
   return (
-    <Dialog
-      {...dialogProps}
-      head={<SearchInput className="my-5" autoFocus={true} {...searchInputProps} />}
-    >
+    <Dialog {...dialogProps} head={<SearchInput autoFocus={true} {...searchInputProps} />}>
       <Sitemap topItems={searchItems} />
     </Dialog>
   );

package/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -22,7 +22,7 @@ export const SearchInput = JSX<SearchInputProps>(
 
     return (
       <div className={style('font-sans relative', className)} role="form">
-        <div className="absolute h-full flex items-center pl-4 pointer-events-none">
+        <div className="absolute h-full flex items-center pl-m pointer-events-none">
           <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
         </div>
         <input

package/src/ui-kit/Select/Select.tsx

@@ -49,7 +49,7 @@ export const Select = JSX<SelectProps>(
     return (
       <div className={className} ref={wrapperRef}>
         {label ? (
-          <div className="mb-2">
+          <div className="mb-xs">
             <Text size="text-m" color="text-primary-text" font="font-light">
               {label}
             </Text>

package/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -13,19 +13,19 @@ export const SlideCheckbox = JSX<SlideCheckboxProps>(
     <div
       role={type}
       aria-checked={value}
-      className="flex justify-start items-center w-full cursor-pointer mb-3"
+      className="flex justify-start items-center w-full cursor-pointer mb-s"
       onClick={() => onChange && onChange(!value)}
     >
       <div
         className={style(
-          'relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl',
+          'relative flex-shrink-0 duration-300 w-9 h-5 mr-s rounded-2xl',
           value ? 'bg-primary-main' : 'bg-main-divider',
         )}
       >
         <div
           className={style(
             'absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full',
-            value ? 'left-[50%]' : 'left-[5%]',
+            value ? 'left-1/2' : 'left-[5%]',
           )}
         />
       </div>