@redneckz/wildless-cms-uni-blocks 0.2.113 → 0.2.116

package/mobile/src/components/LinkDocs/LinkDocsList.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkDocsListItem } from './LinkDocsListItem';
+import type { IconName } from '../../icons/IconName';
+import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListProps {
+  className?: string;
+  documents?: LinkDocsItem[];
+  columnsMode?: LinkColumnsMode;
+  icon?: IconName;
+}
+
+export const LinkDocsList = JSX<LinkDocsListProps>(
+  ({ className, documents, columnsMode = 'double', icon }) => {
+    return documents?.length ? (
+      <div className={className} role="list">
+        {documents.map((doc, i) => (
+          <div
+            key={String(i)}
+            className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+            role="listitem"
+          >
+            <LinkDocsListItem
+              className="group flex text-sm align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+              doc={doc}
+              icon={icon}
+            />
+          </div>
+        ))}
+      </div>
+    ) : null;
+  },
+);

package/mobile/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkDocsListItemBase } from './LinkDocsListItemBase';
+import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
+
+export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
+  <LinkDocsListItemBase
+    className={`flex h-full ${className}`}
+    iconClassName="mr-2.5 min-w-6 min-h-6"
+    doc={doc}
+    icon={icon}
+  />
+));

package/mobile/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../icons/IconName';
+import type { LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListItemProps {
+  className?: string;
+  doc: LinkDocsItem;
+  icon?: IconName;
+}
+
+export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
+  iconClassName?: string;
+  textClassName?: string;
+  suffixClassName?: string;
+}
+
+export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
+  ({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
+    const { text, fileSize, ...linkProps } = doc;
+    return (
+      <a className={className} role="link" {...linkProps}>
+        {icon ? (
+          <Icon className={iconClassName} name={icon} width="24px" height="24px" asSVG />
+        ) : null}
+        {text ? (
+          <span className={textClassName}>
+            {text}
+            <span className={suffixClassName}>
+              {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+            </span>
+          </span>
+        ) : null}
+      </a>
+    );
+  },
+);
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) return '';
+
+  const index = href.lastIndexOf('.');
+  return index !== -1 ? href.substring(index + 1) : '';
+};

package/mobile/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { IconName } from '../../icons/IconName';
+import type { LinkDocsItem } from './LinkDocsContent';
+import { LinkDocsListItem } from './LinkDocsListItem';
+
+export interface LinkDocsVerticalListProps {
+  hasBorder?: boolean;
+  documents?: LinkDocsItem[];
+  icon?: IconName;
+}
+
+export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
+  ({ hasBorder = true, documents, icon }) => {
+    return (
+      <div
+        className={`text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`}
+        role="list"
+      >
+        {documents?.length
+          ? documents.map((doc, i) => (
+              <div key={String(i)} role="listitem">
+                <LinkDocsListItem
+                  className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                  doc={doc}
+                  icon={icon}
+                />
+              </div>
+            ))
+          : null}
+      </div>
+    );
+  },
+);

package/mobile/src/components/LinkDocs/linkDocsContentExample.ts

@@ -0,0 +1,27 @@
+import type { LinkDocsContent } from './LinkDocsContent';
+
+export const linkDocsContentExample: LinkDocsContent = {
+  title: 'Дополнительные документы',
+  subtitle: 'Ответы на часто задаваемые вопросы',
+  icon: 'DocIcon',
+  documents: [
+    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
+    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
+    { text: 'no icon', href: '/abc4' },
+    { text: 'документ 5', href: '/abc5' },
+    { text: 'документ 6', href: '/abc6/abc.pdf' },
+    { text: 'Text text text', href: '/abc7/yolo.png' },
+    {
+      text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
+      href: '/abc8/archive.zip',
+      fileSize: '2.3МБ',
+    },
+    { text: 'И ещё немного текста', href: '/abc9/rarniw.rar', fileSize: '666МБ' },
+    {
+      text: 'Форматируем, сортируем, смотрим как отображается...',
+      href: '/abc10/',
+      fileSize: '65ГБ',
+    },
+  ],
+};

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,4 +1,4 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
 
 /**
  * @title QR код
@@ -13,8 +13,15 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export interface MobileAppTileContent
-  extends Pick<BaseTileCommonProps, 'title' | 'buttons' | 'description'> {
+export interface MobileAppTileContent {
+  /** @title Заголовок */
+  title?: string;
+  description?: string;
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  buttons?: BaseTileIconButton[];
   // TODO: description для мобильной версии
   qr?: QRCode;
   /** @title Ссылка */

package/mobile/src/components/PictureText/PictureText.tsx

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { PictureTextContent } from './PictureTextContent';
 
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
@@ -12,7 +12,7 @@ export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 export const PictureText = JSX<PictureTextProps>(({ className, title, image, benefits }) => {
   return (
     <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
-      <Title className="font-medium m-0 text-center">{title}</Title>
+      <Heading type="h2" className="text-center" text={title} />
       <div className={'flex justify-center mt-9'}>
         {image?.src && <Img className="mr-6" image={image} />}
         {benefits?.length ? (

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import { Tile } from '../Tile/Tile';
+import type { PlaceholderContent } from './PlaceholderContent';
 
 export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
   className?: string;
@@ -9,10 +9,15 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
 
 const GOLDEN_RATIO = 1.618;
 
-export const Placeholder = JSX<PlaceholderProps>(({ className, context, title }) => {
+export const Placeholder = JSX<PlaceholderProps>(({ className = '', context, title }) => {
   return (
-    <Tile className={className} context={context} title={title} description="Блок в разработке...">
-      <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+    <Tile
+      className={`pr-0 min-h-0 ${className}`}
+      context={context}
+      title={title}
+      description="Блок в разработке..."
+    >
+      <figure className="m-0">{renderShimmer()}</figure>
     </Tile>
   );
 });

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,16 +1,8 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
 import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
-export interface ProductBlockInnerCommonProps
-  extends Omit<BaseTileCommonProps, 'align' | 'titleSize'> {
-  /**
-   * @title Размер заголовка
-   * @default M
-   * @hidden
-   */
-  titleSize?: TitleSize;
+export interface ProductBlockInnerCommonProps extends BaseTileCommonProps {
   /**
    * @title Преимущества
    * @minItems 2

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -12,7 +12,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     className,
     context,
     title,
-    titleSize,
+    headingType,
     description,
     benefits,
     buttons,
@@ -26,7 +26,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
           <BaseTile
             context={context}
             title={title}
-            titleSize={titleSize || 'XL'}
+            headingType={headingType || 'h2'}
             description={description}
             items={items}
             buttons={buttons}

package/mobile/src/components/ProductBlock/renderBenefit.tsx

@@ -22,9 +22,9 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           height="24"
         />
       )}
-      <h4 className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
+      <div className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
         {benefit.label}
-      </h4>
+      </div>
       {benefit.description && (
         <div className={`font-normal text-m-sm ${benefitDescStyleMap[version]}`}>
           {benefit.description}

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -25,6 +25,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
         <div className="flex px-4 py-6">
           {slides.map((_, i) =>
             renderNavButton({
+              slide: _.productBlock,
               i,
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
@@ -37,7 +38,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
+function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
   const isActiveBtn = i === activeSlideIndex;
   const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
   return (
@@ -45,6 +46,7 @@ function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
       type="button"
       key={String(i)}
       onClick={onClick}
+      aria-label={slide?.title}
       className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
     >
       <div

package/mobile/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,20 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+import { HeadingType } from '../../ui-kit/Heading/HeadingProps';
 import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
-  titleSize?: TitleSize;
+  headingType?: HeadingType;
   block?: ProductBlockInnerCommonProps;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, titleSize, context }) => {
+  ({ block, headingType, context }) => {
     return (
       <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
         <div className="flex grow">
-          <ProductBlockInner context={context} titleSize={titleSize} {...block} />
+          <ProductBlockInner context={context} headingType={headingType} {...block} />
         </div>
       </section>
     );

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -1,10 +1,10 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { TileContent } from '../Tile/TileContent';
 
 /**
  * @title Продуктовая плитка
  */
-export interface ProductTileContent extends Omit<BaseTileCommonProps, 'align'> {
+export interface ProductTileContent extends TileContent {
   /**
    * @title Преимущества
    * @maxItems 7

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

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { SizeVersion } from '../../model/SizeVersion';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Title } from '../../ui-kit/Title/Title';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -14,16 +15,12 @@ export const StepsBlock = JSX<StepsBlockProps>(
           className || ''
         }`}
       >
-        {title && (
-          <Title size="M" className="font-medium m-0 text-center">
-            {title}
-          </Title>
-        )}
+        {title && <Heading type="h3" className="text-center" text={title} />}
         {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
         {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, array) => renderStepTitle({ step, size }, i, array))}
+              {steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length }))}
             </div>
           </div>
         ) : null}
@@ -32,24 +29,25 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepTitle = ({ step, size }, i: number, array: Step[]) => {
-  const isLastStep = array.length - 1 === i;
-  const iconAreaSize =
-    size === 'normal'
-      ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
-      : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
-  const iconSize = size === 'normal' ? '38' : '27';
+interface RenderStepTitleParams {
+  step: Step;
+  size: SizeVersion;
+  i: number;
+  length: number;
+}
+
+const renderStepTitle = (params: RenderStepTitleParams) => {
+  const { step, size, i, length } = params;
+
+  const isLastStep = length - 1 === i;
   const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
+
   return (
-    <div>
+    <div key={String(i)}>
       <div key={String(i)} className="flex flex-row text-center relative">
-        <div
-          className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
-        >
-          <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
-            {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
-          </span>
+        <div>
+          {renderIconArea(step, size, i)}
+          {!isLastStep && <div className={`min-h-8 h-full w-[2px] bg-secondary-light ${margin}`} />}
         </div>
         <div className="flex flex-col justify-center relative">
           {step.label && (
@@ -66,7 +64,26 @@ const renderStepTitle = ({ step, size }, i: number, array: Step[]) => {
           )}
         </div>
       </div>
-      {!isLastStep && <div className={`h-8 w-[2px] bg-secondary-light ${margin}`} />}
+    </div>
+  );
+};
+
+const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
+  const iconAreaSize =
+    size === 'normal'
+      ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
+      : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
+
+  const iconSize = size === 'normal' ? '38' : '27';
+  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
+
+  return (
+    <div
+      className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
+    >
+      <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+      </span>
     </div>
   );
 };

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

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
 import type { UniBlockProps } from '../../types';
 import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import type { TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
@@ -33,7 +33,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
           className || ''
         }`}
       >
-        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        <Heading type="h2" className="max-w-[47rem] text-center mb-9 mx-auto" text={title} />
         <div role="table">
           {rowData?.length ? (
             <div className="relative">

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

@@ -52,7 +52,7 @@ const renderCellInner = (
           <Button
             className={`${idx > 0 ? 'ml-3' : ''} w-12 h-12`}
             key={String(idx)}
-            appendLeft={icon && <Icon name={icon} width="24px" height="24px" />}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
             {...buttonProps}
           />
         ))

package/mobile/src/components/Tile/TileContent.ts

@@ -3,4 +3,4 @@ import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 /**
  * @title Плитка
  */
-export type TileContent = Omit<BaseTileCommonProps, 'align'>;
+export type TileContent = BaseTileCommonProps;

package/mobile/src/icons/ActualBalanceIcon.svg

@@ -1,5 +1,5 @@
 <svg
-  id="icon"
+  title="Деньги"
   width="48"
   height="48"
   viewBox="0 0 70 70"

package/mobile/src/icons/AppleIcon.svg

@@ -1 +1 @@
-<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="currentColor"/></svg>
+<svg title="Лого «Apple»" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="currentColor"/></svg>

package/mobile/src/icons/AtmIcon.svg

@@ -1,4 +1,4 @@
-<svg id="icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Банкомат" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.6665 10.441V12.916C1.6665 15.8327 3.33317 17.0827 5.83317 17.0827H14.1665C16.6665 17.0827 18.3332 15.8327 18.3332 12.916V7.08268C18.3332 4.16602 16.6665 2.91602 14.1665 2.91602H5.83317C3.33317 2.91602 1.6665 4.16602 1.6665 7.08268V7.49935H2.49984C4.99984 7.49935 5.83317 6.66602 5.83317 4.16602V3.33268" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M12.5 10C12.5 8.61667 11.3833 7.5 10 7.5C8.61667 7.5 7.5 8.61667 7.5 10C7.5 11.3833 8.61667 12.5 10 12.5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M18.3332 7.50065H17.4998C14.9998 7.50065 14.1665 6.66732 14.1665 4.16732V3.33398" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>

package/mobile/src/icons/BankIcon.svg

@@ -1,4 +1,4 @@
-<svg id="icon" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Банк" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3.19151 4.79217C2.89984 4.90883 2.6665 5.25883 2.6665 5.56716V8.33383C2.6665 8.79217 3.0415 9.16717 3.49984 9.16717H18.4998C18.9582 9.16717 19.3332 8.79217 19.3332 8.33383V5.56716C19.3332 5.25883 19.0998 4.90883 18.8082 4.79217L11.3082 1.79219C11.1415 1.72552 10.8582 1.72552 10.6915 1.79219L6.65815 3.40886" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M19.3332 18.3333H2.6665V15.8333C2.6665 15.375 3.0415 15 3.49984 15H18.4998C18.9582 15 19.3332 15.375 19.3332 15.8333V18.3333Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M4.3335 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>

package/mobile/src/icons/BurgerIcon.svg

@@ -1,4 +1,4 @@
-<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Бургер" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 6H21" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
 <path d="M9.49023 12H21.0002" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
 <path d="M3 12H5.99" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>

package/mobile/src/icons/BurgerIconWhite.svg

@@ -1,4 +1,4 @@
-<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Бургер (белый)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 6H21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
 <path d="M9.49023 12H21.0002" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
 <path d="M3 12H5.99" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>

package/mobile/src/icons/Calendar2Icon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 9.09h17" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 13.01V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5V17c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.995 13.7h.01M8.294 13.7h.01M8.294 16.7h.01" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 2v3M16 2v3" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Календарь 2" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 9.09h17" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 13.01V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5V17c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.995 13.7h.01M8.294 13.7h.01M8.294 16.7h.01" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 2v3M16 2v3" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/CalendarCircleIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.89 5.83v2M14.11 5.83v2M7.53 10.14h8.94M13.5 17.67h-3c-2.5 0-4-1.8-4-4v-3c0-2.2 1.5-4 4-4h3c2.5 0 4 1.8 4 4v3c0 2.2-1.5 4-4 4Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 6c-1.25 1.67-2 3.75-2 6 0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2c-1.43 0-2.8.3-4.03.85" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Скруглённый календарь" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.89 5.83v2M14.11 5.83v2M7.53 10.14h8.94M13.5 17.67h-3c-2.5 0-4-1.8-4-4v-3c0-2.2 1.5-4 4-4h3c2.5 0 4 1.8 4 4v3c0 2.2-1.5 4-4 4Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 6c-1.25 1.67-2 3.75-2 6 0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2c-1.43 0-2.8.3-4.03.85" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/CalendarIcon.svg

@@ -1,4 +1,4 @@
-<svg id="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg title="Календарь" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
   <path
     stroke="#1C1C1C"
     stroke-linecap="round"

package/mobile/src/icons/CalendarTickIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2v3M16 2v3M3.5 9.09h17M3 13.1V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5v7.86c-.73-.83-1.8-1.36-3-1.36-2.21 0-4 1.79-4 4 0 .75.21 1.46.58 2.06.21.36.48.68.79.94H8c-3.5 0-5-2-5-5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.995 13.7h.01M8.294 13.7h.01M8.294 16.7h.01" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 18 23c-1.01 0-1.93-.37-2.63-1-.31-.26-.58-.58-.79-.94A3.92 3.92 0 0 1 14 19c0-2.21 1.79-4 4-4 1.2 0 2.27.53 3 1.36A4 4 0 0 1 22 19Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m16.44 19 .99.99 2.13-1.97" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Календарь с галочкой" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2v3M16 2v3M3.5 9.09h17M3 13.1V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5v7.86c-.73-.83-1.8-1.36-3-1.36-2.21 0-4 1.79-4 4 0 .75.21 1.46.58 2.06.21.36.48.68.79.94H8c-3.5 0-5-2-5-5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.995 13.7h.01M8.294 13.7h.01M8.294 16.7h.01" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 18 23c-1.01 0-1.93-.37-2.63-1-.31-.26-.58-.58-.79-.94A3.92 3.92 0 0 1 14 19c0-2.21 1.79-4 4-4 1.2 0 2.27.53 3 1.36A4 4 0 0 1 22 19Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m16.44 19 .99.99 2.13-1.97" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/CalendarWhiteIcon.svg

@@ -1,4 +1,4 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Календарь белый" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     stroke="#fff"
     stroke-width="2"

package/mobile/src/icons/CardIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.5h20" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 16.5h2M10.5 16.5h4" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 14.99v1.12c0 3.51-.89 4.39-4.44 4.39H6.44C2.89 20.5 2 19.62 2 16.11V7.89c0-3.51.89-4.39 4.44-4.39h11.11c3.56 0 4.45.88 4.45 4.39v3.09" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кред. карта" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.5h20" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 16.5h2M10.5 16.5h4" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 14.99v1.12c0 3.51-.89 4.39-4.44 4.39H6.44C2.89 20.5 2 19.62 2 16.11V7.89c0-3.51.89-4.39 4.44-4.39h11.11c3.56 0 4.45.88 4.45 4.39v3.09" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/CardPosIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.93 15.88 15.88 3.93" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m11.1 18.28 1.2-1.2M13.79 15.59l2.39-2.39" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.43 8.48c2.1 2.1 2.09 3.16-.03 5.28l-6.64 6.64c-2.12 2.12-3.18 2.13-5.28.03l-4.91-4.91c-2.1-2.1-2.09-3.16.03-5.28l6.64-6.64c2.12-2.12 3.18-2.13 5.28-.03l1.9 1.9M2 22h20" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кред. карта под наклоном" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.93 15.88 15.88 3.93" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m11.1 18.28 1.2-1.2M13.79 15.59l2.39-2.39" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.43 8.48c2.1 2.1 2.09 3.16-.03 5.28l-6.64 6.64c-2.12 2.12-3.18 2.13-5.28.03l-4.91-4.91c-2.1-2.1-2.09-3.16.03-5.28l6.64-6.64c2.12-2.12 3.18-2.13 5.28-.03l1.9 1.9M2 22h20" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/CardTickIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.5h11.5M6 16.5h2M10.5 16.5h4" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 11.01V7.89c0-3.51.89-4.39 4.44-4.39h7.06M22 11.03v5.08c0 3.51-.89 4.39-4.44 4.39H6.44C2.89 20.5 2 19.62 2 16.11v-1.1" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.5 6 18 7.5l4-4" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кред. карта с галочкой" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.5h11.5M6 16.5h2M10.5 16.5h4" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 11.01V7.89c0-3.51.89-4.39 4.44-4.39h7.06M22 11.03v5.08c0 3.51-.89 4.39-4.44 4.39H6.44C2.89 20.5 2 19.62 2 16.11v-1.1" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.5 6 18 7.5l4-4" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>