hrm_ui_lib 1.0.0

package/src/components/SVGIcons/IconSavingsFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSavingsFilled = ({
+  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.8225 11.1283C19.7843 10.4718 20.466 9.51181 20.7894 8.43654C20.8886 8.57241 20.9827 8.71346 21.0713 8.85993C21.6755 9.85813 22 11.063 22 12.5001C22 14.706 21.1671 16.2492 20.3194 17.2381C19.899 17.7287 19.4777 18.0802 19.1579 18.3112C19.1021 18.3514 19.0493 18.3881 19 18.4214V20.2501C19 21.2166 18.2165 22.0001 17.25 22.0001H16C15.1716 22.0001 14.5 21.3285 14.5 20.5001H12.5C12.5 21.3285 11.8284 22.0001 11 22.0001H9.75C8.7835 22.0001 8 21.2166 8 20.2501V19.5674C7.86194 19.5209 7.7053 19.4631 7.53573 19.3922C6.93965 19.1427 6.15955 18.7203 5.46967 18.0304C4.68564 17.2464 4.16052 16.4283 3.8651 15.8994C3.77791 15.7433 3.64768 15.66 3.53621 15.6414C2.64973 15.4937 2 14.7267 2 13.828V12.0751C2 11.2324 2.60926 10.5132 3.44051 10.3746C3.52742 10.3601 3.6555 10.2738 3.71651 10.0911C3.90886 9.51484 4.28209 8.6573 4.96967 7.96972C5.53209 7.40731 6.15488 6.99416 6.6279 6.72387C6.76427 6.64594 6.88983 6.57896 7 6.52288V3.67121C7 2.73331 8.13062 2.34833 8.73986 2.95499C9.07031 3.28404 9.55006 3.72288 10.0811 4.08935C10.6111 4.45512 11.1177 4.69615 11.5352 4.74929C11.0507 5.71174 10.8779 6.82571 11.0853 7.92421C11.2662 8.88185 11.999 9.48693 12.6874 9.77201L16.3831 11.3024C17.0715 11.5875 18.0175 11.6777 18.8225 11.1283ZM8 11C8.55228 11 9 10.5523 9 10C9 9.44775 8.55228 9.00003 8 9.00003C7.44772 9.00003 7 9.44775 7 10C7 10.5523 7.44772 11 8 11ZM18.2588 10.3023C19.211 9.65236 19.8199 8.62989 19.9666 7.52135C19.9666 7.52133 19.9666 7.52136 19.9666 7.52135C20.0558 6.8476 19.9742 6.14201 19.6954 5.46899C18.8498 3.42808 16.5099 2.45907 14.4689 3.30465C12.6886 4.04227 11.7239 5.91709 12.0679 7.73856C12.0926 7.86889 12.1369 7.99071 12.1972 8.10332C12.2471 8.19656 12.3079 8.28348 12.3776 8.36366C12.5604 8.57394 12.8039 8.7379 13.07 8.84809L16.7657 10.3785C17.2558 10.5815 17.8206 10.6013 18.2588 10.3023Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSavingsFilled

package/src/components/SVGIcons/IconSearch.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSearch = ({
+  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="M10 2.75C14.0041 2.75 17.25 5.99594 17.25 10C17.25 11.7319 16.6427 13.3219 15.6295 14.5688L20.5303 19.4697C20.8232 19.7626 20.8232 20.2374 20.5303 20.5303C20.2641 20.7966 19.8474 20.8208 19.5538 20.6029L19.4697 20.5303L14.5688 15.6295C13.3219 16.6427 11.7319 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75ZM10 4.25C6.82436 4.25 4.25 6.82436 4.25 10C4.25 13.1756 6.82436 15.75 10 15.75C13.1756 15.75 15.75 13.1756 15.75 10C15.75 6.82436 13.1756 4.25 10 4.25Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSearch

package/src/components/SVGIcons/IconSearchFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSearchFilled = ({
+  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="M10 2.5C14.1421 2.5 17.5 5.85786 17.5 10C17.5 11.7101 16.9276 13.2866 15.964 14.5483L20.7071 19.2929C21.0976 19.6834 21.0976 20.3166 20.7071 20.7071C20.3466 21.0676 19.7794 21.0953 19.3871 20.7903L19.2929 20.7071L14.5483 15.964C13.2866 16.9276 11.7101 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5ZM10 4.5C6.96243 4.5 4.5 6.96243 4.5 10C4.5 13.0376 6.96243 15.5 10 15.5C13.0376 15.5 15.5 13.0376 15.5 10C15.5 6.96243 13.0376 4.5 10 4.5Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSearchFilled

package/src/components/SVGIcons/IconSelectAllOff.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSelectAllOff = ({
+  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=Off, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M20.4962 5.62668C21.3721 5.93448 22 6.76891 22 7.75V17.75C22 20.0972 20.0972 22 17.75 22H7.75C6.76891 22 5.93448 21.3721 5.62668 20.4962L7.72396 20.4996L17.75 20.5C19.2688 20.5 20.5 19.2688 20.5 17.75V7.75L20.496 7.69902L20.4962 5.62668ZM17.2468 2C18.4895 2 19.4968 3.00736 19.4968 4.25V17.2468C19.4968 18.4895 18.4895 19.4968 17.2468 19.4968H4.25C3.00736 19.4968 2 18.4895 2 17.2468V4.25C2 3.00736 3.00736 2 4.25 2H17.2468ZM17.2468 3.5H4.25C3.83579 3.5 3.5 3.83579 3.5 4.25V17.2468C3.5 17.661 3.83579 17.9968 4.25 17.9968H17.2468C17.661 17.9968 17.9968 17.661 17.9968 17.2468V4.25C17.9968 3.83579 17.661 3.5 17.2468 3.5Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSelectAllOff

package/src/components/SVGIcons/IconSelectAllOffFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSelectAllOffFilled = ({
+  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=Off, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M20.4962 5.62668C21.3721 5.93448 22 6.76891 22 7.75V17.75C22 20.0972 20.0972 22 17.75 22H7.75C6.76891 22 5.93448 21.3721 5.62668 20.4962L7.72396 20.4996L17.75 20.5C19.2688 20.5 20.5 19.2688 20.5 17.75V7.75L20.496 7.69902L20.4962 5.62668ZM17.2468 2C18.4895 2 19.4968 3.00736 19.4968 4.25V17.2468C19.4968 18.4895 18.4895 19.4968 17.2468 19.4968H4.25C3.00736 19.4968 2 18.4895 2 17.2468V4.25C2 3.00736 3.00736 2 4.25 2H17.2468Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSelectAllOffFilled

package/src/components/SVGIcons/IconSelectAllOn.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSelectAllOn = ({
+  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=On, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M20.4962 5.62668C21.3721 5.93448 22 6.76891 22 7.75V17.75C22 20.0972 20.0972 22 17.75 22H7.75C6.76891 22 5.93448 21.3721 5.62668 20.4962L7.72396 20.4996L17.75 20.5C19.2688 20.5 20.5 19.2688 20.5 17.75V7.75L20.496 7.69902L20.4962 5.62668ZM17.2468 2C18.4895 2 19.4968 3.00736 19.4968 4.25V17.2468C19.4968 18.4895 18.4895 19.4968 17.2468 19.4968H4.25C3.00736 19.4968 2 18.4895 2 17.2468V4.25C2 3.00736 3.00736 2 4.25 2H17.2468ZM17.2468 3.5H4.25C3.83579 3.5 3.5 3.83579 3.5 4.25V17.2468C3.5 17.661 3.83579 17.9968 4.25 17.9968H17.2468C17.661 17.9968 17.9968 17.661 17.9968 17.2468V4.25C17.9968 3.83579 17.661 3.5 17.2468 3.5ZM9.58115 11.3582L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.7966 7.73594 14.8208 8.1526 14.6029 8.44621L14.5303 8.53033L10.0303 13.0303C9.73449 13.3262 9.26134 13.3189 8.9736 13.0344L8.9 12.95L7.4 10.95C7.15147 10.6186 7.21863 10.1485 7.55 9.9C7.85125 9.67407 8.26715 9.70903 8.527 9.96622L8.6 10.05L9.58115 11.3582L13.4697 7.46967L9.58115 11.3582Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSelectAllOn

package/src/components/SVGIcons/IconSelectAllOnFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSelectAllOnFilled = ({
+  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=On, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M20.4962 5.62668C21.3721 5.93448 22 6.76891 22 7.75V17.75C22 20.0972 20.0972 22 17.75 22H7.75C6.76891 22 5.93448 21.3721 5.62668 20.4962L7.72396 20.4996L17.75 20.5C19.2688 20.5 20.5 19.2688 20.5 17.75V7.75L20.496 7.69902L20.4962 5.62668ZM17.2468 2C18.4895 2 19.4968 3.00736 19.4968 4.25V17.2468C19.4968 18.4895 18.4895 19.4968 17.2468 19.4968H4.25C3.00736 19.4968 2 18.4895 2 17.2468V4.25C2 3.00736 3.00736 2 4.25 2H17.2468ZM13.4697 7.46967L9.58115 11.3582L8.6 10.05C8.35147 9.71863 7.88137 9.65147 7.55 9.9C7.21863 10.1485 7.15147 10.6186 7.4 10.95L8.9 12.95C9.17385 13.3151 9.7076 13.3531 10.0303 13.0303L14.5303 8.53033C14.8232 8.23744 14.8232 7.76256 14.5303 7.46967C14.2374 7.17678 13.7626 7.17678 13.4697 7.46967Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSelectAllOnFilled

package/src/components/SVGIcons/IconSend.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSend = ({
+  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.69362 11.9999L2.29933 3.27174C2.0631 2.66427 2.65544 2.08334 3.2414 2.28983L3.33375 2.32909L21.3337 11.3291C21.852 11.5882 21.8844 12.2977 21.4309 12.6132L21.3337 12.6707L3.33375 21.6707C2.75077 21.9622 2.11746 21.4262 2.2688 20.8237L2.29933 20.7281L5.69362 11.9999L2.29933 3.27174L5.69362 11.9999ZM4.4021 4.54032L7.01109 11.2493L13.6387 11.2499C14.0184 11.2499 14.3322 11.5321 14.3818 11.8981L14.3887 11.9999C14.3887 12.3796 14.1065 12.6934 13.7404 12.7431L13.6387 12.7499L7.01109 12.7493L4.4021 19.4595L19.3213 11.9999L4.4021 4.54032Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSend

package/src/components/SVGIcons/IconSendFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSendFilled = ({
+  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="M12.8147 12.1972L5.28344 13.4524C5.10705 13.4818 4.95979 13.6032 4.89723 13.7707L2.29933 20.7281C2.05066 21.3675 2.72008 21.9776 3.33375 21.6707L21.3337 12.6707C21.8865 12.3943 21.8865 11.6055 21.3337 11.3291L3.33375 2.32909C2.72008 2.02226 2.05066 2.6323 2.29933 3.27174L4.89723 10.2291C4.95979 10.3967 5.10705 10.518 5.28344 10.5474L12.8147 11.8026C12.9236 11.8208 12.9972 11.9238 12.9791 12.0328C12.965 12.1171 12.899 12.1831 12.8147 12.1972Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSendFilled

package/src/components/SVGIcons/IconSettings.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSettings = ({
+  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="M12.0124 2.25C12.7464 2.25846 13.4775 2.34326 14.1939 2.50304C14.5067 2.57279 14.7406 2.83351 14.7761 3.15196L14.9463 4.67881C15.0233 5.37986 15.6152 5.91084 16.3209 5.91158C16.5105 5.91188 16.6982 5.87238 16.8734 5.79483L18.2741 5.17956C18.5654 5.05159 18.9057 5.12136 19.1232 5.35362C20.1354 6.43464 20.8892 7.73115 21.3279 9.14558C21.4225 9.45058 21.3137 9.78203 21.0566 9.9715L19.8151 10.8866C19.461 11.1468 19.2518 11.56 19.2518 11.9995C19.2518 12.4389 19.461 12.8521 19.8159 13.1129L21.0585 14.0283C21.3156 14.2177 21.4246 14.5492 21.3299 14.8543C20.8914 16.2685 20.138 17.5649 19.1264 18.6461C18.9091 18.8783 18.569 18.9483 18.2777 18.8206L16.8714 18.2045C16.4691 18.0284 16.007 18.0542 15.6268 18.274C15.2466 18.4937 14.9935 18.8812 14.9452 19.3177L14.7761 20.8444C14.7413 21.1592 14.5124 21.4182 14.2043 21.4915C12.7558 21.8361 11.2467 21.8361 9.79828 21.4915C9.49015 21.4182 9.26129 21.1592 9.22643 20.8444L9.0576 19.32C9.00802 18.8843 8.75459 18.498 8.37467 18.279C7.99475 18.06 7.53345 18.0343 7.13244 18.2094L5.72582 18.8256C5.43446 18.9533 5.09428 18.8833 4.87703 18.6509C3.86487 17.5685 3.11144 16.2705 2.67344 14.8548C2.57911 14.5499 2.68811 14.2186 2.94509 14.0293L4.18842 13.1133C4.54256 12.8531 4.75172 12.4399 4.75172 12.0005C4.75172 11.561 4.54256 11.1478 4.18796 10.8873L2.94541 9.97285C2.68804 9.78345 2.57894 9.45178 2.67361 9.14658C3.11236 7.73215 3.86619 6.43564 4.87837 5.35462C5.09584 5.12236 5.43618 5.05259 5.72749 5.18056L7.12786 5.79572C7.53081 5.97256 7.99404 5.94585 8.37601 5.72269C8.75633 5.50209 9.00953 5.11422 9.05841 4.67764L9.22849 3.15196C9.26401 2.83335 9.49811 2.57254 9.81105 2.50294C10.5283 2.34342 11.2602 2.25865 12.0124 2.25ZM12.0126 3.7499C11.5586 3.75524 11.1058 3.79443 10.6581 3.86702L10.5491 4.84418C10.4473 5.75368 9.92028 6.56102 9.13066 7.01903C8.33622 7.48317 7.36761 7.53903 6.52483 7.16917L5.62654 6.77456C5.0546 7.46873 4.59938 8.25135 4.27877 9.09168L5.07656 9.67879C5.81537 10.2216 6.25172 11.0837 6.25172 12.0005C6.25172 12.9172 5.81537 13.7793 5.07734 14.3215L4.27829 14.9102C4.59863 15.752 5.05392 16.5361 5.62625 17.2316L6.53138 16.8351C7.36947 16.4692 8.33149 16.5227 9.12377 16.9794C9.91606 17.4361 10.4446 18.2417 10.5482 19.1526L10.6572 20.1365C11.5468 20.2878 12.4557 20.2878 13.3453 20.1365L13.4543 19.1527C13.5551 18.2421 14.083 17.4337 14.8762 16.9753C15.6695 16.5168 16.6334 16.463 17.473 16.8305L18.3775 17.2267C18.9493 16.5323 19.4044 15.7495 19.7249 14.909L18.927 14.3211C18.1882 13.7783 17.7518 12.9162 17.7518 11.9995C17.7518 11.0827 18.1882 10.2206 18.9261 9.67847L19.7229 9.09109C19.4023 8.25061 18.947 7.46784 18.375 6.77356L17.4785 7.16737C17.1132 7.32901 16.718 7.4122 16.3189 7.41158C14.8492 7.41004 13.6158 6.30355 13.4554 4.84383L13.3464 3.8667C12.9009 3.7942 12.4529 3.75512 12.0126 3.7499ZM11.9999 8.24995C14.071 8.24995 15.7499 9.92888 15.7499 12C15.7499 14.071 14.071 15.75 11.9999 15.75C9.92887 15.75 8.24994 14.071 8.24994 12C8.24994 9.92888 9.92887 8.24995 11.9999 8.24995ZM11.9999 9.74995C10.7573 9.74995 9.74994 10.7573 9.74994 12C9.74994 13.2426 10.7573 14.25 11.9999 14.25C13.2426 14.25 14.2499 13.2426 14.2499 12C14.2499 10.7573 13.2426 9.74995 11.9999 9.74995Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconSettings

package/src/components/SVGIcons/IconSettingsFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSettingsFilled = ({
+  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="M12.0124 2.25C12.7464 2.25846 13.4775 2.34326 14.1939 2.50304C14.5067 2.57279 14.7406 2.83351 14.7761 3.15196L14.9463 4.67881C15.0233 5.37986 15.6152 5.91084 16.3209 5.91158C16.5105 5.91188 16.6982 5.87238 16.8734 5.79483L18.2741 5.17956C18.5654 5.05159 18.9057 5.12136 19.1232 5.35362C20.1354 6.43464 20.8892 7.73115 21.3279 9.14558C21.4225 9.45058 21.3137 9.78203 21.0566 9.9715L19.8151 10.8866C19.461 11.1468 19.2518 11.56 19.2518 11.9995C19.2518 12.4389 19.461 12.8521 19.8159 13.1129L21.0585 14.0283C21.3156 14.2177 21.4246 14.5492 21.3299 14.8543C20.8914 16.2685 20.138 17.5649 19.1264 18.6461C18.9091 18.8783 18.569 18.9483 18.2777 18.8206L16.8714 18.2045C16.4691 18.0284 16.007 18.0542 15.6268 18.274C15.2466 18.4937 14.9935 18.8812 14.9452 19.3177L14.7761 20.8444C14.7413 21.1592 14.5124 21.4182 14.2043 21.4915C12.7558 21.8361 11.2467 21.8361 9.79828 21.4915C9.49015 21.4182 9.26129 21.1592 9.22643 20.8444L9.0576 19.32C9.00802 18.8843 8.75459 18.498 8.37467 18.279C7.99475 18.06 7.53345 18.0343 7.13244 18.2094L5.72582 18.8256C5.43446 18.9533 5.09428 18.8833 4.87703 18.6509C3.86487 17.5685 3.11144 16.2705 2.67344 14.8548C2.57911 14.5499 2.68811 14.2186 2.94509 14.0293L4.18842 13.1133C4.54256 12.8531 4.75172 12.4399 4.75172 12.0005C4.75172 11.561 4.54256 11.1478 4.18796 10.8873L2.94541 9.97285C2.68804 9.78345 2.57894 9.45178 2.67361 9.14658C3.11236 7.73215 3.86619 6.43564 4.87837 5.35462C5.09584 5.12236 5.43618 5.05259 5.72749 5.18056L7.12786 5.79572C7.53081 5.97256 7.99404 5.94585 8.37601 5.72269C8.75633 5.50209 9.00953 5.11422 9.05841 4.67764L9.22849 3.15196C9.26401 2.83335 9.49811 2.57254 9.81105 2.50294C10.5283 2.34342 11.2602 2.25865 12.0124 2.25ZM11.9999 8.99995C10.3431 8.99995 8.99994 10.3431 8.99994 12C8.99994 13.6568 10.3431 15 11.9999 15C13.6568 15 14.9999 13.6568 14.9999 12C14.9999 10.3431 13.6568 8.99995 11.9999 8.99995Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSettingsFilled

package/src/components/SVGIcons/IconShare.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconShare = ({
+  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.74658 4.00003H10.2108C10.625 4.00003 10.9608 4.33582 10.9608 4.75003C10.9608 5.12972 10.6786 5.44352 10.3126 5.49318L10.2108 5.50003H6.74658C5.55572 5.50003 4.58094 6.42519 4.50177 7.59598L4.49658 7.75003V17.25C4.49658 18.4409 5.42174 19.4157 6.59253 19.4948L6.74658 19.5H16.2473C17.4382 19.5 18.413 18.5749 18.4921 17.4041L18.4973 17.25V16.7522C18.4973 16.338 18.8331 16.0022 19.2473 16.0022C19.627 16.0022 19.9408 16.2844 19.9905 16.6505L19.9973 16.7522V17.25C19.9973 19.2543 18.425 20.8913 16.4465 20.9948L16.2473 21H6.74658C4.74232 21 3.10531 19.4277 3.00178 17.4492L2.99658 17.25V7.75003C2.99658 5.74577 4.56894 4.10876 6.54742 4.00523L6.74658 4.00003H10.2108H6.74658ZM14.5006 6.51988V3.75003C14.5006 3.12606 15.2074 2.78998 15.6876 3.13983L15.7697 3.20877L21.7643 8.95877C22.0441 9.22712 22.0696 9.65814 21.8407 9.9561L21.7644 10.0412L15.7698 15.7931C15.3196 16.2251 14.5877 15.9477 14.5077 15.3589L14.5006 15.2519V12.5266L14.1571 12.5567C11.7574 12.807 9.45735 13.8879 7.24253 15.8174C6.72342 16.2696 5.92029 15.842 6.00567 15.1589C6.67046 9.83933 9.45233 6.90733 14.2012 6.53953L14.5006 6.51988V3.75003V6.51988ZM16.0006 5.50867V7.25003C16.0006 7.66424 15.6648 8.00003 15.2506 8.00003C11.3772 8.00003 8.97655 9.67616 7.93931 13.1572L7.86025 13.4358L8.21244 13.199C10.4489 11.7372 12.7983 11 15.2506 11C15.6303 11 15.9441 11.2822 15.9937 11.6483L16.0006 11.75V13.4928L20.1618 9.50012L16.0006 5.50867Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconShare

package/src/components/SVGIcons/IconShareAndroid.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconShareAndroid = ({
+  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="M17 2.49829C18.934 2.49829 20.5018 4.06609 20.5018 6.00006C20.5018 7.93403 18.934 9.50183 17 9.50183C15.97 9.50183 15.0439 9.05716 14.4032 8.34934L9.84455 10.9538C9.94786 11.2842 10.0035 11.6356 10.0035 12.0001C10.0035 12.3645 9.94786 12.716 9.84455 13.0464L14.4023 15.6518C15.043 14.9434 15.9695 14.4983 17 14.4983C18.934 14.4983 20.5018 16.0661 20.5018 18.0001C20.5018 19.934 18.934 21.5018 17 21.5018C15.066 21.5018 13.4982 19.934 13.4982 18.0001C13.4982 17.6356 13.5539 17.2842 13.6572 16.9538L9.09951 14.3483C8.45873 15.0567 7.53223 15.5018 6.50177 15.5018C4.5678 15.5018 3 13.934 3 12.0001C3 10.0661 4.5678 8.49829 6.50177 8.49829C7.53173 8.49829 8.45784 8.94296 9.09859 9.65078L13.6572 7.04636C13.5539 6.71596 13.4982 6.36451 13.4982 6.00006C13.4982 4.06609 15.066 2.49829 17 2.49829ZM17 15.9983C15.8945 15.9983 14.9982 16.8945 14.9982 18.0001C14.9982 19.1056 15.8945 20.0018 17 20.0018C18.1055 20.0018 19.0018 19.1056 19.0018 18.0001C19.0018 16.8945 18.1055 15.9983 17 15.9983ZM6.50177 9.99829C5.39622 9.99829 4.5 10.8945 4.5 12.0001C4.5 13.1056 5.39622 14.0018 6.50177 14.0018C7.60732 14.0018 8.50354 13.1056 8.50354 12.0001C8.50354 10.8945 7.60732 9.99829 6.50177 9.99829ZM17 3.99829C15.8945 3.99829 14.9982 4.89451 14.9982 6.00006C14.9982 7.10561 15.8945 8.00183 17 8.00183C18.1055 8.00183 19.0018 7.10561 19.0018 6.00006C19.0018 4.89451 18.1055 3.99829 17 3.99829Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconShareAndroid

package/src/components/SVGIcons/IconShareAndroidFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconShareAndroidFilled = ({
+  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 3.00195C18.6558 3.00195 19.998 4.34424 19.998 6.00003C19.998 7.65582 18.6558 8.9981 17 8.9981C16.1578 8.9981 15.3967 8.65085 14.8521 8.09171L9.39499 11.2113C9.46333 11.4626 9.49981 11.7271 9.49981 12C9.49981 12.273 9.46333 12.5374 9.39499 12.7887L14.8528 15.9076C15.3974 15.3489 16.1582 15.002 17 15.002C18.6558 15.002 19.998 16.3442 19.998 18C19.998 19.6558 18.6558 20.9981 17 20.9981C15.3442 20.9981 14.0019 19.6558 14.0019 18C14.0019 17.7271 14.0384 17.4626 14.1067 17.2113L8.6496 14.0917C8.105 14.6508 7.34392 14.9981 6.50174 14.9981C4.84595 14.9981 3.50366 13.6558 3.50366 12C3.50366 10.3442 4.84595 9.00195 6.50174 9.00195C7.34355 9.00195 8.10432 9.3489 8.64887 9.9076L14.1067 6.78874C14.0384 6.53743 14.0019 6.27299 14.0019 6.00003C14.0019 4.34424 15.3442 3.00195 17 3.00195Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconShareAndroidFilled

package/src/components/SVGIcons/IconShareFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconShareFilled = ({
+  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="M6.74658 4.00003H10.2108C10.625 4.00003 10.9608 4.33582 10.9608 4.75003C10.9608 5.12972 10.6786 5.44352 10.3126 5.49318L10.2108 5.50003H6.74658C5.55572 5.50003 4.58094 6.42519 4.50177 7.59598L4.49658 7.75003V17.25C4.49658 18.4409 5.42174 19.4157 6.59253 19.4948L6.74658 19.5H16.2473C17.4382 19.5 18.413 18.5749 18.4921 17.4041L18.4973 17.25V16.7522C18.4973 16.338 18.8331 16.0022 19.2473 16.0022C19.627 16.0022 19.9408 16.2844 19.9905 16.6505L19.9973 16.7522V17.25C19.9973 19.2543 18.425 20.8913 16.4465 20.9948L16.2473 21H6.74658C4.74232 21 3.10531 19.4277 3.00178 17.4492L2.99658 17.25V7.75003C2.99658 5.74577 4.56894 4.10876 6.54742 4.00523L6.74658 4.00003H10.2108H6.74658ZM14.5006 6.54434V3.75003C14.5006 3.12606 15.2074 2.78998 15.6876 3.13983L15.7697 3.20877L21.7643 8.95877C22.0441 9.22712 22.0696 9.65814 21.8407 9.9561L21.7644 10.0412L15.7698 15.7931C15.3196 16.2251 14.5877 15.9477 14.5077 15.3589L14.5006 15.2519V12.45L14.1798 12.4438C11.5223 12.4359 9.25072 13.5269 7.31495 15.745C6.81934 16.3129 5.88968 15.8769 6.0094 15.1328C6.83639 9.99236 9.60847 7.08831 14.1986 6.57446L14.5006 6.54434V3.75003V6.54434Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconShareFilled

package/src/components/SVGIcons/IconSignOut.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconSignOut = ({
+  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="M8.50215 11.5C9.05562 11.5 9.5043 11.9487 9.5043 12.5022C9.5043 13.0556 9.05562 13.5043 8.50215 13.5043C7.94868 13.5043 7.5 13.0556 7.5 12.5022C7.5 11.9487 7.94868 11.5 8.50215 11.5ZM12 4.35418V10.5L12.0005 11.005L19.442 11.004L17.7196 9.28026C17.4534 9.01395 17.4292 8.59728 17.6471 8.3037L17.7198 8.2196C17.9861 7.95338 18.4027 7.92924 18.6963 8.14715L18.7804 8.21978L21.777 11.2174C22.043 11.4835 22.0674 11.8997 21.85 12.1933L21.7775 12.2774L18.7809 15.2808C18.4884 15.5741 18.0135 15.5746 17.7203 15.282C17.4537 15.0161 17.429 14.5994 17.6465 14.3056L17.7191 14.2214L19.432 12.504L12.0005 12.505L12 19.25C12 19.7164 11.5788 20.0697 11.1196 19.9886L2.61955 18.4873C2.26121 18.424 2 18.1126 2 17.7487V5.75002C2 5.38271 2.26601 5.06945 2.62847 5.00993L11.1285 3.6141C11.5851 3.53911 12 3.89145 12 4.35418ZM10.5 5.23739L3.5 6.3869V17.1196L10.5 18.3559V5.23739ZM13 18.5013L13.7652 18.5015L13.867 18.4946C14.2335 18.4448 14.5158 18.1304 14.5152 17.7502L14.508 13.5H13V18.5013ZM13.002 10L13 8.72536V5.00001L13.7453 5.00002C14.1245 5.00002 14.4381 5.28154 14.4883 5.64713L14.4953 5.74878L14.502 10H13.002Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconSignOut