@redneckz/wildless-cms-uni-blocks 0.2.92 → 0.2.93

package/src/components/TariffsTable/TariffsTable.tsx

@@ -1,11 +1,11 @@
 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 { COLS_LENGTH_FOR_SCROLL } from './constants';
-import { TariffsTableRow } from './TariffsTableRow';
-import type { UniBlockProps } from '../../types';
 import type { TariffsTableContent } from './TariffsTableContent';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import { TariffsTableRow } from './TariffsTableRow';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
@@ -20,12 +20,12 @@ export const TariffsTable = JSX<TariffsTableProps>(
     }));
 
     const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll(
+      useComparisonTableScroll({
         colData,
-        COLS_LENGTH_FOR_SCROLL,
+        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
         activeCardIndex,
         setActiveCardIndex,
-      );
+      });
 
     return (
       <section
@@ -34,38 +34,40 @@ export const TariffsTable = JSX<TariffsTableProps>(
         }`}
       >
         <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
-        {rowData?.length ? (
-          <div className="relative">
-            {rowData.map((row, i, { length }) => (
-              <TariffsTableRow
-                key={String(i)}
-                row={row}
-                isLastRow={i + 1 === length}
-                activeCardIndex={activeCardIndex}
-              />
-            ))}
-            {isScrollAvailable ? (
-              <div>
-                <div className="absolute top-7 right-7 z-10">
-                  <ArrowButton
-                    onClick={nextClick}
-                    disabled={!showNextButton}
-                    ariaLabel="Пролистать вправо"
-                  />
-                  <ArrowButton
-                    className="mt-4 rotate-180"
-                    onClick={prevClick}
-                    disabled={!showPrevButton}
-                    ariaLabel="Пролистать влево"
-                  />
+        <div role="table">
+          {rowData?.length ? (
+            <div className="relative">
+              {rowData.map((row, i, { length }) => (
+                <TariffsTableRow
+                  key={String(i)}
+                  row={row}
+                  isLastRow={i + 1 === length}
+                  activeCardIndex={activeCardIndex}
+                />
+              ))}
+              {isScrollAvailable ? (
+                <div>
+                  <div className="absolute top-7 right-7 z-10">
+                    <ArrowButton
+                      onClick={nextClick}
+                      disabled={!showNextButton}
+                      ariaLabel="Пролистать вправо"
+                    />
+                    <ArrowButton
+                      className="mt-4 rotate-180"
+                      onClick={prevClick}
+                      disabled={!showPrevButton}
+                      ariaLabel="Пролистать влево"
+                    />
+                  </div>
                 </div>
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-        {isScrollAvailable ? (
-          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-        ) : null}
+              ) : null}
+            </div>
+          ) : null}
+          {isScrollAvailable ? (
+            <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+          ) : null}
+        </div>
       </section>
     );
   },

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -19,7 +19,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow })
   const cellClasses = `h-full ${DIVIDER_CLASSES}`;
 
   return (
-    <div className={cellWrapperClasses}>
+    <div className={cellWrapperClasses} role="cell">
       <div className={cellClasses}>{cell.map((item, i) => renderCellInner(item, i))}</div>
     </div>
   );
@@ -29,15 +29,15 @@ const renderCellInner = (
   { label, description, list, image, buttons }: TariffsTableCellData,
   i: number,
 ) => (
-  <div className="first:pt-5 last:pb-5">
+  <div key={String(i)} className="first:pt-5 last:pb-5">
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
     )}
-    {label && <h5 className="text-xl font-medium m-0">{label}</h5>}
+    {label && <div className="text-xl font-medium m-0">{label}</div>}
     {description && <div className="text-sm text-secondary-text">{description}</div>}
     {list?.items?.length ? (
       <div className="flex flex-col justify-between items-start">
-        <div>
+        <div role="list">
           {list.items.map((text, idx) => (
             <BlockItem
               key={String(idx)}

package/src/components/TextBlock/TextBlock.example.json

@@ -1,6 +1,13 @@
 {
-  "title": "Заголовок",
+  "title": "Текстовый блок",
   "description": "Описание",
   "blockVersion": "primary",
-  "iconVersion": "small"
+  "iconVersion": "small",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 48,
+      "height": 48
+    }
+  }
 }

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,6 +1,7 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { TextBlock } from './TextBlock';
-import type { Picture } from '../../model/Picture';
+import { TextBlockContent } from './TextBlockContent';
 
 const image: Picture = {
   src: 'bank-card.png',
@@ -11,50 +12,31 @@ const image: Picture = {
   },
 };
 
+export const TEXT_BLOCK: TextBlockContent = {
+  title: 'Все карты Россельхозбанка работают',
+  description:
+    "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
+};
+
 export default (
   <div className="font-sans overflow-hidden">
     <div>
       <p>Private clients</p>
       <div className="flex flex-col gap-6" data-theme="pc">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="primary"
           iconVersion="big"
           image={image}
         />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="none"
-        />
-        <TextBlock
-          context={context}
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />
@@ -63,24 +45,11 @@ export default (
     <div>
       <p>Business clients</p>
       <div className="flex flex-col gap-6" data-theme="bc">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />
@@ -89,24 +58,11 @@ export default (
     <div>
       <p>Ecosystem own</p>
       <div className="flex flex-col gap-6" data-theme="eo">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />

package/src/components/TextBlock/TextBlockContent.ts

@@ -18,9 +18,8 @@ export type TextBlockIconVersion = 'none' | 'small' | 'big';
 export interface TextBlockContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Описание */
   description?: string;
-  blockVersion?: TextBlockVersion;
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
+  blockVersion?: TextBlockVersion;
 }

package/src/components/Tile/Tile.example.json

@@ -6,7 +6,9 @@
     "format": "webp",
     "size": {
       "width": 300
-    }
+    },
+    "alt": "Описание картинки",
+    "title": "Подсказка"
   },
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
@@ -14,5 +16,6 @@
       "text": "Подробнее",
       "version": "primary"
     }
-  ]
+  ],
+  "version": "primary"
 }

package/src/components/Tile/Tile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BaseTile } from '../BaseTile/BaseTile';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { TileContent } from '../Tile/TileContent';
 import type { UniBlockProps } from '../../types';
 import { getColSpan } from '../../utils/getColSpan';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { TileContent } from '../Tile/TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {}
 
@@ -17,16 +17,16 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 min-h-[320px] box-border ${className || ''} ${
+      className={`font-sans p-9 box-border ${className || ''} ${
         tileStyleMap[version]
-      } ${getContainerPaddingRight(className)} `}
+      } ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `}
     >
       <BaseTile {...props}>{children}</BaseTile>
     </section>
   );
 });
 
