hrm_ui_lib 1.0.0

package/src/components/SVGIcons/IconArrowExportUp.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExportUp = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Direction=Up, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M12.2803 2.21967C11.9874 1.92678 11.5126 1.92678 11.2197 2.21967L6.21967 7.21967C5.92678 7.51256 5.92678 7.98744 6.21967 8.28033C6.51256 8.57322 6.98744 8.57322 7.28033 8.28033L11 4.56066V18.25C11 18.6642 11.3358 19 11.75 19C12.1642 19 12.5 18.6642 12.5 18.25V4.56066L16.2197 8.28033C16.5126 8.57322 16.9874 8.57322 17.2803 8.28033C17.5732 7.98744 17.5732 7.51256 17.2803 7.21967L12.2803 2.21967ZM5.25 20.5C4.83579 20.5 4.5 20.8358 4.5 21.25C4.5 21.6642 4.83579 22 5.25 22H18.25C18.6642 22 19 21.6642 19 21.25C19 20.8358 18.6642 20.5 18.25 20.5H5.25Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowExportUp

package/src/components/SVGIcons/IconArrowExportUpFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExportUpFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Direction=Up, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M12.7071 2.29289C12.3166 1.90237 11.6834 1.90237 11.2929 2.29289L6.29289 7.29289C5.90237 7.68342 5.90237 8.31658 6.29289 8.70711C6.68342 9.09763 7.31658 9.09763 7.70711 8.70711L11 5.41421V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V5.41421L16.2929 8.70711C16.6834 9.09763 17.3166 9.09763 17.7071 8.70711C18.0976 8.31658 18.0976 7.68342 17.7071 7.29289L12.7071 2.29289ZM5.25 20.5C4.83579 20.5 4.5 20.8358 4.5 21.25C4.5 21.6642 4.83579 22 5.25 22H18.75C19.1642 22 19.5 21.6642 19.5 21.25C19.5 20.8358 19.1642 20.5 18.75 20.5H5.25Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowExportUpFilled

package/src/components/SVGIcons/IconArrowImport.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowImport = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M21.2503 4.5C21.63 4.5 21.9438 4.78215 21.9934 5.14823L22.0003 5.25V18.2541C22.0003 18.6683 21.6645 19.0041 21.2503 19.0041C20.8706 19.0041 20.5568 18.7219 20.5071 18.3558L20.5003 18.2541V5.25C20.5003 4.83579 20.8361 4.5 21.2503 4.5ZM12.6474 6.30373L12.72 6.21961C12.9863 5.95338 13.403 5.92921 13.6966 6.1471L13.7807 6.21972L18.7773 11.2174C19.0434 11.4835 19.0677 11.8999 18.8501 12.1935L18.7776 12.2776L13.781 17.2811C13.4883 17.5742 13.0134 17.5745 12.7203 17.2818C12.4539 17.0157 12.4294 16.5991 12.647 16.3053L12.7196 16.2211L16.4305 12.504L2.75049 12.5049C2.37079 12.5049 2.057 12.2228 2.00733 11.8567L2.00049 11.7549C2.00049 11.3752 2.28264 11.0615 2.64872 11.0118L2.75049 11.0049L16.4435 11.004L12.7199 7.28028C12.4537 7.01398 12.4295 6.59732 12.6474 6.30373L12.72 6.21961L12.6474 6.30373Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowImport

package/src/components/SVGIcons/IconArrowImportFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowImportFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M21.25 4.5C21.6297 4.5 21.9435 4.78215 21.9932 5.14823L22 5.25V18.75C22 19.1642 21.6642 19.5 21.25 19.5C20.8703 19.5 20.5565 19.2178 20.5069 18.8518L20.5 18.75V5.25C20.5 4.83579 20.8358 4.5 21.25 4.5ZM12.2098 6.38702L12.293 6.29282C12.6535 5.93237 13.2207 5.9047 13.613 6.20977L13.7072 6.29297L18.7038 11.2906C19.064 11.6509 19.0919 12.2178 18.7873 12.6101L18.7042 12.7043L13.7076 17.7077C13.3173 18.0985 12.6842 18.0989 12.2934 17.7087C11.9327 17.3484 11.9045 16.7812 12.2093 16.3887L12.2924 16.2945L15.581 13H3C2.48716 13 2.06449 12.614 2.00673 12.1166L2 12C2 11.4872 2.38604 11.0645 2.88338 11.0067L3 11H15.584L12.2928 7.70703C11.9324 7.34651 11.9047 6.77928 12.2098 6.38702L12.293 6.29282L12.2098 6.38702Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowImportFilled

package/src/components/SVGIcons/IconArrowLeft.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowLeft = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Direction=Left, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M10.7327 19.791C11.0326 20.0766 11.5074 20.0651 11.7931 19.7652C12.0787 19.4652 12.0672 18.9905 11.7673 18.7048L5.51587 12.7502L20.25 12.7502C20.6642 12.7502 21 12.4144 21 12.0002C21 11.586 20.6642 11.2502 20.25 11.2502L5.51577 11.2502L11.7673 5.29551C12.0672 5.00982 12.0787 4.53509 11.7931 4.23516C11.5074 3.93523 11.0326 3.92369 10.7327 4.20938L3.31379 11.2761C3.14486 11.437 3.04491 11.6422 3.01393 11.8556C3.00479 11.9024 3 11.9507 3 12.0002C3 12.0498 3.00481 12.0982 3.01398 12.1451C3.04502 12.3583 3.14496 12.5634 3.31379 12.7243L10.7327 19.791Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowLeft

package/src/components/SVGIcons/IconArrowLeftFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowLeftFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Direction=Left, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M10.2954 19.7162C10.6888 20.1038 11.322 20.0991 11.7096 19.7057C12.0972 19.3123 12.0925 18.6792 11.6991 18.2915L6.32876 13.0001H19.9999C20.5522 13.0001 20.9999 12.5524 20.9999 12.0001C20.9999 11.4479 20.5522 11.0001 19.9999 11.0001H6.33536L11.6991 5.71525C12.0925 5.32763 12.0972 4.69448 11.7096 4.30108C11.322 3.90767 10.6888 3.90298 10.2954 4.29061L3.37122 11.113C2.87431 11.6026 2.87431 12.4042 3.37122 12.8938L10.2954 19.7162Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowLeftFilled

package/src/components/SVGIcons/IconArrowRepeatAll.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowRepeatAll = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M14.6102 2.47047L14.5334 2.4031C14.2394 2.17855 13.818 2.20101 13.5495 2.47047L13.4824 2.54755C13.2587 2.84259 13.281 3.26552 13.5495 3.53498L15.521 5.5118H8.5L8.26687 5.51592C4.785 5.63911 2 8.51085 2 12.0354C2 13.7259 2.6407 15.2663 3.6917 16.4252L3.76407 16.4947C3.89496 16.6065 4.06463 16.674 4.25 16.674C4.66421 16.674 5 16.337 5 15.9213C5 15.7481 4.9417 15.5885 4.84373 15.4613L4.64439 15.2306C3.92953 14.3627 3.5 13.2494 3.5 12.0354C3.5 9.26396 5.73858 7.01725 8.5 7.01725H15.381L13.5495 8.85754L13.4824 8.93463C13.2587 9.22967 13.281 9.6526 13.5495 9.92206C13.8424 10.216 14.3173 10.216 14.6102 9.92206L17.7922 6.72852L17.8593 6.65144C18.083 6.3564 18.0606 5.93347 17.7922 5.66401L14.6102 2.47047ZM20.23 7.57108C20.0999 7.46224 19.9326 7.39677 19.75 7.39677C19.3358 7.39677 19 7.73378 19 8.14949C19 8.33618 19.0677 8.507 19.1791 8.63722C19.9992 9.53109 20.5 10.7246 20.5 12.0354C20.5 14.8069 18.2614 17.0536 15.5 17.0536H8.558L10.4634 15.1425L10.5365 15.0573C10.7339 14.7897 10.7319 14.4206 10.5305 14.155L10.4634 14.0779L10.3785 14.0045C10.1119 13.8065 9.74409 13.8085 9.47951 14.0106L9.40271 14.0779L6.22073 17.2715L6.14756 17.3566C5.95023 17.6242 5.95224 17.9934 6.15361 18.2589L6.22073 18.336L9.40271 21.5295L9.48683 21.6024C9.78044 21.8211 10.1971 21.7968 10.4634 21.5295C10.7319 21.2601 10.7542 20.8371 10.5305 20.5421L10.4634 20.465L8.564 18.559H15.5L15.7331 18.5549C19.215 18.4317 22 15.56 22 12.0354C22 10.342 21.3571 8.79923 20.3029 7.63965L20.23 7.57108Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowRepeatAll

package/src/components/SVGIcons/IconArrowRepeatAllFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowRepeatAllFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M14.7123 2.28927L14.6251 2.21162C14.2326 1.90101 13.6607 1.92689 13.2981 2.28927L13.2204 2.37643C12.9096 2.76867 12.9355 3.34012 13.2981 3.70249L14.597 4.99947L8.99921 4.99968L8.75859 5.00373C5.00445 5.13047 2 8.21161 2 11.994C2 13.4387 2.43833 14.7811 3.18863 15.8923C3.37024 16.1437 3.666 16.3073 4 16.3073C4.55228 16.3073 5 15.8599 5 15.308C5 15.0919 4.93132 14.8917 4.81525 14.7293L4.68008 14.5112C4.24775 13.772 4 12.9119 4 11.994C4 9.23493 6.23822 6.99828 8.99921 6.99828L14.595 6.99807L13.2981 8.29546L13.2204 8.38262C12.9096 8.77486 12.9355 9.34631 13.2981 9.70868C13.6886 10.0989 14.3218 10.0989 14.7123 9.70868L17.7175 6.70559L17.7952 6.61843C18.106 6.22619 18.0801 5.65474 17.7175 5.29237L14.7123 2.28927ZM20.7865 8.06061C20.6034 7.82799 20.3191 7.6786 20 7.6786C19.4477 7.6786 19 8.126 19 8.6779C19 8.88608 19.0637 9.07939 19.1717 9.2389C19.6952 10.0287 20 10.9757 20 11.994C20 14.753 17.7618 16.9897 15.0008 16.9897L9.415 16.9891L10.7087 15.6977L10.7923 15.603C11.0733 15.2413 11.0713 14.7312 10.7864 14.3716L10.7087 14.2845L10.6139 14.2009C10.252 13.9201 9.7415 13.9221 9.38169 14.2068L9.29447 14.2845L6.28926 17.2876L6.20562 17.3823C5.92465 17.7439 5.92663 18.2541 6.21156 18.6136L6.28926 18.7008L9.29447 21.7039L9.38867 21.787C9.78097 22.0918 10.3482 22.0641 10.7087 21.7039C11.0713 21.3415 11.0972 20.7701 10.7864 20.3778L10.7087 20.2907L9.405 18.9877L15.0008 18.9883L15.2414 18.9842C18.9956 18.8575 22 15.7764 22 11.994C22 10.534 21.5524 9.17858 20.7868 8.05715L20.7865 8.06061Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowRepeatAllFilled

package/src/components/SVGIcons/IconArrowReset.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowReset = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M6.78033 2.71967C7.07322 3.01256 7.07322 3.48744 6.78033 3.78033L4.56066 6H13.25C17.5302 6 21 9.46979 21 13.75C21 18.0302 17.5302 21.5 13.25 21.5C8.96979 21.5 5.5 18.0302 5.5 13.75C5.5 13.3358 5.83579 13 6.25 13C6.66421 13 7 13.3358 7 13.75C7 17.2018 9.79822 20 13.25 20C16.7018 20 19.5 17.2018 19.5 13.75C19.5 10.2982 16.7018 7.5 13.25 7.5H4.56066L6.78033 9.71967C7.07322 10.0126 7.07322 10.4874 6.78033 10.7803C6.48744 11.0732 6.01256 11.0732 5.71967 10.7803L2.21967 7.28033C1.92678 6.98744 1.92678 6.51256 2.21967 6.21967L5.71967 2.71967C6.01256 2.42678 6.48744 2.42678 6.78033 2.71967Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowReset

package/src/components/SVGIcons/IconArrowResetFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowResetFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M7.20711 2.54289C7.59763 2.93342 7.59763 3.56658 7.20711 3.95711L5.41421 5.75H13.25C17.6683 5.75 21.25 9.33172 21.25 13.75C21.25 18.1683 17.6683 21.75 13.25 21.75C8.83172 21.75 5.25 18.1683 5.25 13.75C5.25 13.1977 5.69772 12.75 6.25 12.75C6.80228 12.75 7.25 13.1977 7.25 13.75C7.25 17.0637 9.93629 19.75 13.25 19.75C16.5637 19.75 19.25 17.0637 19.25 13.75C19.25 10.4363 16.5637 7.75 13.25 7.75H5.41421L7.20711 9.54289C7.59763 9.93342 7.59763 10.5666 7.20711 10.9571C6.81658 11.3476 6.18342 11.3476 5.79289 10.9571L2.29289 7.45711C1.90237 7.06658 1.90237 6.43342 2.29289 6.04289L5.79289 2.54289C6.18342 2.15237 6.81658 2.15237 7.20711 2.54289Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowResetFilled

package/src/components/SVGIcons/IconArrowRight.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowRight = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Direction=Right, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M13.2673 4.20938C12.9674 3.92369 12.4926 3.93523 12.2069 4.23516C11.9213 4.53509 11.9328 5.00982 12.2327 5.29551L18.4841 11.2501H3.75C3.33579 11.2501 3 11.5859 3 12.0001C3 12.4143 3.33579 12.7501 3.75 12.7501H18.4842L12.2327 18.7048C11.9328 18.9905 11.9213 19.4652 12.2069 19.7652C12.4926 20.0651 12.9674 20.0766 13.2673 19.791L20.6862 12.7243C20.8551 12.5634 20.9551 12.3581 20.9861 12.1448C20.9952 12.098 21 12.0496 21 12.0001C21 11.9506 20.9952 11.9021 20.986 11.8552C20.955 11.642 20.855 11.4369 20.6862 11.2761L13.2673 4.20938Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowRight

package/src/components/SVGIcons/IconArrowRightFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowRightFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Direction=Right, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M13.7045 4.28377C13.3111 3.89615 12.678 3.90084 12.2904 4.29424C11.9027 4.68765 11.9074 5.3208 12.3008 5.70842L17.6712 10.9998H4C3.44771 10.9998 3 11.4475 3 11.9998C3 12.5521 3.44772 12.9998 4 12.9998H17.6646L12.3008 18.2847C11.9074 18.6723 11.9027 19.3055 12.2904 19.6989C12.678 20.0923 13.3111 20.097 13.7045 19.7094L20.6287 12.887C21.1256 12.3974 21.1256 11.5958 20.6287 11.1062L13.7045 4.28377Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowRightFilled

package/src/components/SVGIcons/IconArrowSort.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowSort = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M17.2509 4L17.1491 4.00685C16.783 4.05651 16.5009 4.3703 16.5009 4.75L16.5 17.442L13.2801 14.2244L13.196 14.1518C12.9023 13.9341 12.4856 13.9585 12.2194 14.2248C11.9267 14.5179 11.9269 14.9927 12.2199 15.2855L16.7237 19.7855L16.8078 19.8581C17.1015 20.0758 17.5182 20.0514 17.7843 19.7851L22.2806 15.2851L22.3531 15.2009C22.5709 14.9072 22.5465 14.4905 22.2801 14.2244L22.196 14.1518C21.9023 13.9341 21.4856 13.9585 21.2194 14.2248L18 17.446L18.0009 4.75L17.994 4.64823C17.9444 4.28215 17.6306 4 17.2509 4ZM6.21441 4.21969L1.71965 8.71474L1.64704 8.79886C1.42919 9.09248 1.45341 9.50914 1.71969 9.7754L1.80381 9.84802C2.09743 10.0659 2.51409 10.0416 2.78035 9.77537L5.997 6.55711L5.99766 19.2549L6.00451 19.3567C6.05417 19.7228 6.36797 20.0049 6.74766 20.0049L6.84943 19.9981C7.21551 19.9484 7.49766 19.6346 7.49766 19.2549L7.497 6.55911L10.7199 9.77596L10.8041 9.84849C11.0979 10.066 11.5145 10.0414 11.7805 9.77481C12.0731 9.4816 12.0726 9.00672 11.7794 8.71415L7.27451 4.21909L7.19038 4.14661C6.89676 3.9292 6.48047 3.95361 6.21441 4.21969Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowSort

package/src/components/SVGIcons/IconArrowSortFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowSortFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M6.28829 4.29327L2.29252 8.29327L2.20938 8.38752C1.90456 8.77997 1.93259 9.34719 2.29327 9.70748L2.38752 9.79062C2.77997 10.0954 3.34719 10.0674 3.70748 9.70673L6.001 7.41L6.00101 19.0007L6.00774 19.1173C6.0655 19.6146 6.48817 20.0007 7.00101 20.0007L7.11763 19.9939C7.61497 19.9362 8.00101 19.5135 8.00101 19.0007L8.001 7.417L10.2944 9.70757L10.3886 9.7907C10.7811 10.0955 11.3483 10.0674 11.7086 9.70664C12.0988 9.31586 12.0984 8.6827 11.7077 8.29243L7.70242 4.29243L7.60816 4.20931C7.21571 3.90456 6.64855 3.93262 6.28829 4.29327ZM17 4.00317L16.8834 4.0099C16.386 4.06767 16 4.49034 16 5.00317L16 16.583L13.7068 14.2925L13.6125 14.2094C13.2201 13.9045 12.6529 13.9325 12.2926 14.2932C11.9022 14.6839 11.9025 15.3171 12.2932 15.7074L16.297 19.7074L16.3912 19.7905C16.7837 20.0954 17.3509 20.0674 17.7112 19.7067L21.7074 15.7067L21.7906 15.6125C22.0954 15.22 22.0674 14.6528 21.7068 14.2925L21.6125 14.2094C21.2201 13.9045 20.6529 13.9325 20.2926 14.2932L18 16.587L18 5.00317L17.9933 4.88655C17.9355 4.38921 17.5128 4.00317 17 4.00317Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowSortFilled

package/src/components/SVGIcons/IconArrowSync.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowSync = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M16.2506 5.18011C15.9994 5.50947 16.0627 5.9801 16.3921 6.23128C18.1804 7.59515 19.25 9.70821 19.25 12C19.25 15.736 16.4242 18.812 12.7933 19.2071L13.4697 18.5303C13.7626 18.2374 13.7626 17.7626 13.4697 17.4697C13.2034 17.2034 12.7867 17.1792 12.4931 17.3971L12.409 17.4697L10.409 19.4697C10.1427 19.7359 10.1185 20.1526 10.3364 20.4462L10.409 20.5303L12.409 22.5303C12.7019 22.8232 13.1768 22.8232 13.4697 22.5303C13.7359 22.2641 13.7601 21.8474 13.5423 21.5538L13.4697 21.4697L12.7194 20.7208C17.2154 20.355 20.75 16.5903 20.75 12C20.75 9.23526 19.4582 6.68321 17.3017 5.03856C16.9724 4.78738 16.5017 4.85075 16.2506 5.18011ZM10.5303 1.46967C10.2374 1.76256 10.2374 2.23744 10.5303 2.53033L11.2796 3.27923C6.78409 3.6456 3.25 7.41008 3.25 12C3.25 14.6445 4.43126 17.0974 6.43081 18.7491C6.75016 19.0129 7.22289 18.9679 7.48669 18.6485C7.75048 18.3292 7.70545 17.8564 7.3861 17.5926C5.72793 16.2229 4.75 14.1922 4.75 12C4.75 8.26436 7.57532 5.18861 11.2057 4.79301L10.5303 5.46967C10.2374 5.76256 10.2374 6.23744 10.5303 6.53033C10.8232 6.82322 11.2981 6.82322 11.591 6.53033L13.591 4.53033C13.8839 4.23744 13.8839 3.76256 13.591 3.46967L11.591 1.46967C11.2981 1.17678 10.8232 1.17678 10.5303 1.46967Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowSync

package/src/components/SVGIcons/IconArrowSyncFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowSyncFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M16.0518 5.0285C15.7169 5.46765 15.8013 6.09515 16.2405 6.43007C17.9675 7.74714 19 9.78703 19 12C19 15.4973 16.4352 18.3956 13.084 18.9166L13.7929 18.2071C14.1834 17.8166 14.1834 17.1834 13.7929 16.7929C13.4024 16.4024 12.7692 16.4024 12.3787 16.7929L9.87868 19.2929C9.48816 19.6834 9.48816 20.3166 9.87868 20.7071L12.3787 23.2071C12.7692 23.5976 13.4024 23.5976 13.7929 23.2071C14.1834 22.8166 14.1834 22.1834 13.7929 21.7929L12.9497 20.9505C17.4739 20.476 21 16.6498 21 12C21 9.15644 19.6712 6.53122 17.4533 4.83978C17.0142 4.50486 16.3867 4.58936 16.0518 5.0285ZM14.1213 3.29289L11.6213 0.792893C11.2308 0.402369 10.5976 0.402369 10.2071 0.792893C9.84662 1.15338 9.81889 1.72061 10.1239 2.1129L10.2071 2.20711L11.0503 3.04951C6.52615 3.52399 3 7.35021 3 12C3 14.7198 4.21515 17.2432 6.2716 18.9419C6.6974 19.2936 7.32771 19.2335 7.67943 18.8077C8.03116 18.3819 7.97111 17.7516 7.54531 17.3999C5.94404 16.0772 5 14.1168 5 12C5 8.50269 7.56475 5.60441 10.916 5.08343L10.2071 5.79289C9.81658 6.18342 9.81658 6.81658 10.2071 7.20711C10.5676 7.56759 11.1348 7.59532 11.5271 7.2903L11.6213 7.20711L14.1213 4.70711C14.4818 4.34662 14.5095 3.77939 14.2045 3.3871L14.1213 3.29289Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowSyncFilled

package/src/components/SVGIcons/IconArrowUp.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowUp = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Direction=Up, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M4.20938 10.7327C3.92369 11.0326 3.93523 11.5074 4.23516 11.7931C4.53509 12.0787 5.00982 12.0672 5.29551 11.7673L11.25 5.516V20.25C11.25 20.6642 11.5858 21 12 21C12.4142 21 12.75 20.6642 12.75 20.25V5.51565L18.7048 11.7673C18.9905 12.0672 19.4652 12.0787 19.7652 11.7931C20.0651 11.5074 20.0766 11.0326 19.791 10.7327L12.7243 3.31379C12.5632 3.14474 12.3578 3.04477 12.1443 3.01386C12.0976 3.00477 12.0494 3 12 3C11.9503 3 11.9017 3.00483 11.8547 3.01406C11.6417 3.04518 11.4368 3.14509 11.2761 3.31379L4.20938 10.7327Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowUp