@redneckz/wildless-cms-uni-blocks 0.3.74 → 0.3.75

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -5,17 +5,10 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { getStyleMap } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
-type StyleType = {
-  background: string;
-  title: string;
-  description: string;
-  iconBackground: string;
-  iconConnector: string;
-};
-
 const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
   normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
   small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
@@ -26,47 +19,35 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   small: 'min-h-[50px]',
 };
 
-const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
-  primary: {
-    background: 'bg-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-    iconBackground: 'bg-secondary-light',
-    iconConnector: 'bg-secondary-light',
-  },
-  secondary: {
-    background: 'bg-primary-main',
-    title: 'text-white',
-    description: 'text-white/80',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-  },
-};
-
-const styleMaps = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];
-
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
-    const style = styleMaps(version);
+  ({
+    className,
+    title,
+    description,
+    showLines = true,
+    steps,
+    size = 'normal',
+    version = 'primary',
+  }) => {
+    const styleMap = getStyleMap(version);
+
     return (
       <section
         className={`box-border font-sans bg-white px-4 py-6 flex flex-col
-        ${style.background} ${style.title} ${className || ''}`}
+        ${styleMap.background} ${styleMap.title} ${className || ''}`}
       >
         {title ? (
-          <Heading headingType="h3" className={`text-center ${style.title}`} title={title} />
+          <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m-md text-center ${style.description} ${title && 'mt-2'}`}>
+          <p className={`text-m-md text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map((step, i) =>
-                renderStepTitle({ step, size, i, length: steps.length, version: version }),
-              )}
+              {steps.map(renderStepTitle(size, version, showLines))}
             </div>
           </div>
         ) : null}
@@ -75,53 +56,49 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-interface RenderStepTitleParams {
-  step: Step;
-  size: SizeVersion;
-  i: number;
-  length: number;
-  version: BlockVersion;
-}
+const renderStepTitle =
+  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (step: Step, i: number, steps: Step[]) => {
+    const isLastStep = steps.length - 1 === i;
+    const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
+    const styleMap = getStyleMap(version);
 
-const renderStepTitle = (params: RenderStepTitleParams) => {
-  const { step, size, i, length, version } = params;
-  const isLastStep = length - 1 === i;
-  const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-  const style = styleMaps(version);
-
-  return (
-    <div key={String(i)}>
-      <div key={String(i)} className="flex flex-row text-center relative">
-        <div className="overflow-hidden">
-          {renderIconArea(params)}
-          {isLastStep ? null : (
-            <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
-          )}
-        </div>
-        <div
-          className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
-        >
-          {step.label ? (
-            <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
-          ) : null}
-          {step.description ? (
-            <div
-              className={`font-normal text-sm ${style.description} text-left ${
-                step.label ? 'mt-1' : ''
-              }`}
-            >
-              {step.description}
-            </div>
-          ) : null}
+    return (
+      <div key={String(i)}>
+        <div className="flex flex-row text-center relative">
+          <div className="overflow-hidden">
+            {renderIconArea(size, version)}
+            {isLastStep ? null : (
+              <div
+                className={`min-h-8 h-full w-[2px] ${
+                  showLines ? styleMap.iconConnector : ''
+                } ${margin}`}
+              />
+            )}
+          </div>
+          <div
+            className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+          >
+            {step.label ? (
+              <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
+            ) : null}
+            {step.description ? (
+              <div
+                className={`font-normal text-sm ${styleMap.description} text-left ${
+                  step.label ? 'mt-1' : ''
+                }`}
+              >
+                {step.description}
+              </div>
+            ) : null}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  };
 
-const renderIconArea = (params: RenderStepTitleParams) => {
-  const { step, size, i, version } = params;
-  const style = styleMaps(version);
+const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
+  const styleMap = getStyleMap(version);
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';
@@ -129,11 +106,10 @@ const renderIconArea = (params: RenderStepTitleParams) => {
 
   return (
     <div
-      className={`${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
-      <span className={`font-medium flex self-center ${style.title} ${iconTextSize}`}>
-        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} asSVG />) ||
-          i + 1}
+      <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
+        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} />) || i + 1}
       </span>
     </div>
   );

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,6 @@
-import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
@@ -35,7 +35,10 @@ export interface StepsBlockContent {
    */
   steps?: Step[];
   button?: ButtonProps;
-  /** @title Размер шагов (моб.) */
+  /**
+   * @title Размер шагов (моб.)
+   * @default normal
+   */
   size?: SizeVersion; // TODO: mobile content
-  version?: BlockVersion; // TODO: mobile content
+  version?: BlockVersion;
 }

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -0,0 +1,28 @@
+import { BlockVersion } from '../../model/BlockVersion';
+
+export type StyleType = {
+  background: string;
+  title: string;
+  description: string;
+  iconBackground: string;
+  iconConnector: string;
+};
+
+const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+  primary: {
+    background: 'bg-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+    iconBackground: 'bg-secondary-light',
+    iconConnector: 'bg-secondary-light',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    title: 'text-white',
+    description: 'text-white/80',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+  },
+};
+
+export const getStyleMap = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];

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

