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

package/mobile/src/components/OfficeMap/OfficeMap.tsx

@@ -51,23 +51,23 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
     currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
 
   return (
-    <div className={`flex flex-col font-sans bg-white w-full ${className}`}>
-      <div className="flex flex-col px-12 pt-12">
+    <div className={`flex flex-col font-sans w-full ${className}`}>
+      <div className="flex flex-col gap-m p-6xl pb-3xl">
         <div className="flex justify-between">
           <div className="text-h2">{name}</div>
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
-        <div className="flex text-l font-light pt-4">
+        <div className="flex text-l font-light">
           <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
           {address}
         </div>
-        <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>
+        <div className="flex">{nearbyOffices.map(renderNearbyOffice)}</div>
       </div>
-      <div className="flex justify-between pt-3xl">
+      <div className="flex justify-between">
         <div className="flex-grow h-full w-full overflow-hidden">
           {point ? <YandexMap points={[point]} className="h-full" /> : null}
         </div>
-        <div className="w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col">
+        <div className="w-[434px] min-w-[434px] p-6xl pt-0 flex flex-col">
           {workScheduleWeek.map(renderDay)}
         </div>
       </div>

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -14,19 +14,19 @@ export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, Un
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   ({ className = '', title, servicesList, ...rest }) => (
-    <BlockWrapper className={style('flex flex-col', className)} {...rest}>
-      {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
+    <BlockWrapper className={style('flex flex-col gap-lg', className)} {...rest}>
+      {title ? <Heading headingType="h5" title={title} /> : null}
       {servicesList?.length ? (
-        <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>
+        <ul className="list-none space-y-lg">{servicesList.map(renderListItems)}</ul>
       ) : null}
     </BlockWrapper>
   ),
 );
 
 const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
-  <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
+  <li key={`list_item_${String(i)}`} className="flex gap-s list-none ">
     {itemList.icon ? (
-      <Img className="mr-3 min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
+      <Img className="min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
     ) : null}
     {itemList.label ? (
       <Text size="text-l" font="font-light">

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

@@ -29,43 +29,42 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
-      <div className="w-full sm:flex sm:justify-between sm:flex-row-reverse">
+    <BlockWrapper
+      className={style('box-border text-left space-y-s', className)}
+      version={version}
+      {...rest}
+    >
+      <div className="w-full flex justify-between flex-row-reverse">
         {renderIconBlock(icon)}
-        {title ? <Heading headingType="h4" as="h3" className="mb-3 sm:mb-6" title={title} /> : null}
+        {title ? <Heading headingType="h4" as="h3" title={title} /> : null}
       </div>
-      <div className="w-full">
+      <div className="w-full space-y-m">
         {__html ? renderDescriptionBlock(__html) : null}
         {renderBlock('Адрес', address, 'GeolocationIcon')}
         {renderBlock('Телефон', telephone, 'PhoneIcon')}
         {renderBlock('E-mail', email, 'MailIcon')}
-        {button?.text
-          ? renderButtonsSection([button], {
-              className: 'mb-6',
-            })
-          : null}
+        {button?.text ? renderButtonsSection([button]) : null}
       </div>
     </BlockWrapper>
   ),
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className={'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3'}>
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+  <div className={'w-10 h-7 sm:w-24 sm:h-16'}>
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider pb-5 my-5">
+  <div className="border-b border-main-divider pb-5">
     <RichText __html={__html} />
   </div>
 );
 
 const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
-  <div className="flex mb-4">
-    <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" />
-    <div className="flex flex-col first:pb-1">
+  <div className="flex gap-m">
+    <Icon iconVersion="black" name={iconName} width="24" height="24" />
+    <div className="flex flex-col">
       <Text size="text-m" font="font-light">
         {blockName}
       </Text>

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

@@ -45,10 +45,13 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
           unfoldedByDefault={isExpanded}
           renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection
-              className={style('gap-5 [&>*]:p-0', foldableSectionStyles)}
+              className={style('gap-5', foldableSectionStyles)}
               isUnfolded={isUnfolded}
             >
-              {renderChildren(rest)}
+              {renderChildren({
+                ...rest,
+                extraProps: { className: 'w-full', padding: 'p-0' },
+              })}
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) =>

package/mobile/src/components/SafeDepositRental/{RenderRadioButtons.tsx → RadioButtons.tsx}

@@ -1,13 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks/core';
 import { Radio } from '../../ui-kit/Radio/Radio';
+import { style } from '../../utils/style';
 
-export const RenderRadioButtons = JSX(() => {
+interface RadioButtonsProps {
+  className: string;
+}
+
+export const RadioButtons = JSX(({ className }: RadioButtonsProps) => {
   const [selectedOption, setSelectedOption] = useState('option2');
   const onChange = useCallback((_: string) => setSelectedOption(_), []);
 
   return (
-    <div>
+    <div className={style('order-4', className)}>
       <Radio
         className="mb-xs"
         name="contractType"

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

@@ -21,8 +21,8 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex justify-between gap-4 mb-6">
-      <div className="max-w-[396px] w-1/2">
+    <div className="flex flex-col sm:flex-row gap-m order-1">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}
           fieldValue="code"
@@ -32,7 +32,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
           label="Регион"
         />
       </div>
-      <div className="max-w-[396px] w-1/2">
+      <div className="flex-1 min-w-0">
         <WrapperSelect
           data={branches}
           fieldValue="branchCode"

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Text } from '../../ui-kit/Text/Text';
 
 const ITEMS = ['От 1 дня', 'До 365 дней'];
 const MIN = 1;
@@ -11,8 +12,10 @@ interface RentalPeriodProps {
 }
 
 export const RentalPeriod = JSX<RentalPeriodProps>(({ days, setDays }) => (
-  <div className="mb-6">
-    <span className="block text-m font-light mb-1">Срок аренды</span>
+  <div className="order-1">
+    <Text size="text-m" font="font-light">
+      Срок аренды
+    </Text>
     <InputRange min={MIN} max={MAX} value={days} items={ITEMS} onChange={setDays} />
   </div>
 ));

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

@@ -21,8 +21,8 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex justify-between mb-6">
-        <div className="mr-4 w-full">
+      <div className="flex flex-col sm:flex-row gap-4 order-1">
+        <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}
             fieldLabel="volume"
@@ -32,7 +32,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
             placeholder="Выберите размер"
           />
         </div>
-        <div className="w-full">
+        <div className="flex-1 min-w-0">
           <WrapperSelect
             data={safeBoxCases}
             fieldLabel="safeBoxCasesSize"

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { RegionsAndBranches } from './RegionsAndBranches';
-import { RenderRadioButtons } from './RenderRadioButtons';
+import { RadioButtons } from './RadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
 import { Text } from '../../ui-kit/Text/Text';
@@ -33,7 +33,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     onClick,
   }) => {
     return (
-      <div className="flex-1 mr-9">
+      <div className="contents sm:block flex-1 space-y-xl">
         <RegionsAndBranches
           regions={regions}
           selectedRegion={selectedRegion}
@@ -51,12 +51,14 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
           selectedBoxSize={selectedBoxSize}
           onSelectedBoxSize={(value) => onChange({ selectedBoxSize: value })}
         />
-        <Text size="text-l" font="font-light" color="text-secondary-text">
-          Тип договора
-        </Text>
-        <div className="flex justify-between items-center mt-5">
-          <RenderRadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={onClick} />
+        <div className="order-4">
+          <Text size="text-l" font="font-light" color="text-secondary-text">
+            Тип договора
+          </Text>
+        </div>
+        <div className="contents sm:flex justify-between items-center">
+          <RadioButtons className="mb-4 sm:mb-0" />
+          <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 justify-between align-top mb-6">
+    <div className="flex flex-col sm:flex-row gap-x-9 align-top mb-6">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

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

@@ -9,29 +9,32 @@ export interface SafeDepositRentalTotalProps {
 
 export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days, tariffs = [] }) => {
   const price = calculatePrice(days, tariffs);
+  const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
 
   return (
-    <div className="flex flex-col justify-between">
-      <div className="flex">
-        {renderTotal('Аренда за', days, 'mr-11')}
+    <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">
+        {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
-        <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" />
-
-        <span className="text-s font-light text-white opacity-80 mt-xs inline-block">
-          На рисунки изображена пачка<br></br> листов формата А4
+      <span className="sm:hidden order-3 mb-2 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]" />
+        <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
+          {imageDescription}
         </span>
       </div>
     </div>
   );
 });
 
-const renderTotal = (label: string, total: string | number, className = '') => {
+const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className={className}>
-      <div className="text-m font-light text-secondary-text mb-1">{label}</div>
-      <span className="text-h3 text-primary-text">{total}</span>
+    <div className="flex justify-between items-center gap-y-1 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/renderStep.tsx

@@ -48,7 +48,7 @@ const renderDefaultStep =
       <div
         key={String(i)}
         className={style(
-          'relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden space-y-3xl',
+          'relative flex flex-col items-center text-center justify-between whitespace-pre-line overflow-hidden space-y-3xl',
           getContainerWidth(arr.length),
         )}
       >
@@ -70,7 +70,7 @@ const renderDefaultStep =
         </div>
         {button?.text && !isMainButton ? (
           <Button
-            className="box-border py-s h-12 w-full max-w-[240px] mt-auto"
+            className="box-border py-s w-full max-w-60 mt-auto"
             version={version as ButtonVersion}
             {...button}
           >

package/mobile/src/components/Tabs/ScrollableTabs.tsx

@@ -19,7 +19,6 @@ export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: tabs?.length || 0,
-    isCyclic: false,
   });
 
   return (

package/mobile/src/components/VerticalLayout/VerticalLayout.example.json

@@ -4,7 +4,6 @@
     "isTheme": false,
     "isPadding": false,
     "isInnerPadding": true,
-    "align": "stretch",
     "gap": ""
   },
   "style": ["col-span-12"],

package/mobile/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-6xl' : ''}
-        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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/BaseTile/BaseTile.tsx

@@ -41,9 +41,8 @@ export const BaseTile = JSX<BaseTileProps>(
         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-3xl">
+      <div className="grow relative flex flex-wrap @xl:flex-nowrap justify-between items-stretch gap-3xl">
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
@@ -53,9 +52,12 @@ export const BaseTile = JSX<BaseTileProps>(
         >
           {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/mobile/src/ui-kit/BlockWrapper.tsx

@@ -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/mobile/src/ui-kit/LinkButton/LinkButton.tsx

@@ -4,7 +4,7 @@ import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../Img/Img';
 
 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-[316px]
+  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 =

package/mobile/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/mobile/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,7 +105,7 @@ const renderRegionGroup =
   (onChangeLocation?: (region: Region) => void) =>
   ([letter, regions]: [string, Region[]]) =>
     (
-      <div key={letter} className="break-inside-avoid mb-2xl w-[224px]">
+      <div key={letter} className="break-inside-avoid mb-2xl w-56">
         <div className="mb-s">
           <Text size="text-h6">{letter}</Text>
         </div>

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-[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/mobile/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/mobile/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>

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -26,7 +26,7 @@ interface SwipeListContainerProps extends SwipeListContainerContent {
   onVisibleIndicesChange?: (indices: number[]) => void;
 }
 
-const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
+const childStyleMap = ['min-w-full', 'min-w-1/2', 'min-w-1/3', 'min-w-1/4'];
 
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({