hrm_ui_lib 1.0.0

package/src/components/SVGIcons/IconMedium.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMedium = ({
+  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=Medium, Style=Gray, Background=None">
+      <path
+        id="medium"
+        d="M2.85 6.2999C2.85 5.9999 2.7 5.6999 2.55 5.5499L0.3 2.8499V2.3999H7.2L12.6 14.2499L17.4 2.3999H24V2.8499L22.05 4.6499C21.9 4.7999 21.75 4.9499 21.9 5.2499V18.7499C21.9 18.8999 21.9 19.1999 22.05 19.3499L23.85 21.1499V21.5999H14.4V21.1499L16.35 19.1999C16.5 19.0499 16.5 18.8999 16.5 18.5999V7.6499L11.1 21.2999H10.5L4.2 7.6499V16.7999C4.2 17.2499 4.35 17.5499 4.5 17.8499L7.05 20.8499V21.2999H0V20.8499L2.55 17.8499C2.85 17.5499 3 17.2499 2.85 16.7999V6.2999Z"
+        fill="#555555"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMedium

package/src/components/SVGIcons/IconMore.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMore = ({
+  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=Horizontal, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M7.75 12C7.75 12.9665 6.9665 13.75 6 13.75C5.0335 13.75 4.25 12.9665 4.25 12C4.25 11.0335 5.0335 10.25 6 10.25C6.9665 10.25 7.75 11.0335 7.75 12ZM13.75 12C13.75 12.9665 12.9665 13.75 12 13.75C11.0335 13.75 10.25 12.9665 10.25 12C10.25 11.0335 11.0335 10.25 12 10.25C12.9665 10.25 13.75 11.0335 13.75 12ZM18 13.75C18.9665 13.75 19.75 12.9665 19.75 12C19.75 11.0335 18.9665 10.25 18 10.25C17.0335 10.25 16.25 11.0335 16.25 12C16.25 12.9665 17.0335 13.75 18 13.75Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMore

package/src/components/SVGIcons/IconMoreFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMoreFilled = ({
+  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=Horizontal, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M8 12C8 13.1046 7.10457 14 6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10C7.10457 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMoreFilled

package/src/components/SVGIcons/IconMoreVertical.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMoreVertical = ({
+  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=Vertical, Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M12 7.75C11.0335 7.75 10.25 6.9665 10.25 6C10.25 5.0335 11.0335 4.25 12 4.25C12.9665 4.25 13.75 5.0335 13.75 6C13.75 6.9665 12.9665 7.75 12 7.75ZM12 13.75C11.0335 13.75 10.25 12.9665 10.25 12C10.25 11.0335 11.0335 10.25 12 10.25C12.9665 10.25 13.75 11.0335 13.75 12C13.75 12.9665 12.9665 13.75 12 13.75ZM10.25 18C10.25 18.9665 11.0335 19.75 12 19.75C12.9665 19.75 13.75 18.9665 13.75 18C13.75 17.0335 12.9665 16.25 12 16.25C11.0335 16.25 10.25 17.0335 10.25 18Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMoreVertical

package/src/components/SVGIcons/IconMoreVerticalFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconMoreVerticalFilled = ({
+  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=Vertical, Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8ZM12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14ZM10 18C10 19.1046 10.8954 20 12 20C13.1046 20 14 19.1046 14 18C14 16.8954 13.1046 16 12 16C10.8954 16 10 16.8954 10 18Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconMoreVerticalFilled

package/src/components/SVGIcons/IconNavigation.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconNavigation = ({
+  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="Theme=Line">
+      <path
+        id="Shape"
+        d="M2.75086 17.9968H21.2509C21.6651 17.9968 22.0009 18.3325 22.0009 18.7468C22.0009 19.1265 21.7187 19.4403 21.3526 19.4899L21.2509 19.4968H2.75086C2.33665 19.4968 2.00086 19.161 2.00086 18.7468C2.00086 18.3671 2.28301 18.0533 2.64909 18.0036L2.75086 17.9968H21.2509H2.75086ZM2.75086 11.4998H21.2509C21.6651 11.4998 22.0009 11.8356 22.0009 12.2498C22.0009 12.6295 21.7187 12.9433 21.3526 12.9929L21.2509 12.9998H2.75086C2.33665 12.9998 2.00086 12.664 2.00086 12.2498C2.00086 11.8701 2.28301 11.5563 2.64909 11.5066L2.75086 11.4998H21.2509H2.75086ZM2.75 5H21.25C21.6642 5 22 5.33579 22 5.75C22 6.1297 21.7178 6.44349 21.3518 6.49315L21.25 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75C2 5.3703 2.28215 5.05651 2.64823 5.00685L2.75 5H21.25H2.75Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconNavigation

package/src/components/SVGIcons/IconNavigationFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconNavigationFilled = ({
+  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="Theme=Filled">
+      <path
+        id="Shape"
+        d="M3 17H21C21.5523 17 22 17.4477 22 18C22 18.5128 21.614 18.9355 21.1166 18.9933L21 19H3C2.44772 19 2 18.5523 2 18C2 17.4872 2.38604 17.0645 2.88338 17.0067L3 17H21H3ZM2.99988 11L20.9999 10.9978C21.5522 10.9978 22 11.4454 22 11.9977C22 12.5106 21.6141 12.9333 21.1167 12.9911L21.0001 12.9978L3.00012 13C2.44784 13.0001 2 12.5524 2 12.0001C2 11.4873 2.38594 11.0646 2.88326 11.0067L2.99988 11L20.9999 10.9978L2.99988 11ZM3 5H21C21.5523 5 22 5.44772 22 6C22 6.51284 21.614 6.93551 21.1166 6.99327L21 7H3C2.44772 7 2 6.55228 2 6C2 5.48716 2.38604 5.06449 2.88338 5.00673L3 5H21H3Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconNavigationFilled

package/src/components/SVGIcons/IconNotebook.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconNotebook = ({
+  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="M16.7488 2C17.9915 2 18.9988 3.00736 18.9988 4.25V19.75C18.9988 20.9926 17.9915 22 16.7488 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H16.7488ZM16.7488 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H16.7488C17.163 20.5 17.4988 20.1642 17.4988 19.75V4.25C17.4988 3.83579 17.163 3.5 16.7488 3.5ZM20 15.0019H20.75C21.1297 15.0019 21.4435 15.2841 21.4932 15.6502L21.5 15.7519V17.25C21.5 17.6297 21.2178 17.9435 20.8518 17.9932L20.75 18H20V15.0019H20.75H20ZM20 11.0019H20.75C21.1297 11.0019 21.4435 11.2841 21.4932 11.6502L21.5 11.7519V13.25C21.5 13.6297 21.2178 13.9435 20.8518 13.9932L20.75 14H20V11.0019H20.75H20ZM20 7.00194H20.75C21.1297 7.00194 21.4435 7.28409 21.4932 7.65017L21.5 7.75194V9.25C21.5 9.6297 21.2178 9.94349 20.8518 9.99315L20.75 10H20V7.00194H20.75H20ZM15.2488 5C15.663 5 15.9988 5.33579 15.9988 5.75V8.2485C15.9988 8.66272 15.663 8.9985 15.2488 8.9985H7.75C7.33579 8.9985 7 8.66272 7 8.2485V5.75C7 5.33579 7.33579 5 7.75 5H15.2488ZM14.4988 6.5H8.5V7.4985H14.4988V6.5Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconNotebook

package/src/components/SVGIcons/IconNotebookAdd.tsx

@@ -0,0 +1,59 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconNotebookAdd = ({
+  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">
+      <g id="Shape">
+        <path
+          d="M16.7488 2C17.9915 2 18.9988 3.00736 18.9988 4.25V19.75C18.9988 20.9926 17.9915 22 16.7488 22H11.1904C11.6168 21.5557 11.9806 21.051 12.2678 20.5H16.7488C17.163 20.5 17.4988 20.1642 17.4988 19.75V4.25C17.4988 3.83579 17.163 3.5 16.7488 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V11.0764C4.97679 11.1572 4.47417 11.3004 4 11.4982V4.25C4 3.00736 5.00736 2 6.25 2H16.7488Z"
+          fill="#222222"
+        />
+        <path
+          d="M20 15.0019H20.75C21.1297 15.0019 21.4435 15.2841 21.4932 15.6502L21.5 15.7519V17.25C21.5 17.6297 21.2178 17.9435 20.8518 17.9932L20.75 18H20V15.0019Z"
+          fill="#222222"
+        />
+        <path
+          d="M20 11.0019H20.75C21.1297 11.0019 21.4435 11.2841 21.4932 11.6502L21.5 11.7519V13.25C21.5 13.6297 21.2178 13.9435 20.8518 13.9932L20.75 14H20V11.0019Z"
+          fill="#222222"
+        />
+        <path
+          d="M20 7.00194H20.75C21.1297 7.00194 21.4435 7.28409 21.4932 7.65017L21.5 7.75194V9.25C21.5 9.6297 21.2178 9.94349 20.8518 9.99315L20.75 10H20V7.00194Z"
+          fill="#222222"
+        />
+        <path
+          d="M15.2488 5C15.663 5 15.9988 5.33579 15.9988 5.75V8.2485C15.9988 8.66272 15.663 8.9985 15.2488 8.9985H7.75C7.33579 8.9985 7 8.66272 7 8.2485V5.75C7 5.33579 7.33579 5 7.75 5H15.2488ZM14.4988 6.5H8.5V7.4985H14.4988V6.5Z"
+          fill="#222222"
+        />
+        <path
+          d="M12 17.5C12 14.4624 9.53757 12 6.5 12C3.46243 12 1 14.4624 1 17.5C1 20.5376 3.46243 23 6.5 23C9.53757 23 12 20.5376 12 17.5ZM7.00065 18L7.00111 20.5035C7.00111 20.7797 6.77725 21.0035 6.50111 21.0035C6.22497 21.0035 6.00111 20.7797 6.00111 20.5035L6.00065 18H3.4956C3.21973 18 2.99609 17.7762 2.99609 17.5C2.99609 17.2239 3.21973 17 3.4956 17H6.00046L6 14.4993C6 14.2231 6.22386 13.9993 6.5 13.9993C6.77614 13.9993 7 14.2231 7 14.4993L7.00046 17H9.49659C9.77246 17 9.99609 17.2239 9.99609 17.5C9.99609 17.7762 9.77246 18 9.49659 18H7.00065Z"
+          fill="#222222"
+        />
+      </g>
+    </g>
+  </svg>
+)
+
+export default IconNotebookAdd

package/src/components/SVGIcons/IconNotebookAddFilled.tsx

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconNotebookAddFilled = ({
+  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">
+      <g id="Shape">
+        <path
+          d="M16.7488 2C17.9915 2 18.9988 3.00736 18.9988 4.25V19.75C18.9988 20.9926 17.9915 22 16.7488 22H11.1904C12.3112 20.8321 13 19.2465 13 17.5C13 13.9101 10.0899 11 6.5 11C5.6141 11 4.76959 11.1772 4 11.4982V4.25C4 3.00736 5.00736 2 6.25 2H16.7488ZM14.7536 5.49739H8.25136C7.87167 5.49739 7.55787 5.77954 7.50821 6.14562L7.50136 6.24739V7.75097C7.50136 8.13067 7.78352 8.44446 8.14959 8.49412L8.25136 8.50097H14.7536C15.1333 8.50097 15.4471 8.21882 15.4968 7.85274L15.5036 7.75097V6.24739C15.5036 5.83317 15.1678 5.49739 14.7536 5.49739Z"
+          fill="#222222"
+        />
+        <path
+          d="M20 15.0019H20.75C21.1297 15.0019 21.4435 15.2841 21.4932 15.6502L21.5 15.7519V17.25C21.5 17.6297 21.2178 17.9435 20.8518 17.9932L20.75 18H20V15.0019Z"
+          fill="#222222"
+        />
+        <path
+          d="M20 11.0019H20.75C21.1297 11.0019 21.4435 11.2841 21.4932 11.6502L21.5 11.7519V13.25C21.5 13.6297 21.2178 13.9435 20.8518 13.9932L20.75 14H20V11.0019Z"
+          fill="#222222"
+        />
+        <path
+          d="M20 7.00194H20.75C21.1297 7.00194 21.4435 7.28409 21.4932 7.65017L21.5 7.75194V9.25C21.5 9.6297 21.2178 9.94349 20.8518 9.99315L20.75 10H20V7.00194Z"
+          fill="#222222"
+        />
+        <path
+          d="M12 17.5C12 14.4624 9.53757 12 6.5 12C3.46243 12 1 14.4624 1 17.5C1 20.5376 3.46243 23 6.5 23C9.53757 23 12 20.5376 12 17.5ZM7.00065 18L7.00111 20.5035C7.00111 20.7797 6.77725 21.0035 6.50111 21.0035C6.22497 21.0035 6.00111 20.7797 6.00111 20.5035L6.00065 18H3.4956C3.21973 18 2.99609 17.7762 2.99609 17.5C2.99609 17.2239 3.21973 17 3.4956 17H6.00046L6 14.4993C6 14.2231 6.22386 13.9993 6.5 13.9993C6.77614 13.9993 7 14.2231 7 14.4993L7.00046 17H9.49659C9.77246 17 9.99609 17.2239 9.99609 17.5C9.99609 17.7762 9.77246 18 9.49659 18H7.00065Z"
+          fill="#222222"
+        />
+      </g>
+    </g>
+  </svg>
+)
+
+export default IconNotebookAddFilled

package/src/components/SVGIcons/IconNotebookFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconNotebookFilled = ({
+  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="M16.7488 2C17.9915 2 18.9988 3.00736 18.9988 4.25V19.75C18.9988 20.9926 17.9915 22 16.7488 22H6.25C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H16.7488ZM20 15.0019H20.75C21.1297 15.0019 21.4435 15.2841 21.4932 15.6502L21.5 15.7519V17.25C21.5 17.6297 21.2178 17.9435 20.8518 17.9932L20.75 18H20V15.0019H20.75H20ZM20 11.0019H20.75C21.1297 11.0019 21.4435 11.2841 21.4932 11.6502L21.5 11.7519V13.25C21.5 13.6297 21.2178 13.9435 20.8518 13.9932L20.75 14H20V11.0019H20.75H20ZM20 7.00194H20.75C21.1297 7.00194 21.4435 7.28409 21.4932 7.65017L21.5 7.75194V9.25C21.5 9.6297 21.2178 9.94349 20.8518 9.99315L20.75 10H20V7.00194H20.75H20ZM14.7536 5.49739H8.25136C7.87167 5.49739 7.55787 5.77954 7.50821 6.14562L7.50136 6.24739V7.75097C7.50136 8.13067 7.78352 8.44446 8.14959 8.49412L8.25136 8.50097H14.7536C15.1333 8.50097 15.4471 8.21882 15.4968 7.85274L15.5036 7.75097V6.24739C15.5036 5.83317 15.1678 5.49739 14.7536 5.49739Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconNotebookFilled

package/src/components/SVGIcons/IconOnlyEmployee.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconOnlyEmployee = ({
+  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="M11.3357 2.08407C10.5682 2.28746 9.90539 2.84014 9.55654 3.57409C8.90244 4.94473 9.4606 6.5895 10.8081 7.28367C10.9694 7.36325 11.1918 7.45168 11.3008 7.48263L11.5014 7.53127V9.49438V11.4575H9.42136C7.1102 11.4575 6.95321 11.4752 6.44737 11.7316C6.08108 11.9217 5.6799 12.3285 5.49239 12.6999C5.25255 13.1818 5.22202 13.4339 5.22202 15.0212V16.4404L4.91678 16.5421C4.09697 16.8074 3.45159 17.4485 3.13762 18.3019C2.99372 18.6998 2.95447 19.4382 3.05913 19.8582C3.29897 20.8309 4.11441 21.6754 5.02579 21.9053C5.83688 22.1087 6.58692 21.9849 7.24974 21.5295C7.66836 21.2509 7.97361 20.8972 8.19165 20.4551C8.72801 19.3586 8.52306 18.1117 7.66836 17.2451C7.30207 16.8737 7.00554 16.688 6.56511 16.5377L6.26859 16.4404V14.9946C6.26859 13.3675 6.28167 13.288 6.57819 12.9475C6.66977 12.837 6.83984 12.7043 6.95321 12.6469L7.16253 12.5407L9.33414 12.5275L11.5014 12.5142V14.4817V16.4493L11.2528 16.52C10.4156 16.7676 9.70916 17.4397 9.417 18.2797C9.26873 18.7042 9.23385 19.4382 9.3385 19.8582C9.57834 20.8309 10.3938 21.6754 11.3052 21.9053C12.1163 22.1087 12.8663 21.9849 13.5291 21.5295C13.9477 21.2509 14.253 20.8972 14.471 20.4551C15.0074 19.3586 14.8024 18.1117 13.9477 17.2451C13.5814 16.8737 13.2849 16.688 12.8445 16.5377L12.548 16.4404V14.4773V12.5142L14.6978 12.5275C16.8127 12.5407 16.8476 12.5407 17.022 12.638C17.3011 12.7883 17.4712 12.9519 17.5976 13.1995L17.7154 13.425L17.7284 14.9371L17.7415 16.4449L17.4886 16.52C16.5729 16.7897 15.8403 17.5591 15.6004 18.5141C15.2298 19.9776 16.0496 21.4322 17.4973 21.892C17.9508 22.038 18.6006 22.0291 19.0672 21.8744C19.5032 21.7329 19.791 21.5649 20.1094 21.2686C20.5367 20.8707 20.8594 20.2959 20.9684 19.7344C21.0295 19.4028 20.999 18.6909 20.903 18.3947C20.637 17.5369 19.9524 16.8295 19.1413 16.5687L18.8055 16.4625L18.7837 14.831C18.7619 13.2968 18.7576 13.1907 18.666 12.9696C18.3651 12.2224 17.7459 11.683 17.0002 11.5194C16.7778 11.4708 16.2502 11.4575 14.6324 11.4575H12.548V9.49438V7.53127L12.7137 7.50032C12.8009 7.48705 13.0407 7.38978 13.2457 7.29251C13.5466 7.1466 13.6817 7.04491 13.9652 6.7531C14.3576 6.35075 14.5452 6.02798 14.6803 5.53278C14.7937 5.12601 14.8024 4.49375 14.7021 4.10466C14.3838 2.86225 13.2762 1.99122 12.0247 2.00007C11.8066 2.00007 11.5232 2.03544 11.3357 2.08407ZM12.7355 3.22038C13.0974 3.39724 13.3896 3.69347 13.5684 4.07372C13.6905 4.33016 13.7035 4.40532 13.7035 4.78114C13.7035 5.15696 13.6905 5.23213 13.5684 5.48857C13.3896 5.86881 13.0974 6.16505 12.7311 6.3419C12.4651 6.47013 12.4041 6.48339 12.0029 6.48339C11.6191 6.48339 11.5363 6.47013 11.3183 6.36401C10.9694 6.20042 10.6554 5.89092 10.4854 5.5372C10.3545 5.2675 10.3458 5.21886 10.3458 4.78114C10.3458 4.34342 10.3545 4.29479 10.4897 4.02066C10.7034 3.58294 11.1438 3.21596 11.6061 3.09658C11.6802 3.0789 11.8982 3.06563 12.0901 3.07447C12.3779 3.08332 12.4956 3.10984 12.7355 3.22038ZM6.34708 17.5944C6.83111 17.7801 7.22794 18.2046 7.38056 18.6954C7.49394 19.0447 7.45469 19.5841 7.29771 19.9289C7.07095 20.4374 6.56511 20.8265 6.01567 20.9149C4.72055 21.1271 3.70015 19.8272 4.17546 18.5627C4.35425 18.0764 4.88625 17.6254 5.40953 17.5148C5.66681 17.4574 6.08544 17.4972 6.34708 17.5944ZM12.6265 17.5944C13.1105 17.7801 13.5073 18.2046 13.6599 18.6954C13.7733 19.0447 13.7341 19.5841 13.5771 19.9289C13.3503 20.4374 12.8445 20.8265 12.295 20.9149C10.9999 21.1271 9.97952 19.8272 10.4548 18.5627C10.6336 18.0764 11.1656 17.6254 11.6889 17.5148C11.9462 17.4574 12.3648 17.4972 12.6265 17.5944ZM18.9843 17.6607C19.1457 17.7359 19.3419 17.8774 19.4727 18.0145C20.31 18.8811 20.0832 20.2384 19.0105 20.7734C18.7009 20.9326 18.6529 20.9414 18.2866 20.9414C17.7415 20.937 17.4581 20.8221 17.1049 20.4595C16.8127 20.1633 16.6644 19.8891 16.599 19.5133C16.4508 18.7219 16.9348 17.8862 17.7023 17.5988C18.0511 17.4706 18.6311 17.4972 18.9843 17.6607Z"
+      fill="#555555"
+    />
+  </svg>
+)
+
+export default IconOnlyEmployee

package/src/components/SVGIcons/IconOpen.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconOpen = ({
+  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.24992 4.5C5.28344 4.5 4.49996 5.2835 4.49996 6.25V17.75C4.49996 18.7165 5.28344 19.5 6.24992 19.5H17.7496C18.7161 19.5 19.4996 18.7165 19.4996 17.75V13.75C19.4996 13.3358 19.8354 13 20.2496 13C20.6638 13 20.9995 13.3358 20.9995 13.75V17.75C20.9995 19.5449 19.5445 21 17.7496 21H6.24992C4.45504 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45504 3 6.24992 3H10.2498C10.664 3 10.9998 3.33579 10.9998 3.75C10.9998 4.16421 10.664 4.5 10.2498 4.5H6.24992ZM12.9998 3.75C12.9998 3.33579 13.3355 3 13.7497 3H20.25C20.6642 3 21 3.33579 21 3.75V10.25C21 10.6642 20.6642 11 20.25 11C19.8358 11 19.5 10.6642 19.5 10.25V5.56074L14.28 10.7804C13.9871 11.0732 13.5123 11.0732 13.2194 10.7803C12.9265 10.4874 12.9265 10.0125 13.2194 9.71964L18.4395 4.5H13.7497C13.3355 4.5 12.9998 4.16421 12.9998 3.75Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconOpen

package/src/components/SVGIcons/IconOpenFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconOpenFilled = ({
+  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.24991 4.75C5.42151 4.75 4.74995 5.42157 4.74995 6.25V17.75C4.74995 18.5784 5.42151 19.25 6.24991 19.25H17.7496C18.578 19.25 19.2496 18.5784 19.2496 17.75V13.75C19.2496 13.1977 19.6973 12.75 20.2496 12.75C20.8018 12.75 21.2495 13.1977 21.2495 13.75V17.75C21.2495 19.683 19.6826 21.25 17.7496 21.25H6.24991C4.31696 21.25 2.75 19.683 2.75 17.75V6.25C2.75 4.317 4.31697 2.75 6.24991 2.75H10.2498C10.8021 2.75 11.2498 3.19772 11.2498 3.75C11.2498 4.30228 10.8021 4.75 10.2498 4.75H6.24991ZM12.7498 3.75C12.7498 3.19772 13.1975 2.75 13.7497 2.75H20.25C20.8023 2.75 21.25 3.19772 21.25 3.75V10.25C21.25 10.8023 20.8023 11.25 20.25 11.25C19.6978 11.25 19.25 10.8023 19.25 10.25V6.16425L14.4568 10.9571C14.0663 11.3476 13.4331 11.3476 13.0426 10.9571C12.6521 10.5665 12.6521 9.93336 13.0427 9.54286L17.8359 4.75H13.7497C13.1975 4.75 12.7498 4.30228 12.7498 3.75Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconOpenFilled

package/src/components/SVGIcons/IconPatient.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconPatient = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M17.75 2C18.9926 2 20 3.00736 20 4.25V19.7546C20 20.9972 18.9926 22.0046 17.75 22.0046H6.25C5.00736 22.0046 4 20.9972 4 19.7546V4.25C4 3.05914 4.92516 2.08436 6.09595 2.00519L6.25 2H17.75ZM18.5 16H5.5V19.7546C5.5 20.1688 5.83579 20.5046 6.25 20.5046H17.75C18.1642 20.5046 18.5 20.1688 18.5 19.7546V16ZM7.75129 17.5H16.25C16.6642 17.5 17 17.8358 17 18.25C17 18.6297 16.7178 18.9435 16.3518 18.9932L16.25 19H7.75129C7.33707 19 7.00129 18.6642 7.00129 18.25C7.00129 17.8703 7.28344 17.5565 7.64952 17.5068L7.75129 17.5H16.25H7.75129ZM17.75 3.5H6.25L6.14823 3.50685C5.78215 3.55651 5.5 3.8703 5.5 4.25V14.5H8V12.2455C8 11.5983 8.49187 11.066 9.12219 11.002L9.25 10.9955H14.75C15.3972 10.9955 15.9295 11.4874 15.9935 12.1177L16 12.2455V14.5H18.5V4.25C18.5 3.83579 18.1642 3.5 17.75 3.5ZM14.5 12.4955H9.5V14.5H14.5V12.4955ZM12 4.99552C13.3807 4.99552 14.5 6.11481 14.5 7.49552C14.5 8.87624 13.3807 9.99552 12 9.99552C10.6193 9.99552 9.5 8.87624 9.5 7.49552C9.5 6.11481 10.6193 4.99552 12 4.99552ZM12 6.49552C11.4477 6.49552 11 6.94324 11 7.49552C11 8.04781 11.4477 8.49552 12 8.49552C12.5523 8.49552 13 8.04781 13 7.49552C13 6.94324 12.5523 6.49552 12 6.49552Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconPatient

package/src/components/SVGIcons/IconPatientFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconPatientFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M17.75 2C18.9926 2 20 3.00736 20 4.25V19.7546C20 20.9972 18.9926 22.0046 17.75 22.0046H6.25C5.00736 22.0046 4 20.9972 4 19.7546V4.25C4 3.05914 4.92516 2.08436 6.09595 2.00519L6.25 2H17.75ZM18.5 16H5.5V19.7546C5.5 20.1688 5.83579 20.5046 6.25 20.5046H17.75C18.1642 20.5046 18.5 20.1688 18.5 19.7546V16ZM7.75129 17.5H16.25C16.6642 17.5 17 17.8358 17 18.25C17 18.6297 16.7178 18.9435 16.3518 18.9932L16.25 19H7.75129C7.33707 19 7.00129 18.6642 7.00129 18.25C7.00129 17.8703 7.28344 17.5565 7.64952 17.5068L7.75129 17.5H16.25H7.75129ZM17.75 3.5H6.25L6.14823 3.50685C5.78215 3.55651 5.5 3.8703 5.5 4.25V14.5H8V12.2455C8 11.5983 8.49187 11.066 9.12219 11.002L9.25 10.9955H14.75C15.3972 10.9955 15.9295 11.4874 15.9935 12.1177L16 12.2455V14.5H18.5V4.25C18.5 3.83579 18.1642 3.5 17.75 3.5ZM12 4.99552C13.3807 4.99552 14.5 6.11481 14.5 7.49552C14.5 8.87624 13.3807 9.99552 12 9.99552C10.6193 9.99552 9.5 8.87624 9.5 7.49552C9.5 6.11481 10.6193 4.99552 12 4.99552Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconPatientFilled