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

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -56,7 +56,7 @@ const renderIconBlock = (icon?: Picture) => (
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider pb-5">
+  <div className="border-b border-main-divider">
     <RichText __html={__html} />
   </div>
 );

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -45,7 +45,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
           unfoldedByDefault={isExpanded}
           renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection
-              className={style('gap-5', foldableSectionStyles)}
+              className={style('gap-lg', foldableSectionStyles)}
               isUnfolded={isUnfolded}
             >
               {renderChildren({

package/mobile/src/components/SafeDepositRental/RadioButtons.tsx

@@ -4,10 +4,10 @@ import { Radio } from '../../ui-kit/Radio/Radio';
 import { style } from '../../utils/style';
 
 interface RadioButtonsProps {
-  className: string;
+  className?: string;
 }
 
-export const RadioButtons = JSX(({ className }: RadioButtonsProps) => {
+export const RadioButtons = JSX(({ className = '' }: RadioButtonsProps) => {
   const [selectedOption, setSelectedOption] = useState('option2');
   const onChange = useCallback((_: string) => setSelectedOption(_), []);
 

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -21,7 +21,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex flex-col sm:flex-row gap-4 order-1">
+      <div className="flex flex-col sm:flex-row gap-m order-1">
         <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -43,7 +43,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
 
     return (
       <BlockWrapper className={className} defaultPadding="" {...rest}>
-        <div className="p-4xl">
+        <div className="p-4xl space-y-xl">
           {title ? (
             <Heading
               title={title}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -56,8 +56,8 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
             Тип договора
           </Text>
         </div>
-        <div className="contents sm:flex justify-between items-center">
-          <RadioButtons className="mb-4 sm:mb-0" />
+        <div className="contents sm:flex justify-between items-center gap-m">
+          <RadioButtons />
           <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
         </div>
       </div>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -37,7 +37,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
   const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
-    <div className="flex flex-col sm:flex-row gap-x-9 align-top mb-6">
+    <div className="flex flex-col sm:flex-row gap-4xl align-top">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -13,15 +13,15 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 
   return (
     <div className="contents sm:flex flex-col justify-between order-2">
-      <div className="flex flex-col sm:flex-row gap-x-11 gap-y-7 order-5 sm:order-none py-7 sm:py-0 border-t border-main-divider sm:border-none">
+      <div className="flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none">
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-2 text-s-light text-secondary-text">
+      <span className="sm:hidden order-3 mb-xs text-s-light text-secondary-text">
         {imageDescription}
       </span>
-      <div className="flex flex-col items-center gap-3 order-3 sm:order-none mb-6 sm:mb-0 bg-primary-main py-3 sm:p-8 text-center">
-        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-[246px]" />
+      <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">
+        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-60" />
         <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
           {imageDescription}
         </span>
@@ -32,7 +32,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 
 const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className="flex justify-between items-center gap-y-1 sm:flex-col sm:items-start">
+    <div className="flex justify-between items-center gap-y-xs sm:flex-col sm:items-start">
       <div className="text-l font-light text-secondary-text">{label}</div>
       <span className="text-l sm:text-h3 text-primary-text">{total}</span>
     </div>

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -1,19 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
 import type { DefaultStep, Step } from './StepsBlockContent';
 import { StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
-import { style } from '../../utils/style';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { UniBlockProps } from '../../model/JSXBlock';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
 
 type StepIconVersion = Record<'icon' | 'image', string>;
 
@@ -43,25 +42,26 @@ export const StepsBlock = JSX<StepsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={style('box-border flex flex-col gap-xs', className)}
+      className={style('box-border flex flex-col gap-xl', className)}
       defaultPadding="p-6xl"
       version={version}
       {...rest}
     >
-      {title ? <Heading headingType="h3" className="text-left" title={title} /> : null}
-      {description ? (
-        <Paragraph size="text-xl" font="font-light">
-          <span className={styleMap.description}>{description}</span>
-        </Paragraph>
-      ) : null}
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion="M"
+        isEmbedded={true}
+        align="text-left"
+      />
       {steps?.length ? (
         <div className="box-border">
-          <div className="flex flex-col justify-between">
+          <div className="flex flex-col gap-6xl justify-between">
             {steps.map(renderStep(size, version))}
           </div>
         </div>
       ) : null}
-      {renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })}
+      {renderButtonsSection(buttons, { isVertical: true })}
     </BlockWrapper>
   ),
 );
@@ -92,7 +92,7 @@ const renderDefaultStep =
   (size: SizeVersion, version: BlockVersion) => (step: DefaultStep, i: number) =>
     (
       <div key={String(i)} className="contents">
-        <div className="flex flex-row text-center relative py-3">
+        <div className="flex flex-row text-center relative">
           <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(size, version)(step, i)}
           </div>
@@ -102,7 +102,7 @@ const renderDefaultStep =
               STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size],
             )}
           >
-            {step.label ? <div className="text-l m-0 text-left">{step.label}</div> : null}
+            {step.label ? <div className="text-l text-left">{step.label}</div> : null}
             {step.description ? (
               <div className={style('text-s font-light text-left', styleMap.description)}>
                 {step.description}

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -81,4 +81,4 @@ const renderDefaultStep =
     );
   };
 
-const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[200px]');
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-72' : 'w-52');

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -15,7 +15,7 @@ export type EmbeddableCellDataType =
 
 const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) =>
   renderButtonsSection(buttons, {
-    className: 'mt-3',
+    className: 'mt-s',
     buttonClassName: 'w-12 h-12',
   });
 
@@ -31,7 +31,7 @@ const renderImgCellData = ({ image }: ImageContent) =>
 
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
-    className="flex flex-col justify-between items-start text-m pl-2 text-base"
+    className="flex flex-col justify-between items-start text-m pl-xs text-base"
     isDotted={isDotted ?? true}
     {...rest}
   />

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -34,7 +34,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
           description={description}
           headlineVersion="M"
           align="text-left"
-          isPadding={false}
+          isEmbedded={true}
         />
         {orientation === 'vertical' ? (
           <TariffsTableVertical tiles={tiles} {...rest} />

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -30,7 +30,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(
   }) => {
     return (
       <div
-        className="first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0"
+        className="w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0"
         role="cell"
       >
         {cells?.length

package/mobile/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -5,7 +5,7 @@ import { TariffsTableTileCell } from './TariffsTableTileCell';
 
 export const TariffsTableVertical = JSX<TariffsTableProps>(({ tiles, ...rest }) =>
   tiles?.length ? (
-    <div className="flex flex-col gap-3.5">
+    <div className="flex flex-col gap-s">
       {tiles.map((tile, i) => (
         <TariffsTableTileCell key={String(i)} tile={tile} {...rest} />
       ))}

package/mobile/src/components/TariffsTable/constants.ts

@@ -1,4 +1,4 @@
 export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
+export const FIRST_CELL_CLASSES = 'w-80 flex-shrink-0';
 export const COLS_LENGTH_FOR_SCROLL = 2;
 export const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -15,14 +15,14 @@ export const TextBlock = JSX<TextBlockProps>(
   ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (
     <BlockWrapper
       className={style(
-        'flex gap-3 sm:gap-4 bg-white group-data-secondary:bg-primary-main/10',
+        'flex gap-s sm:gap-m bg-white group-data-secondary:bg-primary-main/10',
         className,
       )}
       {...rest}
     >
-      {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
+      {iconVersion === 'small' ? renderIcon() : null}
       {iconVersion === 'big' ? renderImage(image) : null}
-      <div className="flex flex-col w-fit gap-1 sm:gap-2">
+      <div className="flex flex-col w-fit gap-2xs sm:gap-xs">
         {title ? (
           <Text
             size="text-l"
@@ -62,7 +62,7 @@ const renderDescription = (description: string) => (
 );
 
 const renderList = (items: string[], bullets: boolean) => {
-  const listStyle = bullets ? 'list-disc pl-6' : '';
+  const listStyle = bullets ? 'list-disc pl-xl' : '';
 
   return (
     <ul className={style('text-secondary-text group-data-secondary:text-white/80', listStyle)}>

package/mobile/src/components/Video/getPaddings.ts

@@ -3,4 +3,4 @@ import { getColSpan } from '../../utils/getColSpan';
 const MIN_COL_SPAN = 10;
 
 export const getPaddings = (className?: string) =>
-  getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';
+  getColSpan(className) < MIN_COL_SPAN ? 'py-xl px-6xl' : 'py-6xl px-32';

package/mobile/src/model/HeadlineType.ts

@@ -1,7 +1,7 @@
 import { TextAlign } from '../ui-kit/Text/TextProps';
 
 /**
- * TODO Hellfire refactoring is needed here
+ * TODO: Hellfire refactoring is needed here
  */
 
 /**

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

@@ -13,7 +13,7 @@ import { Text } from '../Text/Text';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
-const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
+const resultsGridStyle = 'grid grid-cols-12 gap-2xs border-box';
 
 interface BaseFiltrationInnerProps extends BaseFiltrationInnerContent, UniBlockProps {
   filtrationState?: Record<string, any>;

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

@@ -45,7 +45,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         description={description}
         headlineVersion={headlineVersion}
         align={align}
-        isPadding={false}
+        isEmbedded={true}
       />
     );
 

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

@@ -8,7 +8,7 @@ export const ButtonInner = JSX<ButtonProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
 
   return (
-    <div className={style(getButtonStyle(props), 'flex gap-2')}>
+    <div className={style(getButtonStyle(props), 'flex gap-xs')}>
       {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
       {isWithText(props) ? (
         <div>

package/mobile/src/ui-kit/Checkbox/Checkbox.tsx

@@ -61,7 +61,7 @@ export const Checkbox = JSX<CheckboxProps>(
           />
           {value ? icon : null}
           {text ? (
-            <div className="ml-3">
+            <div className="ml-s">
               <Text size="text-l" font="font-light">
                 {text}
               </Text>

package/mobile/src/ui-kit/CookiePopup/CookiePopup.tsx

@@ -64,4 +64,4 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
   ) : null;
 });
 
-const linkWrapperStyle = (href?: string) => style('inline mx-1', href ? 'text-green-dark' : '');
+const linkWrapperStyle = (href?: string) => style('inline mx-2xs', href ? 'text-green-dark' : '');

package/mobile/src/ui-kit/DialogManager/CloseButton.tsx

@@ -11,7 +11,7 @@ interface CloseButtonProps {
 export const CloseButton = JSX<CloseButtonProps>(({ className, onClose }) => (
   <button
     className={style(
-      'flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none',
+      'flex justify-center items-center w-12 h-12 p-2xs bg-transparent border-none',
       className,
     )}
     onClick={onClose}

package/mobile/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -19,7 +19,7 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
     return (
       <button
         className={style(
-          'flex justify-center w-full px-0 py-4 border border-transparent outline-none focus:border-primary-text',
+          'flex justify-center w-full py-4 border border-transparent outline-none focus:border-primary-text',
           disabled
             ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
             : 'bg-primary-main text-white hover:bg-primary-hove',
@@ -29,7 +29,7 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
         disabled={disabled}
         data-theme={dataTheme}
       >
-        <span className="text-h4 pr-3">{label}</span>
+        <span className="text-h4 pr-s">{label}</span>
         {icon ? (
           <Img
             image={{

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

@@ -31,7 +31,7 @@ export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) =>
       <TableInnerButton onClick={onClick} isOpen />
     </div>
   ) : (
-    <div className="my-5 text-h6 text-center">
+    <div className="my-lg text-h6 text-center">
       <p>{EMPTY_DATA}</p>
       <TableInnerButton onClick={onClick} isOpen />
     </div>

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -26,7 +26,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
         return (
           <div key={key} className="w-full">
             <div
-              className="flex p-4 bg-gray text-center justify-center cursor-pointer relative"
+              className="flex p-m bg-gray text-center justify-center cursor-pointer relative"
               onClick={() => toggleTables(key)}
             >
               <Text size="text-xl" font="font-light">
@@ -34,13 +34,13 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
               </Text>
               <Img
                 image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
-                className="absolute right-[22px]"
+                className="absolute right-6"
                 width="24"
                 height="24"
               />
             </div>
             <div
-              className={`w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${
+              className={`w-full pl-xs overflow-hidden transition-height duration-500 ease-in-out ${
                 hiddenTables[key] ? 'h-0' : ''
               }`}
             >

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

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
+import { style } from '../../utils/style';
 
 const COLUMN_WIDTH = 140;
 
@@ -52,7 +53,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 font-light w-[214px] py-lg `}>{headerColumn.data}</div>
+        <div className={`text-xl font-light w-52 py-lg `}>{headerColumn.data}</div>
       ) : null}
       <div className="flex flex-grow overflow-hidden">
         <div
@@ -78,9 +79,9 @@ const renderRow = (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: n
 
 const renderCols = (cols: string[], rowIndex: number) =>
   cols?.length > 0 ? (
-    <div className={`flex ${rowIndex} ${rowIndex === 0 ? 'text-secondary-text' : ''} last:mr-3`}>
+    <div className={style('flex', rowIndex === 0 ? 'text-secondary-text' : '')}>
       {cols.map((data, i) => (
-        <div key={String(i)} className={`w-20 text-h6 mr-lg first:ml-3xl`}>
+        <div key={String(i)} className={`w-20 text-h6 mx-lg`}>
           {data}
         </div>
       ))}

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

@@ -16,7 +16,7 @@ export const TableInnerButton = JSX<TableInnerButtonProps>(({ isOpen, onClick })
     <Button
       version="primary"
       onClick={onClick}
-      className="w-full flex items-center justify-center rounded-none py-5"
+      className="w-full flex items-center justify-center rounded-none py-lg"
     >
       <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать'}</div>
       <Icon

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

@@ -29,7 +29,7 @@ export const Input = JSX<InputProps>(
       [onChange],
     );
 
-    const paddingStyle = children ? 'pr-8' : '';
+    const paddingStyle = children ? 'pr-3xl' : '';
     const validStyle = valid
       ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
       : 'border-error';
@@ -47,7 +47,7 @@ export const Input = JSX<InputProps>(
           <input
             key={key}
             className={style(
-              'w-full border rounded-md text-primary-text outline-none p-4',
+              'w-full border rounded-md text-primary-text outline-none p-m',
               paddingStyle,
               validStyle,
               inputClassName,

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

@@ -53,7 +53,7 @@ export const InputRange = JSX<InputRangeProps>((props) => {
           className={style(
             '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',
+            'p-0 pl-m box-border',
             'text-primary-text hover:border-primary-hover focus:border-primary-text',
             DISABLED_INPUT_CLASSES,
           )}
@@ -72,7 +72,7 @@ const closestValue = (list: number[]) => (_: number) =>
   list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));
 
 const renderRangeCaption = (items: string[]) => (
-  <div className="flex justify-between my-2">
+  <div className="flex justify-between my-xs">
     {items.map((item, i) => (
       <Text key={String(i)} size="text-s" font="font-light" color="text-secondary-text">
         {item}

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

@@ -27,7 +27,7 @@ export function renderRangeWithTicks({
   return (
     <div>
       {list.length ? (
-        <div className="absolute w-full flex justify-between -bottom-[3px] px-4">
+        <div className="absolute w-full flex justify-between -bottom-[3px] px-m">
           {list.map((_, i) => (
             <div
               key={String(i)}
@@ -38,7 +38,7 @@ export function renderRangeWithTicks({
           ))}
         </div>
       ) : null}
-      <div className="absolute inset-x-0 -bottom-1 px-4 leading-[18px]">
+      <div className="absolute inset-x-0 -bottom-1 px-m leading-[18px]">
         <input
           className="box-border w-full m-0 cursor-pointer slider relative z-10"
           style={inputStyle}

package/mobile/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-44 gap-3.5 pointer-events-none">
+      <div className="absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none">
         {searchTerm ? null : (
           <label htmlFor="search-bar-input" className={`text-secondary-text `}>
             Поиск по филиалам
@@ -18,7 +18,7 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
       </div>
       <input
         id="search-bar-input"
-        className={`h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
+        className={`h-12 pl-m w-full peer text-l text-black border border-solid rounded-md box-border
               outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
         value={searchTerm}
         onChange={(e) => onSearch(e.target.value.toLowerCase() as string)}

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

@@ -12,7 +12,7 @@ export const renderForeignOffices = (foreignOffices: ForeignOffice[] | undefined
           Представительства за рубежом:
         </Text>
       </div>
-      <div className="flex gap-10">
+      <div className="flex gap-5xl">
         {foreignOffices.map((office, i: number) => (
           <ForeignOffice key={String(i)} {...office} />
         ))}
@@ -25,7 +25,7 @@ const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
   const { text, target, href, onClick } = link(rest);
 
   return (
-    <div className="flex gap-x-3">
+    <div className="flex gap-s">
       {icon ? <Img pathPrefix="/wcms-resources/" image={icon} /> : null}
       {text ? (
         <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>

package/mobile/src/ui-kit/Radio/Radio.tsx

@@ -3,7 +3,7 @@ import { RadioProps } from './RadioProps';
 
 export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, className }) => (
   <div className={className}>
-    <label className="font-sans flex items-center relative cursor-pointer">
+    <label className="font-sans flex gap-s items-center relative cursor-pointer">
       <input
         className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover
         checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text
@@ -14,7 +14,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         checked={checked}
         onChange={(_) => onChange(_.target.value)}
       />
-      {text ? <span className="text-primary-text ml-3 cursor-pointer">{text}</span> : null}
+      {text ? <span className="text-primary-text cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

package/mobile/src/ui-kit/RadioButtonGroup/RadioButtonGroup.tsx

@@ -17,8 +17,8 @@ interface RadioButtonGroupProps {
 }
 
 const orientationStyleMap: Record<ListOrientation, string> = {
-  horizontal: 'gap-10',
-  vertical: 'flex-col gap-3',
+  horizontal: 'gap-5xl',
+  vertical: 'flex-col gap-s',
 };
 
 export const RadioButtonGroup = JSX<RadioButtonGroupProps>(

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

@@ -27,7 +27,7 @@ export const SearchInput = JSX<SearchInputProps>(
         </div>
         <input
           className={style(
-            'h-12 pl-12 w-full text-l text-black outline-none box-border',
+            'h-12 pl-6xl w-full text-l text-black outline-none box-border',
             'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
           )}
           value={value}

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

@@ -63,7 +63,7 @@ export const Select = JSX<SelectProps>(
             )}
             onClick={toggle}
           >
-            <p className="p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap">
+            <p className="p-m pr-3xl h-14 overflow-hidden text-ellipsis whitespace-nowrap">
               {formatOption(value) || placeholder}
             </p>
             <Icon
@@ -99,14 +99,14 @@ const renderOption =
         onClick={() => {
           handleChange(option);
         }}
-        className="flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative"
+        className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
       >
         <span className="min-h-6">{formatOption(option)}</span>
         <Icon
           name="DoneSimpleIcon"
           width="16"
           height="16"
-          className={style('absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden')}
+          className={style('absolute right-4 pt-3xs', isSelected(option) && isOpen ? '' : 'hidden')}
         />
       </div>
     );

package/mobile/src/ui-kit/Sitemap/Sitemap.tsx

@@ -25,7 +25,7 @@ const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, inde
   const { text, items, href, target, onClick } = menuItem;
 
   return (
-    <div key={String(index)} className="flex flex-col gap-3.5 w-1/4">
+    <div key={String(index)} className="flex flex-col gap-s w-1/4">
       <a
         className="leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}