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

package/mobile/src/ui-kit/YandexMap/renderUserGeolocation.tsx

@@ -32,7 +32,7 @@ export const renderUserGeolocation = (
 
   return (
     <div
-      className={`select-none cursor-pointer py-4 w-12 bg-white ${Object.values(styles).join(
+      className={`select-none cursor-pointer py-m w-12 bg-white ${Object.values(styles).join(
         ' ',
       )} ${className}`}
       onClick={setUserGeoLocation}

package/mobile/src/utils/style.ts

@@ -1,4 +1,5 @@
-type Atom = string | null | undefined;
+type Falsy = null | undefined | false | 0;
+type Atom = string | Falsy;
 
 export const style = (...atoms: Array<Atom | Atom[]>): string =>
   atoms

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -32,13 +32,9 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
 
   return (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
-      <div className="container max-w-[978px]">
+      <div className="container max-w-[978px] space-y-lg">
         {formBlock?.title ? (
-          <Heading
-            headingType="h3"
-            title={formBlock.title}
-            className="mb-4 sm:mb-8 sm:text-center"
-          />
+          <Heading headingType="h3" title={formBlock.title} className="sm:text-center" />
         ) : null}
         {/* <EmbeddedForm {...formBlock} onSubmit={handleSubmit} /> */}
         {formBlock ? renderEmbeddedForm(formBlock, handleSubmit) : null}

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

@@ -62,13 +62,13 @@ export const ApplicationFormAcquiring = JSX<ApplicationFormsProps>((props) => {
   const regions = useGetRegions();
 
   return (
-    <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Вид эквайринга и регион" className="sm:text-center mb-4" />
+    <form className="container space-y-m" onSubmit={formProps.onSubmit}>
+      <Heading headingType="h6" title="Вид эквайринга и регион" className="sm:text-center" />
       {renderAcquiringRegion({ regions, field })}
-      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center" />
       {renderAcquiringDataOrganization(field)}
       {renderSlideCheckboxes(field)}
-      {renderSubmitButton(button, 'mb-4')}
+      {renderSubmitButton(button)}
       <Footnote link={link} />
     </form>
   );

package/src/components/ApplicationForm/ApplicationFormBusinessCard.tsx

@@ -52,10 +52,10 @@ export const ApplicationFormBusinessCard = JSX<ApplicationFormsProps>((props) =>
   const regions = useGetRegions();
 
   return (
-    <form className="container" onSubmit={formProps.onSubmit}>
+    <form className="container space-y-s" onSubmit={formProps.onSubmit}>
       {renderRegion({ regions, field })}
       {renderBusinessCardDataOrganization(field)}
-      {renderSubmitButton(button, 'mb-4')}
+      {renderSubmitButton(button)}
       <Footnote link={link} />
     </form>
   );

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -64,14 +64,14 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
   const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
 
   return (
-    <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Параметры кредита" className="sm:text-center mb-4" />
+    <form className="container space-y-m" onSubmit={formProps.onSubmit}>
+      <Heading headingType="h6" title="Параметры кредита" className="sm:text-center" />
       {renderCreditParameters(field)}
-      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center" />
       {renderCreditDataOrganization(field)}
-      <Heading headingType="h6" title="Офис банка" className="sm:text-center mb-4" />
+      <Heading headingType="h6" title="Офис банка" className="sm:text-center" />
       {renderRegionDepartment({ regions, branches, field })}
-      {renderSubmitButton(button, 'mb-4')}
+      {renderSubmitButton(button)}
       <Footnote link={link} />
     </form>
   );

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -47,22 +47,22 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
       <Heading
         headingType="h6"
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
-        className="sm:text-center mb-4"
+        className="sm:text-center mb-m"
       />
-      <div className="max-w-[560px] m-auto">
+      <div className="max-w-[560px] m-auto space-y-s">
         <InputControl
-          className="shrink-0 w-full mb-3"
+          className="shrink-0 w-full"
           label="Имя"
           {...withValidator(field('name'), nameValidator)}
         />
         <PhoneInputControl
-          className="shrink-0 w-full mb-3"
+          className="shrink-0 w-full"
           label="Телефон"
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
       <div className="flex justify-between flex-col-reverse sm:items-center sm:flex-row max-w-[560px] m-auto">
-        <div className="flex-1 mt-4 sm:mt-0">
+        <div className="flex-1">
           <Footnote link={link} />
         </div>
         {renderSubmitButton(button)}

package/src/components/ApplicationForm/ApplicationFormGrantSupport.tsx

@@ -40,7 +40,7 @@ export const ApplicationFormGrantSupport = JSX<ApplicationFormsProps>((props) =>
           <Button
             href={regionHref}
             target="_blank"
-            className={style('p-4 w-full sm:w-auto', buttonStyle)}
+            className={style('p-m w-full sm:w-auto', buttonStyle)}
           >
             {button?.text ? button.text : 'Перейти'}
           </Button>

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -63,19 +63,19 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
   const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
 
   return (
-    <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-m" />
+    <form className="container space-y-m" onSubmit={formProps.onSubmit}>
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center" />
       {renderWedDataOrganization(field)}
-      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center mb-m" />
+      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center" />
       {renderQuestionsInterested(field)}
-      <div className="flex flex-col border-b border-main-divider mb-5 pb-5 sm:items-center sm:flex-row sm:mb-9 sm:pb-9">
-        {renderSubmitButton(button, 'mb-m sm:mr-lg sm:mb-0')}
+      <div className="flex flex-col gap-m border-b border-main-divider pb-lg sm:items-center sm:flex-row sm:pb-4xl">
+        {renderSubmitButton(button)}
         <Footnote link={link} />
       </div>
       <Heading
         headingType="h6"
         title="Или свяжитесь с нами удобным способом"
-        className="sm:text-center mb-m"
+        className="sm:text-center"
       />
       {renderContacts()}
     </form>

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -12,7 +12,7 @@ export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseTy
   const backgroundColor = responseOK ? 'bg-ok' : 'bg-fail';
 
   return (
-    <div className={`flex items-center mt-lg p-lg rounded-md space-x-m ${backgroundColor}`}>
+    <div className={`flex items-center p-lg rounded-md space-x-m ${backgroundColor}`}>
       {responseOK ? (
         <Img image={{ icon: 'ResponceOKIcon' }} width="42" height="42" />
       ) : (
@@ -22,7 +22,7 @@ export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseTy
         <Heading
           headingType="h6"
           title={responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
-          className="mb-1"
+          className="mb-2xs"
         />
         <Text size="text-l" font="font-light" color="text-secondary-text">
           {responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее'}

package/src/components/ApplicationForm/SelectControl.tsx

@@ -4,15 +4,16 @@ import { Text } from '../../ui-kit/Text/Text';
 
 interface SelectControlProps extends SelectProps {
   error?: string;
+  className?: string;
 }
 
-export const SelectControl = JSX<SelectControlProps>((props) => (
-  <div>
-    <Select {...props} valid={!props.error} />
+export const SelectControl = JSX<SelectControlProps>(({ className = '', error, ...rest }) => (
+  <div className={className}>
+    <Select {...rest} valid={!error} />
     <div className="h-2">
-      {props.error ? (
+      {error ? (
         <Text size="text-xs" font="font-light" color="text-error">
-          {props.error}
+          {error}
         </Text>
       ) : null}
     </div>

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -6,27 +6,27 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="mb-4 sm:flex sm:justify-between sm:gap-5 sm:mb-7">
-    <div className="sm:w-1/2">
+  <div className="sm:flex sm:justify-between sm:gap-lg">
+    <div className="sm:w-1/2 space-y-s">
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Наименование организации"
         {...withValidator(field('fullName'), defaultValidator)}
       />
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Контактное лицо"
         {...withValidator(field('name'), nameValidator)}
       />
     </div>
-    <div className="sm:w-1/2">
+    <div className="sm:w-1/2 space-y-s">
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="ИНН"
         {...withValidator(field('inn'), innValidator)}
       />
       <PhoneInputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Телефон"
         {...withValidator(field('phone'), phoneValidator)}
       />

package/src/components/ApplicationForm/renderAcquiringRegion.tsx

@@ -12,8 +12,8 @@ interface AcquiringRegionProps {
 }
 
 export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps) => (
-  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
-    <div className="mb-3 sm:mb-0 sm:w-1/2">
+  <div className="border-b border-b-main-divider sm:border-none sm:flex sm:justify-between gap-lg ">
+    <div className="sm:w-1/2">
       <SelectControl
         label="Вид эквайринга"
         placeholder="Выберите эквайринг"
@@ -21,7 +21,7 @@ export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps)
         {...withValidator(field('acquiringType'), defaultValidator)}
       />
     </div>
-    <div className="mb-3 sm:mb-0 sm:w-1/2">
+    <div className="sm:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -8,27 +8,27 @@ import { defaultValidator, innValidator, nameValidator, phoneValidator } from '.
 export const renderBusinessCardDataOrganization = (
   field: FormFieldRegisterer<BusinessCardFormState>,
 ) => (
-  <div className="sm:flex sm:justify-between sm:gap-5">
-    <div className="sm:w-1/2">
+  <div className="sm:flex sm:justify-between sm:gap-lg">
+    <div className="sm:w-1/2 space-y-s">
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Контактное лицо"
         {...withValidator(field('name'), nameValidator)}
       />
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="ИНН"
         {...withValidator(field('inn'), innValidator)}
       />
     </div>
-    <div className="sm:w-1/2">
+    <div className="sm:w-1/2 space-y-s">
       <PhoneInputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Телефон"
         {...withValidator(field('phone'), phoneValidator)}
       />
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Электронная почта"
         {...withValidator(field('mail'), defaultValidator)}
       />

package/src/components/ApplicationForm/renderContacts.tsx

@@ -1,21 +1,21 @@
 import { Img } from '../../ui-kit/Img/Img';
 
 export const renderContacts = () => (
-  <div className="flex">
+  <div className="flex gap-xl">
     <a
-      className="flex items-center text-primary-text no-underline mr-6"
+      className="flex gap-s items-center text-primary-text no-underline"
       href={`tel:8 (800) 200-78-70`}
       aria-label="8 (800) 200-78-70"
     >
-      <Img image={{ icon: 'PhoneIcon' }} width="24" height="24" className="mr-3" />
+      <Img image={{ icon: 'PhoneIcon' }} width="24" height="24" />
       <span>8 (800) 200-78-70</span>
     </a>
     <a
-      className="flex items-center text-primary-text no-underline"
+      className="flex gap-s items-center text-primary-text no-underline"
       aria-label="ved@rshb.ru"
       href={`mailto:ved@rshb.ru`}
     >
-      <Img image={{ icon: 'MailIcon' }} width="24" height="24" className="mr-3" />
+      <Img image={{ icon: 'MailIcon' }} width="24" height="24" />
       <span>ved@rshb.ru</span>
     </a>
   </div>

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -6,36 +6,36 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
-    <div className="sm:w-1/2">
+  <div className="pb-2xs border-b border-b-main-divider sm:flex sm:justify-between sm:gap-lg sm:border-none sm:pb-0">
+    <div className="sm:w-1/2 space-y-s">
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Наименование организации"
         {...field('fullName')}
       />
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="ИНН"
         {...withValidator(field('inn'), innValidator)}
       />
       <PhoneInputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Телефон"
         {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
-    <div className="sm:w-1/2">
+    <div className="sm:w-1/2 space-y-s">
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Годовая выручка, ₽"
         {...withValidator(field('annualRevenue'), defaultValidator)}
       />
       <InputControl
-        className="shrink-0 w-full mb-3"
+        className="shrink-0 w-full"
         label="Контактное лицо"
         {...withValidator(field('name'), nameValidator)}
       />
-      <InputControl className="shrink-0 w-full mb-3" label="Электронная почта" {...field('mail')} />
+      <InputControl className="shrink-0 w-full" label="Электронная почта" {...field('mail')} />
     </div>
   </div>
 );

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -12,8 +12,8 @@ import {
 } from './CreditParameters';
 
 export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
-    <div className="mb-3 sm:mb-0 sm:w-1/2">
+  <div className="border-b border-b-main-divider sm:flex sm:justify-between gap-lg sm:border-none">
+    <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Сумма кредита, ₽

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -6,23 +6,15 @@ export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormStat
   const textField = field('text');
 
   return (
-    <div className="mb-3 sm:mb-6">
-      <div className="mb-4 sm:flex sm:items-center sm:gap-6">
-        <Checkbox className="mb-3 sm:mb-0" text="Валютный контроль" {...field('currencyControl')} />
-        <Checkbox
-          className="mb-3 sm:mb-0"
-          text="Документарные операции"
-          {...field('documentaryOperations')}
-        />
-        <Checkbox
-          className="mb-3 sm:mb-0"
-          text="Конверсионные операции"
-          {...field('conversionOperations')}
-        />
+    <div className="space-y-m">
+      <div className="sm:flex sm:items-center sm:gap-xl">
+        <Checkbox text="Валютный контроль" {...field('currencyControl')} />
+        <Checkbox text="Документарные операции" {...field('documentaryOperations')} />
+        <Checkbox text="Конверсионные операции" {...field('conversionOperations')} />
       </div>
       <textarea
         placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
-        className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
+        className="block w-full resize-y min-h-24 p-m outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
         value={textField.value}
         onInput={
           ((e: { target?: { value?: string } }) =>

package/src/components/ApplicationForm/renderRegion.tsx

@@ -11,12 +11,11 @@ interface RegionProps {
 }
 
 export const renderRegion = ({ regions, field }: RegionProps) => (
-  <div className="w-full mb-3 sm:mb-5">
-    <SelectControl
-      label="Регион"
-      placeholder="Выберите регион"
-      options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
-      {...withValidator(field('region'), defaultValidator)}
-    />
-  </div>
+  <SelectControl
+    className="w-full"
+    label="Регион"
+    placeholder="Выберите регион"
+    options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+    {...withValidator(field('region'), defaultValidator)}
+  />
 );

package/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -13,8 +13,8 @@ interface RegionDepartmentProps {
 }
 
 export const renderRegionDepartment = ({ regions, branches, field }: RegionDepartmentProps) => (
-  <div className="mb-4  sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0">
-    <div className="mb-3 sm:mb-0 sm:w-1/2">
+  <div className="sm:flex sm:justify-between sm:gap-m sm:mb-2xl sm:border-none sm:pb-0">
+    <div className="sm:w-1/2">
       <SelectControl
         label="Регион"
         placeholder="Выберите регион"
@@ -22,7 +22,7 @@ export const renderRegionDepartment = ({ regions, branches, field }: RegionDepar
         {...withValidator(field('region'), defaultValidator)}
       />
     </div>
-    <div className="mb-3 sm:mb-0 sm:w-1/2">
+    <div className="sm:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderSlideCheckboxes.tsx

@@ -3,7 +3,7 @@ import { SlideCheckbox } from '../../ui-kit/SlideCheckbox/SlideCheckbox';
 import type { AcquiringFormState } from './AcquiringFormState';
 
 export const renderSlideCheckboxes = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="sm:mb-5">
+  <div>
     <SlideCheckbox text="Хочу купить онлайн-кассу" {...field('onlineCheckout')} />
     <SlideCheckbox text="Хочу купить POS-терминал" {...field('posTerminal')} />
   </div>

package/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -9,10 +9,7 @@ export const renderSubmitButton = (button?: SubmitButtonProps, className?: strin
   });
 
   return (
-    <button
-      type="submit"
-      className={style('p-4 mt-3 w-full sm:mt-0 sm:w-auto', buttonStyle, className)}
-    >
+    <button type="submit" className={style('p-m w-full sm:w-auto', buttonStyle, className)}>
       {button?.text ? button.text : 'Отправить заявку'}
     </button>
   );

package/src/components/Bonus/Bonus.tsx

@@ -3,8 +3,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
@@ -12,11 +12,11 @@ export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>(
   ({ className = '', title, description, bonusItems = [], ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
         <Headline
           className="mb-xl"
-          isPadding={false}
+          isEmbedded={true}
           title={title}
           description={description}
           headlineVersion="M"
@@ -26,22 +26,23 @@ export const Bonus = JSX<BonusProps>(
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="flex-grow w-full sm:w-[49%] border border-gray p-m mb-text mx-xs even:mr-0 odd:ml-0 last:odd:mx-0"
+                  className="space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m"
                 >
-                  {_?.title ? (
-                    <div className="mb-xs last:mb-0">
-                      <Text size="text-h4">{_.title}</Text>
-                    </div>
-                  ) : null}
-                  {_?.description ? (
-                    <div className="mb-text last:mb-0">
-                      <Paragraph size="text-xl" font="font-light">
-                        {_.description}
-                      </Paragraph>
-                    </div>
-                  ) : null}
-
-                  <div className="flex justify-between items-end">
+                  <div className="grow">
+                    {_?.title ? (
+                      <div className="mb-xs last:mb-0">
+                        <Text size="text-h4">{_.title}</Text>
+                      </div>
+                    ) : null}
+                    {_?.description ? (
+                      <div className="mb-text last:mb-0">
+                        <Paragraph size="text-xl" font="font-light">
+                          {_.description}
+                        </Paragraph>
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="flex justify-center sm:justify-between sm:items-end">
                     <div className="hidden sm:block">{renderButtonsSection(_?.buttons)}</div>
                     {_.bonusItemContent?.bonusType
                       ? renderBonusItemContent(_.bonusItemContent)
@@ -62,14 +63,15 @@ const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef)
     : renderBonusImage(bonusItemContent as BonusImageDef);
 
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="w-full pt-default mt-s flex items-end">
+  <div className="w-full pt-default mt-s flex justify-center sm:justify-end items-end">
     {_.bonusCount ? (
-      <span className="shrink-0 w-1/2 sm:w-auto font-mohave text-title-extra -tracking-[5px] bg-clip-text text-transparent bg-green-to-yellow mt-lg">
-        {_.bonusCount}
-      </span>
+      // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
+      <div className="shrink-0 -mb-10">
+        <span className="font-mohave text-title-extra gradient-color-text">{_.bonusCount}</span>
+      </div>
     ) : null}
     {_.bonusName ? (
-      <div className="w-1/2 sm:w-auto bg-clip-text text-transparent bg-green-to-yellow">
+      <div className="shrink-0 gradient-color-text">
         <Text size="text-h2">{_.bonusName}</Text>
       </div>
     ) : null}

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -19,8 +19,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline
-        className="mb-4 sm:mb-3xl"
-        isPadding={false}
+        className="mb-4xl sm:mb-3xl"
         title={title}
         description={subtitle}
         headlineVersion="M"

package/src/components/BonusBenefitsBlock/bonusBenefitStyles.mobile.ts

@@ -1 +1 @@
-export const bonusBenefitStyles = 'justify-between p-4 h-full border border-gray';
+export const bonusBenefitStyles = 'justify-between p-m h-full border border-gray';

package/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -8,7 +8,7 @@ export const renderBonusBenefits = (
   columnsCount: ColumnsCount,
   cardTextAlign: AlignType,
 ) => (
-  <div className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}>
+  <div className={`grid gap-2xs ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}>
     {bonusBenefits.map(renderBonusBenefit)}
   </div>
 );

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -10,7 +10,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 export const BusinessBlock = JSX<BusinessBlockProps>(({ className, title, cards, ...rest }) => (
   <BlockWrapper className={className} defaultPadding="p-6xl space-y-3xl" {...rest}>
     <Heading headingType="h3" title={title} className="text-center" />
-    <div className="flex gap-5">
+    <div className="flex gap-lg">
       {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}
     </div>
   </BlockWrapper>

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -29,7 +29,7 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   const { icon, text } = item;
 
   return (
-    <li key={key} className="flex items-center gap-s last:mb-0">
+    <li key={key} className="flex items-center gap-s">
       {icon?.icon ? (
         <Img image={icon} className="w-12 h-12 min-w-12 p-s rounded-icon bg-main-divider" />
       ) : null}

package/src/components/ButtonsBlock/ButtonsBlock.fixture.mobile.tsx

@@ -19,7 +19,7 @@ const buttons: ButtonContent[] = [
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 p-4">
+    <div className="container grid grid-cols-12">
       <ButtonsBlock className="col-span-12" buttons={buttons} />
     </div>
   ),