hrm_ui_lib 1.0.0

package/src/components/SVGIcons/IconUndoFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconUndoFilled = ({
+  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.90735 6.68009L9.64108 3.9514C12.2423 1.35018 16.4597 1.35018 19.0609 3.9514C21.6621 6.55262 21.6621 10.77 19.0609 13.3713L10.7225 21.7082C10.3319 22.0987 9.69877 22.0985 9.30825 21.708C8.91772 21.3175 8.91789 20.6842 9.30848 20.2938L17.6467 11.957C19.4669 10.1369 19.4669 7.18579 17.6467 5.36562C15.8834 3.60233 13.0588 3.54722 11.2286 5.2009L11.0546 5.36627L7.414 8.99949L12 9.00002C12.5128 9.00002 12.9355 9.38606 12.9933 9.8834L13 10C13 10.5129 12.614 10.9355 12.1166 10.9933L12 11L4.94043 10.9983L4.84501 10.9881L4.73315 10.964L4.60163 10.9175L4.51971 10.8773L4.41781 10.8132C4.37406 10.7819 4.33212 10.7464 4.29267 10.7069L4.20096 10.6015L4.12658 10.4875L4.08093 10.3948L4.0425 10.2891L4.027 10.2318L4.01127 10.1502L4.00394 10.089L4 10V3.00284C4 2.45055 4.44772 2.00284 5 2.00284C5.51284 2.00284 5.93551 2.38888 5.99327 2.88622L6 3.00284V7.58649L9.64108 3.9514L6.90735 6.68009Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconUndoFilled

package/src/components/SVGIcons/IconUnitsEmployee.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconUnitsEmployee = ({
+  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.1641 2.10156C15.0273 2.17188 14.918 2.26172 14.832 2.38281C14.707 2.56641 14.707 2.57031 14.6875 3.15234L14.668 3.73828L13.4883 3.75781L12.3047 3.77734L12.1992 3.88672L12.0898 3.99219L12.0781 7.78125L12.0703 11.5703H11.1914H10.3125V11.043C10.3125 10.3398 10.2227 10.1328 9.82422 9.91797L9.66797 9.83203H6.44531C3.85547 9.83203 3.19531 9.84375 3.07422 9.88281C2.85938 9.96094 2.69531 10.1133 2.59375 10.3398C2.5 10.5352 2.5 10.543 2.5 12C2.5 13.457 2.5 13.4648 2.59375 13.6602C2.69531 13.8867 2.85938 14.0391 3.07422 14.1172C3.19531 14.1562 3.85547 14.168 6.44531 14.168H9.66797L9.82422 14.082C10.2227 13.8672 10.3125 13.6602 10.3125 12.957V12.4297H11.1914H12.0703L12.0781 16.2188L12.0898 20.0078L12.1992 20.1133L12.3047 20.2227L13.4883 20.2422L14.668 20.2617L14.6875 20.8477C14.707 21.4297 14.707 21.4336 14.832 21.6172C14.918 21.7383 15.0273 21.8281 15.1641 21.8984L15.3672 22H18.5508C20.7617 22 21.7852 21.9844 21.8945 21.957C22.1094 21.8984 22.3984 21.6016 22.457 21.3867C22.4883 21.2734 22.5 20.7578 22.4922 19.7422L22.4805 18.2617L22.3633 18.0742C22.2773 17.9336 22.1875 17.8516 22.0352 17.7734L21.8242 17.6641L18.5352 17.6719L15.25 17.6836L15.0859 17.793C14.9961 17.8516 14.875 17.9727 14.8164 18.0625C14.7109 18.2188 14.707 18.2461 14.6953 18.8047L14.6836 19.3828H13.8047H12.9297V15.9062V12.4297H13.8086H14.6875V12.957C14.6875 13.6602 14.7773 13.8672 15.1758 14.082L15.332 14.168H18.5547C21.1445 14.168 21.8047 14.1562 21.9258 14.1172C22.1406 14.0391 22.3047 13.8867 22.4062 13.6602C22.5 13.4648 22.5 13.457 22.5 12C22.5 10.543 22.5 10.5352 22.4062 10.3398C22.3047 10.1133 22.1406 9.96094 21.9258 9.88281C21.8047 9.84375 21.1445 9.83203 18.5547 9.83203H15.332L15.1758 9.91797C14.7773 10.1328 14.6875 10.3398 14.6875 11.043V11.5703H13.8086H12.9297V8.09375V4.61719H13.8047H14.6836L14.6953 5.19531C14.707 5.75391 14.7109 5.78125 14.8164 5.9375C14.875 6.02734 14.9961 6.14844 15.0859 6.20703L15.25 6.31641L18.5352 6.32812L21.8242 6.33594L22.0352 6.22656C22.1875 6.14844 22.2773 6.06641 22.3633 5.92578L22.4805 5.73828L22.4922 4.25781C22.5 3.24219 22.4883 2.72656 22.457 2.61328C22.3984 2.39844 22.1094 2.10156 21.8945 2.04297C21.7852 2.01562 20.7617 2 18.5508 2H15.3672L15.1641 2.10156ZM21.6406 4.16797V5.47656H18.5938H15.5469V4.16797V2.85938H18.5938H21.6406V4.16797ZM9.45312 12V13.2891H6.40625H3.35938V12V10.7109H6.40625H9.45312V12ZM21.6406 12V13.2891H18.5938H15.5469V12V10.7109H18.5938H21.6406V12ZM21.6406 19.832V21.1406H18.5938H15.5469V19.832V18.5234H18.5938H21.6406V19.832Z"
+      fill="#555555"
+    />
+  </svg>
+)
+
+export default IconUnitsEmployee

package/src/components/SVGIcons/IconUsd.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconUsd = ({
+  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.7699 3.13324C12.7699 2.70841 12.4255 2.36401 12.0007 2.36401C11.5758 2.36401 11.2314 2.70841 11.2314 3.13324V5.44116H9.94869C8.92863 5.44116 7.95035 5.84638 7.22905 6.56767C6.50776 7.28897 6.10254 8.26725 6.10254 9.28732C6.10254 10.3074 6.50776 11.2857 7.22905 12.007C7.95035 12.7283 8.92863 13.1335 9.94869 13.1335H14.0513C14.6633 13.1335 15.2503 13.3766 15.683 13.8094C16.1158 14.2422 16.3589 14.8291 16.3589 15.4412C16.3589 16.0532 16.1158 16.6402 15.683 17.0729C15.2503 17.5057 14.6633 17.7489 14.0513 17.7489H12.0195C12.0132 17.7487 12.007 17.7486 12.0007 17.7486C11.9944 17.7486 11.9881 17.7487 11.9819 17.7489H9.96648C9.51179 17.7262 9.07383 17.5695 8.70782 17.2984C8.33768 17.0242 8.05807 16.6455 7.90495 16.2111C7.76374 15.8104 7.32445 15.6001 6.92377 15.7413C6.52309 15.8825 6.31276 16.3218 6.45397 16.7225C6.70916 17.4466 7.17519 18.0777 7.79209 18.5346C8.40898 18.9916 9.14852 19.2535 9.91551 19.2866C9.92656 19.2871 9.93763 19.2873 9.94869 19.2873H11.2314V21.5948C11.2314 22.0196 11.5758 22.364 12.0007 22.364C12.4255 22.364 12.7699 22.0196 12.7699 21.5948V19.2873H14.0513C15.0713 19.2873 16.0496 18.8821 16.7709 18.1608C17.4922 17.4395 17.8974 16.4612 17.8974 15.4412C17.8974 14.4211 17.4922 13.4428 16.7709 12.7215C16.0496 12.0002 15.0713 11.595 14.0513 11.595H9.94869C9.33665 11.595 8.74968 11.3519 8.31691 10.9191C7.88413 10.4863 7.641 9.89935 7.641 9.28732C7.641 8.67528 7.88413 8.08831 8.31691 7.65553C8.74968 7.22275 9.33666 6.97962 9.94869 6.97962H14.0335C14.4882 7.0023 14.9261 7.15897 15.2921 7.43009C15.6623 7.70427 15.9419 8.08294 16.095 8.51737C16.2362 8.91805 16.6755 9.12838 17.0762 8.98717C17.4769 8.84595 17.6872 8.40666 17.546 8.00598C17.2908 7.28193 16.8248 6.65081 16.2079 6.19385C15.591 5.73689 14.8514 5.475 14.0844 5.44188C14.0734 5.4414 14.0623 5.44116 14.0513 5.44116H12.7699V3.13324Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconUsd

package/src/components/SVGIcons/IconUsdFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconUsdFilled = ({
+  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.7699 3.13324C12.7699 2.70841 12.4255 2.36401 12.0007 2.36401C11.5758 2.36401 11.2314 2.70841 11.2314 3.13324V5.44116H9.94869C8.92863 5.44116 7.95035 5.84638 7.22905 6.56767C6.50776 7.28897 6.10254 8.26725 6.10254 9.28732C6.10254 10.3074 6.50776 11.2857 7.22905 12.007C7.95035 12.7283 8.92863 13.1335 9.94869 13.1335H14.0513C14.6633 13.1335 15.2503 13.3766 15.683 13.8094C16.1158 14.2422 16.3589 14.8291 16.3589 15.4412C16.3589 16.0532 16.1158 16.6402 15.683 17.0729C15.2503 17.5057 14.6633 17.7489 14.0513 17.7489H12.0195C12.0132 17.7487 12.007 17.7486 12.0007 17.7486C11.9944 17.7486 11.9881 17.7487 11.9819 17.7489H9.96648C9.51179 17.7262 9.07383 17.5695 8.70782 17.2984C8.33768 17.0242 8.05807 16.6455 7.90495 16.2111C7.76374 15.8104 7.32445 15.6001 6.92377 15.7413C6.52309 15.8825 6.31276 16.3218 6.45397 16.7225C6.70916 17.4466 7.17519 18.0777 7.79209 18.5346C8.40898 18.9916 9.14852 19.2535 9.91551 19.2866C9.92656 19.2871 9.93763 19.2873 9.94869 19.2873H11.2314V21.5948C11.2314 22.0196 11.5758 22.364 12.0007 22.364C12.4255 22.364 12.7699 22.0196 12.7699 21.5948V19.2873H14.0513C15.0713 19.2873 16.0496 18.8821 16.7709 18.1608C17.4922 17.4395 17.8974 16.4612 17.8974 15.4412C17.8974 14.4211 17.4922 13.4428 16.7709 12.7215C16.0496 12.0002 15.0713 11.595 14.0513 11.595H9.94869C9.33665 11.595 8.74968 11.3519 8.31691 10.9191C7.88413 10.4863 7.641 9.89935 7.641 9.28732C7.641 8.67528 7.88413 8.08831 8.31691 7.65553C8.74968 7.22275 9.33666 6.97962 9.94869 6.97962H14.0335C14.4882 7.0023 14.9261 7.15897 15.2921 7.43009C15.6623 7.70427 15.9419 8.08294 16.095 8.51737C16.2362 8.91805 16.6755 9.12838 17.0762 8.98717C17.4769 8.84595 17.6872 8.40666 17.546 8.00598C17.2908 7.28193 16.8248 6.65081 16.2079 6.19385C15.591 5.73689 14.8514 5.475 14.0844 5.44188C14.0734 5.4414 14.0623 5.44116 14.0513 5.44116H12.7699V3.13324Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconUsdFilled

package/src/components/SVGIcons/IconVideo.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconVideo = ({
+  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="M13.75 4.5C15.5449 4.5 17 5.95507 17 7.75V7.923L20.8639 5.605C21.3638 5.30486 22 5.66493 22 6.248V17.75C22 18.333 21.364 18.6931 20.8641 18.3931L17 16.075V16.25C17 18.0449 15.5449 19.5 13.75 19.5H5.25C3.45507 19.5 2 18.0449 2 16.25V7.75C2 5.95507 3.45507 4.5 5.25 4.5H13.75ZM13.75 6H5.25C4.2835 6 3.5 6.7835 3.5 7.75V16.25C3.5 17.2165 4.2835 18 5.25 18H13.75C14.7165 18 15.5 17.2165 15.5 16.25V7.75C15.5 6.7835 14.7165 6 13.75 6ZM20.5 7.5731L17 9.6745V14.3254L20.5 16.4254V7.5731Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconVideo

package/src/components/SVGIcons/IconVideoFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconVideoFilled = ({
+  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 16.25C16 18.0449 14.5449 19.5 12.75 19.5H5.25C3.45507 19.5 2 18.0449 2 16.25V7.75C2 5.95507 3.45507 4.5 5.25 4.5H12.75C14.5449 4.5 16 5.95507 16 7.75V16.25ZM21.762 5.89334C21.9156 6.07414 22 6.30368 22 6.54096V17.4588C22 18.0111 21.5523 18.4588 21 18.4588C20.7627 18.4588 20.5332 18.3744 20.3524 18.2208L17 15.3709V8.62794L20.3524 5.77899C20.7732 5.42132 21.4043 5.47252 21.762 5.89334Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconVideoFilled

package/src/components/SVGIcons/IconWallet.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconWallet = ({
+  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="M15.5 13.75C15.5 13.3358 15.8358 13 16.25 13H18.25C18.6642 13 19 13.3358 19 13.75C19 14.1642 18.6642 14.5 18.25 14.5H16.25C15.8358 14.5 15.5 14.1642 15.5 13.75ZM3 5H3.01373C3.13809 3.87501 4.09186 3 5.25 3H16.75C17.9926 3 19 4.00736 19 5.25V6.08697C20.4333 6.42555 21.5 7.71321 21.5 9.25V17.75C21.5 19.5449 20.0449 21 18.25 21H6.25C4.45508 21 3 19.5449 3 17.75V5ZM18.25 7.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H18.25C19.2165 19.5 20 18.7165 20 17.75V9.25C20 8.2835 19.2165 7.5 18.25 7.5ZM17.5 6V5.25C17.5 4.83579 17.1642 4.5 16.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25C4.5 5.66421 4.83579 6 5.25 6H17.5Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconWallet

package/src/components/SVGIcons/IconWalletFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconWalletFilled = ({
+  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 5V17.75C3 19.5449 4.45508 21 6.25 21H18.25C20.0449 21 21.5 19.5449 21.5 17.75V9.25C21.5 7.71321 20.4333 6.42555 19 6.08697V5.25C19 4.00736 17.9926 3 16.75 3H5.25C4.09186 3 3.13809 3.87501 3.01373 5H3ZM5.25 6C4.83579 6 4.5 5.66421 4.5 5.25C4.5 4.83579 4.83579 4.5 5.25 4.5H16.75C17.1642 4.5 17.5 4.83579 17.5 5.25V6H5.25ZM16.25 13H18.25C18.6642 13 19 13.3358 19 13.75C19 14.1642 18.6642 14.5 18.25 14.5H16.25C15.8358 14.5 15.5 14.1642 15.5 13.75C15.5 13.3358 15.8358 13 16.25 13Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconWalletFilled

package/src/components/SVGIcons/IconWarning.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconWarning = ({
+  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.9993 17C12.9993 16.4484 12.5522 16.0013 12.0006 16.0013C11.4491 16.0013 11.002 16.4484 11.002 17C11.002 17.5515 11.4491 17.9986 12.0006 17.9986C12.5522 17.9986 12.9993 17.5515 12.9993 17ZM12.7401 9.1467C12.6901 8.78066 12.3761 8.49876 11.9964 8.49906C11.5822 8.49939 11.2467 8.83545 11.247 9.24966L11.2506 13.7513L11.2575 13.853C11.3075 14.2191 11.6215 14.501 12.0012 14.5007C12.4154 14.5003 12.7509 14.1643 12.7506 13.7501L12.747 9.24846L12.7401 9.1467ZM13.9693 3.65888C13.113 2.11108 10.8878 2.1111 10.0316 3.65893L2.28634 17.6604C1.45678 19.16 2.5414 20.9995 4.25518 20.9995H19.7462C21.46 20.9995 22.5446 19.16 21.715 17.6603L13.9693 3.65888ZM11.3442 4.38501C11.6296 3.86907 12.3713 3.86906 12.6567 4.38499L20.4025 18.3865C20.679 18.8863 20.3175 19.4995 19.7462 19.4995H4.25518C3.68392 19.4995 3.32238 18.8863 3.5989 18.3865L11.3442 4.38501Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconWarning

package/src/components/SVGIcons/IconWarningFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconWarningFilled = ({
+  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="M10.0297 3.65893C10.8859 2.1111 13.1111 2.11108 13.9673 3.65888L21.7131 17.6603C22.5427 19.16 21.4581 20.9995 19.7443 20.9995H4.25323C2.53945 20.9995 1.45483 19.16 2.28438 17.6604L10.0297 3.65893ZM12.9973 17.0009C12.9973 16.4494 12.5502 16.0022 11.9987 16.0022C11.4471 16.0022 11 16.4494 11 17.0009C11 17.5524 11.4471 17.9996 11.9987 17.9996C12.5502 17.9996 12.9973 17.5524 12.9973 17.0009ZM12.7381 9.14764C12.6882 8.7816 12.3742 8.4997 11.9945 8.5C11.5802 8.50033 11.2447 8.83639 11.2451 9.2506L11.2487 13.7522L11.2556 13.854C11.3055 14.22 11.6196 14.5019 11.9993 14.5016C12.4135 14.5013 12.749 14.1652 12.7487 13.751L12.7451 9.2494L12.7381 9.14764Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconWarningFilled

package/src/components/SVGIcons/IconYoutube.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconYoutube = ({
+  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="Lozenge">
+      <path
+        id="Vector"
+        d="M23.7609 4.20005C23.7609 4.20005 23.5266 2.54536 22.8047 1.8188C21.8906 0.862549 20.8688 0.857861 20.4 0.801611C17.0438 0.557861 12.0047 0.557861 12.0047 0.557861H11.9953C11.9953 0.557861 6.95625 0.557861 3.6 0.801611C3.13125 0.857861 2.10938 0.862549 1.19531 1.8188C0.473438 2.54536 0.24375 4.20005 0.24375 4.20005C0.24375 4.20005 0 6.14536 0 8.08599V9.90474C0 11.8454 0.239062 13.7907 0.239062 13.7907C0.239062 13.7907 0.473437 15.4454 1.19062 16.1719C2.10469 17.1282 3.30469 17.0954 3.83906 17.1985C5.76094 17.3813 12 17.4375 12 17.4375C12 17.4375 17.0438 17.4282 20.4 17.1891C20.8688 17.1329 21.8906 17.1282 22.8047 16.1719C23.5266 15.4454 23.7609 13.7907 23.7609 13.7907C23.7609 13.7907 24 11.85 24 9.90474V8.08599C24 6.14536 23.7609 4.20005 23.7609 4.20005ZM9.52031 12.1125V5.36724L16.0031 8.75161L9.52031 12.1125Z"
+        fill="#555555"
+      />
+    </g>
+  </svg>
+)
+
+export default IconYoutube