@@ -40,6 +40,7 @@ export const TextBlock = JSX<TextBlockProps>(
     isDotted = true,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+
     return (
       <section
         className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}

package/mobile/src/content-page-repository/ContentPageRepository.ts

@@ -27,6 +27,7 @@ export function ContentPageRepository({
   async function getAllContentPagesMap(): Promise<Record<string, ContentPageDef>> {
     const pagePaths = await listAllContentPages();
     const pages = await Promise.all(pagePaths.map(readPage));
+
     return pagePaths.reduce(
       (result, path, i) => ({
         ...result,
@@ -42,11 +43,13 @@ export function ContentPageRepository({
 
   async function getSecondaryContentPages(customPageType?: string) {
     const pages = await getAllContentPages();
+
     return pages.filter(not(bySlug(INDEX_PAGE_SLUG))).filter(byCustomPageType(customPageType));
   }
 
   async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
     const pages = await getAllContentPages();
+
     return pages.find(bySlug(slug));
   }
 
@@ -55,6 +58,7 @@ export function ContentPageRepository({
   }
 
   const cache: Record<string, ContentPageDef> = {};
+
   async function readPage(filePath: string): Promise<ContentPageDef> {
     if (!(filePath in cache)) {
       cache[filePath] = await transformContentPage(filePath, {
@@ -62,6 +66,7 @@ export function ContentPageRepository({
         publicDir,
       });
     }
+
     return cache[filePath];
   }
 

package/mobile/src/content-page-repository/mapJSON.ts

@@ -14,6 +14,7 @@ export async function mapJSON<T>(
 
   if (Array.isArray(data)) {
     const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(keyParts)));
+
     return Promise.all(values) as any;
   } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
     const subKeys = Object.keys(data as any);
@@ -21,7 +22,9 @@ export async function mapJSON<T>(
     const pairs = (await Promise.all(values)).map((_, i) => ({
       [subKeys[i]]: _,
     }));
+
     return Object.assign({}, ...pairs);
   }
+
   return mapper<T>(data, keyParts);
 }

package/mobile/src/content-page-repository/transformContentPage.ts

@@ -14,6 +14,7 @@ export async function transformContentPage(
   options: TransformationOptions,
 ): Promise<ContentPageDef> {
   const content = await readFile(pagePath, 'utf8');
+
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
     const isPicture = value && isLocalPath(value?.src);
@@ -22,6 +23,7 @@ export async function transformContentPage(
     } else if (isPicture) {
       return await transformPicture(pagePath, value as Picture, options);
     }
+
     return value;
   });
 }

package/mobile/src/content-page-repository/transformMarkdown.ts

@@ -8,5 +8,6 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
   }
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
+
   return result.toString('utf-8');
 }

package/mobile/src/content-page-repository/transformPicture.ts

@@ -17,6 +17,7 @@ export async function transformPicture(
   const [transformedPicture, ...transformedSources] = await Promise.all(
     [picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })),
   );
+
   return {
     ...picture,
     src: transformedPicture,
@@ -70,6 +71,7 @@ function transformSrc(src: string, { format, size }: TransformationOptions & Img
   }
 
   const suffix = [size?.width, size?.height].filter(Boolean).join('-');
+
   return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${
     String(format) || path.extname(src)
   }`;

package/mobile/src/hooks/useCreditCalculatorData.ts

@@ -5,11 +5,13 @@ export function useCreditCalculatorData(
   directoryName: string | undefined,
 ): any {
   const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
+
   return data || {};
 }
 
 async function fetchCreditCalculatorData(url: string): Promise<any> {
   const response = await fetch(url);
+
   return await response.json();
 }
 

package/mobile/src/hooks/useExchangeRates.ts

@@ -11,6 +11,7 @@ export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeCurrencyI
   const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
 
   const result = data?.hits?.hits?.map((_) => _._source) || [];
+
   return result.length ? getCurrencyListByRate(result) : result;
 }
 
@@ -23,6 +24,7 @@ async function fetchExchangeRates(): Promise<any | undefined> {
       },
       body: JSON.stringify(EXCHANGE_RATES_BODY),
     });
+
     return await response.json();
   } catch (err) {
     console.error(err);
@@ -79,6 +81,7 @@ const getCurrencyListByRate = (currencyRates: RatesData[]) =>
         sell: Number(_.rate_sell),
       });
     }
+
     return result;
   }, []);
 

package/mobile/src/hooks/useLink.ts

@@ -13,6 +13,7 @@ export function useLink(
   link: Partial<LinkProps & { className: string }>,
 ) {
   const href = adjustHref(link.href, router);
+
   return {
     ...link,
     href,

package/mobile/src/react/setup-fixture.ts

@@ -40,6 +40,7 @@ export const context: ContentPageContext = {
         setData(_);
       });
     }, [key, fetcher]);
+
     return { data };
   },
   useGeolocation: (defaultLocation) => {

package/mobile/src/services/sitemap/findActiveSubItem.ts

@@ -10,5 +10,6 @@ export const findActiveSubItem =
     const activeSubItem = possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
       : null;
+
     return activeSubItem;
   };

package/mobile/src/services/sitemap/useSitemap.ts

@@ -4,11 +4,13 @@ import { projectSettings } from '../../ProjectSettings';
 
 export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {
   const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+
   return data || {};
 }
 
 async function fetchSitemap(): Promise<HeaderContent> {
   const response = await fetch(sitemapURL());
+
   return await response.json();
 }
 

package/mobile/src/ui-kit/BlocksList/BlocksListProps.ts

@@ -17,71 +17,81 @@ export interface ActiveHandler {
   initialState?: boolean;
 }
 
-/**
- * @title Количество колонок
- * @enumNames ["1 колонка", "2 колонки"]
- */
-export type ColumnsCount = 1 | 2;
+export interface BlocksCommonProps {
+  /**
+   * @title Стиль
+   * @default ["col-span-12"]
+   **/
+  style?: string[];
+}
 
 /**
  * @title Заголовок
  * @default {"blockListType": "Headline"}
  */
-export type HeadlineBlockListDef = HeadlineContent & { blockListType: 'Headline' };
+export type HeadlineBlockListDef = HeadlineContent &
+  BlocksCommonProps & { blockListType: 'Headline' };
 
 /**
  * @title Список документов
  * @default {"blockListType": "LinkDocs"}
  */
-export type LinkDocsBlockListDef = LinkDocsContent & { blockListType: 'LinkDocs' };
+export type LinkDocsBlockListDef = LinkDocsContent &
+  BlocksCommonProps & { blockListType: 'LinkDocs' };
 
 /**
  * @title Текстовый блок
  * @default {"blockListType": "TextBlock"}
  */
-export type TextBlockBlockListDef = TextBlockContent & { blockListType: 'TextBlock' };
+export type TextBlockBlockListDef = TextBlockContent &
+  BlocksCommonProps & { blockListType: 'TextBlock' };
 
 /**
  * @title Картинка с текстом
  * @default {"blockListType": "PictureText"}
  */
-export type PictureTextBlockListDef = PictureTextContent & { blockListType: 'PictureText' };
+export type PictureTextBlockListDef = PictureTextContent &
+  BlocksCommonProps & { blockListType: 'PictureText' };
 
 /**
  * @title Продуктовый блок
  * @default {"blockListType": "ProductBlock"}
  */
-export type ProductBlockBlockListDef = ProductBlockContent & { blockListType: 'ProductBlock' };
+export type ProductBlockBlockListDef = ProductBlockContent &
+  BlocksCommonProps & { blockListType: 'ProductBlock' };
 
 /**
  * @title Плитка
  * @default {"blockListType": "Tile"}
  */
-export type TileBlockListDef = TileContent & { blockListType: 'Tile' };
+export type TileBlockListDef = TileContent & BlocksCommonProps & { blockListType: 'Tile' };
 
 /**
  * @title Продуктовая плитка
  * @default {"blockListType": "ProductTile"}
  */
-export type ProductTileBlockListDef = ProductTileContent & { blockListType: 'ProductTile' };
+export type ProductTileBlockListDef = ProductTileContent &
+  BlocksCommonProps & { blockListType: 'ProductTile' };
 
 /**
  * @title Галерея
  * @default {"blockListType": "Gallery"}
  */
-export type GalleryBlockListDef = GalleryContent & { blockListType: 'Gallery' };
+export type GalleryBlockListDef = GalleryContent & BlocksCommonProps & { blockListType: 'Gallery' };
 
 /**
  * @title Мини-галлерея
  * @default {"blockListType": "MiniGallery"}
  */
-export type MiniGalleryBlockListDef = MiniGalleryContent & { blockListType: 'MiniGallery' };
+export type MiniGalleryBlockListDef = MiniGalleryContent &
+  BlocksCommonProps & { blockListType: 'MiniGallery' };
 
 /**
  * @title Список ссылок
  * @default {"blockListType": "LinkList"}
  */
-export type LinkListBlockListDef = LinkListContent & { blockListType: 'LinkList' };
+export type LinkListBlockListDef = LinkListContent &
+  BlocksCommonProps & { blockListType: 'LinkList' };
 
 /**
  * @title Содержимое блока

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -1,30 +1,35 @@
 import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
-import type { BlockDef, ColumnsCount } from './BlocksListProps';
+import type { UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import type { BlockDef } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
-  columns?: ColumnsCount;
   className?: string;
 };
 
-export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
+export const renderBlocksList = ({ blocks, context, className = '' }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className })) : null;
 
 const renderBlock =
-  ({ context, columns, className }: EmbeddableBlocksProps) =>
+  ({ context, className }: UniBlockProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
       return null;
     }
-    const columnsCountClass = columns === 2 ? 'w-1/2' : '';
+    const classNameBlock = style2className(block?.style);
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
+
     return (
-      <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} className="!p-0" />
-      </div>
+      <EmbeddedBlock
+        key={`block_${i}`}
+        context={context}
+        {...block}
+        className={`${className} ${classNameBlock}`}
+      />
     );
   };

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

@@ -8,6 +8,7 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
   const { text, aboveText, appendLeft, appendRight } = props;
+
   return (
     <div className={getButtonStyle(props)}>
       {appendLeft ? appendLeft : null}

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

@@ -10,6 +10,7 @@ export interface ButtonSectionProps extends ButtonContent, UniBlockProps {}
 export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '', buttons }) => {
   const { handlerDecorator } = context;
   const router = context.useRouter();
+
   return buttons?.length ? (
     <div className={className}>
       {buttons.map((button, index) =>

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

@@ -8,6 +8,7 @@ import { foldableBlockClassNames, useActiveHandler } from './useActiveHandler';
 
 export type FoldableBlocks = VNode[];
 export type Render = (_: VNode, isActive: boolean) => VNode;
+
 export interface FoldableProps {
   context: ContentPageContext;
   foldButtonLabel?: string;
@@ -17,11 +18,13 @@ export interface FoldableProps {
   foldButtonDataTheme?: ColorPalette;
   isUnfolded?: boolean;
   render?: Render;
+  containerClasses?: string;
 }
 
 export interface RenderBlocksParams {
   blocksToHide: number;
   isActive: boolean;
+  containerClasses?: string;
 }
 
 export const Foldable = JSX<FoldableProps>(
@@ -33,6 +36,7 @@ export const Foldable = JSX<FoldableProps>(
     foldButtonLabel,
     foldButtonDataTheme,
     isUnfolded,
+    containerClasses,
     render = (_) => _,
   }) => {
     const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
@@ -44,7 +48,7 @@ export const Foldable = JSX<FoldableProps>(
 
     return blocks ? (
       <div>
-        {renderBlocks(blocks, render, { blocksToHide, isActive })}
+        {renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses })}
         {hiddenBlocksNum ? (
           <button
             className={
@@ -55,7 +59,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />
+            {icon && <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />}
           </button>
         ) : null}
       </div>
@@ -66,7 +70,7 @@ export const Foldable = JSX<FoldableProps>(
 const renderBlocks = (
   blocks: FoldableBlocks,
   render: Render,
-  { blocksToHide, isActive }: RenderBlocksParams,
+  { blocksToHide, isActive, containerClasses }: RenderBlocksParams,
 ) => {
   const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
   const hiddenBlocks = blocks.slice(-blocksToHide);
@@ -74,7 +78,7 @@ const renderBlocks = (
   return render(
     <div>
       {visibleBlocks}
-      <div className={foldableBlockClassNames}>{hiddenBlocks}</div>
+      <div className={`${foldableBlockClassNames} ${containerClasses}`}>{hiddenBlocks}</div>
     </div>,
     isActive,
   );

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

@@ -8,6 +8,7 @@ export const Input = JSX<InputProps>(
       const validInputValue = e.target.validity.valid ? e.target.value : value;
       onChange(validInputValue);
     };
+
     return (
       <input
         className={className}