-function getContainerPaddingRight(className: string = '') {
+function getContainerPaddingRight(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 6) {
     return 'pr-9';
@@ -36,3 +36,14 @@ function getContainerPaddingRight(className: string = '') {
     return 'pr-[9.4rem]';
   }
 }
+
+function getContainerMinHeight(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'min-h-[300px]';
+  } else if (colSpan <= 8) {
+    return 'min-h-[320px]';
+  } else {
+    return 'min-h-[360px]';
+  }
+}

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

@@ -8,6 +8,7 @@ import { transformContentPage } from './transformContentPage';
 const INDEX_PAGE_SLUG = 'index';
 const find = util.promisify(glob);
 
+// eslint-disable-next-line max-lines-per-function
 export function ContentPageRepository({
   contentDir = 'content',
   publicDir = 'public',

package/src/hooks/useComparisonTableScroll.ts

@@ -1,9 +1,14 @@
-export const useComparisonTableScroll = <COL_DATA>(
-  colData: COL_DATA[],
-  colsLengthForScroll: number,
-  activeCardIndex: number,
-  setActiveCardIndex: (_: number) => void,
-) => {
+export const useComparisonTableScroll = <ColData>({
+  colData,
+  colsLengthForScroll,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  colData: ColData[];
+  colsLengthForScroll: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (_: number) => void;
+}) => {
   const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
   const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
 

package/src/hooks/useLink.ts

@@ -2,7 +2,7 @@ import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageC
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref, isURL } from '../utils/url';
 
-const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
+const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
 
 export function useLink(
   {

package/src/ui-kit/InputRange/InputRange.tsx

@@ -24,7 +24,7 @@ export const InputRange = JSX<InputRangeProps>(
 
     return (
       <div className={className}>
-        <div className="relative">
+        <label className="block relative">
           {title ? (
             <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
               {title}
@@ -50,7 +50,7 @@ export const InputRange = JSX<InputRangeProps>(
               style={inputStyle}
             />
           </div>
-        </div>
+        </label>
         <div className="flex justify-between mt-3 mb-4">
           {items.map((item, i) => (
             <span key={String(i)} className="text-xs text-secondary-text pl-4">

package/src/ui-kit/SearchBar.tsx

@@ -4,6 +4,7 @@ import { Icon } from './Icon/Icon';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
+  const [inputHasFocus, setInputHasFocus] = context.useState<boolean>(false);
   return (
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
@@ -11,22 +12,31 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
           <Icon name="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
-          <span className="font-sans font-normal text-base text-secondary-text">
+          <label
+            htmlFor="search-bar-input"
+            className="font-sans font-normal text-base text-secondary-text"
+          >
             Поиск по сайту
-          </span>
+          </label>
         )}
       </div>
       <input
-        className="pl-12 w-full font-sans font-normal text-base text-black border border-solid border-main-divider rounded h-full box-border outline-none pr-[6%]"
+        id="search-bar-input"
+        className={`${
+          inputHasFocus ? 'border-primary-text' : ''
+        } pr-32 h-12 pl-12 w-full font-sans font-normal text-base text-black border border-solid border-main-divider rounded h-full box-border outline-none pr-[6%]`}
         value={term}
         onChange={(e) => setTerm(e.target.value)}
+        onFocus={(e) => setInputHasFocus(true)}
+        onBlur={(e) => setInputHasFocus(false)}
         type="text"
-        name="s"
+        name="search-bar-input"
       />
-      {term && (
+      {inputHasFocus && (
         <button
           type="submit"
-          className="absolute font-sans font-normal text-sm cursor-pointer bg-transparent hover:bg-primary-hover active:bg-primary-active text-primary-main hover:text-white border-none px-5 py-2 rounded top-1 right-1 outline-none"
+          version="primary"
+          className="absolute font-sans font-normal cursor-pointer text-sm hover:bg-primary-hover active:bg-primary-active border-none px-9 py-[9px] rounded top-1 right-1 outline-none text-secondary-text text-white bg-primary-main"
           onClick={(e) => {
             e.preventDefault();
             console.log('click');

package/src/Icons/CalendarCircleIcon.svg

@@ -1,14 +0,0 @@
-<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9.88965 5.83008V7.83008" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M14.1104 5.83008V7.83008" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M7.53027 10.1401H16.4703" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path
-    d="M13.5 17.6699H10.5C8 17.6699 6.5 15.8699 6.5 13.6699V10.6699C6.5 8.46992 8 6.66992 10.5 6.66992H13.5C16 6.66992 17.5 8.46992 17.5 10.6699V13.6699C17.5 15.8699 16 17.6699 13.5 17.6699Z"
-    stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path
-    d="M4 6C2.75 7.67 2 9.75 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2C10.57 2 9.2 2.30001 7.97 2.85001"
-    stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Icons/CardIcon.svg

@@ -1,11 +0,0 @@
-<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 8.5H22" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M6 16.5H8" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M10.5 16.5H14.5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path
-    d="M22 14.99V16.11C22 19.62 21.11 20.5 17.56 20.5H6.44C2.89 20.5 2 19.62 2 16.11V7.89C2 4.38 2.89 3.5 6.44 3.5H17.55C21.11 3.5 22 4.38 22 7.89V10.98"
-    stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Icons/CardPosIcon.svg

@@ -1,12 +0,0 @@
-<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3.92969 15.8802L15.8797 3.93018" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10"
-        stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M11.0996 18.2801L12.2996 17.0801" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10"
-        stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M13.79 15.5902L16.18 13.2002" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10"
-        stroke-linecap="round" stroke-linejoin="round"/>
-  <path
-    d="M20.4305 8.47998C22.5305 10.58 22.5205 11.64 20.4005 13.76L13.7605 20.4C11.6405 22.52 10.5805 22.53 8.48046 20.43L3.57047 15.52C1.47047 13.42 1.48047 12.36 3.60047 10.24L10.2405 3.59998C12.3605 1.47998 13.4205 1.46998 15.5205 3.56998L17.4205 5.46998"
-    stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M2 22H22" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Icons/CardTickIcon.svg

@@ -1,13 +0,0 @@
-<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 8.5H13.5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M6 16.5H8" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M10.5 16.5H14.5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M2 11.01V7.89C2 4.38 2.89 3.5 6.44 3.5H13.5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"
-        stroke-linejoin="round"/>
-  <path d="M22 11.0298V16.1098C22 19.6198 21.11 20.4998 17.56 20.4998H6.44C2.89 20.4998 2 19.6198 2 16.1098V15.0098"
-        stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M16.5 6L18 7.5L22 3.5" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Icons/EmptyWalletChangeIcon.svg

@@ -1,21 +0,0 @@
-<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M2.5 13.24V11.51C2.5 9.44001 4.18999 7.75 6.25999 7.75H17.74C19.81 7.75 21.5 9.44001 21.5 11.51V12.95H19.48C18.92 12.95 18.41 13.17 18.04 13.55C17.62 13.96 17.38 14.55 17.44 15.18C17.53 16.26 18.52 17.05 19.6 17.05H21.5V18.24C21.5 20.31 19.81 22 17.74 22H12.26"
-    stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path
-    d="M22.5598 13.9702V16.0302C22.5598 16.5802 22.1198 17.0302 21.5598 17.0502H19.5998C18.5198 17.0502 17.5298 16.2602 17.4398 15.1802C17.3798 14.5502 17.6198 13.9602 18.0398 13.5502C18.4098 13.1702 18.9198 12.9502 19.4798 12.9502H21.5598C22.1198 12.9702 22.5598 13.4202 22.5598 13.9702Z"
-    stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M7 12H14" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M3 16.5H8.34C8.98 16.5 9.5 17.02 9.5 17.66V18.94" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10"
-        stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M4.22 15.2803L3 16.5002L4.22 17.7202" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10"
-        stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M9.5 21.7803H4.16C3.52 21.7803 3 21.2603 3 20.6203V19.3403" stroke="#42AB44" stroke-width="2"
-        stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M8.28027 23.0001L9.50027 21.7801L8.28027 20.5601" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10"
-        stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M12.2803 2.16982C13.5203 1.69982 14.8503 2.61985 14.8503 3.94985V7.74983" stroke="#1C1C1C" stroke-width="2"
-        stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M2.5 12.4099V7.83997C2.5 6.64997 3.23 5.58992 4.34 5.16992L8.31 3.66992" stroke="#1C1C1C" stroke-width="2"
-        stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/Icons/JCBIcon.svg

@@ -1,42 +0,0 @@
-<svg id="icon" width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="56" height="56" fill="white"/>
-<path d="M45.0453 35.6512C45.0453 38.5251 42.6697 40.8653 39.7522 40.8653H10.9531V20.2141C10.9531 17.3402 13.3287 15 16.2462 15H45.0453V35.6512Z" fill="white"/>
-<path d="M35.668 30.355H37.856C37.9185 30.355 38.0644 30.3344 38.1269 30.3344C38.5437 30.2523 38.898 29.8828 38.898 29.3696C38.898 28.8769 38.5437 28.5074 38.1269 28.4048C38.0644 28.3843 37.9394 28.3843 37.856 28.3843H35.668V30.355Z" fill="url(#paint0_linear_3410_161865)"/>
-<path d="M37.6065 16.7441C35.5226 16.7441 33.8138 18.4069 33.8138 20.4802V24.36H39.1694C39.2944 24.36 39.4403 24.36 39.5445 24.3806C40.7531 24.4421 41.6492 25.058 41.6492 26.1254C41.6492 26.9671 41.0448 27.6856 39.9196 27.8293V27.8703C41.149 27.9524 42.0868 28.6298 42.0868 29.6768C42.0868 30.8058 41.0448 31.5448 39.6695 31.5448H33.793V39.1402H39.3569C41.4408 39.1402 43.1496 37.4774 43.1496 35.4041V16.7441H37.6065Z" fill="url(#paint1_linear_3410_161865)"/>
-<path d="M38.6271 26.372C38.6271 25.8793 38.2728 25.5509 37.856 25.4893C37.8144 25.4893 37.7102 25.4688 37.6476 25.4688H35.668V27.2752H37.6476C37.7102 27.2752 37.8352 27.2752 37.856 27.2547C38.2728 27.1931 38.6271 26.8647 38.6271 26.372Z" fill="url(#paint2_linear_3410_161865)"/>
-<path d="M16.6416 16.7441C14.5577 16.7441 12.849 18.4069 12.849 20.4802V29.6973C13.9117 30.2105 15.0162 30.5389 16.1206 30.5389C17.4335 30.5389 18.142 29.7589 18.142 28.6914V24.3395H21.3928V28.6709C21.3928 30.3542 20.3301 31.7296 16.725 31.7296C14.5369 31.7296 12.8281 31.2574 12.8281 31.2574V39.1197H18.3921C20.4759 39.1197 22.1847 37.4569 22.1847 35.3836V16.7441H16.6416Z" fill="url(#paint3_linear_3410_161865)"/>
-<path d="M27.1227 16.7441C25.0389 16.7441 23.3301 18.4069 23.3301 20.4802V25.3659C24.2887 24.5653 25.9558 24.0521 28.644 24.1753C30.0818 24.2369 31.6239 24.6269 31.6239 24.6269V26.2075C30.8529 25.8175 29.936 25.4685 28.7481 25.3864C26.706 25.2427 25.4765 26.2281 25.4765 27.9524C25.4765 29.6973 26.706 30.6826 28.7481 30.5184C29.936 30.4363 30.8529 30.0668 31.6239 29.6973V31.278C31.6239 31.278 30.1027 31.668 28.644 31.7296C25.9558 31.8527 24.2887 31.3395 23.3301 30.5389V39.1607H28.894C30.9779 39.1607 32.6867 37.4979 32.6867 35.4246V16.7441H27.1227Z" fill="url(#paint4_linear_3410_161865)"/>
-<defs>
-<linearGradient id="paint0_linear_3410_161865" x1="33.8098" y1="29.3721" x2="43.1742" y2="29.3721" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007940"/>
-<stop offset="0.2285" stop-color="#00873F"/>
-<stop offset="0.7433" stop-color="#40A737"/>
-<stop offset="1" stop-color="#5CB531"/>
-</linearGradient>
-<linearGradient id="paint1_linear_3410_161865" x1="33.81" y1="27.9332" x2="43.1751" y2="27.9332" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007940"/>
-<stop offset="0.2285" stop-color="#00873F"/>
-<stop offset="0.7433" stop-color="#40A737"/>
-<stop offset="1" stop-color="#5CB531"/>
-</linearGradient>
-<linearGradient id="paint2_linear_3410_161865" x1="33.8096" y1="26.3694" x2="43.1743" y2="26.3694" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007940"/>
-<stop offset="0.2285" stop-color="#00873F"/>
-<stop offset="0.7433" stop-color="#40A737"/>
-<stop offset="1" stop-color="#5CB531"/>
-</linearGradient>
-<linearGradient id="paint3_linear_3410_161865" x1="12.8446" y1="27.9332" x2="22.3539" y2="27.9332" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1F286F"/>
-<stop offset="0.4751" stop-color="#004E94"/>
-<stop offset="0.8261" stop-color="#0066B1"/>
-<stop offset="1" stop-color="#006FBC"/>
-</linearGradient>
-<linearGradient id="paint4_linear_3410_161865" x1="23.2762" y1="27.9332" x2="32.512" y2="27.9332" gradientUnits="userSpaceOnUse">
-<stop stop-color="#6C2C2F"/>
-<stop offset="0.1735" stop-color="#882730"/>
-<stop offset="0.5731" stop-color="#BE1833"/>
-<stop offset="0.8585" stop-color="#DC0436"/>
-<stop offset="1" stop-color="#E60039"/>
-</linearGradient>
-</defs>
-</svg>

package/src/Icons/MastercardIcon.svg

@@ -1,6 +0,0 @@
-<svg id="icon" width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="56" height="56" fill="white"/>
-<path d="M32.7399 18.8516H23.2324V36.1479H32.7399V18.8516Z" fill="#FF5F00"/>
-<path d="M23.8365 27.5C23.835 25.8342 24.2079 24.1899 24.9269 22.6916C25.6459 21.1933 26.6922 19.8802 27.9865 18.8518C26.3836 17.5763 24.4586 16.7831 22.4314 16.5628C20.4043 16.3426 18.3568 16.7041 16.523 17.6062C14.6893 18.5083 13.1432 19.9145 12.0615 21.664C10.9799 23.4136 10.4063 25.436 10.4062 27.5C10.4062 29.564 10.9799 31.5864 12.0615 33.3359C13.1432 35.0855 14.6893 36.4917 16.523 37.3938C18.3568 38.2958 20.4043 38.6574 22.4314 38.4371C24.4586 38.2169 26.3836 37.4237 27.9865 36.1482C26.6922 35.1197 25.6459 33.8066 24.9269 32.3083C24.2079 30.81 23.835 29.1657 23.8365 27.5Z" fill="#EB001B"/>
-<path d="M45.5661 27.5C45.5662 29.564 44.9926 31.5863 43.911 33.3359C42.8294 35.0855 41.2834 36.4917 39.4496 37.3937C37.6159 38.2958 35.5685 38.6574 33.5413 38.4371C31.5142 38.2169 29.5892 37.4237 27.9863 36.1482C29.2796 35.1187 30.325 33.8054 31.0439 32.3073C31.7628 30.8092 32.1363 29.1655 32.1363 27.5C32.1363 25.8345 31.7628 24.1907 31.0439 22.6926C30.325 21.1946 29.2796 19.8813 27.9863 18.8518C29.5892 17.5763 31.5142 16.7831 33.5413 16.5628C35.5685 16.3426 37.6159 16.7041 39.4496 17.6062C41.2834 18.5083 42.8294 19.9145 43.911 21.6641C44.9926 23.4136 45.5662 25.436 45.5661 27.5Z" fill="#F79E1B"/>
-</svg>

package/src/Icons/MinusIcon.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12h5M4 12h7" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/Icons/MirIcon.svg

@@ -1,13 +0,0 @@
-<svg id="icon" width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="56" height="56" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7432 20V20.0066C16.7369 20.0066 14.7511 20 14.2215 21.9717C13.7361 23.7796 12.3681 28.7709 12.3303 28.9085H11.952C11.952 28.9085 10.5525 23.8058 10.0607 21.9651C9.53118 19.9934 7.53904 20 7.53904 20H3V35.0003H7.53904V26.0918H7.72817H7.9173L10.5651 35.0003H13.7172L16.365 26.0984H16.7432V35.0003H21.2823V20H16.7432Z" fill="#4DB45E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M33.3231 20C33.3231 20 31.9929 20.1245 31.3688 21.5721L28.1536 28.9085H27.7754V20H23.2363V35.0003H27.5232C27.5232 35.0003 28.9164 34.8693 29.5406 33.4283L32.6927 26.0918H33.0709V35.0003H37.61V20H33.3231Z" fill="#4DB45E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.627 26.812V35H44.166V30.2182H49.0833C51.2267 30.2182 53.0423 28.7968 53.7169 26.812H39.627Z" fill="#4DB45E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M49.0833 20H38.9902C39.4946 22.856 41.5561 25.1486 44.2227 25.8953C44.8279 26.0656 45.4647 26.1573 46.1203 26.1573H53.8997C53.9691 25.8167 54.0006 25.4696 54.0006 25.1093C54.0006 22.2861 51.8004 20 49.0833 20Z" fill="url(#paint0_linear_3410_161850)"/>
-<defs>
-<linearGradient id="paint0_linear_3410_161850" x1="38.9915" y1="23.0787" x2="54.0006" y2="23.0787" gradientUnits="userSpaceOnUse">
-<stop offset="0.3" stop-color="#00B4E6"/>
-<stop offset="1" stop-color="#088CCB"/>
-</linearGradient>
-</defs>
-</svg>