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

package/mobile/src/components/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useSWRResource } from '../../hooks/useSWRResource';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { LinkCommonProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -8,6 +9,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { LinkList } from '../../ui-kit/LinkList/LinkList';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
+import { findIconByHref } from './findIconByHref';
 import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
@@ -20,7 +22,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
   const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
-  const { relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } =
+  const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
@@ -34,13 +36,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
       </div>
       <Contacts className="overflow-hidden" items={contacts} />
       <SocialMedia className="mb-4" media={socialMedia} />
-      <Button
-        className="w-full mb-4"
-        text="Google Play"
-        version="secondary"
-        href="/"
-        target="_blank"
-      />
+      {mobileApps?.map(renderButton)}
       <HorizontalNavigation
         className="pt-4 pb-7 border-y border-main-divider"
         title={horizontalNavigationTitle}
@@ -50,3 +46,18 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     </BlockWrapper>
   );
 });
+
+const renderButton = ({ href = '/' }: LinkCommonProps, i: number) => {
+  const { label } = findIconByHref(href);
+
+  return (
+    <Button
+      key={String(i)}
+      className="w-full mb-4"
+      text={label}
+      version="secondary"
+      href={href}
+      target="_blank"
+    />
+  );
+};

package/mobile/src/components/Footer/MediaButton.tsx

@@ -5,43 +5,7 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { buttonStylesWithText } from './buttonStylesWithText';
-
-const ICONS_MAP: Array<{
-  origins: string[];
-  iconMapped: Picture;
-  label: string;
-}> = [
-  {
-    origins: ['t.me', 'telegram.org'],
-    iconMapped: { icon: 'TelegramIcon' },
-    label: 'Телеграм',
-  },
-  {
-    origins: ['vk.com'],
-    iconMapped: { icon: 'VKIcon' },
-    label: 'ВКонтакте',
-  },
-  {
-    origins: ['ok.ru'],
-    iconMapped: { icon: 'OkIcon' },
-    label: 'Одноклассники',
-  },
-  {
-    origins: ['apps.apple.com'],
-    iconMapped: { icon: 'AppleIcon' },
-    label: 'App Store',
-  },
-  {
-    origins: ['play.google.com'],
-    iconMapped: { icon: 'PlayMarketIcon' },
-    label: 'Google Play',
-  },
-  {
-    origins: ['youtube.com'],
-    iconMapped: { icon: 'YoutubeIcon' },
-    label: 'Youtube',
-  },
-];
+import { findIconByHref } from './findIconByHref';
 
 export type ButtonSize = 'default' | 'small';
 
@@ -53,8 +17,7 @@ export const MediaButton = JSX<MediaButtonProps>(
   ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
     const { href, version, text = '' } = rest;
 
-    const { iconMapped, label } =
-      ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+    const { iconMapped, label } = findIconByHref(href);
 
     const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 

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

@@ -0,0 +1,4 @@
+import { IconsMapItem, ICONS_MAP } from './iconsMap';
+
+export const findIconByHref = (href?: string): IconsMapItem =>
+  ICONS_MAP.find(({ origins }) => origins?.some((_) => href?.includes(_))) || {};

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

@@ -0,0 +1,40 @@
+import { LabelProps } from '../../model/HeadlineType';
+import { Picture } from '../../model/Picture';
+
+export type IconsMapItem = LabelProps & {
+  origins?: string[];
+  iconMapped?: Picture;
+};
+
+export const ICONS_MAP: Array<IconsMapItem> = [
+  {
+    origins: ['t.me', 'telegram.org'],
+    iconMapped: { icon: 'TelegramIcon' },
+    label: 'Телеграм',
+  },
+  {
+    origins: ['vk.com'],
+    iconMapped: { icon: 'VKIcon' },
+    label: 'ВКонтакте',
+  },
+  {
+    origins: ['ok.ru'],
+    iconMapped: { icon: 'OkIcon' },
+    label: 'Одноклассники',
+  },
+  {
+    origins: ['apps.apple.com'],
+    iconMapped: { icon: 'AppleIcon' },
+    label: 'App Store',
+  },
+  {
+    origins: ['play.google.com'],
+    iconMapped: { icon: 'PlayMarketIcon' },
+    label: 'Google Play',
+  },
+  {
+    origins: ['youtube.com'],
+    iconMapped: { icon: 'YoutubeIcon' },
+    label: 'Youtube',
+  },
+];

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

@@ -14,7 +14,6 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { labelSize } from './labelSize';
 import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
@@ -130,10 +129,10 @@ const renderPrimaryFoldButton = ({
       )}
       onClick={onToggle}
     >
-      <div className="flex items-center group-hover/button:text-primary-main">
+      <div className="flex items-center group-hover/button:text-primary-main gap-3">
         {renderRoundedIcon(labelIcon, labelIconBgVersion)}
         {label ? (
-          <Text size={labelSize} font="font-normal">
+          <Text size="text-h6" font="font-normal">
             {label}
           </Text>
         ) : null}

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -14,16 +14,19 @@ export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 export const TextBlock = JSX<TextBlockProps>(
   ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (
     <BlockWrapper
-      className={style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className)}
+      className={style(
+        'flex gap-3 sm:gap-4 bg-white group-data-secondary:bg-primary-main/10',
+        className,
+      )}
       {...rest}
     >
       {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
       {iconVersion === 'big' ? renderImage(image) : null}
-      <div className="flex flex-col w-fit gap-3">
+      <div className="flex flex-col w-fit gap-1 sm:gap-2">
         {title ? (
           <Text
             size="text-l"
-            font="font-medium"
+            font="font-normal"
             color="text-primary-text group-data-secondary:text-white"
           >
             {title}
@@ -46,10 +49,14 @@ const renderIcon = () => (
 );
 
 const renderImage = (image?: Picture) =>
-  image?.src ? <Img className="h-fit" image={image} /> : null;
+  image?.src ? <Img className="h-fit flex-shrink-0" image={image} /> : null;
 
 const renderDescription = (description: string) => (
-  <Paragraph size="text-s" color="text-secondary-text group-data-secondary:text-white">
+  <Paragraph
+    size="text-s"
+    font="font-light"
+    color="text-secondary-text group-data-secondary:text-white"
+  >
     {description}
   </Paragraph>
 );

package/mobile/src/model/HeadlineType.ts

@@ -36,16 +36,17 @@ export type LabelProps = {
   label?: string;
 };
 
+export type AlignProps = {
+  /** @title Выравнивание заголовка */
+  align?: TextAlign;
+};
+
 export type AdditionalDescriptionProps = {
   /** @title Дополнительное описание */
   additionalDescription?: string;
 };
 
-export type HeadlineCommonProps = TitleProps &
-  DescriptionProps & {
-    /** @title Выравнивание заголовка */
-    align?: TextAlign;
-  };
+export type HeadlineCommonProps = TitleProps & DescriptionProps & AlignProps & {};
 
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;

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

@@ -37,8 +37,8 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
 
   return isOpened ? (
     <div className="container z-40 fixed bottom-0 left-0 right-0 pointer-events-none">
-      <div className="bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-        <div className="flex-1">
+      <div className="bg-white m-5 p-5 sm:m-6 sm:p-6 rounded-md flex sm:items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+        <div className="sm:flex-1">
           <Paragraph size="text-s" font="font-light" color="text-primary-text">
             АО «Россельхозбанк» использует
             <LinkWrapper
@@ -61,7 +61,7 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
             персональных данных».
           </Paragraph>
         </div>
-        <div className="w-24 flex justify-end">
+        <div className="ml-3 sm:ml-0 w-24 flex justify-end">
           <CloseButton className="bg-main-gray rounded-md" onClick={handleClose} />
         </div>
       </div>

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -6,12 +6,13 @@ export type { IconName };
 /**
  * @title Цвет фона иконки
  * @enumNames [
+ *    "По умолчанию",
  *    "Основной",
  *    "Второстепенный",
- *    "Второстепенный светлый"
+ *    "Прозрачный"
  * ]
  */
-export type IconBgVersion = 'primary' | 'secondary' | 'secondary-light';
+export type IconBgVersion = '' | 'primary' | 'secondary' | 'opacity';
 
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */

package/mobile/src/ui-kit/Icon/RoundedIcon.tsx

@@ -6,22 +6,33 @@ import type { IconBgVersion } from './IconProps';
 
 export interface RoundedIconProps extends Picture {
   iconBgVersion?: IconBgVersion;
+  defaultIconSize?: number;
 }
 
 const iconBgStyles: Record<IconBgVersion, string> = {
+  '': 'bg-main-divider group-data-secondary:bg-white/30',
   primary: 'bg-main-divider',
-  secondary: 'bg-white/30',
-  'secondary-light': 'bg-secondary-light',
+  secondary: 'bg-secondary-light',
+  opacity: 'bg-white/30',
 };
 
 export const RoundedIcon = JSX<RoundedIconProps>(
-  ({ iconBgVersion = 'primary', size, icon, ...rest }) => {
-    const width = String(size?.width || 24);
-    const height = String(size?.height || 24);
+  ({ className, defaultIconSize = 44, iconBgVersion = 'primary', size, icon, ...rest }) => {
+    const widthAndHeight = String(size?.width || defaultIconSize);
 
     return icon ? (
-      <div className={style('rounded-icon p-2.5', iconBgStyles[iconBgVersion])}>
-        <Icon {...rest} width={width} height={height} name={icon} />
+      <div
+        style={{
+          width: `${widthAndHeight}px`,
+          height: `${widthAndHeight}px`,
+        }}
+        className={style(
+          'rounded-icon object-fit flex justify-center items-center ',
+          iconBgStyles[iconBgVersion],
+          className,
+        )}
+      >
+        <Icon {...rest} width="54%" height="54%" name={icon} />
       </div>
     ) : null;
   },

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

@@ -58,7 +58,7 @@ export const Select = JSX<SelectProps>(
         <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
           <div
             className={style(
-              'text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer',
+              'text-l flex justify-between items-center text-primary-text cursor-pointer',
               getBorderStyle(isBorder, valid),
             )}
             onClick={toggle}

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

@@ -16,7 +16,6 @@ export interface TopItemProps extends TopItemContent {
 
 export const TopItem = JSX<TopItemProps>(({ className = '', active, flat, children, ...rest }) => {
   const link = useLink({ isRemote: true });
-  console.log('link', link);
   const { href, target, text, onClick } = link(rest);
 
   return (

package/package.json

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

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

@@ -0,0 +1,44 @@
+import '../../setup-fixture';
+
+import { ApplicationForm } from './ApplicationForm';
+import type { ApplicationFormContent } from './ApplicationFormContent';
+
+const ApplicationFormProps: ApplicationFormContent = {
+  title: 'Форма заявки',
+  button: {
+    text: 'Отправить заявку',
+    version: 'primary',
+  },
+  link: {
+    text: 'условиями передачи данных',
+    href: '#',
+  },
+};
+
+export default {
+  credit: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="credit" />
+    </div>
+  ),
+  acquiring: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="acquiring" />
+    </div>
+  ),
+  'business-card': (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="business-card" />
+    </div>
+  ),
+  deposit: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="deposit" />
+    </div>
+  ),
+  wed: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm className="col-span-12" {...ApplicationFormProps} typeForm="wed" />
+    </div>
+  ),
+};

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -40,7 +40,9 @@ export const ApplicationForm = JSX<ApplicationFormProps>((props) => {
   return (
     <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <div className="container max-w-[978px]">
-        {title ? <Heading headingType="h3" title={title} className="text-center mb-8" /> : null}
+        {title ? (
+          <Heading headingType="h3" title={title} className="mb-4 sm:mb-8 sm:text-center" />
+        ) : null}
         {COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit })}
         {responseType ? <ResponseNotification responseType={responseType} /> : null}
       </div>

package/src/components/ApplicationForm/ApplicationFormAcquiring.tsx

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

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

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

package/src/components/ApplicationForm/ApplicationFormDeposit.tsx

@@ -47,7 +47,7 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
       <Heading
         headingType="h6"
         title="Оставьте заявку и мы ответим на любые вопросы по депозитам"
-        className="text-center mb-4"
+        className="sm:text-center mb-4"
       />
       <div className="max-w-[560px] m-auto">
         <InputControl
@@ -61,8 +61,8 @@ export const ApplicationFormDeposit = JSX<ApplicationFormsProps>((props) => {
           {...withValidator(field('phone'), phoneValidator)}
         />
       </div>
-      <div className="flex justify-between items-center max-w-[560px] m-auto">
-        <div className="flex-1">
+      <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">
           <Footnote link={link} />
         </div>
         {renderSubmitButton(button)}

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="text-center mb-4" />
+      <Heading headingType="h6" title="Данные организации" className="sm:text-center mb-4" />
       {renderWedDataOrganization(field)}
-      <Heading headingType="h6" title="Интересующий вопрос" className="text-center mb-4" />
+      <Heading headingType="h6" title="Интересующий вопрос" className="sm:text-center mb-4" />
       {renderQuestionsInterested(field)}
-      <div className="flex items-center pb-9 mb-9 border-b border-main-divider">
-        {renderSubmitButton(button, 'mr-5')}
+      <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')}
         <Footnote link={link} />
       </div>
       <Heading
         headingType="h6"
         title="Или свяжитесь с нами удобным способом"
-        className="text-center mb-4"
+        className="sm:text-center mb-4"
       />
       {renderContacts()}
     </form>

package/src/components/ApplicationForm/renderAcquiringDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
-  <div className="flex justify-between gap-5 mb-5">
-    <div className="w-1/2">
+  <div className="mb-4 sm:flex sm:justify-between sm:gap-5 sm:mb-7">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Наименование организации"
@@ -19,7 +19,7 @@ export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<Acqui
         {...withValidator(field('name'), nameValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="ИНН"

package/src/components/ApplicationForm/renderAcquiringRegion.tsx

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

package/src/components/ApplicationForm/renderBusinessCardDataOrganization.tsx

@@ -8,8 +8,8 @@ import { defaultValidator, innValidator, nameValidator, phoneValidator } from '.
 export const renderBusinessCardDataOrganization = (
   field: FormFieldRegisterer<BusinessCardFormState>,
 ) => (
-  <div className="flex justify-between gap-5">
-    <div className="w-1/2">
+  <div className="sm:flex sm:justify-between sm:gap-5">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Контактное лицо"
@@ -21,7 +21,7 @@ export const renderBusinessCardDataOrganization = (
         {...withValidator(field('inn'), innValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <PhoneInputControl
         className="shrink-0 w-full mb-3"
         label="Телефон"

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -6,8 +6,8 @@ import { PhoneInputControl } from './PhoneInputControl';
 import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 
 export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <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">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Наименование организации"
@@ -24,7 +24,7 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
         {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <InputControl
         className="shrink-0 w-full mb-3"
         label="Годовая выручка, ₽"

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -12,8 +12,8 @@ import {
 } from './CreditParameters';
 
 export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="flex justify-between gap-5 mb-7">
-    <div className="w-1/2">
+  <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">
       <label>
         <Text size="text-m" font="font-light">
           Сумма кредита, ₽
@@ -26,7 +26,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
         {...field('amount')}
       />
     </div>
-    <div className="w-1/2">
+    <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Срок кредита, месяцев

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -6,11 +6,19 @@ export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormStat
   const textField = field('text');
 
   return (
-    <div className="mb-6">
-      <div className="flex items-center mb-4 gap-6">
-        <Checkbox text="Валютный контроль" {...field('currencyControl')} />
-        <Checkbox text="Документарные операции" {...field('documentaryOperations')} />
-        <Checkbox text="Конверсионные операции" {...field('conversionOperations')} />
+    <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>
       <textarea
         placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"

package/src/components/ApplicationForm/renderRegion.tsx

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