hrm_ui_lib 1.0.0

package/src/components/SVGIcons/IconLinkedin.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconLinkedin = ({
+  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="Group">
+      <path
+        id="Vector"
+        d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5562 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2937 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516Z"
+        fill="#555555"
+      />
+    </g>
+  </svg>
+)
+
+export default IconLinkedin

package/src/components/SVGIcons/IconList.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconList = ({
+  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="M2.75 18H15.25C15.6642 18 16 18.3358 16 18.75C16 19.1297 15.7178 19.4435 15.3518 19.4931L15.25 19.5H2.75C2.33579 19.5 2 19.1642 2 18.75C2 18.3703 2.28215 18.0565 2.64823 18.0068L2.75 18H15.25H2.75ZM2.75 11.5H21.25C21.6642 11.5 22 11.8358 22 12.25C22 12.6297 21.7178 12.9435 21.3518 12.9931L21.25 13H2.75C2.33579 13 2 12.6642 2 12.25C2 11.8703 2.28215 11.5565 2.64823 11.5068L2.75 11.5H21.25H2.75ZM2.75 5.00323H18.25C18.6642 5.00323 19 5.33902 19 5.75323C19 6.13293 18.7178 6.44673 18.3518 6.49639L18.25 6.50323H2.75C2.33579 6.50323 2 6.16745 2 5.75323C2 5.37354 2.28215 5.05974 2.64823 5.01008L2.75 5.00323H18.25H2.75Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconList

package/src/components/SVGIcons/IconListFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconListFilled = ({
+  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="M3 17H15C15.5523 17 16 17.4477 16 18C16 18.5128 15.614 18.9355 15.1166 18.9933L15 19H3C2.44772 19 2 18.5523 2 18C2 17.4872 2.38604 17.0645 2.88338 17.0067L3 17H15H3ZM3 11H21C21.5523 11 22 11.4477 22 12C22 12.5128 21.614 12.9355 21.1166 12.9933L21 13H3C2.44772 13 2 12.5523 2 12C2 11.4872 2.38604 11.0645 2.88338 11.0067L3 11H21H3ZM3 5H18C18.5523 5 19 5.44772 19 6C19 6.51284 18.614 6.93551 18.1166 6.99327L18 7H3C2.44772 7 2 6.55228 2 6C2 5.48716 2.38604 5.06449 2.88338 5.00673L3 5H18H3Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconListFilled

package/src/components/SVGIcons/IconLocation.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconLocation = ({
+  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="M5.84303 4.56831C9.24344 1.1679 14.7566 1.1679 18.157 4.56831C21.5574 7.96872 21.5574 13.4819 18.157 16.8823L16.97 18.0562C16.0952 18.9149 14.96 20.0188 13.5642 21.3684C12.6919 22.2117 11.3081 22.2116 10.436 21.3681L6.9449 17.9723C6.50614 17.5414 6.13887 17.1781 5.84303 16.8823C2.44262 13.4819 2.44262 7.96872 5.84303 4.56831ZM17.0963 5.62897C14.2817 2.81435 9.71832 2.81435 6.90369 5.62897C4.08907 8.4436 4.08907 13.007 6.90369 15.8216L8.39077 17.2891C9.20967 18.0905 10.2391 19.0909 11.4788 20.2899C11.7695 20.5711 12.2308 20.5711 12.5215 20.29L15.9164 16.9885C16.3854 16.5282 16.7787 16.1393 17.0963 15.8216C19.911 13.007 19.911 8.4436 17.0963 5.62897ZM12 7.99897C13.6577 7.99897 15.0016 9.34281 15.0016 11.0005C15.0016 12.6582 13.6577 14.0021 12 14.0021C10.3423 14.0021 8.99847 12.6582 8.99847 11.0005C8.99847 9.34281 10.3423 7.99897 12 7.99897ZM12 9.49897C11.1707 9.49897 10.4985 10.1712 10.4985 11.0005C10.4985 11.8298 11.1707 12.5021 12 12.5021C12.8293 12.5021 13.5016 11.8298 13.5016 11.0005C13.5016 10.1712 12.8293 9.49897 12 9.49897Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconLocation

package/src/components/SVGIcons/IconLocationFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconLocationFilled = ({
+  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="M18.157 16.8823L16.97 18.0562C16.0952 18.9149 14.96 20.0188 13.5642 21.3684C12.6919 22.2117 11.3081 22.2116 10.436 21.3681L6.9449 17.9723C6.50614 17.5414 6.13887 17.1781 5.84303 16.8823C2.44262 13.4819 2.44262 7.96872 5.84303 4.56831C9.24344 1.1679 14.7566 1.1679 18.157 4.56831C21.5574 7.96872 21.5574 13.4819 18.157 16.8823ZM14.5002 11C14.5002 9.61918 13.3808 8.4998 12 8.4998C10.6192 8.4998 9.49982 9.61918 9.49982 11C9.49982 12.3808 10.6192 13.5002 12 13.5002C13.3808 13.5002 14.5002 12.3808 14.5002 11Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconLocationFilled

package/src/components/SVGIcons/IconLockClosed.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconLockClosed = ({
+  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="State=Closed, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M12 2C14.2091 2 16 3.79086 16 6V8H17.75C18.9926 8 20 9.00736 20 10.25V19.75C20 20.9926 18.9926 22 17.75 22H6.25C5.00736 22 4 20.9926 4 19.75V10.25C4 9.00736 5.00736 8 6.25 8H8V6C8 3.79086 9.79086 2 12 2ZM17.75 9.5H6.25C5.83579 9.5 5.5 9.83579 5.5 10.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H17.75C18.1642 20.5 18.5 20.1642 18.5 19.75V10.25C18.5 9.83579 18.1642 9.5 17.75 9.5ZM12.0001 13.5C12.8286 13.5 13.5001 14.1716 13.5001 15C13.5001 15.8284 12.8286 16.5 12.0001 16.5C11.1717 16.5 10.5001 15.8284 10.5001 15C10.5001 14.1716 11.1717 13.5 12.0001 13.5ZM12 3.5C10.6193 3.5 9.5 4.61929 9.5 6V8H14.5V6C14.5 4.61929 13.3807 3.5 12 3.5Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconLockClosed

package/src/components/SVGIcons/IconLockClosedFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconLockClosedFilled = ({
+  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="State=Closed, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M12 2C14.2091 2 16 3.79086 16 6V8H18.5C19.3284 8 20 8.67157 20 9.5V20.5C20 21.3284 19.3284 22 18.5 22H5.5C4.67157 22 4 21.3284 4 20.5V9.5C4 8.67157 4.67157 8 5.5 8H8V6C8 3.79086 9.79086 2 12 2ZM12.0001 13.5C11.1717 13.5 10.5001 14.1716 10.5001 15C10.5001 15.8284 11.1717 16.5 12.0001 16.5C12.8286 16.5 13.5001 15.8284 13.5001 15C13.5001 14.1716 12.8286 13.5 12.0001 13.5ZM12 4C10.8954 4 10 4.89543 10 6V8H14V6C14 4.89543 13.1046 4 12 4Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconLockClosedFilled

package/src/components/SVGIcons/IconLockOpen.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconLockOpen = ({
+  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="State=Open, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M12 2.00391C13.8753 2.00391 15.3342 3.2102 15.9276 5.00689C16.0575 5.4002 15.844 5.82436 15.4507 5.95427C15.0574 6.08419 14.6332 5.87066 14.5033 5.47734C14.1018 4.26162 13.1854 3.50391 12 3.50391C10.5927 3.50391 9.57976 4.46178 9.50392 6.05538L9.49935 6.24964L9.499 7.99891L17.75 7.99964C18.9409 7.99964 19.9156 8.9248 19.9948 10.0956L20 10.2496V19.7459C20 20.9368 19.0748 21.9116 17.904 21.9907L17.75 21.9959H6.25C5.05914 21.9959 4.08436 21.0708 4.00519 19.9L4 19.7459V10.2496C4 9.05878 4.92516 8.08399 6.09595 8.00483L6.25 7.99964L7.999 7.99891L7.99935 6.24964C7.99935 3.71117 9.70837 2.00391 12 2.00391ZM17.75 9.49964H6.25C5.8703 9.49964 5.55651 9.78179 5.50685 10.1479L5.5 10.2496V19.7459C5.5 20.1256 5.78215 20.4394 6.14823 20.4891L6.25 20.4959H17.75C18.1297 20.4959 18.4435 20.2138 18.4932 19.8477L18.5 19.7459V10.2496C18.5 9.86994 18.2178 9.55615 17.8518 9.50649L17.75 9.49964ZM12 13.4992C12.8277 13.4992 13.4986 14.1701 13.4986 14.9978C13.4986 15.8254 12.8277 16.4964 12 16.4964C11.1723 16.4964 10.5014 15.8254 10.5014 14.9978C10.5014 14.1701 11.1723 13.4992 12 13.4992Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconLockOpen

package/src/components/SVGIcons/IconLockOpenFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconLockOpenFilled = ({
+  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="State=Open, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M12 2.00104C13.7084 2.00104 15.2111 3.0822 15.7713 4.66746C15.9553 5.18819 15.6823 5.75949 15.1616 5.94348C14.678 6.11434 14.1509 5.89117 13.9307 5.44149L13.8855 5.33377C13.6057 4.54174 12.8541 4.00104 12 4.00104C10.9462 4.00104 10.0828 4.81649 10.0065 5.85082L10.001 6L10.001 7.99904L17.75 8C18.9409 8 19.9156 8.92516 19.9948 10.096L20 10.25V19.7463C20 20.9371 19.0748 21.9119 17.904 21.9911L17.75 21.9963H6.25C5.05914 21.9963 4.08436 21.0711 4.00519 19.9003L4 19.7463V10.25C4 9.05914 4.92516 8.08436 6.09595 8.00519L6.25 8L8.001 7.99904L8.00104 6C8.00104 3.79143 9.79143 2.00104 12 2.00104ZM12 13.4995C11.1723 13.4995 10.5014 14.1705 10.5014 14.9981C10.5014 15.8258 11.1723 16.4968 12 16.4968C12.8277 16.4968 13.4986 15.8258 13.4986 14.9981C13.4986 14.1705 12.8277 13.4995 12 13.4995Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconLockOpenFilled

package/src/components/SVGIcons/IconMail.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMail = ({
+  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="M5.25 4H18.75C20.483 4 21.8992 5.35645 21.9949 7.06558L22 7.25V16.75C22 18.483 20.6435 19.8992 18.9344 19.9949L18.75 20H5.25C3.51697 20 2.10075 18.6435 2.00514 16.9344L2 16.75V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4H18.75H5.25ZM20.5 9.373L12.3493 13.6637C12.1619 13.7623 11.9431 13.7764 11.7468 13.706L11.6507 13.6637L3.5 9.374V16.75C3.5 17.6682 4.20711 18.4212 5.10647 18.4942L5.25 18.5H18.75C19.6682 18.5 20.4212 17.7929 20.4942 16.8935L20.5 16.75V9.373ZM18.75 5.5H5.25C4.33183 5.5 3.57881 6.20711 3.5058 7.10647L3.5 7.25V7.679L12 12.1525L20.5 7.678V7.25C20.5 6.33183 19.7929 5.57881 18.8935 5.5058L18.75 5.5Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMail

package/src/components/SVGIcons/IconMailAdd.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMailAdd = ({
+  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="M23 6.5C23 3.46243 20.5376 1 17.5 1C14.4624 1 12 3.46243 12 6.5C12 9.53757 14.4624 12 17.5 12C20.5376 12 23 9.53757 23 6.5ZM18.0006 7.00001L18.0011 9.50352C18.0011 9.77966 17.7773 10.0035 17.5011 10.0035C17.225 10.0035 17.0011 9.77966 17.0011 9.50352L17.0006 7.00001H14.4956C14.2197 7.00001 13.9961 6.77615 13.9961 6.50001C13.9961 6.22387 14.2197 6.00001 14.4956 6.00001H17.0005L17 3.49927C17 3.22313 17.2239 2.99927 17.5 2.99927C17.7761 2.99927 18 3.22313 18 3.49927L18.0005 6.00001H20.4966C20.7725 6.00001 20.9961 6.22387 20.9961 6.50001C20.9961 6.77615 20.7725 7.00001 20.4966 7.00001H18.0006ZM20.5 16.75V12.2678C21.051 11.9806 21.5557 11.6168 22 11.1904V16.75C22 18.483 20.6435 19.8992 18.9344 19.9949L18.75 20H5.25C3.51697 20 2.10075 18.6435 2.00514 16.9344L2 16.75V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4H11.4982C11.3004 4.47417 11.1572 4.97679 11.0764 5.5H5.25C4.33183 5.5 3.57881 6.20711 3.5058 7.10647L3.5 7.25V7.679L12 12.1525L13.3052 11.4654C13.7437 11.8363 14.232 12.1501 14.7587 12.3954L12.3493 13.6637C12.1619 13.7623 11.9431 13.7764 11.7468 13.706L11.6507 13.6637L3.5 9.374V16.75C3.5 17.6682 4.20711 18.4212 5.10647 18.4942L5.25 18.5H18.75C19.6682 18.5 20.4212 17.7929 20.4942 16.8935L20.5 16.75Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMailAdd

package/src/components/SVGIcons/IconMailAddFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMailAddFilled = ({
+  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="M23 6.5C23 3.46243 20.5376 1 17.5 1C14.4624 1 12 3.46243 12 6.5C12 9.53757 14.4624 12 17.5 12C20.5376 12 23 9.53757 23 6.5ZM18.0006 7.00001L18.0011 9.50352C18.0011 9.77966 17.7773 10.0035 17.5011 10.0035C17.225 10.0035 17.0011 9.77966 17.0011 9.50352L17.0006 7.00001H14.4956C14.2197 7.00001 13.9961 6.77615 13.9961 6.50001C13.9961 6.22387 14.2197 6.00001 14.4956 6.00001H17.0005L17 3.49927C17 3.22313 17.2239 2.99927 17.5 2.99927C17.7761 2.99927 18 3.22313 18 3.49927L18.0005 6.00001H20.4966C20.7725 6.00001 20.9961 6.22387 20.9961 6.50001C20.9961 6.77615 20.7725 7.00001 20.4966 7.00001H18.0006ZM17.5 13C19.2465 13 20.8321 12.3112 22 11.1904V16.75C22 18.483 20.6435 19.8992 18.9344 19.9949L18.75 20H5.25C3.51697 20 2.10075 18.6435 2.00514 16.9344L2 16.75V8.608L11.652 13.6644C11.87 13.7785 12.13 13.7785 12.348 13.6644L14.7649 12.3983C15.5963 12.7844 16.523 13 17.5 13ZM5.25 4H11.4982C11.1772 4.76959 11 5.6141 11 6.5C11 8.49255 11.8966 10.2757 13.3083 11.468L12 12.1533L2.01619 6.92355C2.17386 5.34271 3.46432 4.09545 5.06409 4.00523L5.25 4Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMailAddFilled

package/src/components/SVGIcons/IconMailArrowForward.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMailArrowForward = ({
+  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="M20.3999 17.4V12.4803C20.8292 12.2609 21.2314 11.9958 21.5999 11.6914V17.4C21.5999 19.0569 20.2568 20.4 18.5999 20.4H5.3999C3.74305 20.4 2.3999 19.0569 2.3999 17.4V7.8C2.3999 6.14314 3.74305 4.8 5.3999 4.8H11.0483C10.939 5.18674 10.8639 5.58791 10.8268 6H5.3999C4.40579 6 3.5999 6.80588 3.5999 7.8V8.1624L11.9999 13.1039L13.7296 12.0861C14.1191 12.3473 14.538 12.568 14.9803 12.7424L12.3041 14.3172C12.1476 14.4092 11.9598 14.4245 11.7929 14.3632L11.6957 14.3172L3.5999 9.5556V17.4C3.5999 18.3941 4.40579 19.2 5.3999 19.2H18.5999C19.594 19.2 20.3999 18.3941 20.3999 17.4ZM11.9999 6.6C11.9999 9.58234 14.4176 12 17.3999 12C20.3822 12 22.7999 9.58234 22.7999 6.6C22.7999 3.61766 20.3822 1.2 17.3999 1.2C14.4176 1.2 11.9999 3.61766 11.9999 6.6ZM18.4756 3.47573C18.71 3.24142 19.0899 3.24142 19.3242 3.47573L21.4242 5.57573C21.4817 5.63326 21.5251 5.69956 21.5544 5.77033C21.5837 5.84107 21.5999 5.91864 21.5999 6C21.5999 6.08135 21.5837 6.15892 21.5544 6.22967C21.5255 6.29939 21.483 6.36478 21.4267 6.42171L19.3242 8.52426C19.0899 8.75858 18.71 8.75858 18.4756 8.52426C18.2413 8.28995 18.2413 7.91005 18.4756 7.67573L19.5514 6.6H17.6999C16.5401 6.6 15.5999 7.5402 15.5999 8.7V9C15.5999 9.33137 15.3313 9.6 14.9999 9.6C14.6685 9.6 14.3999 9.33137 14.3999 9V8.7C14.3999 6.87746 15.8774 5.4 17.6999 5.4H19.5514L18.4756 4.32426C18.2413 4.08995 18.2413 3.71005 18.4756 3.47573Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMailArrowForward

package/src/components/SVGIcons/IconMailArrowForwardFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMailArrowForwardFilled = ({
+  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="M17.3999 13.2C18.9955 13.2 20.4589 12.6338 21.6 11.6913V17.4C21.6 19.0569 20.2569 20.4 18.6 20.4H5.4C3.74314 20.4 2.3999 19.0569 2.3999 17.4V8.8476L11.6958 14.3172C11.8836 14.4276 12.1164 14.4276 12.3042 14.3172L14.9805 12.7425C15.7297 13.0378 16.5458 13.2 17.3999 13.2ZM5.4 4.8H11.0483C10.8865 5.3722 10.7999 5.97598 10.7999 6.6C10.7999 8.88684 11.963 10.902 13.7298 12.0863L12 13.1039L2.41821 7.46751C2.58364 5.96712 3.85552 4.8 5.4 4.8ZM11.9999 6.6C11.9999 9.58234 14.4176 12 17.3999 12C20.3822 12 22.7999 9.58234 22.7999 6.6C22.7999 3.61766 20.3822 1.2 17.3999 1.2C14.4176 1.2 11.9999 3.61766 11.9999 6.6ZM18.4756 3.47573C18.71 3.24142 19.0899 3.24142 19.3242 3.47573L21.4242 5.57573C21.4817 5.63326 21.5251 5.69956 21.5544 5.77033C21.5837 5.84107 21.5999 5.91864 21.5999 6C21.5999 6.08135 21.5837 6.15892 21.5544 6.22967C21.5255 6.29939 21.483 6.36478 21.4267 6.42171L19.3242 8.52426C19.0899 8.75858 18.71 8.75858 18.4756 8.52426C18.2413 8.28995 18.2413 7.91005 18.4756 7.67573L19.5514 6.6H17.6999C16.5401 6.6 15.5999 7.5402 15.5999 8.7V9C15.5999 9.33137 15.3313 9.6 14.9999 9.6C14.6685 9.6 14.3999 9.33137 14.3999 9V8.7C14.3999 6.87746 15.8774 5.4 17.6999 5.4H19.5514L18.4756 4.32426C18.2413 4.08995 18.2413 3.71005 18.4756 3.47573Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMailArrowForwardFilled

package/src/components/SVGIcons/IconMailFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMailFilled = ({
+  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="M22 8.608V16.75C22 18.483 20.6435 19.8992 18.9344 19.9949L18.75 20H5.25C3.51697 20 2.10075 18.6435 2.00514 16.9344L2 16.75V8.608L11.652 13.6644C11.87 13.7785 12.13 13.7785 12.348 13.6644L22 8.608ZM5.25 4H18.75C20.4347 4 21.8201 5.28191 21.9838 6.92355L12 12.1533L2.01619 6.92355C2.17386 5.34271 3.46432 4.09545 5.06409 4.00523L5.25 4H18.75H5.25Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMailFilled

package/src/components/SVGIcons/IconMailLink.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMailLink = ({
+  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="M23 6.75C23 4.67893 21.3211 3 19.25 3L19.1482 3.00685C18.7822 3.05651 18.5 3.3703 18.5 3.75C18.5 4.16421 18.8358 4.5 19.25 4.5L19.404 4.50519C20.5748 4.58435 21.5 5.55914 21.5 6.75C21.5 7.99264 20.4926 9 19.25 9L19.2466 9.0046L19.1448 9.01191C18.779 9.06326 18.4983 9.37834 18.5 9.75803C18.5019 10.1722 18.8392 10.5065 19.2534 10.5046V10.5L19.4523 10.4948C21.4276 10.3913 23 8.75426 23 6.75ZM16.5 3.75C16.5 3.33579 16.1642 3 15.75 3L15.5508 3.0052C13.5724 3.10873 12 4.74574 12 6.75C12 8.82107 13.6789 10.5 15.75 10.5L15.8518 10.4932C16.2178 10.4435 16.5 10.1297 16.5 9.75C16.5 9.33579 16.1642 9 15.75 9L15.596 8.99481C14.4252 8.91565 13.5 7.94086 13.5 6.75C13.5 5.50736 14.5074 4.5 15.75 4.5L15.8518 4.49315C16.2178 4.44349 16.5 4.1297 16.5 3.75ZM20 6.75C20 6.33579 19.6642 6 19.25 6H15.75L15.6482 6.00685C15.2822 6.05651 15 6.3703 15 6.75C15 7.16421 15.3358 7.5 15.75 7.5H19.25L19.3518 7.49315C19.7178 7.44349 20 7.1297 20 6.75ZM5.25 4H11.8766C11.5576 4.44848 11.3145 4.95473 11.1662 5.5H5.25C4.33183 5.5 3.57881 6.20711 3.5058 7.10647L3.5 7.25V7.679L12 12.1525L13.9275 11.1378C14.4887 11.3712 15.1043 11.5 15.75 11.5H16.4595L12.3493 13.6637C12.1619 13.7623 11.9431 13.7764 11.7468 13.706L11.6507 13.6637L3.5 9.374V16.75C3.5 17.6682 4.20711 18.4212 5.10647 18.4942L5.25 18.5H18.75C19.6682 18.5 20.4212 17.7929 20.4942 16.8935L20.5 16.75V11.3338C21.0453 11.1855 21.5515 10.9424 22 10.6234V16.75C22 18.483 20.6435 19.8992 18.9344 19.9949L18.75 20H5.25C3.51697 20 2.10075 18.6435 2.00514 16.9344L2 16.75V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMailLink

package/src/components/SVGIcons/IconMailLinkFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMailLinkFilled = ({
+  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="M23 6.75C23 4.67893 21.3211 3 19.25 3L19.1482 3.00685C18.7822 3.05651 18.5 3.3703 18.5 3.75C18.5 4.16421 18.8358 4.5 19.25 4.5L19.404 4.50519C20.5748 4.58435 21.5 5.55914 21.5 6.75C21.5 7.99264 20.4926 9 19.25 9L19.2466 9.0046L19.1448 9.01191C18.779 9.06326 18.4983 9.37834 18.5 9.75803C18.5019 10.1722 18.8392 10.5065 19.2534 10.5046V10.5L19.4523 10.4948C21.4276 10.3913 23 8.75426 23 6.75ZM16.5 3.75C16.5 3.33579 16.1642 3 15.75 3L15.5508 3.0052C13.5724 3.10873 12 4.74574 12 6.75C12 8.82107 13.6789 10.5 15.75 10.5L15.8518 10.4932C16.2178 10.4435 16.5 10.1297 16.5 9.75C16.5 9.33579 16.1642 9 15.75 9L15.596 8.99481C14.4252 8.91565 13.5 7.94086 13.5 6.75C13.5 5.50736 14.5074 4.5 15.75 4.5L15.8518 4.49315C16.2178 4.44349 16.5 4.1297 16.5 3.75ZM20 6.75C20 6.33579 19.6642 6 19.25 6H15.75L15.6482 6.00685C15.2822 6.05651 15 6.3703 15 6.75C15 7.16421 15.3358 7.5 15.75 7.5H19.25L19.3518 7.49315C19.7178 7.44349 20 7.1297 20 6.75ZM19.25 11.5H16.4796L12.348 13.6644C12.13 13.7785 11.87 13.7785 11.652 13.6644L2 8.608V16.75L2.00514 16.9344C2.10075 18.6435 3.51697 20 5.25 20H18.75L18.9344 19.9949C20.6435 19.8992 22 18.483 22 16.75V10.6234C21.2239 11.1754 20.2749 11.5 19.25 11.5ZM5.25 4H11.8766C11.3246 4.77607 11 5.72513 11 6.75C11 8.73004 12.2115 10.4271 13.9337 11.1404L12 12.1533L2.01619 6.92355C2.17386 5.34271 3.46432 4.09545 5.06409 4.00523L5.25 4Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMailLinkFilled