ctms-common-components 1.0.1

package/src/assets/components/index.jsx

@@ -0,0 +1,607 @@
+import React from 'react';
+import { Icon }from '@emotion/react';
+import './index.css';
+
+function CloseIcon(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={props?.size || '1rem'} fill="red" viewBox="0 0 512 512">
+      <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
+    </svg>
+  );
+}
+
+function XMarkIcon(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height={props?.size || '1rem'} viewBox="0 0 384 512">
+      <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+    </svg>
+  );
+}
+
+function Calender() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_1216_11113)">
+        <path
+          d="M18 5H6C4.89543 5 4 5.89543 4 7V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V7C20 5.89543 19.1046 5 18 5Z"
+          stroke="#9AA6AD"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M16 3V7" stroke="#9AA6AD" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M8 3V7" stroke="#9AA6AD" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4 11H20" stroke="#9AA6AD" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M10 15H8V17H10V15Z" stroke="#9AA6AD" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_1216_11113">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function UploadIcon(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="gray.400" height={props?.size || '1rem'} viewBox="0 0 448 512">
+      <path d="M246.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3V320c0 17.7 14.3 32 32 32s32-14.3 32-32V109.3l73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64c0 53 43 96 96 96H352c53 0 96-43 96-96V352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V352z" />
+    </svg>
+  );
+}
+
+function PaperClipIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+      <path
+        d="M6.58756 7.73467L8.44373 5.8785C8.78498 5.53725 9.33973 5.53725 9.68098 5.8785V5.8785C10.0222 6.21975 10.0222 6.7745 9.68098 7.11575L7.41239 9.38433C6.72873 10.068 5.62098 10.068 4.93731 9.38433V9.38433C4.25364 8.70067 4.25364 7.59292 4.93731 6.90925L6.99998 4.84717"
+        stroke="#153171"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 12.5723H3.5C2.53342 12.5723 1.75 11.7888 1.75 10.8223V3.82227C1.75 2.85568 2.53342 2.07227 3.5 2.07227H10.5C11.4666 2.07227 12.25 2.85568 12.25 3.82227V10.8223C12.25 11.7888 11.4666 12.5723 10.5 12.5723Z"
+        stroke="#153171"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function RightArrowIcon(props) {
+  return (
+    <svg width={props?.width} height={props?.height} viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1 13.7017L7 7.70166L0.999999 1.70166"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DownArrowIcon(props) {
+  return (
+    <svg
+      width={props?.width || '14px'}
+      height={props?.height || '9px'}
+      viewBox="0 0 14 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 1.22461L7 7.22461L13 1.22461"
+        stroke={props?.fill || '#ccc'}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+      <rect width="18" height="18" rx="9" fill="#00B2EC" />
+      <path d="M5 8.86957L7.74286 12L13 6" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IndicatorIcon() {
+  return (
+    <svg width="32" height="16" viewBox="0 0 32 16" fill="#E82C78" xmlns="http://www.w3.org/2000/svg">
+      <line x1="13.5" y1="3.5" x2="31.5" y2="3.5" stroke="#E82C78" strokeLinecap="round" strokeDasharray="2 2" />
+      <g filter="url(#filter0_d_1202_108931)">
+        <circle cx="8" cy="4" r="4" fill="pink.500" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_1202_108931"
+          x="0"
+          y="0"
+          width="16"
+          height="16"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="2" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0.894118 0 0 0 0 0.180392 0 0 0 0 0.470588 0 0 0 0.49 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1202_108931" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1202_108931" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+function HomeIcon({ fill = 'white' }) {
+  return (
+    <svg className="icon" width="24" height="24" viewBox="0 0 24 24" fill={fill} xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4_6047)">
+        <path
+          className="icon"
+          d="M19 8.71001L13.667 4.56201C13.199 4.19792 12.623 4.00024 12.03 4.00024C11.437 4.00024 10.861 4.19792 10.393 4.56201L5.059 8.71001C4.73844 8.9593 4.47909 9.27854 4.30075 9.64336C4.12242 10.0082 4.02981 10.4089 4.03 10.815V18.015C4.03 18.5454 4.24071 19.0542 4.61579 19.4292C4.99086 19.8043 5.49957 20.015 6.03 20.015H18.03C18.5604 20.015 19.0691 19.8043 19.4442 19.4292C19.8193 19.0542 20.03 18.5454 20.03 18.015V10.815C20.03 9.99201 19.65 9.21501 19 8.71001Z"
+          stroke="#ADADAD"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          className="icon"
+          d="M16 15C13.79 16.333 10.208 16.333 8 15"
+          stroke="#ADADAD"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4_6047">
+          <rect width="24" height="24" fill={fill} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function HomeIconActive() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="#09327B" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4_6047)">
+        <path
+          d="M19 8.71001L13.667 4.56201C13.199 4.19792 12.623 4.00024 12.03 4.00024C11.437 4.00024 10.861 4.19792 10.393 4.56201L5.059 8.71001C4.73844 8.9593 4.47909 9.27854 4.30075 9.64336C4.12242 10.0082 4.02981 10.4089 4.03 10.815V18.015C4.03 18.5454 4.24071 19.0542 4.61579 19.4292C4.99086 19.8043 5.49957 20.015 6.03 20.015H18.03C18.5604 20.015 19.0691 19.8043 19.4442 19.4292C19.8193 19.0542 20.03 18.5454 20.03 18.015V10.815C20.03 9.99201 19.65 9.21501 19 8.71001Z"
+          stroke="#00B2EC"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M16 15C13.79 16.333 10.208 16.333 8 15"
+          stroke="#00B2EC"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4_6047">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+function DeleteIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 7H20" stroke="#E42E78" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M10 11V17" stroke="#E42E78" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M14 11V17" stroke="#E42E78" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M5 7L6 19C6 19.5304 6.21071 20.0391 6.58579 20.4142C6.96086 20.7893 7.46957 21 8 21H16C16.5304 21 17.0391 20.7893 17.4142 20.4142C17.7893 20.0391 18 19.5304 18 19L19 7"
+        stroke="#E42E78"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 7V4C9 3.73478 9.10536 3.48043 9.29289 3.29289C9.48043 3.10536 9.73478 3 10 3H14C14.2652 3 14.5196 3.10536 14.7071 3.29289C14.8946 3.48043 15 3.73478 15 4V7"
+        stroke="#E42E78"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ActionIcon() {
+  return (
+    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle opacity="0.5" cx="15" cy="9" r="2" fill="#09327B" />
+      <circle opacity="0.5" cx="15" cy="15" r="2" fill="#09327B" />
+      <circle opacity="0.5" cx="15" cy="21" r="2" fill="#09327B" />
+    </svg>
+  );
+}
+
+function OverflowIcon() {
+  return (
+    <svg width="44" height="25" viewBox="0 0 44 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_d_1_4)">
+        <rect x="7" y="3.5" width="30" height="10" rx="5" fill="#E8ECEE" shapeRendering="crispEdges" />
+        <circle cx="13" cy="8.5" r="2" fill="#00B2EC" />
+        <circle cx="22" cy="8.5" r="2" fill="#00B2EC" />
+        <circle cx="31" cy="8.5" r="2" fill="#00B2EC" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_1_4"
+          x="0"
+          y="0.5"
+          width="44"
+          height="24"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="3.5" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_4" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_4" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
+
+function InfoSvg() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_1178_2647)">
+        <path
+          d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
+          fill="#E82C78"
+        />
+        <path d="M10 6.6665H10.0083" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M9.1665 10H9.99984V13.3333H10.8332" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_1178_2647">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+const EditIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_2857_3232)">
+      <path
+        d="M9 7H6C5.46957 7 4.96086 7.21071 4.58579 7.58579C4.21071 7.96086 4 8.46957 4 9V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H15C15.5304 20 16.0391 19.7893 16.4142 19.4142C16.7893 19.0391 17 18.5304 17 18V15"
+        stroke="#E82C78"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 14.9963H12L20.5 6.49632C20.8978 6.0985 21.1213 5.55893 21.1213 4.99632C21.1213 4.43371 20.8978 3.89414 20.5 3.49632C20.1022 3.0985 19.5626 2.875 19 2.875C18.4374 2.875 17.8978 3.0985 17.5 3.49632L9 11.9963V14.9963Z"
+        stroke="#E82C78"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M16 5L19 8" stroke="#E82C78" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+    <defs>
+      <clipPath id="clip0_2857_3232">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+function VideoSvg() {
+  return (
+    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M36 3.98658C36 2.3853 34.7019 1.08725 33.1007 1.08725H2.89933C1.29805 1.08725 0 2.3853 0 3.98658V32.0134C0 33.6147 1.29805 34.9128 2.89933 34.9128H33.1007C34.7019 34.9128 36 33.6147 36 32.0134V3.98658ZM10.9933 4.71141H16.1879V8.81879H10.9933V4.71141ZM7.36913 31.2886H3.62416V27.1812H7.36913V31.2886ZM7.36913 8.81879H3.62416V4.71141H7.36913V8.81879ZM16.1879 31.2886H10.9933V27.1812H16.1879V31.2886ZM14.8591 21.3473V14.6526C14.8591 13.656 15.5679 13.2873 16.4017 13.8332L21.2626 17.007C22.0964 17.5529 22.1032 18.4463 21.2694 18.9923L16.3984 22.1667C15.5646 22.7127 14.8591 22.3439 14.8591 21.3473ZM25.0067 31.2886H19.8121V27.1812H25.0067V31.2886ZM25.0067 8.81879H19.8121V4.71141H25.0067V8.81879ZM32.3758 31.2886H28.6309V27.1812H32.3758V31.2886ZM32.3758 8.81879H28.6309V4.71141H32.3758V8.81879Z"
+        fill="#E82C78"
+      />
+    </svg>
+  );
+}
+
+function AudioSvg() {
+  return (
+    <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M19.0114 30.8454C19.0114 31.5149 18.6246 32.123 18.0193 32.4069C17.7853 32.5176 17.5345 32.5711 17.2854 32.5711C16.8908 32.5711 16.5 32.4355 16.1842 32.1737L6.75021 24.3562H1.72564C0.772759 24.357 0 23.5839 0 22.631V15.7558C0 14.8025 0.772759 14.0298 1.72564 14.0298H6.75062L16.1847 6.2123C16.7001 5.78508 17.4149 5.694 18.0198 5.9799C18.6246 6.26376 19.0118 6.87233 19.0118 7.54135L19.0114 30.8454ZM25.6432 28.149C25.6011 28.1518 25.5607 28.1534 25.519 28.1534C25.0632 28.1534 24.6237 27.9733 24.299 27.6482L24.0683 27.4166C23.463 26.8126 23.3919 25.8556 23.9016 25.1686C25.1939 23.4262 25.876 21.3608 25.876 19.194C25.876 16.8635 25.1016 14.6775 23.6361 12.8722C23.0782 12.1861 23.1297 11.1895 23.755 10.5646L23.9854 10.3338C24.3301 9.9891 24.792 9.80122 25.2919 9.83104C25.7788 9.85554 26.2334 10.0847 26.5422 10.4621C28.5749 12.9494 29.6487 15.9694 29.6487 19.1944C29.6487 22.1981 28.6991 25.0571 26.902 27.4611C26.6018 27.8618 26.1427 28.1134 25.6432 28.149ZM32.7777 33.4819C32.4657 33.8507 32.0144 34.0721 31.5312 34.0925C31.5075 34.0933 31.4834 34.0941 31.4589 34.0941C31.0019 34.0941 30.5632 33.9136 30.2385 33.5889L30.0118 33.3622C29.3783 32.7291 29.3355 31.7166 29.9113 31.0313C32.6944 27.7213 34.2277 23.5177 34.2277 19.194C34.2277 14.6967 32.5862 10.3673 29.6067 7.00344C29.0026 6.32054 29.0332 5.28679 29.6761 4.64146L29.9024 4.41478C30.2381 4.07741 30.6743 3.89157 31.1746 3.9075C31.6496 3.92098 32.0989 4.13092 32.4146 4.48625C36.0162 8.5412 38 13.7651 38 19.194C38.0008 24.4175 36.1461 29.4919 32.7777 33.4819Z"
+        fill="#E82C78"
+      />
+    </svg>
+  );
+}
+
+function PdfSvg() {
+  return (
+    <svg width="30" height="37" viewBox="0 0 30 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.82287 23.247C7.48554 23.247 7.2582 23.28 7.14087 23.313V25.4727C7.2802 25.5057 7.45437 25.5149 7.69454 25.5149C8.5727 25.5149 9.11354 25.0712 9.11354 24.3214C9.11354 23.6504 8.64787 23.247 7.82287 23.247ZM14.2157 23.269C13.849 23.269 13.6107 23.302 13.4695 23.335V28.12C13.6107 28.153 13.838 28.153 14.0433 28.153C15.5412 28.164 16.5165 27.339 16.5165 25.5937C16.5275 24.072 15.6383 23.269 14.2157 23.269Z"
+        fill="#E82C78"
+      />
+      <path
+        d="M18.3333 0H3.66667C2.69421 0 1.76158 0.386302 1.07395 1.07395C0.386302 1.76158 0 2.69421 0 3.66667V33C0 33.9724 0.386302 34.905 1.07395 35.5927C1.76158 36.2804 2.69421 36.6667 3.66667 36.6667H25.6667C26.6391 36.6667 27.5717 36.2804 28.2594 35.5927C28.947 34.905 29.3333 33.9724 29.3333 33V11L18.3333 0ZM10.0797 26.015C9.51317 26.5467 8.67717 26.785 7.70367 26.785C7.51491 26.787 7.32624 26.776 7.139 26.752V29.3663H5.5V22.1503C6.23966 22.04 6.98705 21.9897 7.73483 22C8.756 22 9.482 22.1943 9.9715 22.5848C10.4372 22.9552 10.7525 23.562 10.7525 24.277C10.7507 24.9957 10.5123 25.6025 10.0797 26.015ZM17.0592 28.4992C16.2892 29.139 15.1177 29.4433 13.6858 29.4433C12.8278 29.4433 12.221 29.3883 11.8085 29.3333V22.1522C12.5484 22.0442 13.2955 21.9932 14.0433 22C15.4312 22 16.3332 22.2493 17.0372 22.781C17.798 23.3457 18.2747 24.2458 18.2747 25.5383C18.2747 26.9372 17.7632 27.9033 17.0592 28.4992ZM23.8333 23.4117H21.0247V25.0818H23.65V26.4275H21.0247V29.3682H19.3637V22.055H23.8333V23.4117ZM18.3333 12.8333H16.5V3.66667L25.6667 12.8333H18.3333Z"
+        fill="#E82C78"
+      />
+    </svg>
+  );
+}
+
+function ExcelSvg() {
+  return (
+    <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.56 383.22">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g>
+          <path
+            fill="#00733b"
+            d="M243.51,383.22H42.22c-.63-1.29-1.98-.86-2.97-1.1C15.49,376.31,.08,357.13,.06,332.62-.01,238.59-.03,144.56,.07,50.53,.1,21.62,21.94,.07,50.82,.02,71.27-.01,91.71,0,112.16,.02c21.82,.02,43.63,.07,65.45,.11,.04,1.74,.11,3.49,.11,5.23,0,34.14,.06,68.28-.07,102.42-.01,3.6,.97,4.61,4.58,4.59,32.89-.13,65.77-.08,98.66-.09,1.36,0,2.73-.17,4.09-.26,2.21,1.16,1.45,3.26,1.45,5.01,.03,71.27,.03,142.53,.02,213.8,0,1.87-.04,3.74-.15,5.6-1.25,21.86-16.73,40.3-37.97,45.43-1.6,.39-3.48,0-4.82,1.36Zm-41.48-174.5c-2.71-.14-6.44,.35-9.91,1.82-6.81,2.87-12.43,7.05-13.77,14.94-1.65,9.73,2.79,17.43,11.94,21.71,5.9,2.76,12.43,3.58,18.27,6.42,2.39,1.16,4.19,2.83,3.83,5.78-.35,2.86-2.32,4.21-4.9,4.99-6.58,1.97-13.37-1.63-15.51-8.67-.7-2.31-1.5-2.62-3.56-1.93-3.3,1.12-6.64,2.13-10.02,2.96-2.06,.51-2.53,1.53-2.08,3.47,1.12,4.76,3.41,8.8,7.06,12.05,9.36,8.35,23.41,10.09,34.94,4.33,10.97-5.48,14.96-17.31,9.89-28.54-3.28-7.28-9.73-9.99-16.57-12.18-4.02-1.28-8.21-2.01-12.25-3.24-2.1-.64-3.85-2.09-3.6-4.63,.26-2.64,2.27-3.71,4.61-4.2,5.55-1.16,10.52,1.18,12.8,6.61,1.11,2.63,2.2,2.61,4.35,1.59,3.25-1.55,6.55-3.08,9.96-4.2,2.69-.88,2.79-2.17,1.75-4.38-1.46-3.1-3.38-5.8-6.03-7.97-5.86-4.79-12.68-6.7-21.21-6.73Zm-82.88,70.37c-5.93-10.01-10.93-19.65-17.1-28.47-4.46-6.37-4.33-11.22,.12-17.43,5.24-7.32,9.38-15.42,14.27-23.64-5.31,0-10.03,.19-14.72-.07-2.98-.16-4.73,.76-6.12,3.46-2.29,4.44-5.03,8.65-7.8,13.32-3.23-5.37-6.04-10.07-8.87-14.76-.56-.92-.91-2-2.39-1.98-5.65,.06-11.29,.02-17.5,.02,6.18,10.3,11.94,20.03,17.87,29.64,1.23,1.99,1.15,3.37-.04,5.33-6.2,10.21-12.25,20.52-18.31,30.82-.66,1.12-1.83,2.08-1.51,3.74,5.02,0,10.01-.14,14.98,.06,2.34,.09,3.55-.78,4.66-2.73,3.49-6.13,7.18-12.16,11.01-18.59,.89,1.33,1.6,2.3,2.21,3.33,3.13,5.24,6.23,10.49,9.34,15.74,.7,1.19,1.29,2.27,3.06,2.23,5.33-.11,10.67-.04,16.85-.04Zm6.57-34.71c0,10.6,0,21.19,0,31.79,0,1.45-.37,2.98,2.09,2.96,14.58-.08,29.16-.06,43.75-.01,1.61,0,2.21-.56,2.17-2.17-.08-3.36-.16-6.74,.03-10.09,.13-2.36-.76-2.96-2.99-2.93-7.85,.11-15.71-.11-23.55,.12-3.15,.09-3.92-.9-3.89-3.95,.15-15.83,.02-31.66,.12-47.49,.02-2.43-.61-3.23-3.08-3.1-3.85,.21-7.73,.21-11.58,0-2.48-.14-3.14,.66-3.11,3.1,.13,10.59,.05,21.19,.05,31.79Z"
+          />
+          <path
+            fill="#4d9c76"
+            d="M177.61,.12c2.09,.98,3.33,2.9,4.85,4.48,33.56,35.02,67.1,70.06,100.63,105.11,.68,.71,1.26,1.53,1.88,2.3-1.36,.09-2.73,.26-4.09,.26-32.89,.01-65.77-.04-98.66,.09-3.61,.01-4.6-.99-4.58-4.59,.13-34.14,.08-68.28,.07-102.42,0-1.74-.07-3.49-.11-5.23Z"
+          />
+          <path
+            fill="#fdfdfd"
+            d="M202.03,208.72c8.53,.03,15.35,1.93,21.21,6.73,2.65,2.17,4.57,4.88,6.03,7.97,1.05,2.22,.94,3.5-1.75,4.38-3.41,1.12-6.71,2.66-9.96,4.2-2.16,1.03-3.25,1.04-4.35-1.59-2.28-5.43-7.25-7.77-12.8-6.61-2.34,.49-4.34,1.56-4.61,4.2-.25,2.53,1.5,3.99,3.6,4.63,4.04,1.23,8.23,1.95,12.25,3.24,6.84,2.18,13.29,4.9,16.57,12.18,5.07,11.23,1.08,23.06-9.89,28.54-11.53,5.76-25.59,4.02-34.94-4.33-3.65-3.26-5.94-7.29-7.06-12.05-.45-1.94,.01-2.96,2.08-3.47,3.38-.83,6.72-1.85,10.02-2.96,2.06-.7,2.85-.38,3.56,1.93,2.14,7.04,8.92,10.64,15.51,8.67,2.58-.77,4.55-2.13,4.9-4.99,.36-2.95-1.44-4.61-3.83-5.78-5.84-2.84-12.38-3.67-18.27-6.42-9.15-4.28-13.59-11.98-11.94-21.71,1.34-7.89,6.96-12.07,13.77-14.94,3.47-1.46,7.2-1.96,9.91-1.82Z"
+          />
+          <path
+            fill="#fdfdfd"
+            d="M119.15,279.09c-6.18,0-11.51-.07-16.85,.04-1.76,.04-2.35-1.04-3.06-2.23-3.1-5.25-6.21-10.5-9.34-15.74-.62-1.03-1.33-2-2.21-3.33-3.83,6.43-7.52,12.46-11.01,18.59-1.11,1.95-2.32,2.82-4.66,2.73-4.98-.2-9.97-.06-14.98-.06-.32-1.66,.85-2.62,1.51-3.74,6.06-10.3,12.1-20.61,18.31-30.82,1.19-1.97,1.27-3.34,.04-5.33-5.93-9.62-11.68-19.34-17.87-29.64,6.2,0,11.85,.04,17.5-.02,1.48-.02,1.83,1.06,2.39,1.98,2.83,4.69,5.64,9.38,8.87,14.76,2.77-4.68,5.5-8.88,7.8-13.32,1.4-2.7,3.14-3.63,6.12-3.46,4.69,.26,9.41,.07,14.72,.07-4.89,8.21-9.03,16.32-14.27,23.64-4.45,6.21-4.58,11.06-.12,17.43,6.18,8.82,11.18,18.47,17.1,28.47Z"
+          />
+          <path
+            fill="#fdfdfd"
+            d="M125.72,244.38c0-10.6,.07-21.19-.05-31.79-.03-2.44,.64-3.23,3.11-3.1,3.85,.21,7.73,.21,11.58,0,2.47-.13,3.1,.67,3.08,3.1-.11,15.83,.02,31.66-.12,47.49-.03,3.06,.74,4.04,3.89,3.95,7.85-.23,15.7,0,23.55-.12,2.24-.03,3.12,.57,2.99,2.93-.18,3.36-.1,6.73-.03,10.09,.04,1.61-.56,2.18-2.17,2.17-14.58-.04-29.16-.06-43.75,.01-2.46,.01-2.09-1.51-2.09-2.96,0-10.6,0-21.19,0-31.79Z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+function DocumentSvg() {
+  return (
+    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M23.2031 10.5469C21.8462 10.5469 20.7422 9.4429 20.7422 8.08594V0H8.15625C6.02388 0 4.28906 1.73482 4.28906 3.86719V32.1328C4.28906 34.2652 6.02388 36 8.15625 36H27.8438C29.9761 36 31.7109 34.2652 31.7109 32.1328V10.5469H23.2031ZM10.0547 25.3125H15.1678C15.7503 25.3125 16.2225 25.7847 16.2225 26.3672C16.2225 26.9497 15.7503 27.4219 15.1678 27.4219H10.0547C9.47222 27.4219 9 26.9497 9 26.3672C9 25.7847 9.47222 25.3125 10.0547 25.3125ZM9 20.7422C9 20.1597 9.47222 19.6875 10.0547 19.6875H25.5234C26.1059 19.6875 26.5781 20.1597 26.5781 20.7422C26.5781 21.3247 26.1059 21.7969 25.5234 21.7969H10.0547C9.47222 21.7969 9 21.3247 9 20.7422ZM25.5234 14.0625C26.1059 14.0625 26.5781 14.5347 26.5781 15.1172C26.5781 15.6997 26.1059 16.1719 25.5234 16.1719H10.0547C9.47222 16.1719 9 15.6997 9 15.1172C9 14.5347 9.47222 14.0625 10.0547 14.0625H25.5234Z"
+        fill="#E82C78"
+      />
+      <path
+        d="M22.8516 8.08593C22.8516 8.27979 23.0093 8.4375 23.2031 8.4375H31.2408C31.0479 8.08129 30.7997 7.75413 30.5015 7.47196L23.7218 1.05792C23.4586 0.80901 23.1656 0.601377 22.8516 0.437408V8.08593H22.8516Z"
+        fill="#E82C78"
+      />
+    </svg>
+  );
+}
+
+const VoiceIcon = ({ color }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M12 19.75C8.28 19.75 5.25 16.72 5.25 13V8C5.25 4.28 8.28 1.25 12 1.25C15.72 1.25 18.75 4.28 18.75 8V13C18.75 16.72 15.72 19.75 12 19.75ZM12 2.75C9.11 2.75 6.75 5.1 6.75 8V13C6.75 15.9 9.11 18.25 12 18.25C14.89 18.25 17.25 15.9 17.25 13V8C17.25 5.1 14.89 2.75 12 2.75Z"
+        fill={color}
+      />
+      <path
+        d="M12 22.75C6.62 22.75 2.25 18.38 2.25 13V11C2.25 10.59 2.59 10.25 3 10.25C3.41 10.25 3.75 10.59 3.75 11V13C3.75 17.55 7.45 21.25 12 21.25C16.55 21.25 20.25 17.55 20.25 13V11C20.25 10.59 20.59 10.25 21 10.25C21.41 10.25 21.75 10.59 21.75 11V13C21.75 18.38 17.38 22.75 12 22.75Z"
+        fill={color}
+      />
+      <path
+        d="M14.6099 8.22988C14.5299 8.22988 14.4399 8.21988 14.3499 8.18988C12.7399 7.60988 10.9699 7.60988 9.35988 8.18988C8.97988 8.32988 8.54988 8.12988 8.40988 7.73988C8.26988 7.34988 8.46988 6.91988 8.85988 6.77988C10.7999 6.07988 12.9299 6.07988 14.8699 6.77988C15.2599 6.91988 15.4599 7.34988 15.3199 7.73988C15.2099 8.04988 14.9199 8.22988 14.6099 8.22988Z"
+        fill={color}
+      />
+      <path
+        d="M13.6999 11.2305C13.6399 11.2305 13.5699 11.2205 13.4999 11.2005C12.4299 10.9105 11.2999 10.9105 10.2299 11.2005C9.81992 11.3105 9.41992 11.0705 9.30992 10.6705C9.19992 10.2705 9.43992 9.86047 9.83992 9.75047C11.1699 9.39047 12.5699 9.39047 13.8999 9.75047C14.2999 9.86047 14.5399 10.2705 14.4299 10.6705C14.3299 11.0205 14.0299 11.2305 13.6999 11.2305Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+const DoneIcon = (props) => (
+  <Icon viewBox="0 0 17 17" {...props}>
+    <path
+      fill="currentColor"
+      d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"
+    />
+    <path
+      fill="currentColor"
+      d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"
+    />
+  </Icon>
+);
+
+const ErrorIcon = (props) => (
+  <Icon viewBox="0 0 17 17" {...props}>
+    <path fill="currentColor" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+    <path
+      fill="currentColor"
+      d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+    />
+  </Icon>
+);
+
+const WarningIcon = (props) => (
+  <Icon viewBox="0 0 17 17" {...props}>
+    <path
+      fill="currentColor"
+      d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"
+    />
+    <path
+      fill="currentColor"
+      d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"
+    />
+  </Icon>
+);
+
+const NewInward = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Group">
+      <circle
+        id="Oval"
+        cx="8.66669"
+        cy="22"
+        r="6"
+        stroke="#09327B"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        id="Path"
+        d="M17.3334 28H23.3334C25.1743 28 26.6667 26.5076 26.6667 24.6667V11.1622C26.6667 10.1014 26.2453 9.08395 25.4951 8.3338L22.3329 5.17157C21.5827 4.42143 20.5653 4 19.5045 4H10C8.15907 4 6.66669 5.49238 6.66669 7.33333V12"
+        stroke="#09327B"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        id="Path_2"
+        d="M26.6352 10.6667H22C20.8954 10.6667 20 9.77124 20 8.66667V4.03149"
+        stroke="#09327B"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        id="Path_3"
+        d="M10.3333 22H7"
+        stroke="#09327B"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        id="Path_4"
+        d="M8.66667 20.3334V23.6667"
+        stroke="#09327B"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  </svg>
+);
+
+const StarIcon = ({ fill = 'white' }) => {
+  return (
+    <svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M21.1796 16.4015L21.5076 16.8198L21.1796 16.4015C20.8396 16.6681 20.6947 17.1139 20.8131 17.5295L23.4117 26.6502L15.5404 21.3603C15.1818 21.1193 14.713 21.1193 14.3544 21.3603L6.48306 26.6502L9.08164 17.5295C9.20003 17.1139 9.05516 16.6681 8.71514 16.4015L1.25183 10.5501L10.7291 10.203C11.1609 10.1872 11.5402 9.91167 11.6887 9.50591L14.9474 0.599698L18.2061 9.50591C18.3545 9.91167 18.7338 10.1872 19.1656 10.203L28.6429 10.5501L21.1796 16.4015Z"
+        fill={fill}
+        stroke="#F5BF03"
+        strokeWidth="1.06316"
+      />
+    </svg>
+  );
+};
+
+const VerticalDotIcon = () => (
+  <svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="6.5" cy="2.5" r="2" fill="#D9D9D9" />
+    <circle cx="6.5" cy="8.5" r="2" fill="#D9D9D9" />
+    <circle cx="6.5" cy="14.5" r="2" fill="#D9D9D9" />
+  </svg>
+);
+
+const NextArrow = () => (
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.5 16L14.5 12L10.5 8" stroke="#323232" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const BackArrow = () => (
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.5 8L10.5 12L14.5 16" stroke="#323232" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const DragCollapseIcon = ({
+  color = '#5C6E93', width = '24', height = '24', ...rest
+}) => {
+  return (
+    <svg width={width} height={height} {...rest} viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.5 6.5L0.5 12.5L0.5 7.83333L0.5 12.5L5.16667 12.5"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 12.5L11.1667 12.5C11.9033 12.5 12.5 11.9033 12.5 11.1667L12.5 1.83333C12.5 1.09667 11.9033 0.5 11.1667 0.5L1.83333 0.499999C1.09667 0.499999 0.500001 1.09667 0.500001 1.83333L0.5 4.5"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export {
+  CheckIcon,
+  CloseIcon,
+  IndicatorIcon,
+  UploadIcon,
+  PaperClipIcon,
+  Calender,
+  HomeIcon,
+  HomeIconActive,
+  RightArrowIcon,
+  DownArrowIcon,
+  XMarkIcon,
+  DeleteIcon,
+  ActionIcon,
+  OverflowIcon,
+  InfoSvg,
+  EditIcon,
+  PdfSvg,
+  ExcelSvg,
+  DocumentSvg,
+  VoiceIcon,
+  DoneIcon,
+  ErrorIcon,
+  WarningIcon,
+  NewInward,
+  VideoSvg,
+  AudioSvg,
+  StarIcon,
+  VerticalDotIcon,
+  NextArrow,
+  BackArrow,
+  DragCollapseIcon
+};

package/src/assets/styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/assets/svgs/edit-icon.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_44_786)">
+<path d="M9 7.67004H6C5.46957 7.67004 4.96086 7.88076 4.58579 8.25583C4.21071 8.6309 4 9.13961 4 9.67004V18.67C4 19.2005 4.21071 19.7092 4.58579 20.0843C4.96086 20.4593 5.46957 20.67 6 20.67H15C15.5304 20.67 16.0391 20.4593 16.4142 20.0843C16.7893 19.7092 17 19.2005 17 18.67V15.67" stroke="#E82C78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 15.6701H12L20.5 7.17006C20.8978 6.77223 21.1213 6.23267 21.1213 5.67006C21.1213 5.10745 20.8978 4.56788 20.5 4.17006C20.1022 3.77223 19.5626 3.54874 19 3.54874C18.4374 3.54874 17.8978 3.77223 17.5 4.17006L9 12.6701V15.6701Z" stroke="#E82C78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 5.67004L19 8.67004" stroke="#E82C78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_44_786">
+<rect width="24" height="24" fill="white" transform="translate(0 0.670044)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/svgs/overflow-icon.svg

@@ -0,0 +1,20 @@
+<svg width="44" height="25" viewBox="0 0 44 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1_4)">
+<rect x="7" y="3.5" width="30" height="10" rx="5" fill="#E8ECEE" shape-rendering="crispEdges"/>
+<circle cx="13" cy="8.5" r="2" fill="#00B2EC"/>
+<circle cx="22" cy="8.5" r="2" fill="#00B2EC"/>
+<circle cx="31" cy="8.5" r="2" fill="#00B2EC"/>
+</g>
+<defs>
+<filter id="filter0_d_1_4" x="0" y="0.5" width="44" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="3.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_4"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_4" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/svgs/tick-mark.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0458 3.4856C14.3299 3.78703 14.3158 4.26169 14.0144 4.54579L6.08456 12.0197C5.74829 12.3366 5.22042 12.3269 4.89609 11.9977L2.21576 9.27737C1.92504 8.98231 1.92856 8.50745 2.22361 8.21674C2.51867 7.92602 2.99353 7.92954 3.28424 8.22459L5.51839 10.4921L12.9856 3.45421C13.287 3.17011 13.7617 3.18416 14.0458 3.4856Z" fill="#454545"/>
+</svg>