@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.7

package/mobile/src/components/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -0,0 +1,35 @@
+import { ListOrientation } from '../../model/ListOrientation';
+import { RadioButtonGroup, RadioButtonItem } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+export interface BinaryRadioButtonGroupProps {
+  items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
+  title?: string;
+  orientation?: ListOrientation;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+}
+
+export const renderBinaryRadioButtonGroup = ({
+  items,
+  title,
+  orientation = 'horizontal',
+  value,
+  onChange,
+}: BinaryRadioButtonGroupProps) => (
+  <div>
+    {title ? (
+      <div className="mb-3">
+        <Text color="text-secondary-text" font="font-light">
+          {title}
+        </Text>
+      </div>
+    ) : null}
+    <RadioButtonGroup
+      orientation={orientation}
+      items={items}
+      checkedItem={items[value ? 0 : 1].id}
+      onChange={(_) => onChange && onChange(_ === items[0].id)}
+    />
+  </div>
+);

package/mobile/src/components/Calculator/renderDaysInput.tsx

@@ -1,36 +1,15 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { clamp } from '../../utils/clamp';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 
 const STEP_DAYS = 1;
 
-interface RenderDaysInputParams {
-  minDays: number;
-  maxDays: number;
-  daysValue: number;
-}
+export const renderDaysInput = (props: InputRangeProps) => (
+  <InputRange
+    className="mt-7"
+    items={[`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`]}
+    step={STEP_DAYS}
+    {...props}
+  />
+);
 
-export function renderDaysInput(
-  title: string,
-  params: RenderDaysInputParams,
-  callback?: (value: number) => void,
-) {
-  const { minDays, maxDays, daysValue } = params;
-  const daysText = (days: number) => {
-    const text = Number(days) % 10 === 1 ? 'дня' : 'дней';
-
-    return `${days} ${text}`;
-  };
-
-  return (
-    <InputRange
-      className="mt-7"
-      title={title}
-      items={[`От ${daysText(minDays)}`, `До ${daysText(maxDays)}`]}
-      min={minDays}
-      max={maxDays}
-      step={STEP_DAYS}
-      value={clamp(daysValue, minDays, maxDays)}
-      onChange={callback}
-    />
-  );
-}
+const daysText = (days: number) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;

package/mobile/src/components/Calculator/renderInterestPayment.tsx

@@ -1,52 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-const EVERY_MONTH = 'everyMonth';
-const AT_END_TERM = 'atEndTerm';
-
-const depositTypeItems = [
-  {
-    id: EVERY_MONTH,
-    text: 'Ежемесячно',
-  },
-  {
-    id: AT_END_TERM,
-    text: 'В конце срока',
-  },
-];
-
-interface InterestPaymentProps {
-  isMonthlyInterestPayment: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderInterestPayment({
-  isMonthlyInterestPayment,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: InterestPaymentProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-
-      <div>
-        <RadioButtonGroup
-          orientation={orientation}
-          items={depositTypeItems}
-          checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
-          onChange={(text: string) => callback && callback(text === EVERY_MONTH)}
-        />
-      </div>
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderInterestPayment = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'everyMonth', text: 'Ежемесячно' },
+      { id: 'atEndTerm', text: 'В конце срока' },
+    ],
+  });

package/mobile/src/components/Calculator/renderMonthsInput.tsx

@@ -1,47 +1,25 @@
-import { InputListRange } from '../../ui-kit/InputListRange/InputListRange';
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
-import { clamp } from '../../utils/clamp';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 
 const STEP_MONTHS = 1;
 
-interface RenderMonthsInputParams {
-  minMonths: number;
-  maxMonths: number;
-  monthsValue: number;
+interface MonthsInputParams extends InputRangeProps {
   availableMonths?: Array<number>;
 }
 
-export function renderMonthsInput(
-  title: string,
-  params: RenderMonthsInputParams,
-  callback?: (value: number) => void,
-) {
-  const { minMonths, maxMonths, monthsValue, availableMonths } = params;
-  const monthText = (month: number) => {
-    const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
+export const renderMonthsInput = ({
+  min = 0,
+  max = 0,
+  availableMonths,
+  ...rest
+}: MonthsInputParams) => (
+  <InputRange
+    className="mt-7"
+    items={[`От ${monthText(min)}`, `До ${monthText(max)}`]}
+    step={STEP_MONTHS}
+    {...(availableMonths?.length ? { list: availableMonths } : { min, max })}
+    {...rest}
+  />
+);
 
-    return `${month} ${text}`;
-  };
-
-  return availableMonths?.length ? (
-    <InputListRange
-      className="mt-7"
-      title={title}
-      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
-      list={availableMonths}
-      value={clamp(monthsValue, minMonths, maxMonths)}
-      onChange={callback}
-    />
-  ) : (
-    <InputRange
-      className="mt-7"
-      title={title}
-      items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
-      min={minMonths}
-      max={maxMonths}
-      step={STEP_MONTHS}
-      value={clamp(monthsValue, minMonths, maxMonths)}
-      onChange={callback}
-    />
-  );
-}
+const monthText = (month: number) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;

package/mobile/src/components/Calculator/renderPaymentType.tsx

@@ -1,49 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-export const ANNUITY = 'annuity';
-export const DIFFERENTIAL = 'differential';
-
-const paymentTypeItems = [
-  {
-    id: ANNUITY,
-    text: 'Аннуитетный',
-  },
-  {
-    id: DIFFERENTIAL,
-    text: 'Дифференцированный',
-  },
-];
-
-interface PaymentTypeProps {
-  isAnnuity: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderPaymentType({
-  isAnnuity,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: PaymentTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <RadioButtonGroup
-        orientation={orientation}
-        items={paymentTypeItems}
-        checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
-        onChange={(text: string) => callback && callback(text === ANNUITY)}
-      />
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'annuity', text: 'Аннуитетный' },
+      { id: 'differential', text: 'Дифференцированный' },
+    ],
+  });

package/mobile/src/components/Calculator/renderRegistrationType.tsx

@@ -1,51 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-const REMOTE_REGISTRATION = 'remote';
-const OFFICE_REGISTRATION = 'office';
-
-const registrationTypeItems = [
-  {
-    id: OFFICE_REGISTRATION,
-    text: 'Офис Банка',
-  },
-  {
-    id: REMOTE_REGISTRATION,
-    text: 'Дистанционно',
-  },
-];
-
-interface RegistrationTypeProps {
-  isRemoteRegistration: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderRegistrationType({
-  isRemoteRegistration,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: RegistrationTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <div>
-        <RadioButtonGroup
-          orientation={orientation}
-          items={registrationTypeItems}
-          checkedItem={isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION}
-          onChange={(text: string) => callback && callback(text === REMOTE_REGISTRATION)}
-        />
-      </div>
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderRegistrationType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'remote', text: 'Дистанционно' },
+      { id: 'office', text: 'Офис Банка' },
+    ],
+  });

package/mobile/src/components/Calculator/renderWantedSumInput.tsx

@@ -1,39 +1,22 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { clamp } from '../../utils/clamp';
 
 const DEFAULT_MONEY_STEP = 1000;
 
-interface RenderWantedSumParams {
-  minSum: number;
-  maxSum: number;
-  moneyValue: number;
-  className?: string;
-  step?: number;
+interface RenderWantedSumParams extends InputRangeProps {
   isShowItems?: boolean;
 }
 
-export function renderWantedSumInput(
-  title: string,
-  params: RenderWantedSumParams,
-  callback?: (value: number) => void,
-) {
-  const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
-
+export function renderWantedSumInput({
+  isShowItems = true,
+  step = DEFAULT_MONEY_STEP,
+  ...rest
+}: RenderWantedSumParams) {
   const items = [
-    `От ${addSpacesBetweenNumbers(minSum)} ₽`,
-    `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+    `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
+    `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
   ];
 
-  return (
-    <InputRange
-      title={title}
-      items={isShowItems ? items : []}
-      min={minSum}
-      max={maxSum}
-      step={step}
-      value={clamp(moneyValue, minSum, maxSum)}
-      onChange={callback}
-    />
-  );
+  return <InputRange items={isShowItems ? items : []} step={step} {...rest} />;
 }

package/mobile/src/components/Calculator/useDepositCalculatorParams.ts

@@ -45,7 +45,7 @@ export const useDepositCalculatorParams = (
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
-  const defaultMonth = data?.rateRows[0]
+  const defaultMonth = data?.rateRows?.[0]
     ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
     : 1;
   const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;

package/mobile/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/mobile/src/components/Carousel/Carousel.tsx

@@ -10,14 +10,13 @@ import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListSc
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
+import { ITEMS_GAP } from './itemsGap';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
   showDots?: boolean;
 }
 
-const ITEMS_GAP = 4;
-
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
@@ -83,7 +82,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             activeIndex={activeIndex}
             itemCount={count}
           />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null}
+          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
         </div>
       </BlockWrapper>
     );
@@ -104,7 +103,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/mobile/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/mobile/src/components/Carousel/itemsGap.ts

@@ -0,0 +1 @@
+export const ITEMS_GAP = 16;

package/mobile/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/mobile/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/mobile/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/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -4,7 +4,6 @@ import type { Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -13,17 +12,16 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
-import type {
-  CarouselTariffsCardContent,
-  TariffsCardCellProps,
-} from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import { getPaddingStyle } from './getPaddingStyle';
+import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -31,8 +29,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative border border-gray p-8 flex flex-col',
-          getHitStyle(isHighlighting),
+          'relative border border-gray flex flex-col',
+          getPaddingStyle(isHighlighting),
           className,
         )}
         {...rest}
@@ -59,14 +57,10 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
-const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
@@ -82,24 +76,6 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
-  const { title, description, buttons } = cell;
-
-  return (
-    <div key={String(i)} className="py-5 border-b border-main-divider">
-      {title ? (
-        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-      ) : null}
-      {description ? (
-        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-      ) : null}
-      {buttons?.length ? (
-        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
-      ) : null}
-    </div>
-  );
-};
-
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />

package/mobile/src/components/CarouselTariffsCard/descriptionSize.tsx

@@ -0,0 +1 @@
+export const descriptionSize = 'text-l';

package/mobile/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -0,0 +1,2 @@
+export const getPaddingStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'p-default mt-6' : 'p-default mt-6';

package/mobile/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -0,0 +1,31 @@
+import { VNode } from '../../model/VNode';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Text } from '../../ui-kit/Text/Text';
+import { TariffsCardCellProps } from './CarouselTariffsCardContent';
+import { descriptionSize } from './descriptionSize';
+
+export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="opacity-80">
+          <Text size="text-m" color="text-secondary-text">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      {description ? (
+        <div className="mt-1">
+          <Text size={descriptionSize} color="text-primary-text">
+            {description}
+          </Text>
+        </div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};

package/mobile/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/mobile/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">