@redneckz/wildless-cms-uni-blocks 0.10.4 → 0.10.6

package/src/components/ApplicationForm/renderSlideCheckboxes.tsx

@@ -1,28 +1,10 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
 import { SlideCheckbox } from '../../ui-kit/SlideCheckbox/SlideCheckbox';
-import type { AcquiringFormState } from './ApplicationFormAcquiring';
-import type { HandleFormStateChange } from './models';
+import type { AcquiringFormState } from './AcquiringFormState';
 
-type SlideCheckboxesProps = {
-  onlineСheckout: boolean;
-  posTerminal: boolean;
-  handleChange: HandleFormStateChange<AcquiringFormState>;
-};
-
-export const renderSlideCheckboxes = ({
-  onlineСheckout,
-  posTerminal,
-  handleChange,
-}: SlideCheckboxesProps) => (
+export const renderSlideCheckboxes = (field: FormFieldRegisterer<AcquiringFormState>) => (
   <div className="mb-5">
-    <SlideCheckbox
-      value={onlineСheckout}
-      text="Хочу купить онлайн-кассу"
-      onChange={() => handleChange({ onlineСheckout: !onlineСheckout })}
-    />
-    <SlideCheckbox
-      value={posTerminal}
-      text="Хочу купить POS-терминал"
-      onChange={() => handleChange({ posTerminal: !posTerminal })}
-    />
+    <SlideCheckbox text="Хочу купить онлайн-кассу" {...field('onlineCheckout')} />
+    <SlideCheckbox text="Хочу купить POS-терминал" {...field('posTerminal')} />
   </div>
 );

package/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -1,4 +1,5 @@
 import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import { style } from '../../utils/style';
 import type { SubmitButtonProps } from './ApplicationFormContent';
 
 export const renderSubmitButton = (button?: SubmitButtonProps, className?: string) => {
@@ -8,7 +9,7 @@ export const renderSubmitButton = (button?: SubmitButtonProps, className?: strin
   });
 
   return (
-    <button type="submit" className={`p-4 ${buttonStyle} ${className}`}>
+    <button type="submit" className={style('p-4', buttonStyle, className)}>
       {button?.text ? button.text : 'Отправить заявку'}
     </button>
   );

package/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -1,66 +1,41 @@
-import type { WedFormState } from './ApplicationFormWed';
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
 import { InputControl } from './InputControl';
-import type { DataOrganization } from './models';
-import { validate } from './validate';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, nameValidator, phoneValidator } from './validators';
+import type { WedFormState } from './WedFormState';
 
-interface RenderWedDataOrganizationProps extends DataOrganization<WedFormState> {
-  fullName: string;
-  name: string;
-  phone: string;
-  mail: string;
-}
-
-export const renderWedDataOrganization = ({
-  fullName,
-  name,
-  phone,
-  mail,
-  handleChange,
-  errors,
-  handleChangeErrors,
-}: RenderWedDataOrganizationProps) => (
+export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormState>) => (
   <div>
     <div className="flex justify-between gap-5">
       <div className="w-1/2">
         <InputControl
           className="shrink-0 text-l w-full mb-3"
           label="Наименование организации"
-          error={errors['fullName']}
-          value={fullName}
-          onChange={(value) => handleChange({ fullName: value })}
-          onBlur={(value) => handleChangeErrors({ fullName: validate('fullName', value) })}
+          {...withValidator(field('fullName'), defaultValidator)}
         />
       </div>
       <div className="w-1/2">
         <InputControl
           className="shrink-0 text-l w-full mb-3"
           label="ФИО"
-          error={errors['name']}
-          value={name}
-          onChange={(value) => handleChange({ name: value })}
-          onBlur={(value) => handleChangeErrors({ name: validate('name', value) })}
+          {...withValidator(field('name'), nameValidator)}
         />
       </div>
     </div>
     <div className="flex justify-between gap-5 mb-7">
       <div className="w-1/2">
-        <InputControl
+        <PhoneInputControl
           className="shrink-0 text-l w-full mb-3"
           label="Телефон"
-          error={errors['phone']}
-          value={phone}
-          onChange={(value) => handleChange({ phone: value })}
-          onBlur={(value) => handleChangeErrors({ phone: validate('phone', value) })}
+          {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
       <div className="w-1/2">
         <InputControl
           className="shrink-0 text-l w-full mb-3"
           label="Электронная почта"
-          error={errors['mail']}
-          value={mail}
-          onChange={(value) => handleChange({ mail: value })}
-          onBlur={(value) => handleChangeErrors({ mail: validate('mail', value) })}
+          {...withValidator(field('mail'), defaultValidator)}
         />
       </div>
     </div>

package/src/components/ApplicationForm/validators.ts

@@ -0,0 +1,17 @@
+import { pattern } from '../../validation/pattern';
+import { required } from '../../validation/required';
+import { validator } from '../../validation/validator';
+
+const ERROR_MESSAGE = 'Некорректно заполненное поле';
+
+export const defaultValidator = required(ERROR_MESSAGE);
+
+export const nameValidator = validator((_) => typeof _ === 'string' && _.length > 1)(ERROR_MESSAGE);
+
+export const innValidator = validator(
+  (_) => typeof _ === 'string' && (_.length === 10 || _.length === 12),
+)(ERROR_MESSAGE);
+
+export const phoneValidator = pattern(
+  /^(\+7)?[\s-]?\(?[0-9]{3}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/,
+)(ERROR_MESSAGE);

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -15,7 +15,7 @@ interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
+    <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
       {title ? (
         <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}

package/src/components/Blocks.mobile.ts

@@ -3,11 +3,13 @@ import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
+import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
@@ -19,14 +21,16 @@ export const Blocks: BlocksRegistry = {
   Footer,
   Header,
   Headline,
+  ImgBlock,
   LinkDocs,
   LinkList,
   MobileAppTile,
+  Placeholder,
   ProductBlock,
   StepsBlock,
   TariffsTable,
   TextBlock,
-  Placeholder,
+  RichTextBlock,
   RollupItem,
   VerticalLayout,
 };

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={`p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default pb-9 ${className}`} {...rest}>
       <div className="container">
         <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
         <div className="flex flex-wrap w-full mt-9">

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -24,7 +24,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={`font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`}
+      className={`font-sans text-primary-text bg-white p-default flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -9,7 +9,7 @@ export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps
 
 export const BusinessBlock = JSX<BusinessBlockProps>(
   ({ className = '', title, cards, ...rest }) => (
-    <BlockWrapper className={`p-12 pb-9 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default pb-9 ${className}`} {...rest}>
       <Heading headingType="h3" title={title} className="text-center mb-8" />
       <div className="flex gap-5">
         {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -114,20 +114,20 @@ const renderBusinessDepositParamsForm = ({
     <Checkbox
       text="Пополнение"
       disabled={isDisabledOperatingDeposit}
-      checked={isReplenished}
+      value={isReplenished}
       onChange={handleIsReplenished}
     />
     <Checkbox
       className="mt-3"
       disabled={isDisabledOperatingDeposit}
       text="Частичное снятие"
-      checked={isPartialWithdrawal}
+      value={isPartialWithdrawal}
       onChange={handleIsPartialWithdrawal}
     />
     <Checkbox
       className="mt-3"
       text="Являюсь малым предприятием"
-      checked={isSmallBusiness}
+      value={isSmallBusiness}
       onChange={handleIsSmallBusiness}
     />
   </div>

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -125,7 +125,7 @@ const renderCreditParamsForm = ({
     {isShowSalaryClient ? (
       <Checkbox
         text="Получаю зарплату на счёт в Россельхозбанке"
-        checked={isSalaryClient}
+        value={isSalaryClient}
         onChange={handleIsSalaryClient}
       />
     ) : null}
@@ -133,7 +133,7 @@ const renderCreditParamsForm = ({
       <Checkbox
         className="mt-3"
         text="Работаю в бюджетной организации"
-        checked={isStateEmployee}
+        value={isStateEmployee}
         onChange={handleIsStateEmployee}
       />
     ) : null}
@@ -141,7 +141,7 @@ const renderCreditParamsForm = ({
       <Checkbox
         className="mt-3"
         text="Получаю пенсию на карту Россельхозбанка"
-        checked={isPensionClient}
+        value={isPensionClient}
         onChange={handleIsPensionClient}
       />
     ) : null}
@@ -149,7 +149,7 @@ const renderCreditParamsForm = ({
       <Checkbox
         className="mt-3"
         text="Комплексная страховая защита"
-        checked={isInsurance}
+        value={isInsurance}
         onChange={handleIsInsurance}
       />
     ) : null}

package/src/components/CardTransfer/CardTransfer.tsx

@@ -37,7 +37,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     const link = useLink();
 
     return (
-      <BlockWrapper className={`p-12 flex flex-col items-center ${className}`} {...rest}>
+      <BlockWrapper className={`p-default flex flex-col items-center ${className}`} {...rest}>
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
         <form className="w-[468px]" method="POST" action={FORM_URL}>
           <CurrencyInput

package/src/components/Carousel/Carousel.fixture.tsx

@@ -102,7 +102,7 @@ export default {
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={3}
+        visibleItemCount={1}
         isBlur={true}
         block={{
           type: 'Carousel',

package/src/components/Carousel/Carousel.tsx

@@ -104,7 +104,7 @@ Carousel.childrenTypes = [
   'CarouselEventCard',
 ];
 
-const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');
+const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-default' : '');
 
 const getAlignStyle = (isAlignCenter: boolean): string =>
   isAlignCenter ? 'flex justify-center' : '';

package/src/components/Carousel/CarouselScrollButtons.tsx

@@ -73,9 +73,13 @@ export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
 );
 
 const renderBlur = (isBlur: boolean, scroll: SwipeListScroll) =>
-  (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
+  isBlur ? (
     <div>
-      <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
-      <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+      {scroll.canScrollLeft ? (
+        <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
+      ) : null}
+      {scroll.canScrollRight ? (
+        <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+      ) : null}
     </div>
   ) : null;

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -30,7 +30,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             <Headline
               className="pt-6"
               isPadding={false}
-              description={description}
+              description={additionalDescription}
               align="text-left"
             />
           ) : null}

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -26,6 +26,7 @@
       { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
       { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
     ],
-    "align": "text-center"
+    "align": "text-center",
+    "isFullWidth": true
   }
 }

package/src/components/CarouselProductCard/CarouselProductCard.fixture.tsx

@@ -51,6 +51,7 @@ export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
   icon: image,
   button: buttonPrimary,
   isDotted,
+  isFullWidth: false,
 };
 
 const CAROUSEL_PRODUCT_CARD = <CarouselProductCard {...PRODUCT_CARD} />;

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -52,8 +52,8 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           {renderAdditionalDescription(additionalDescription)}
         </LinkWrapper>
         {renderButtonsSection([button], {
-          className: style('p-6 pt-0', isFullWidth ? '' : 'justify-center'),
-          isVertical: isFullWidth ? true : false,
+          className: style('p-6 pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
+          isVertical: isFullWidth,
         })}
       </BlockWrapper>
     );

package/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -9,7 +9,7 @@ export interface CarouselRichTextCardProps extends CarouselRichTextCardContent,
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
   ({ className = '', __html, richVersion = 'striped', ...rest }) => (
-    <BlockWrapper className={style('p-9 border border-gray min-w-96', className)} {...rest}>
+    <BlockWrapper className={style('p-9 border border-gray h-full min-w-96', className)} {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   ),

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -17,7 +17,7 @@ interface RenderContactsColumnProps {
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
-    <BlockWrapper className={`flex p-12 ${className}`} version={version} {...rest}>
+    <BlockWrapper className={`flex p-default ${className}`} version={version} {...rest}>
       {info?.length ? renderBlocks(info) : null}
       {contacts?.length ? renderBlocks(contacts) : null}
     </BlockWrapper>

package/src/components/ContentPage/ContentPage.tsx

@@ -7,6 +7,7 @@ import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
+import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { useDialogHandlers } from '../../ui-kit/Dialog/useDialogHandlers';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
@@ -68,6 +69,10 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
           : null}
       </div>
       {likeControl ? renderLikeControl() : null}
+      <CookiePopup
+        termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
+        personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}
+      />
     </section>
   );
 });

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,5 +1,5 @@
 import { Input } from '../../ui-kit/Input/Input';
-import type { OptionProps } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Select';
 import { Select } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
@@ -15,11 +15,11 @@ interface InputProps {
 
 export function renderInput(props: InputProps) {
   const { placeholder, rates, selected, value, setValue, setSelected } = props;
-  const ratesOptions: OptionProps[] = rates.map((_) => ({
+  const ratesOptions: Option[] = rates.map((_) => ({
     key: _?.currency?.currency ?? '',
     text: _?.currency?.currency ?? '',
   }));
-  const selectedValue: OptionProps = { key: selected, text: selected };
+  const selectedValue: Option = { key: selected, text: selected };
 
   return (
     <div className="relative flex">

package/src/components/Filtration/Filtration.tsx

@@ -10,23 +10,25 @@ import { renderFormItem } from './renderFormItem';
 
 interface FiltrationProps extends FiltrationContent, UniBlockProps {}
 
+const initialFiltrationState = {};
+
 export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
   ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-    const { formState, register, resetForm } = useForm();
+    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
     return (
       <BlockWrapper className={style(className)} version="transparent" {...rest}>
         <form className="flex justify-between bg-white p-9 mb-1">
           <div className="flex gap-11">
-            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, register))}
+            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, field))}
           </div>
           {resetButton ? (
             <div>
-              <Button className="w-72" onClick={resetForm} {...resetButton} />
+              <Button className="w-72" onClick={reset} {...resetButton} />
             </div>
           ) : null}
         </form>
-        <FiltrationInner filtrationState={formState} {...rest} />
+        <FiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>
     );
   },

package/src/components/Filtration/renderFormItem.tsx

@@ -1,22 +1,22 @@
-import type { FormElementRegisterer } from '../../hooks/useForm';
+import type { FormFieldRegisterer } from '../../hooks/useForm';
 import { SlideCheckboxGroup } from '../../ui-kit/SlideCheckboxGroup/SlideCheckboxGroup';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FiltrationSchema, StringArray } from './FiltrationContent';
 
 export const renderFormItem =
-  (filtrationSchema: FiltrationSchema, register: FormElementRegisterer) => (key: string) => {
+  (filtrationSchema: FiltrationSchema, field: FormFieldRegisterer<any>) => (key: string) => {
     const item = filtrationSchema[key as keyof typeof filtrationSchema];
     const type = item?.type;
 
     switch (type) {
       case 'array':
-        return renderCheckboxes(key, register)(item);
+        return renderCheckboxes(key, field)(item);
       default:
         return null;
     }
   };
 
-const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item?: StringArray) => {
+const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item?: StringArray) => {
   const options =
     item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
     [];
@@ -30,7 +30,7 @@ const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item
           </Text>
         </div>
       ) : null}
-      <SlideCheckboxGroup items={options} multiple {...register(key)} />
+      <SlideCheckboxGroup items={options} multiple {...field(key)} />
     </div>
   );
 };

package/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`p-12 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default ${className}`} {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

package/src/components/Headline/Headline.tsx

@@ -24,7 +24,7 @@ export const Headline = JSX<HeadlineProps>(
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
-    const paddingStyle = isPadding ? 'p-12' : '';
+    const paddingStyle = isPadding ? 'p-default' : '';
 
     return (
       <BlockWrapper

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -21,7 +21,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       className={style(
         'relative',
         'grid grid-cols-12',
-        isPadding ? 'p-12' : '',
+        isPadding ? 'p-default' : '',
         gapStyles[gap],
         className,
       )}

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

@@ -0,0 +1,21 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { ImgBlock } from './ImgBlock';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ImgBlock className="col-span-12" image={image} />
+    </div>
+  ),
+};

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

@@ -19,7 +19,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('py-6 px-4', className)} {...rest}>
+    <BlockWrapper className={style('p-default', className)} {...rest}>
       <Headline
         isPadding={false}
         title={title}

package/src/components/LinkDocs/LinkDocs.tsx

@@ -25,7 +25,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
     ...rest
   }) => (
-    <BlockWrapper className={style('p-12', className)} {...rest}>
+    <BlockWrapper className={style('p-default', className)} {...rest}>
       <Headline
         className="!p-0"
         title={title}

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -30,7 +30,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
 
     return (
       <BlockWrapper
-        className={`flex justify-between p-12 box-border relative min-h-80 ${getTileMinHeight(
+        className={`flex justify-between p-default box-border relative min-h-80 ${getTileMinHeight(
           className,
         )} ${className}`}
         version={version}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -3,10 +3,10 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
+import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
-import { style } from '../../utils/style';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -18,7 +18,10 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={style('overflow-hidden p-12 flex flex-col box-border min-h-[454px]', className)}
+      className={style(
+        'overflow-hidden p-default flex flex-col box-border min-h-[454px]',
+        className,
+      )}
       version={version}
       {...rest}
     >