@redneckz/wildless-cms-uni-blocks 0.6.31 → 0.6.33

package/mobile/lib/ui-kit/Text/Text.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @title Размер текста
+ */
+export declare type TextSize = '' | 'text-xs-light' | 'text-s-light' | 'text-s' | 'text-m-light' | 'text-m' | 'text-l-light' | 'text-l' | 'text-xl-light' | 'text-xl';
+/**
+ * @title Размер текста
+ */
+export declare type TitleSize = '' | 'text-h6' | 'text-h5' | 'text-h5-light' | 'text-h4' | 'text-h3' | 'text-h2' | 'text-h1' | 'text-h0' | 'text-m-title' | 'text-m-title-xs' | 'title-extra' | 'title-huge';
+/**
+ * @title Цвет текста
+ */
+export declare type TextColor = '' | 'text-main' | 'text-primary-text' | 'text-primary-main' | 'text-secondary-text' | 'text-secondary-light' | 'text-error' | 'text-white' | 'text-green';
+/**
+ * @title Выравнивание
+ * @enumNames [
+ *    "По умолчанию",
+ *    "По левому краю",
+ *    "По центру",
+ *    "По правому краю"
+ * ]
+ */
+export declare type TextAlign = '' | 'text-left' | 'text-center' | 'text-right';
+/**
+ * @title Насыщенность шрифта
+ */
+export declare type FontWeight = '' | 'font-light' | 'font-normal' | 'font-medium';
+interface TextProps {
+    size?: TextSize | TitleSize;
+    color?: TextColor;
+    align?: TextAlign;
+    font?: FontWeight;
+}
+export declare const Text: import("@redneckz/uni-jsx").UNIComponent<TextProps, any, any>;
+export {};

package/mobile/lib/ui-kit/Text/Text.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const Text = JSX((props) => {
+    const { size = '', color = '', align = '', font = '', children } = props;
+    const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
+    return _jsx("span", { className: textClasses, children: children });
+});
+//# sourceMappingURL=Text.js.map

package/mobile/lib/ui-kit/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/ui-kit/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAwExC,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAY,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,WAAW,GAAG,aAAa,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;IAElE,OAAO,eAAM,SAAS,EAAE,WAAW,YAAG,QAAQ,GAAQ,CAAC;AACzD,CAAC,CAAC,CAAC"}

package/mobile/lib/utils/sliceArray.d.ts

@@ -0,0 +1 @@
+export declare const sliceArray: <T>(items: T[], size: number) => T[][];

package/mobile/lib/utils/sliceArray.js

@@ -0,0 +1,12 @@
+export const sliceArray = (items, size) => {
+    const result = items.reduce((resultArray, item, index) => {
+        const chunkIndex = Math.floor(index / (size - 1));
+        if (!resultArray[chunkIndex]) {
+            resultArray[chunkIndex] = [item];
+        }
+        resultArray[chunkIndex].push(item);
+        return resultArray;
+    }, []);
+    return result;
+};
+//# sourceMappingURL=sliceArray.js.map

package/mobile/lib/utils/sliceArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliceArray.js","sourceRoot":"","sources":["../../src/utils/sliceArray.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAI,KAAU,EAAE,IAAY,EAAE,EAAE;IACxD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,WAAkB,EAAE,IAAO,EAAE,KAAa,EAAE,EAAE;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;QAElD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE;YAC5B,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;SAClC;QAED,WAAW,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEnC,OAAO,WAAW,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/mobile/src/components/Accordion/Accordion.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItemsList } from './AccordionItemsList';
 
