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

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

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

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

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

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

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

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

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

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

@@ -24,7 +24,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     className,
     version = 'primary',
     isTheme = true,
-    defaultPadding = 'p-m',
+    defaultPadding = 'p-xl',
     padding,
     block,
     tag = 'section',

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -1,11 +1,13 @@
 type HTML = string;
 
+/**
+ * @title Стиль форматированного текста
+ * @enumNames ["по умолчанию", "Строки разного цвета", "Горизонтальные разделители"]
+ */
+export type RichVersion = '' | 'striped' | 'horizontal-separator';
+
 export interface RichTextProps {
-  /** @title Текст */
+  /** @title Форматированный текст */
   __html?: HTML;
-  /**
-   * @title Стиль форматированного текста
-   * @enumNames ["по умолчанию", "Строки разного цвета", "Горизонтальные разделители"]
-   */
-  richVersion?: '' | 'striped' | 'horizontal-separator';
+  richVersion?: RichVersion;
 }

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

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

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

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

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

@@ -1,6 +1,7 @@
 import ymaps from 'yandex-maps';
 import { Icon } from '../Icon/Icon';
 import type { MockPoints } from './mockPoints';
+
 const styles = {
   border: 'border border-transparent rounded-md',
   position: 'relative flex items-center',
@@ -31,7 +32,7 @@ export const renderSearchField = (
   };
 
   return (
-    <div className={`${Object.values(styles).join(' ')} bg-white py-3 pl-11 pr-4 w-full`}>
+    <div className={`${Object.values(styles).join(' ')} bg-white py-s pl-5xl pr-m w-full`}>
       <Icon
         name="LoupeIcon"
         iconVersion="black"

package/mobile/src/utils/formatBytes.ts

@@ -0,0 +1,12 @@
+const KILO = 1024;
+const KILO_SIZES = ['байт', 'Кб', 'Мб', 'Гб', 'Тб', 'Пб'];
+
+export const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) {
+    return '';
+  }
+
+  const i = Math.floor(Math.log(bytes) / Math.log(KILO));
+
+  return `${parseFloat((bytes / Math.pow(KILO, i)).toFixed(decimals))} ${KILO_SIZES[i]}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.12.9",
+  "version": "0.12.11",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -37,6 +37,7 @@
       "types": "./mobile/lib/*.d.ts"
     },
     "./lib/common.css": "./lib/common.css",
+    "./mobile/lib/common.css": "./mobile/lib/common.css",
     "./fonts/ubuntu/*": "./fonts/ubuntu/*",
     "./lib/content-page-repository": {
       "import": "./lib/content-page-repository/index.js",
@@ -63,6 +64,7 @@
     "bundle",
     "mobile/bundle",
     "fonts",
+    "mobile/fonts",
     "src",
     "mobile/src",
     "cosmos-static/icons",
@@ -185,11 +187,11 @@
   },
   "size-limit": [
     {
-      "limit": "9 kB",
+      "limit": "10 kB",
       "path": "lib/common.css"
     },
     {
-      "limit": "55 kB",
+      "limit": "58 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -38,7 +38,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   }, []);
 
   return (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container max-w-[978px]">
         {title ? (
           <Heading headingType="h3" title={title} className="mb-4 sm:mb-8 sm:text-center" />

package/src/components/ApplicationForm/ApplicationFormWed.tsx

@@ -64,18 +64,18 @@ export const ApplicationFormWed = JSX<ApplicationFormsProps>((props) => {
 
   return (
     <form className="container" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-m" />
       {renderWedDataOrganization(field)}
-      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center mb-4" />
+      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center mb-m" />
       {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-4 sm:mr-5 sm:mb-0')}
+        {renderSubmitButton(button, 'mb-m sm:mr-lg sm:mb-0')}
         <Footnote link={link} />
       </div>
       <Heading
         headingType="h6"
         title="Или свяжитесь с нами удобным способом"
-        className="sm:text-center mb-4"
+        className="sm:text-center mb-m"
       />
       {renderContacts()}
     </form>

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -12,11 +12,11 @@ export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseTy
   const backgroundColor = responseOK ? 'bg-ok' : 'bg-fail';
 
   return (
-    <div className={`flex items-center mt-5 p-5 rounded-md ${backgroundColor}`}>
+    <div className={`flex items-center mt-lg p-lg rounded-md space-x-m ${backgroundColor}`}>
       {responseOK ? (
-        <Img image={{ icon: 'ResponceOKIcon' }} width="42" height="42" className="mr-4" />
+        <Img image={{ icon: 'ResponceOKIcon' }} width="42" height="42" />
       ) : (
-        <Img image={{ icon: 'ResponceFailIcon' }} width="37" height="34" className="mr-4" />
+        <Img image={{ icon: 'ResponceFailIcon' }} width="37" height="34" />
       )}
       <div>
         <Heading

package/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -7,33 +7,33 @@ import type { WedFormState } from './WedFormState';
 
 export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormState>) => (
   <div>
-    <div className="sm:flex sm:justify-between sm:gap-5">
+    <div className="sm:flex sm:justify-between sm:gap-lg">
       <div className="sm:w-1/2">
         <InputControl
-          className="shrink-0 w-full mb-3"
+          className="shrink-0 w-full mb-s"
           label="Наименование организации"
           {...withValidator(field('fullName'), defaultValidator)}
         />
       </div>
       <div className="sm:w-1/2">
         <InputControl
-          className="shrink-0 w-full mb-3"
+          className="shrink-0 w-full mb-s"
           label="ФИО"
           {...withValidator(field('name'), nameValidator)}
         />
       </div>
     </div>
-    <div className="sm:flex sm:justify-between sm:gap-5 sm:mb-7">
+    <div className="sm:flex sm:justify-between sm:gap-lg sm:mb-2xl">
       <div className="sm:w-1/2">
         <PhoneInputControl
-          className="shrink-0 w-full mb-3"
+          className="shrink-0 w-full mb-s"
           label="Телефон"
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
       <div className="sm:w-1/2">
         <InputControl
-          className="shrink-0 w-full mb-3"
+          className="shrink-0 w-full mb-s"
           label="Электронная почта"
           {...withValidator(field('mail'), defaultValidator)}
         />

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,5 +1,4 @@
 import '../../setup-fixture';
-
 import type { Picture } from '../../model/Picture';
 import { BenefitsBlock } from './BenefitsBlock';
 import type { BenefitBlockItemProps, ListBenefitDef } from './BenefitsBlockContent';

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -17,10 +17,10 @@ interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div className="flex flex-wrap w-full sm:justify-center mt-m gap-xl" role="list">
+        <div className="flex flex-wrap w-full sm:justify-center mt-xl gap-5xl" role="list">
           {benefitList.map(renderBenefit)}
         </div>
       ) : null}
@@ -31,7 +31,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex gap-s items-center md:basis-1/2 md:max-w-[400px]"
+    className="flex gap-m items-center md:basis-1/2 md:max-w-[400px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (
@@ -56,7 +56,7 @@ const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;
 
   return description && benefitType ? (
-    <div className="mt-2 text-l font-light text-secondary-text group-data-secondary:text-white/80">
+    <div className="mt-xs text-l font-light text-secondary-text group-data-secondary:text-white/80">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}
@@ -67,7 +67,7 @@ const renderDescription = (description: DescriptionDef | undefined) => {
 const renderTextBenefit = (description?: TextBenefitDef) => description?.name || null;
 
 const renderListBenefit = (description?: ListBenefitDef) => {
-  const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
+  const listStyleType = description?.bullets ? 'list-disc pl-3xl' : '';
 
   return description?.items && description.items.length > 0 ? (
     <ul className={listStyleType}>

package/src/components/BenefitsBlock/benefitImageStyles.mobile.tsx

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-56 h-56 min-w-56';

package/src/components/BenefitsBlock/benefitImageStyles.tsx

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-12 h-12 min-w-12 rounded-full';

package/src/components/Bonus/Bonus.tsx

@@ -14,7 +14,7 @@ export const Bonus = JSX<BonusProps>((props) => {
   const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
         <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
         <div className="flex flex-wrap w-full mt-9">
@@ -26,7 +26,7 @@ export const Bonus = JSX<BonusProps>((props) => {
                 >
                   {_?.title ? <Text size="text-h4">{_.title}</Text> : null}
                   {_?.description ? (
-                    <div className="mt-2">
+                    <div className="mt-xs">
                       <Paragraph size="text-xl" font="font-light">
                         {_.description}
                       </Paragraph>

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
 import { renderBonusBenefits } from './renderBonusBenefits';
@@ -18,9 +17,9 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper className={style('p-default', className)} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline
-        className="mb-4 sm:mb-8"
+        className="mb-4 sm:mb-3xl"
         isPadding={false}
         title={title}
         description={subtitle}

package/src/components/BusinessBlock/BusinessBlock.tsx

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

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -9,16 +9,18 @@ export const BusinessCard = JSX<BusinessCardProps>((props) => {
   const { title, image, cardItems, button } = props;
 
   return (
-    <div className="border-gray border p-9 w-1/2">
+    <div className="border-gray border p-4xl w-1/2 space-y-lg">
       {image ? (
         <div className="flex justify-center">
-          {image?.src ? <Img className="mb-5" image={image} /> : null}
+          {image?.src ? <Img image={image} /> : null}
           {image?.icon ? <Img image={image} /> : null}
         </div>
       ) : null}
-      {title ? <Heading headingType="h4" title={title} className="mb-6" /> : null}
-      {cardItems?.length ? <ul>{cardItems.map((_, i) => renderItem(_, String(i)))}</ul> : null}
-      {renderButtonsSection([button], { buttonClassName: 'mt-6' })}
+      {title ? <Heading headingType="h4" title={title} /> : null}
+      {cardItems?.length ? (
+        <ul className="space-y-s">{cardItems.map((_, i) => renderItem(_, String(i)))}</ul>
+      ) : null}
+      {renderButtonsSection([button])}
     </div>
   );
 });
@@ -27,9 +29,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   const { icon, text } = item;
 
   return (
-    <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
+    <li key={key} className="flex items-center gap-s last:mb-0">
       {icon?.icon ? (
-        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-s rounded-icon bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
       <Text size="text-xl" font="font-light">