@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.1

package/src/components/ApplicationForm/WedFormState.ts

@@ -1,10 +1,12 @@
+import type { Option } from '../../ui-kit/Select/Option';
+
 export interface WedFormState {
   fullName: string;
   name: string;
   phone: string;
-  mail: string;
-  currencyControl: boolean;
-  documentaryOperations: boolean;
-  conversionOperations: boolean;
+  vedTypes: string;
   text: string;
+  region?: Option;
+  mail?: string;
+  inn?: string;
 }

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

@@ -0,0 +1,31 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { withValidator } from '../../validation/withValidator';
+import { AcquiringFormState } from './AcquiringFormState';
+import { InputControl } from './InputControl';
+import { PhoneInputControl } from './PhoneInputControl';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
+
+export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<AcquiringFormState>) => (
+  <div className="space-y-s">
+    <InputControl
+      className="shrink-0 w-full"
+      label="Наименование организации"
+      {...withValidator(field('fullName'), defaultValidator)}
+    />
+    <InputControl
+      className="shrink-0 w-full"
+      label="ИНН"
+      {...withValidator(field('inn'), innValidator)}
+    />
+    <InputControl
+      className="shrink-0 w-full"
+      label="Контактное лицо"
+      {...withValidator(field('name'), nameValidator)}
+    />
+    <PhoneInputControl
+      className="shrink-0 w-full"
+      label="Телефон"
+      {...withValidator(field('phone'), phoneValidator)}
+    />
+  </div>
+);

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="sm:flex sm:justify-between sm:gap-lg">
-    <div className="sm:w-1/2 space-y-s">
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Наименование организации"
@@ -19,7 +19,7 @@ export const renderAcquiringDataOrganization = (field: FormFieldRegisterer<Acqui
         {...withValidator(field('name'), nameValidator)}
       />
     </div>
-    <div className="sm:w-1/2 space-y-s">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="ИНН"

package/src/components/ApplicationForm/renderAcquiringRegion.tsx

@@ -12,8 +12,8 @@ interface AcquiringRegionProps {
 }
 
 export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps) => (
-  <div className="border-b border-b-main-divider sm:border-none sm:flex sm:justify-between gap-lg ">
-    <div className="sm:w-1/2">
+  <div className="border-b border-b-main-divider @xl:border-none @xl:flex @xl:justify-between gap-lg ">
+    <div className="@xl:w-1/2">
       <SelectControl
         label="Вид эквайринга"
         placeholder="Выберите эквайринг"
@@ -21,7 +21,7 @@ export const renderAcquiringRegion = ({ regions, field }: AcquiringRegionProps)
         {...withValidator(field('acquiringType'), defaultValidator)}
       />
     </div>
-    <div className="sm:w-1/2">
+    <div className="@xl: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="sm:flex sm:justify-between sm:gap-lg">
-    <div className="sm:w-1/2 space-y-s">
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Контактное лицо"
@@ -21,7 +21,7 @@ export const renderBusinessCardDataOrganization = (
         {...withValidator(field('inn'), innValidator)}
       />
     </div>
-    <div className="sm:w-1/2 space-y-s">
+    <div className="@xl:w-1/2 space-y-s">
       <PhoneInputControl
         className="shrink-0 w-full"
         label="Телефон"

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

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

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="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">
+  <div className="pb-2xs border-b border-b-main-divider @xl:flex @xl:justify-between @xl:gap-lg @xl:border-none @xl:pb-0">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Наименование организации"
@@ -24,7 +24,7 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
         {...withValidator(field('phone'), phoneValidator)}
       />
     </div>
-    <div className="sm:w-1/2 space-y-s">
+    <div className="@xl:w-1/2 space-y-s">
       <InputControl
         className="shrink-0 w-full"
         label="Годовая выручка, ₽"

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -12,8 +12,8 @@ import {
 } from './CreditParameters';
 
 export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormState>) => (
-  <div className="border-b border-b-main-divider sm:flex sm:justify-between gap-lg sm:border-none">
-    <div className="sm:w-1/2">
+  <div className="border-b border-b-main-divider @xl:border-none @xl:flex @xl:justify-between gap-lg">
+    <div className="@xl: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="sm:w-1/2">
+    <div className="@xl:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
           Срок, месяцев

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -1,26 +1,46 @@
 import { FormFieldRegisterer } from '../../hooks/useForm';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Radio } from '../../ui-kit/Radio/Radio';
 import type { WedFormState } from './WedFormState';
 
 export const renderQuestionsInterested = (field: FormFieldRegisterer<WedFormState>) => {
-  const textField = field('text');
+  const { value, onChange } = field('vedTypes');
 
   return (
     <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 className="@xl:flex @xl:items-center @xl:gap-xl">
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Валютный котроль"
+          value="currencyControl"
+          checked={value === 'currencyControl'}
+          onChange={(_) => onChange && onChange(_)}
+        />
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Документарные операции"
+          value="documentOperations"
+          checked={value === 'documentOperations'}
+          onChange={(_) => onChange && onChange(_)}
+        />
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Конверсионные операции"
+          value="conversionTransactions"
+          checked={value === 'conversionTransactions'}
+          onChange={(_) => onChange && onChange(_)}
+        />
+        <Radio
+          className="mb-xs"
+          name="vedTypes"
+          text="Иные вопросы ВЭД"
+          value="otherIssues"
+          checked={value === 'otherIssues'}
+          onChange={(_) => onChange && onChange(_)}
+        />
       </div>
-      <textarea
-        placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
-        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 } }) =>
-            textField.onChange && textField.onChange(e.target?.value || '')) as any
-        }
-      />
     </div>
   );
 };