@@ -9,12 +10,15 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
   ({ title, description, className = '', children, ...rest }) => (
-    <BlockWrapper
-      className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
-      {...rest}
-    >
+    <BlockWrapper className={`py-6 px-4 bg-white text-primary-text ${className}`} {...rest}>
       {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
-      {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
+      {description ? (
+        <div className="mb-5">
+          <Paragraph size="text-m" font="font-light" align="text-center">
+            {description}
+          </Paragraph>
+        </div>
+      ) : null}
       <AccordionItemsList>{children}</AccordionItemsList>
     </BlockWrapper>
   ),

package/mobile/src/components/AccordionItem/AccordionItem.tsx

@@ -6,9 +6,10 @@ import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { AccordionContent } from '../Accordion/AccordionContent';
 import type { AccordionItemProps } from './AccordionItemProps';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
@@ -63,7 +64,7 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
     className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`}
     onClick={onClick}
   >
-    <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
+    <div className="flex group-hover:text-primary-main">
       {primaryIcon ? (
         <Img
           image={getIconWithVersion(primaryIcon)}
@@ -73,8 +74,10 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
           asSVG
         />
       ) : null}
-      {label}
-    </span>
+      <Text size="text-m-title-xs" font="font-medium">
+        {label}
+      </Text>
+    </div>
     <Img
       className="flex-shrink-0"
       image={getIconWithVersion({ icon: icon })}

package/mobile/src/components/CarouselLinks/CarouselLinks.example.json

@@ -0,0 +1,55 @@
+{
+  "title": "Заголовок",
+  "description": "Описание 1",
+  "additionalDescription": "Описание 2",
+  "links": [
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    }
+  ]
+}

package/mobile/src/components/CarouselLinks/CarouselLinks.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -0,0 +1,67 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { LinkProps } from '../../model/LinkProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { sliceArray } from '../../utils/sliceArray';
+import { Carousel } from '../Carousel/Carousel';
+import type { CarouselLinksContent } from './CarouselLinksContent';
+
+export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
+
+const MAX_LINKS_COUNT = 12;
+
+export const CarouselLinks = JSX<CarouselLinksProps>(
+  ({ additionalDescription, description, links, title, className = '', ...rest }) => {
+    return (
+      <BlockWrapper
+        className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
+        {...rest}
+      >
+        <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
+          {title ? <Heading title={title} as="h1" headingType="h0" className="pb-0.5" /> : null}
+          {description ? (
+            <div className="pt-5">
+              <Paragraph size="text-xl" font="font-light">
+                {description}
+              </Paragraph>
+            </div>
+          ) : null}
+          {additionalDescription ? (
+            <div className="pt-6">
+              <Paragraph>{additionalDescription}</Paragraph>
+            </div>
+          ) : null}
+        </div>
+        {links?.length ? renderLinks(links) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderLinks = (links: LinkProps[]) => {
+  const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
+
+  const slides = slicedLinks.map((slide) => (
+    <div className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start">
+      {slide.map((link, index) => (
+        <LinkButton className="m-1" key={String(index)} {...link} />
+      ))}
+    </div>
+  ));
+
+  return (
+    <Carousel
+      className="min-w-[832px] w-[832px]"
+      isBlur={false}
+      cardFullViewCount={1}
+      cardWidth={'832'}
+      isCyclic={true}
+      block={{ type: 'Carousel', blocks: slides }}
+    >
+      {slides}
+    </Carousel>
+  );
+};

package/mobile/src/components/CarouselLinks/CarouselLinksContent.ts

@@ -0,0 +1,10 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkProps } from '../../model/LinkProps';
+
+/** @title Карусель с ссылками */
+export interface CarouselLinksContent extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Ссылки */
+  links?: LinkProps[];
+}

package/mobile/src/components/ContactsBlock/ContactsBlock.example.json

@@ -2,26 +2,30 @@
   "content": {
     "version": "secondary",
     "info": [
-      {
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 1",
-          "target": "_blank",
-          "version": "secondary"
+      [
+        {
+          "title": "Заголовок 1",
+          "description": "Описание 1",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 1",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      },
-      {
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 2",
-          "target": "_blank",
-          "version": "secondary"
+      ],
+      [
+        {
+          "title": "Заголовок 2ff",
+          "description": "Описание 2",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 2",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      }
+      ]
     ],
     "contacts": [
       [

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -1,68 +1,57 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import type { ContactItemProps, ContactsBlockContent, InfoItemProps } from './ContactsBlockContent';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Headline } from '../Headline/Headline';
+import type { ContactBlockProps, ContactsBlockContent } from './ContactsBlockContent';
 
 export interface ContactsBlockProps extends ContactsBlockContent, UniBlockProps {}
 
 interface RenderContactsColumnProps {
-  contactsColumn?: ContactItemProps[];
+  version?: BlockVersion;
+  column?: ContactBlockProps[];
   index?: number;
 }
 
-const contactsBlockStyleMap = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => {
     return (
-      <BlockWrapper
-        className={`${contactsBlockStyleMap[version]} flex p-12 ${className}`}
-        {...rest}
-      >
-        {info ? renderInfo(info) : null}
-        {contacts ? renderContacts(contacts) : null}
+      <BlockWrapper className={`${VersionStyleMap[version]} flex p-[50px] ${className}`} {...rest}>
+        {info?.length ? renderBlocks(info, version) : null}
+        {contacts?.length ? renderBlocks(contacts, version) : null}
       </BlockWrapper>
     );
   },
 );
 
-const renderInfo = (info: InfoItemProps[]) => (
-  <div className="flex grow basis-0 pr-11">
-    {info.map(({ title, description, button }, index) => (
-      <div className="grow basis-0 pr-11 last:pr-0" key={String(index)}>
-        <Heading as="h5" headingType="h5" title={title} className="pb-2.5" />
-        <Description className="text-l-light pb-6" description={description} />
-        {button ? <Button {...button} /> : null}
-      </div>
-    ))}
-  </div>
-);
-
-const renderContacts = (contacts: ContactItemProps[][]) => (
+const renderBlocks = (info: ContactBlockProps[][], version?: BlockVersion) => (
   <div className="flex grow basis-0">
-    {contacts.map((contactsColumn, index) => renderContactsColumn({ contactsColumn, index }))}
+    {info.map((column, index) => renderBlocksColumn({ column, index, version }))}
   </div>
 );
 
-const renderContactsColumn = ({ contactsColumn, index }: RenderContactsColumnProps) =>
-  contactsColumn ? (
-    <div className="flex flex-col grow basis-0 pr-11" key={String(index)}>
-      {contactsColumn.map(({ title, description, additionalDescription }, key) => (
-        <div className="pr-11 last:pr-0 last:mt-5" key={String(key)}>
-          <Heading as="h5" headingType="h5" title={title} />
-          <Description className="text-l-light mt-2.5" description={description} />
+const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProps) =>
+  column ? (
+    <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
+      {column.map(({ title = '', description, additionalDescription, button }, key) => (
+        <div className="mt-6 first:mt-0" key={String(key)}>
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="XS"
+            align="left"
+            bgColorHeadline={version}
+          />
           {additionalDescription ? (
-            <Description
-              className="text-m-light mt-1.5 opacity-80"
-              description={additionalDescription}
-            />
+            <div className="mt-1.5 opacity-80">
+              <Paragraph size="text-m-light">{additionalDescription}</Paragraph>
+            </div>
           ) : null}
+          {button ? <Button className="mt-6" {...button} /> : null}
         </div>
       ))}
     </div>

package/mobile/src/components/ContactsBlock/ContactsBlockContent.ts

@@ -2,6 +2,16 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Элемент плитки
+ */
+export interface ContactBlockProps extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Кнопка */
+  button?: ButtonProps;
+}
+
 /**
  * @title Контакты
  */
@@ -10,31 +20,11 @@ export interface ContactsBlockContent {
    * @title Данные
    * @maxItems 2
    * */
-  info?: InfoItemProps[];
+  info?: ContactBlockProps[][];
   /**
    * @title Контакты
    * @maxItems 2
    * */
-  contacts?: ContactItemProps[][];
+  contacts?: ContactBlockProps[][];
   version?: BlockVersion;
 }
-
-/**
- * @title Элемент плитки
- */
-export interface ContactItemProps {
-  /** @title Дополнительное описание */
-  additionalDescription?: string;
-  /** @title Описание */
-  description?: string;
-  /** @title Заголовок */
-  title?: string;
-}
-
-/**
- * @title Элемент плитки
- */
-export interface InfoItemProps extends HeadlineCommonProps {
-  /** @title Кнопка */
-  button?: ButtonProps;
-}

package/mobile/src/components/Headline/constants.ts

@@ -64,6 +64,12 @@ export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
     headingType: 'h4',
     as: 'h4',
   },
+  XS: {
+    descriptionFont: 'text-l-light',
+    gap: 'gap-2',
+    headingType: 'h5',
+    as: 'h5',
+  },
 };
 
 export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {

package/mobile/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -51,9 +50,9 @@ export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="flex flex-col justify-between">
             <div className="flex itens-center justify-between mb-4">
-              {description ? <Description className="text-h6" description={description} /> : null}
+              {description ? <span className="text-h6">{description}</span> : null}
               {additionalDescription ? (
-                <div className="text-m-light text-secondary-text"> {additionalDescription} </div>
+                <span className="text-m-light text-secondary-text"> {additionalDescription} </span>
               ) : null}
             </div>
             {cardList?.length ? (

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
@@ -30,7 +29,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <Description className="mb-2" description={description} /> : null}
+            {description ? <span className="mb-2">{description}</span> : null}
             {items?.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

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

@@ -13,7 +13,7 @@ export const renderStepContent =
   }: {
     styleMap: StyleType;
     isMainButton: boolean;
-    version: BlockVersion;
+    version?: BlockVersion;
   }) =>
   (step: Step, i: number, { length }: { length: number }): VNode => {
     const { label, description, button, items, isDotted } = step;

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -45,7 +45,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 );
 
 const getColData = (columns: TariffsTableColumn[] | undefined) =>
-  columns?.[0].data ? columns[0].data : [];
+  columns?.[0]?.data ? columns[0].data : [];
 
 const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
   rowHeaders?.map((header, i) => ({

package/mobile/src/components/Tile/Tile.tsx

@@ -3,11 +3,11 @@ import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -66,7 +66,9 @@ export const Tile = JSX<TileProps>((props) => {
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
-          <Description className="max-w-[600px] text-xl-light mt-2.5" description={description} />
+          <div className="max-w-[600px] mt-2.5">
+            <Paragraph size="text-xl-light">{description}</Paragraph>
+          </div>
         ) : null}
         {children}
         {renderList({ version, isDotted, listItemSize }, items)}

package/mobile/src/icons/ArrowLeftIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка" isInverse="true" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка 'Влево'" isInverse="true" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M7 11.834L3 8.00065L7 4.16732" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
   <path d="M14 9.00195C14.5523 9.00195 15 8.55424 15 8.00195C15 7.44967 14.5523 7.00195 14 7.00195L14 9.00195ZM8 7.00195C7.44772 7.00195 7 7.44967 7 8.00195C7 8.55424 7.44772 9.00195 8 9.00195L8 7.00195ZM14 7.00195L8 7.00195L8 9.00195L14 9.00195L14 7.00195Z" fill="currentColor"/>
 </svg>

package/mobile/src/icons/ArrowRightIcon.svg

@@ -0,0 +1 @@
+<svg title="Стрелка 'Вправо'" isInverse="true" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.43 5.93 20.5 12l-6.07 6.07M11.01 12h9.32M3.5 12h3.47" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/ArrowUpIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка вверх" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка 'Вверх'" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3416 9.29163L11.1582 7.10829C10.5166 6.46662 9.46657 6.46662 8.8249 7.10829L3.3999 12.5416" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M16.6001 12.5416L15.7334 11.675" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>