hrm_ui_lib 1.0.0

package/src/components/SVGIcons/IconAmd.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAmd = ({
+  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="M5.75511 9.31063C5.75511 7.77012 6.32348 6.68322 7.12352 5.97204C7.94069 5.24564 9.05657 4.86249 10.2029 4.86253C11.3492 4.86255 12.4651 5.24575 13.2823 5.9722C14.0824 6.68341 14.6508 7.7703 14.6508 9.31065V11.9654H11.996C11.4816 11.9654 11.0647 12.3823 11.0647 12.8966C11.0647 13.411 11.4816 13.8279 11.996 13.8279H14.6508V15.5514H11.996C11.4816 15.5514 11.0647 15.9683 11.0647 16.4827C11.0647 16.997 11.4816 17.4139 11.996 17.4139H14.6508V20.0687C14.6508 20.5831 15.0677 21 15.582 21C16.0964 21 16.5133 20.5831 16.5133 20.0687V17.4139H19.1681C19.6824 17.4139 20.0993 16.997 20.0993 16.4827C20.0993 15.9683 19.6824 15.5514 19.1681 15.5514H16.5133V13.8279H19.1681C19.6824 13.8279 20.0993 13.411 20.0993 12.8966C20.0993 12.3823 19.6824 11.9654 19.1681 11.9654H16.5133V9.31065C16.5133 7.26491 15.7369 5.66212 14.5198 4.58017C13.3198 3.51346 11.7461 3.00004 10.2029 3C8.65975 2.99995 7.08609 3.51329 5.88609 4.58C4.66896 5.66194 3.89258 7.26476 3.89258 9.31063C3.89258 9.82494 4.30952 10.2419 4.82384 10.2419C5.33816 10.2419 5.75511 9.82494 5.75511 9.31063Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconAmd

package/src/components/SVGIcons/IconAmdFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAmdFilled = ({
+  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="M5.75511 9.31063C5.75511 7.77012 6.32348 6.68322 7.12352 5.97204C7.94069 5.24564 9.05657 4.86249 10.2029 4.86253C11.3492 4.86255 12.4651 5.24575 13.2823 5.9722C14.0824 6.68341 14.6508 7.7703 14.6508 9.31065V11.9654H11.996C11.4816 11.9654 11.0647 12.3823 11.0647 12.8966C11.0647 13.411 11.4816 13.8279 11.996 13.8279H14.6508V15.5514H11.996C11.4816 15.5514 11.0647 15.9683 11.0647 16.4827C11.0647 16.997 11.4816 17.4139 11.996 17.4139H14.6508V20.0687C14.6508 20.5831 15.0677 21 15.582 21C16.0964 21 16.5133 20.5831 16.5133 20.0687V17.4139H19.1681C19.6824 17.4139 20.0993 16.997 20.0993 16.4827C20.0993 15.9683 19.6824 15.5514 19.1681 15.5514H16.5133V13.8279H19.1681C19.6824 13.8279 20.0993 13.411 20.0993 12.8966C20.0993 12.3823 19.6824 11.9654 19.1681 11.9654H16.5133V9.31065C16.5133 7.26491 15.7369 5.66212 14.5198 4.58017C13.3198 3.51346 11.7461 3.00004 10.2029 3C8.65975 2.99995 7.08609 3.51329 5.88609 4.58C4.66896 5.66194 3.89258 7.26476 3.89258 9.31063C3.89258 9.82494 4.30952 10.2419 4.82384 10.2419C5.33816 10.2419 5.75511 9.82494 5.75511 9.31063Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconAmdFilled

package/src/components/SVGIcons/IconApple.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconApple = ({
+  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="Company=Apple, Style=Gray, Background=None">
+      <path
+        id="path4"
+        d="M20.8428 17.1449C20.5101 17.9135 20.1163 18.6211 19.66 19.2715C19.0381 20.1583 18.5288 20.7721 18.1364 21.113C17.528 21.6724 16.8762 21.959 16.1782 21.9753C15.6771 21.9753 15.0728 21.8327 14.3693 21.5434C13.6636 21.2555 13.015 21.113 12.422 21.113C11.8 21.113 11.133 21.2555 10.4195 21.5434C9.70493 21.8327 9.12928 21.9834 8.68916 21.9984C8.01981 22.0269 7.35264 21.7322 6.68668 21.113C6.26164 20.7422 5.72999 20.1067 5.09309 19.2063C4.40976 18.2449 3.84796 17.13 3.40784 15.8589C2.93648 14.486 2.7002 13.1565 2.7002 11.8694C2.7002 10.3951 3.01878 9.12345 3.65689 8.05784C4.1584 7.20191 4.82557 6.52672 5.66059 6.03105C6.49562 5.53539 7.39786 5.2828 8.36949 5.26664C8.90114 5.26664 9.59833 5.43109 10.4647 5.75429C11.3287 6.07858 11.8834 6.24303 12.1266 6.24303C12.3085 6.24303 12.9247 6.05074 13.9694 5.66738C14.9573 5.31186 15.7911 5.16466 16.4742 5.22264C18.3251 5.37202 19.7157 6.10167 20.6405 7.41619C18.9851 8.4192 18.1662 9.82403 18.1825 11.6262C18.1975 13.03 18.7067 14.1981 19.7076 15.1256C20.1611 15.5561 20.6676 15.8888 21.2312 16.1251C21.109 16.4795 20.98 16.819 20.8428 17.1449ZM16.5978 0.440369C16.5978 1.54062 16.1958 2.56792 15.3946 3.51878C14.4277 4.64917 13.2582 5.30236 11.99 5.19929C11.9738 5.06729 11.9645 4.92837 11.9645 4.78239C11.9645 3.72615 12.4243 2.59576 13.2408 1.67152C13.6485 1.20356 14.167 0.814453 14.7957 0.504058C15.4231 0.198295 16.0166 0.0292007 16.5747 0.000244141C16.591 0.147331 16.5978 0.294426 16.5978 0.440355V0.440369Z"
+        fill="#555555"
+      />
+    </g>
+  </svg>
+)
+
+export default IconApple

package/src/components/SVGIcons/IconArrowDown.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowDown = ({
+  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=Down, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M19.7906 13.2673C20.0763 12.9674 20.0647 12.4926 19.7648 12.2069C19.4649 11.9213 18.9901 11.9328 18.7045 12.2327L12.75 18.484V3.75C12.75 3.33579 12.4142 3 12 3C11.5858 3 11.25 3.33579 11.25 3.75V18.4844L5.29514 12.2327C5.00945 11.9328 4.53472 11.9213 4.23479 12.2069C3.93487 12.4926 3.92332 12.9674 4.20901 13.2673L11.2757 20.6862C11.4367 20.8553 11.6422 20.9552 11.8557 20.9861C11.9024 20.9952 11.9506 21 12 21C12.0497 21 12.0982 20.9952 12.1452 20.9859C12.3583 20.9548 12.5632 20.8549 12.7239 20.6862L19.7906 13.2673Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowDown

package/src/components/SVGIcons/IconArrowDownFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowDownFilled = ({
+  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=Down, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M19.7159 13.7045C20.1036 13.3111 20.0989 12.678 19.7055 12.2903C19.3121 11.9027 18.6789 11.9074 18.2913 12.3008L13 17.6711V4C13 3.44771 12.5522 3 12 3C11.4477 3 11 3.44772 11 4V17.6646L5.71501 12.3008C5.32739 11.9074 4.69424 11.9027 4.30083 12.2903C3.90743 12.678 3.90274 13.3111 4.29036 13.7045L11.1127 20.6287C11.6024 21.1256 12.4039 21.1256 12.8936 20.6287L19.7159 13.7045Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowDownFilled

package/src/components/SVGIcons/IconArrowDownLeft.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowDownLeft = ({
+  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=Down Left, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M13.2456 21.0049C13.6598 21.0049 13.9956 20.6692 13.9956 20.2549C13.9956 19.8407 13.6598 19.5049 13.2456 19.5049H5.5765L20.7763 4.30517C21.0748 4.00659 21.0748 3.52251 20.7763 3.22393C20.4777 2.92536 19.9936 2.92536 19.695 3.22393L4.49561 18.4234V10.7549C4.49561 10.3407 4.15982 10.0049 3.74561 10.0049C3.33139 10.0049 2.99561 10.3407 2.99561 10.7549V20.2549C2.99561 20.6692 3.33139 21.0049 3.74561 21.0049H13.2456Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowDownLeft

package/src/components/SVGIcons/IconArrowDownLeftFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowDownLeftFilled = ({
+  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=Down Left, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M13 20.9999C13.5523 20.9999 14 20.5521 14 19.9999C14 19.4476 13.5523 18.9999 13 18.9999H6.41435L20.7071 4.70711C21.0976 4.31658 21.0976 3.68342 20.7071 3.29289C20.3166 2.90237 19.6834 2.90237 19.2929 3.29289L5 17.5858V10.9999C5 10.4476 4.55228 9.99987 4 9.99987C3.44772 9.99987 3 10.4476 3 10.9999V19.9999C3 20.5521 3.44772 20.9999 4 20.9999H13Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowDownLeftFilled

package/src/components/SVGIcons/IconArrowDownload.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowDownload = ({
+  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="M18.2498 20.4999C18.664 20.4998 19 20.8355 19 21.2497C19 21.6639 18.6644 21.9998 18.2502 21.9999L5.25022 22.0037C4.836 22.0038 4.5 21.6681 4.5 21.2539C4.5 20.8397 4.83557 20.5038 5.24978 20.5037L18.2498 20.4999ZM11.6482 2.01173L11.75 2.00488C12.1297 2.00488 12.4435 2.28704 12.4932 2.65311L12.5 2.75488L12.499 16.4399L16.2208 12.7196C16.4871 12.4533 16.9038 12.4291 17.1974 12.647L17.2815 12.7197C17.5477 12.986 17.5719 13.4026 17.354 13.6962L17.2814 13.7803L12.2837 18.7769C12.0176 19.043 11.6012 19.0673 11.3076 18.8498L11.2235 18.7772L6.22003 13.7806C5.92694 13.4879 5.92661 13.0131 6.21931 12.72C6.48539 12.4535 6.90204 12.429 7.1958 12.6467L7.27997 12.7192L10.999 16.4329L11 2.75488C11 2.37519 11.2822 2.06139 11.6482 2.01173L11.75 2.00488L11.6482 2.01173Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowDownload

package/src/components/SVGIcons/IconArrowDownloadFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowDownloadFilled = ({
+  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="M5.25 20.5H18.7477C19.1619 20.5 19.4977 20.8358 19.4977 21.25C19.4977 21.6297 19.2155 21.9435 18.8494 21.9932L18.7477 22H5.25C4.83579 22 4.5 21.6642 4.5 21.25C4.5 20.8703 4.78215 20.5565 5.14823 20.5069L5.25 20.5H18.7477H5.25ZM11.8834 2.00233L12 1.99561C12.5128 1.99561 12.9355 2.38165 12.9933 2.87898L13 2.99561V15.5856L16.2941 12.2928C16.6546 11.9324 17.2218 11.9047 17.6141 12.2098L17.7083 12.293C18.0687 12.6535 18.0964 13.2207 17.7913 13.613L17.7081 13.7072L12.7105 18.7038C12.3502 19.064 11.7833 19.0919 11.391 18.7873L11.2968 18.7042L6.29338 13.7076C5.90259 13.3173 5.90215 12.6842 6.29241 12.2934C6.65265 11.9327 7.21986 11.9045 7.61236 12.2093L7.70662 12.2924L11 15.5806V2.99561C11 2.48277 11.386 2.0601 11.8834 2.00233L12 1.99561L11.8834 2.00233Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowDownloadFilled

package/src/components/SVGIcons/IconArrowEnter.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowEnter = ({
+  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="M9.0002 20.4001C8.66883 20.4001 8.4002 20.1315 8.4002 19.8001C8.4002 19.4687 8.66883 19.2001 9.0002 19.2001H16.8002C18.1257 19.2001 19.2002 18.1256 19.2002 16.8001V7.2001C19.2002 5.87461 18.1257 4.8001 16.8002 4.8001H9.0002C8.66883 4.8001 8.4002 4.53147 8.4002 4.2001C8.4002 3.86873 8.66883 3.6001 9.0002 3.6001H16.8002C18.7884 3.6001 20.4002 5.21187 20.4002 7.2001V16.8001C20.4002 18.7883 18.7884 20.4001 16.8002 20.4001H9.0002ZM9.17593 7.37583C9.41025 7.14152 9.79014 7.14152 10.0245 7.37583L14.2245 11.5758C14.4588 11.8101 14.4588 12.19 14.2245 12.4244L10.0245 16.6244C9.79014 16.8587 9.41025 16.8587 9.17593 16.6244C8.94162 16.39 8.94162 16.0101 9.17593 15.7758L12.3517 12.6001H1.8002C1.46882 12.6001 1.2002 12.3315 1.2002 12.0001C1.2002 11.6687 1.46882 11.4001 1.8002 11.4001H12.3517L9.17593 8.22436C8.94162 7.99005 8.94162 7.61015 9.17593 7.37583Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowEnter

package/src/components/SVGIcons/IconArrowEnterFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowEnterFilled = ({
+  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="M9.30019 21C8.80314 21 8.4002 20.5971 8.4002 20.1C8.4002 19.6029 8.80314 19.2 9.30019 19.2H16.8002C18.1257 19.2 19.2002 18.1255 19.2002 16.8V7.2C19.2002 5.87452 18.1257 4.8 16.8002 4.8H9.30019C8.80314 4.8 8.4002 4.39706 8.4002 3.9C8.4002 3.40294 8.80314 3 9.30019 3H16.8002C19.1198 3 21.0002 4.8804 21.0002 7.2V16.8C21.0002 19.1196 19.1198 21 16.8002 21H9.30019ZM9.28974 7.43868C9.65498 7.10154 10.2244 7.12431 10.5615 7.48955L14.1615 11.3896C14.4798 11.7343 14.4798 12.2657 14.1615 12.6105L10.5615 16.5105C10.2244 16.8757 9.65498 16.8985 9.28974 16.5613C8.9245 16.2242 8.90173 15.6548 9.23887 15.2896L11.4446 12.9H2.1002C1.60314 12.9 1.2002 12.4971 1.2002 12C1.2002 11.5029 1.60314 11.1 2.1002 11.1H11.4446L9.23887 8.71046C8.90173 8.34522 8.9245 7.77583 9.28974 7.43868Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowEnterFilled

package/src/components/SVGIcons/IconArrowExit.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExit = ({
+  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="M15.0001 20.4001C15.3315 20.4001 15.6001 20.1315 15.6001 19.8001C15.6001 19.4687 15.3315 19.2001 15.0001 19.2001H7.2001C5.87461 19.2001 4.8001 18.1256 4.8001 16.8001V7.2001C4.8001 5.87461 5.87461 4.8001 7.2001 4.8001H15.0001C15.3315 4.8001 15.6001 4.53147 15.6001 4.2001C15.6001 3.86873 15.3315 3.6001 15.0001 3.6001H7.2001C5.21187 3.6001 3.6001 5.21187 3.6001 7.2001V16.8001C3.6001 18.7883 5.21187 20.4001 7.2001 20.4001H15.0001ZM16.3758 7.37583C16.6101 7.14152 16.99 7.14152 17.2244 7.37583L21.4244 11.5758C21.6587 11.8101 21.6587 12.19 21.4244 12.4244L17.2244 16.6244C16.99 16.8587 16.6101 16.8587 16.3758 16.6244C16.1415 16.39 16.1415 16.0101 16.3758 15.7758L19.5516 12.6001H9.0001C8.66873 12.6001 8.4001 12.3315 8.4001 12.0001C8.4001 11.6687 8.66873 11.4001 9.0001 11.4001H19.5516L16.3758 8.22436C16.1415 7.99005 16.1415 7.61015 16.3758 7.37583Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowExit

package/src/components/SVGIcons/IconArrowExitFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExitFilled = ({
+  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="M15.3001 21C15.7972 21 16.2001 20.5971 16.2001 20.1C16.2001 19.6029 15.7972 19.2 15.3001 19.2H7.8001C6.47461 19.2 5.4001 18.1255 5.4001 16.8V7.2C5.4001 5.87452 6.47461 4.8 7.8001 4.8H15.3001C15.7972 4.8 16.2001 4.39706 16.2001 3.9C16.2001 3.40294 15.7972 3 15.3001 3H7.8001C5.4805 3 3.6001 4.8804 3.6001 7.2V16.8C3.6001 19.1196 5.4805 21 7.8001 21H15.3001ZM16.4896 7.43868C16.8549 7.10154 17.4243 7.12431 17.7614 7.48955L21.3614 11.3896C21.6797 11.7343 21.6797 12.2657 21.3614 12.6105L17.7614 16.5105C17.4243 16.8757 16.8549 16.8985 16.4896 16.5613C16.1244 16.2242 16.1016 15.6548 16.4388 15.2896L18.6445 12.9H9.3001C8.80304 12.9 8.4001 12.4971 8.4001 12C8.4001 11.5029 8.80304 11.1 9.3001 11.1H18.6445L16.4388 8.71046C16.1016 8.34522 16.1244 7.77583 16.4896 7.43868Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconArrowExitFilled

package/src/components/SVGIcons/IconArrowExportLeftToRight.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExportLeftToRight = ({
+  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=LTR, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M2.7525 4.5C3.1322 4.5 3.44594 4.78227 3.49554 5.14836L3.50237 5.25014L3.5 18.2542C3.49992 18.6684 3.16408 19.0041 2.74986 19.0041C2.37017 19.0041 2.05642 18.7218 2.00683 18.3557L2 18.2539L2.00237 5.24986C2.00244 4.83565 2.33829 4.5 2.7525 4.5ZM15.6471 6.30373L15.7197 6.21961C15.986 5.95338 16.4027 5.92921 16.6963 6.1471L16.7804 6.21972L21.777 11.2174C22.0431 11.4835 22.0674 11.8999 21.8498 12.1935L21.7773 12.2776L16.7807 17.2811C16.488 17.5742 16.0131 17.5745 15.72 17.2818C15.4536 17.0157 15.4291 16.5991 15.6467 16.3053L15.7193 16.2211L19.43 12.504L5.75295 12.5049C5.37326 12.5049 5.05946 12.2228 5.0098 11.8567L5.00295 11.7549C5.00295 11.3752 5.28511 11.0615 5.65118 11.0118L5.75295 11.0049L19.443 11.004L15.7196 7.28028C15.4534 7.01398 15.4292 6.59732 15.6471 6.30373L15.7197 6.21961L15.6471 6.30373Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowExportLeftToRight

package/src/components/SVGIcons/IconArrowExportLeftToRightFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExportLeftToRightFilled = ({
+  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=LTR, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M2.75 4.50391C3.1297 4.50391 3.44349 4.78606 3.49315 5.15214L3.5 5.25391V18.7525C3.5 19.1667 3.16421 19.5025 2.75 19.5025C2.3703 19.5025 2.05651 19.2204 2.00685 18.8543L2 18.7525V5.25391C2 4.83969 2.33579 4.50391 2.75 4.50391ZM15.2098 6.38704L15.293 6.29284C15.6535 5.9324 16.2207 5.90473 16.613 6.20979L16.7072 6.29299L21.7038 11.2906C22.064 11.651 22.0919 12.2178 21.7873 12.6101L21.7042 12.7043L16.7076 17.7077C16.3173 18.0985 15.6842 18.099 15.2934 17.7087C14.9326 17.3485 14.9045 16.7813 15.2093 16.3888L15.2924 16.2945L18.581 12.9999L6 13C5.48716 13 5.06449 12.614 5.00673 12.1166L5 12C5 11.4872 5.38604 11.0645 5.88338 11.0068L6 11L18.584 10.9999L15.2928 7.70706C14.9324 7.34654 14.9047 6.7793 15.2098 6.38704L15.293 6.29284L15.2098 6.38704Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowExportLeftToRightFilled

package/src/components/SVGIcons/IconArrowExportRightToLeft.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExportRightToLeft = ({
+  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=RTL, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M21.2446 4.5C20.8649 4.5 20.5511 4.78227 20.5015 5.14836L20.4947 5.25014L20.4971 18.2542C20.4971 18.6684 20.833 19.0041 21.2472 19.0041C21.6269 19.0041 21.9406 18.7218 21.9902 18.3557L21.9971 18.2539L21.9947 5.24986C21.9946 4.83565 21.6588 4.5 21.2446 4.5ZM8.34997 6.30373L8.27735 6.21961C8.01105 5.95338 7.59439 5.92921 7.3008 6.1471L7.21669 6.21972L2.22007 11.2174C1.95398 11.4835 1.92968 11.8999 2.14724 12.1935L2.21976 12.2776L7.21638 17.2811C7.50907 17.5742 7.98394 17.5745 8.27704 17.2818C8.54349 17.0157 8.56798 16.5991 8.35032 16.3053L8.27776 16.2211L4.56707 12.504L18.2441 12.5049C18.6238 12.5049 18.9376 12.2228 18.9873 11.8567L18.9941 11.7549C18.9941 11.3752 18.712 11.0615 18.3459 11.0118L18.2441 11.0049L4.55407 11.004L8.27746 7.28028C8.54369 7.01398 8.56786 6.59732 8.34997 6.30373L8.27735 6.21961L8.34997 6.30373Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowExportRightToLeft

package/src/components/SVGIcons/IconArrowExportRightToLeftFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconArrowExportRightToLeftFilled = ({
+  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=RTL, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M21.2471 4.50391C20.8674 4.50391 20.5536 4.78606 20.5039 5.15214L20.4971 5.25391V18.7525C20.4971 19.1667 20.8329 19.5025 21.2471 19.5025C21.6268 19.5025 21.9406 19.2204 21.9902 18.8543L21.9971 18.7525V5.25391C21.9971 4.83969 21.6613 4.50391 21.2471 4.50391ZM8.7873 6.38704L8.7041 6.29284C8.34358 5.9324 7.77635 5.90473 7.38409 6.20979L7.28989 6.29299L2.29328 11.2906C1.93303 11.651 1.90516 12.2178 2.20979 12.6101L2.29287 12.7043L7.28948 17.7077C7.67974 18.0985 8.3129 18.099 8.70369 17.7087C9.06442 17.3485 9.09254 16.7813 8.78778 16.3888L8.70466 16.2945L5.41607 12.9999L17.9971 13C18.5099 13 18.9326 12.614 18.9903 12.1166L18.9971 12C18.9971 11.4872 18.611 11.0645 18.1137 11.0068L17.9971 11L5.41307 10.9999L8.70425 7.70706C9.0647 7.34654 9.09237 6.7793 8.7873 6.38704L8.7041 6.29284L8.7873 6.38704Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconArrowExportRightToLeftFilled