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

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -31,22 +31,22 @@ export const ContactsBlock = JSX<ContactsBlockProps>(
 );
 
 const renderBlocks = (info: ContactBlockProps[][]) => (
-  <div className="flex grow basis-0">
+  <div className="flex gap-5xl grow basis-0">
     {info.map((column, index) => renderBlocksColumn({ column, index }))}
   </div>
 );
 
 const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
   column ? (
-    <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
+    <div className="flex flex-col gap-xl grow basis-0" key={`col-${String(index)}`}>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
-        <div className="mt-xl first:mt-0" key={String(key)}>
+        <div key={String(key)}>
           <Headline
             title={title}
             description={description}
             headlineVersion="XS"
             align="text-left"
-            isPadding={false}
+            isEmbedded={true}
           />
           {additionalDescription ? (
             <div className="mt-xs opacity-80">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/mobile/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/mobile/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/mobile/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/mobile/src/components/Headline/HeadlineContent.ts

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

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -49,7 +49,7 @@ export const headlineVersionStyles: Record<
   },
 };
 
-// TODO Move to Gallery and rename
+// TODO: Move to Gallery and rename
 export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
   H6: 'text-h6',
   XL_L: 'text-xl-light',

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -74,7 +74,7 @@ function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m font-light ${btnClassName}`}
+      className={`box-border px-m py-s text-m font-light ${btnClassName}`}
     >
       {title}
     </button>

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -54,13 +54,13 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
           {renderArrows({
             ...controls,
             btnClass: ['left-12', 'right-12'],
-            className: 'top-[62px]',
+            className: 'top-16',
           })}
           {canDec ? (
-            <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
+            <div className="absolute top-0 left-0 h-full w-32 bg-opacity-from-white" />
           ) : null}
           {canInc ? (
-            <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
+            <div className="absolute top-0 right-0 h-full w-32 bg-opacity-to-white" />
           ) : null}
         </div>
         <Button className="w-60 text-center" version="primary" {...button} href={activeHref} />
@@ -75,7 +75,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
 
   return (
     <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000 px-6xl">
-      <div className={`w-full flex flex-nowrap gap-3.5 pb-6xl ${cardsAlignStyle}`}>
+      <div className={`w-full flex flex-nowrap gap-s pb-6xl ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
           renderNavButton({
             slide,
@@ -99,18 +99,18 @@ function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
       type="button"
       key={String(i)}
       onClick={onClick}
-      className={`p-3xl min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
+      className={`p-3xl min-w-fit flex items-center gap-2xl bg-white border-solid border relative ${btnClassName}`}
     >
       {slide?.icon ? (
         <Img
-          className="p-5 rounded-full bg-secondary-light mr-[30px]"
+          className="p-lg rounded-full bg-secondary-light"
           image={slide.icon}
           width="108"
           height="108"
         />
       ) : null}
 
-      <div className="flex gap-3.5">
+      <div className="flex gap-s">
         {slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null}
         {slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null}
       </div>
@@ -123,7 +123,7 @@ function renderValueBlock(title: string, sum: number) {
   return (
     <div className="flex flex-col text-left whitespace-pre">
       <span className="text-h6">{toLocalNumberFormat(2)(sum)} ₽</span>
-      <span className="text-secondary-text text-l mt-1">{title}</span>
+      <span className="text-secondary-text text-l mt-2xs">{title}</span>
     </div>
   );
 }

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -45,7 +45,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
 
   return (
     <BlockWrapper className={className} {...rest}>
-      <div className="container text-m font-light">
+      <div className="container text-m font-light space-y-4xl">
         {columns?.length ? (
           <div>
             <div className="flex items-end relative pl-3xl pr-lg text-white">
@@ -60,7 +60,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
         ) : null}
 
         {items?.length ? (
-          <List className="mt-9 max-w-[657px]" items={items} isDotted={isDotted} listItemSize="M" />
+          <List className="max-w-[657px]" items={items} isDotted={isDotted} listItemSize="M" />
         ) : null}
       </div>
     </BlockWrapper>
@@ -83,7 +83,7 @@ const renderInvestmentColumn = (
       {column.cells?.length ? (
         <div
           className={`w-full ${
-            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-[290px]' : ''
+            isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-[292px]' : ''
           }`}
         >
           {column.cells.reverse().map(renderInvestmentCell)}

package/mobile/src/components/LikeControl/LikeControl.tsx

@@ -15,7 +15,7 @@ export const LikeControl = JSX<LikeControlProps>(({ className = '' }) => {
 
   return (
     <div
-      className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className}`}
+      className={`border-main border-2 border-solid bg-white flex w-32 items-center justify-center gap-s p-xs font-sans ${className}`}
     >
       <LikeButton
         onClick={handlerDecorator(likeService.like)}

package/mobile/src/components/LinkDocs/LinkDocItem.tsx

@@ -9,7 +9,7 @@ export interface LinkDocItemProps extends LinkDoc {
 
 export const LinkDocItem = JSX<LinkDocItemProps>(({ icon, text, fileSize, ...linkProps }) => (
   <a
-    className="flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+    className="flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
     role="link"
     {...linkProps}
   >

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -33,19 +33,20 @@ export const LinkDocs = JSX<LinkDocsProps>(
     const router = useRouter();
 
     return (
-      <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+      <BlockWrapper className={style('space-y-lg', className)} defaultPadding="p-6xl" {...rest}>
         <Headline
           title={title}
           description={description}
           align={align}
           headlineVersion="M"
           as="h2"
-          isPadding={false}
+          isEmbedded={true}
         />
         {documents?.length ? (
           <div
             className={style(
-              'mt-5 sm:mt-8 flex flex-col gap-6',
+              'grid gap-xl',
+              columnsMode === 'double' ? '@md:grid-cols-2' : 'grid-cols-1',
               linkColumnsModeStyleMap[columnsMode],
             )}
             role="list"
@@ -72,11 +73,7 @@ const renderLinkDocItem =
         : docBlockDef?.fileSize;
 
     return (
-      <div
-        key={String(i)}
-        className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
-        role="listitem"
-      >
+      <div key={String(i)} role="listitem">
         <LinkDocItem
           text={docBlockDef?.text}
           target={docBlockDef?.target}

package/mobile/src/components/MobileAppTile/renderList.tsx

@@ -2,7 +2,7 @@ import { List } from '../../ui-kit/List/List';
 
 export const renderList = (items?: string[]) => {
   return items?.length ? (
-    <List items={items} className="text-l font-light mb-xs last:mb-0" />
+    <List items={items} className="text-l font-light" />
   ) : (
     <span className="text-m font-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение

package/mobile/src/components/MortgageFiltration/MortgageFiltration.tsx

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

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

@@ -58,7 +58,7 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
         <div className="flex text-l font-light">
-          <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
+          <Icon name="GeolocationIcon" width="24" height="24" className="pr-2xs" />
           {address}
         </div>
         <div className="flex">{nearbyOffices.map(renderNearbyOffice)}</div>

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

@@ -7,17 +7,17 @@ export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkSc
   const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
 
   return status ? (
-    <div className="flex">
-      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4">
+    <div className="flex gap-m">
+      <div className="p-s border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light">
         {workTime ? workTime : null}
       </div>
-      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-yellow border-golden">
+      <div className="p-s border rounded-md text-m flex items-center cursor-pointer text-yellow border-golden">
         {lunchHour ? lunchHourText : null}
       </div>
     </div>
   ) : (
     <div className="flex">
-      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-error border-error">
+      <div className="p-s border rounded-md text-m flex items-center cursor-pointer text-error border-error">
         Выходной
       </div>
     </div>
@@ -28,8 +28,8 @@ export const renderNearbyOffice = (
   { icon, title, distance, time }: NearbyOffices,
   index: number,
 ) => (
-  <div className="flex mr-4" key={`nearbyOffice${index}`}>
-    <Icon name={icon} width="16" height="16" className="mr-1" />
+  <div className="flex mr-m" key={`nearbyOffice${index}`}>
+    <Icon name={icon} width="16" height="16" className="mr-xs" />
     {title ? <Text size="text-m">{title}&nbsp;</Text> : null}
     <Text size="text-m" font="font-light">
       {distance ? ` (${distance})` : null}
@@ -42,17 +42,17 @@ export const renderDay = (
   inx: number,
 ) => (
   <div
-    className="flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0"
+    className="flex flex-col gap-2xs pb-s border-b border-solid border-main-divider mb-s last:border-0"
     key={`day${inx}`}
   >
-    <div className="flex justify-between items-center w-full pb-1 text-l text-primary-text">
+    <div className="flex justify-between items-center w-full text-l text-primary-text">
       <div>{title}</div>
       {status ? null : <div className="text-m font-light text-error">Выходной</div>}
       {status && workTime ? <div>{workTime}</div> : null}
     </div>
     {status && lunchHour ? renderLunchHour(lunchHour) : null}
     {description ? (
-      <div className="pb-1 text-s font-light text-secondary-text">{description}</div>
+      <div className="text-s font-light text-secondary-text">{description}</div>
     ) : null}
   </div>
 );
@@ -61,13 +61,15 @@ const renderLunchHour = (lunchHour: string) => {
   const hasTime = /\d+/gi.test(lunchHour);
 
   return hasTime ? (
-    <div className="flex justify-between items-center w-full pb-1 text-m font-light text-error">
+    <div className="flex justify-between items-center w-full text-m font-light text-error">
       <div>Перерыв</div>
       <div>{lunchHour}</div>
     </div>
   ) : (
-    <div className="flex justify-between items-center w-full pb-1 text-m font-light text-primary-main">
-      <div>{lunchHour}</div>
+    <div className="flex justify-between items-center w-full">
+      <Text size="text-m" font="font-light" color="text-primary-main">
+        {lunchHour}
+      </Text>
     </div>
   );
 };

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -18,7 +18,7 @@ export const Placeholder = JSX<PlaceholderProps>(
         description={description}
         headlineVersion="L"
         align="text-left"
-        isPadding={false}
+        isEmbedded={true}
       />
       <figure className="m-0 mt-xl min-w-[80%]">{renderShimmer()}</figure>
     </BlockWrapper>

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -11,7 +11,7 @@ export function renderBackwardButton(
   const commonProps = { text, href, target, ariaLabel: text };
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-s">
       <Button
         className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center"
         version={version}

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -28,7 +28,7 @@ export const PromoTile = JSX<PromoTileProps>(
               title={title}
               headlineVersion={headlineVersion}
               align="text-left"
-              isPadding={false}
+              isEmbedded={true}
             />
           ) : null
         }