package/src/components/ApplicationForm/renderRegion.tsx

@@ -15,7 +15,7 @@ export const renderRegion = ({ regions, field }: RegionProps) => (
     className="w-full"
     label="Регион"
     placeholder="Выберите регион"
-    isSearch
+    isSearch={true}
     options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
     {...withValidator(field('region'), defaultValidator)}
   />

package/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -13,17 +13,17 @@ interface RegionDepartmentProps {
 }
 
 export const renderRegionDepartment = ({ regions, branches, field }: RegionDepartmentProps) => (
-  <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">
+  <div className="@xl:flex @xl:justify-between @xl:gap-lg @xl:mb-2xl @xl:border-none @xl:pb-0">
+    <div className="@xl:w-1/2">
       <SelectControl
         label="Регион"
         placeholder="Выберите регион"
-        isSearch
+        isSearch={true}
         options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
         {...withValidator(field('region'), defaultValidator)}
       />
     </div>
-    <div className="sm:w-1/2">
+    <div className="@xl:w-1/2">
       <SelectControl
         label="Адрес"
         placeholder="Выберите адрес"

package/src/components/ApplicationForm/renderSubmitButton.tsx

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

package/src/components/ApplicationForm/renderWedDataOrganization.tsx

@@ -2,42 +2,60 @@ import { FormFieldRegisterer } from '../../hooks/useForm';
 import { withValidator } from '../../validation/withValidator';
 import { InputControl } from './InputControl';
 import { PhoneInputControl } from './PhoneInputControl';
-import { defaultValidator, nameValidator, phoneValidator } from './validators';
+import { defaultValidator, innValidator, nameValidator, phoneValidator } from './validators';
 import type { WedFormState } from './WedFormState';
+import { SelectControl } from './SelectControl';
+import type { Select } from './models';
 
-export const renderWedDataOrganization = (field: FormFieldRegisterer<WedFormState>) => (
-  <div>
-    <div className="sm:flex sm:justify-between sm:gap-lg">
-      <div className="sm:w-1/2">
+export const renderWedDataOrganization = (
+  field: FormFieldRegisterer<WedFormState>,
+  regions: Select[],
+) => {
+  const isCurrencyControl = field('vedTypes').value === 'currencyControl';
+
+  return (
+    <div>
+      {regions.length && isCurrencyControl ? (
+        <SelectControl
+          className="mb-s"
+          label="Регион"
+          placeholder="Выберите регион"
+          isSearch={true}
+          options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
+          {...withValidator(field('region'), defaultValidator)}
+        />
+      ) : null}
+      <div className="@xl:grid @xl:grid-cols-2 @xl:gap-x-lg">
+        {isCurrencyControl ? (
+          <InputControl
+            className="w-full mb-s"
+            label="ИНН"
+            {...withValidator(field('inn'), innValidator)}
+          />
+        ) : null}
         <InputControl
-          className="shrink-0 w-full mb-s"
+          className="w-full mb-s"
           label="Наименование организации"
           {...withValidator(field('fullName'), defaultValidator)}
         />
-      </div>
-      <div className="sm:w-1/2">
         <InputControl
-          className="shrink-0 w-full mb-s"
+          className="w-full mb-s"
           label="ФИО"
           {...withValidator(field('name'), nameValidator)}
         />
-      </div>
-    </div>
-    <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-s"
+          className="w-full mb-s"
           label="Телефон"
           {...withValidator(field('phone'), phoneValidator)}
         />
-      </div>
-      <div className="sm:w-1/2">
-        <InputControl
-          className="shrink-0 w-full mb-s"
-          label="Электронная почта"
-          {...withValidator(field('mail'), defaultValidator)}
-        />
+        {!isCurrencyControl ? (
+          <InputControl
+            className="w-full mb-s"
+            label="Электронная почта"
+            {...withValidator(field('mail'), defaultValidator)}
+          />
+        ) : null}
       </div>
     </div>
-  </div>
-);
+  );
+};

package/src/components/ApplicationForm/renderWedTextarea.tsx

@@ -0,0 +1,32 @@
+import { FormFieldRegisterer } from '../../hooks/useForm';
+import { Text } from '../../ui-kit/Text/Text';
+import { WedFormState } from './WedFormState';
+import { style } from '../../utils/style';
+
+const activeTextareaStyles =
+  'hover:border-primary-hover active:focus:border-primary-text focus:border-primary-text';
+export const renderWedTextarea = (field: FormFieldRegisterer<WedFormState>) => {
+  const textField = field('text');
+
+  return (
+    <label>
+      <div className="mb-xs">
+        <Text size="text-m" font="font-light">
+          Обращение
+        </Text>
+      </div>
+      <textarea
+        placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
+        className={style(
+          'block w-full resize-y min-h-24 p-m outline-none border rounded-md border-gray',
+          activeTextareaStyles,
+        )}
+        value={textField.value}
+        onInput={
+          ((e: { target?: { value?: string } }) =>
+            textField.onChange && textField.onChange(e.target?.value || '')) as any
+        }
+      />
+    </label>
+  );
+};

package/src/components/Blocks.ts

@@ -23,7 +23,6 @@ import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
-import { ExchangeRateOffice } from './ExchangeRateOffice/ExchangeRateOffice';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { GracePeriod } from './GracePeriod/GracePeriod';
@@ -36,8 +35,7 @@ import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { MortgageFiltration } from './MortgageFiltration/MortgageFiltration';
-import { OfficeMap } from './OfficeMap/OfficeMap';
-import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
+import { OfficesAtmsMap } from './OfficesAtmsMap/OfficesAtmsMap';
 import { ParagraphBlock } from './ParagraphBlock/ParagraphBlock';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -96,8 +94,7 @@ export const Blocks: BlocksRegistry = {
   LinkDocs,
   MobileAppTile,
   MortgageFiltration,
-  OfficeMap,
-  OfficeServicesBlock,
+  OfficesAtmsMap,
   ParagraphBlock,
   PictureText,
   Placeholder,
@@ -118,5 +115,4 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
-  ExchangeRateOffice,
 };

package/src/components/Bonus/Bonus.tsx

@@ -6,11 +6,12 @@ import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
+import { AlignStyles } from '../../model/AlignStyles';
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>(
-  ({ className = '', title, description, bonusItems = [], ...rest }) => (
+  ({ className = '', title, description, bonusItems = [], align = AlignStyles, ...rest }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
         <Headline
@@ -19,13 +20,14 @@ export const Bonus = JSX<BonusProps>(
           title={title}
           description={description}
           headlineVersion="M"
+          align={align}
         />
         <div className="flex flex-wrap w-full">
           {bonusItems.length > 0
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m"
+                  className="mb-3xl last:mb-0 sm:space-y-xs flex flex-col grow w-full p-4xl sm:p-m @xl:w-[49%] border border-gray"
                 >
                   <div className="grow">
                     <Headline
@@ -61,7 +63,9 @@ const renderBonusCount = (_: BonusCountDef) => (
     {_.bonusCount ? (
       // -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>
+        <span className="font-mohave text-title-large sm:text-title-extra gradient-color-text">
+          {_.bonusCount}
+        </span>
       </div>
     ) : null}
     {_.bonusName ? (

package/src/components/Bonus/BonusContent.ts

@@ -3,6 +3,7 @@ import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Изображение
@@ -44,4 +45,5 @@ export type BonusContent = UniBlockContent &
   HeadlineCommonProps & {
     /** @title Список плиток */
     bonusItems?: BonusItem[];
+    align?: TextAlign;
   };

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -18,12 +18,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
-      <Headline
-        className="mb-4xl sm:mb-3xl"
-        title={title}
-        description={subtitle}
-        headlineVersion="M"
-      />
+      <Headline title={title} description={subtitle} headlineVersion="M" />
       {bonusBenefits?.length
         ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
         : null}

package/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -1,7 +1,7 @@
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import { bonusBenefitAlign } from './bonusBenefitAlign';
+import { AlignStyles } from '../../model/AlignStyles';
 import { BonusBenefit } from './BonusBenefitsBlockContent';
 import { bonusBenefitStyles } from './bonusBenefitStyles';
 
@@ -15,13 +15,13 @@ export const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i
     )}
   >
     {title ? (
-      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+      <Text size="text-h6" font="font-normal" align={AlignStyles}>
         {title}
       </Text>
     ) : null}
     {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
     {description ? (
-      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+      <Text size="text-h6" font="font-normal" align={AlignStyles}>
         {description}
       </Text>
     ) : null}

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -25,8 +25,8 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
       useBonusCalculatorParams(userInputParams, sourceBookDir);
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма покупок в категории путешествия, ₽',
             min: minSumTravel,

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -36,8 +36,8 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
     const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -47,8 +47,8 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
     });
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма кредита, ₽',
             step: 500,

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -44,8 +44,8 @@ export const DepositCalculatorForm = JSX<DepositCalculatorProp>(
     }, [defaultMonth]);
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Сумма, ₽',
             min: calculatorParams.minSum,

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -48,8 +48,8 @@ export const RefinancingCalculatorForm = JSX<RefinancingCalculatorProp>(
     );
 
     return (
-      <section className={style('flex flex-col justify-between sm:flex-row gap-m', className)}>
-        <div className="flex flex-col gap-y-m sm:w-2/5 gap-2xl">
+      <section className={style('flex flex-col justify-between @5xl:flex-row gap-m', className)}>
+        <div className="flex flex-col gap-y-m sm:max-w-md gap-2xl">
           {renderWantedSumInput({
             title: 'Остаток долга в других банках, ₽ ',
             step: 500,

package/src/components/CardTransfer/CardTransfer.tsx

@@ -55,7 +55,7 @@ export const CardTransfer = JSX<CardTransferProps>(
         {title ? (
           <Heading
             className="pb-lg xl:pb-4xl self-start xl:self-center"
-            headingType="h2"
+            headingType="h3"
             title={title}
           />
         ) : null}

package/src/components/Carousel/Carousel.example.json

@@ -3,6 +3,7 @@
   "arrowsPadded": true,
   "isCycle": false,
   "isPadding": true,
+  "isGap": true,
   "isAlignCenter": false,
   "cardSize": "normal"
 }