@luscii-healthtech/web-ui 0.1.0

package/src/components/Icons/ChevronIcon.tsx

@@ -0,0 +1,30 @@
+import classNames from "classnames";
+import React from "react";
+
+interface IconProps {
+  className?: string;
+  position: "vertical" | "horizontal";
+  onClick?: () => void;
+}
+
+export const ChevronDoubleIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={classNames(props.className, "transform", { "rotate-90": props.position === "horizontal" })}
+      onClick={props.onClick}
+      role={props.onClick ? "button" : undefined}
+      width="8"
+      height="14"
+      viewBox="0 0 8 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/CrossIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  className?: string;
+  onClick?: () => void;
+}
+
+export const CrossIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      onClick={props.onClick}
+      role={props.onClick ? "button" : undefined}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/DeleteIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface DeleteIconProps {
+  className?: string;
+}
+
+export const DeleteIcon = (props: DeleteIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM18 4H15.5L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/DownArrowIcon.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface DownArrowProps {
+  className?: string;
+}
+
+export const DownArrowIcon = (props: DownArrowProps): JSX.Element => {
+  return (
+    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+      <path
+        fill="currentColor"
+        fill-rule="nonzero"
+        d="M12.762 6.57l-.48-.382A.944.944 0 0 0 11.696 6a.9.9 0 0 0-.578.188L8 8.663 4.88 6.188A.9.9 0 0 0 4.304 6a.944.944 0 0 0-.584.188l-.475.382C3.08 6.7 3 6.854 3 7.034c0 .183.081.336.244.458l4.178 3.315A.87.87 0 0 0 8 11a.91.91 0 0 0 .584-.193l4.178-3.315A.567.567 0 0 0 13 7.034c0-.177-.08-.331-.238-.464z"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/DragIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const DragIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 4C7.44772 4 7 4.44772 7 5V7C7 7.55228 7.44772 8 8 8H10C10.5523 8 11 7.55228 11 7V5C11 4.44772 10.5523 4 10 4H8ZM14 4C13.4477 4 13 4.44772 13 5V7C13 7.55228 13.4477 8 14 8H16C16.5523 8 17 7.55228 17 7V5C17 4.44772 16.5523 4 16 4H14ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V13C11 13.5523 10.5523 14 10 14H8C7.44772 14 7 13.5523 7 13V11ZM14 10C13.4477 10 13 10.4477 13 11V13C13 13.5523 13.4477 14 14 14H16C16.5523 14 17 13.5523 17 13V11C17 10.4477 16.5523 10 16 10H14ZM7 17C7 16.4477 7.44772 16 8 16H10C10.5523 16 11 16.4477 11 17V19C11 19.5523 10.5523 20 10 20H8C7.44772 20 7 19.5523 7 19V17ZM14 16C13.4477 16 13 16.4477 13 17V19C13 19.5523 13.4477 20 14 20H16C16.5523 20 17 19.5523 17 19V17C17 16.4477 16.5523 16 16 16H14Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/EditIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface EditIconProps {
+  className?: string;
+}
+
+export const EditIcon = (props: EditIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 17.4605V20.5005C3 20.7805 3.22 21.0005 3.5 21.0005H6.54C6.67 21.0005 6.8 20.9505 6.89 20.8505L17.81 9.94055L14.06 6.19055L3.15 17.1005C3.05 17.2005 3 17.3205 3 17.4605ZM20.71 7.04055C21.1 6.65055 21.1 6.02055 20.71 5.63055L18.37 3.29055C17.98 2.90055 17.35 2.90055 16.96 3.29055L15.13 5.12055L18.88 8.87055L20.71 7.04055V7.04055Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/EmptyStateDashboardIcon.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+
+export const EmptyStateDashboardIcon = (): JSX.Element => {
+  return (
+    <svg width="450" height="300" viewBox="0 0 450 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M450 291C450 264.079 444.18 237.422 432.873 212.55C421.566 187.678 404.992 165.079 384.099 146.043C363.206 127.007 338.402 111.907 311.104 101.605C283.806 91.3025 254.547 86 225 86C195.453 86 166.194 91.3025 138.896 101.605C111.598 111.907 86.7941 127.007 65.901 146.043C45.0078 165.079 28.4344 187.678 17.1271 212.55C5.81979 237.422 -2.58312e-06 264.079 0 291L225 291H450Z"
+        fill="#82D6F8"
+      />
+      <path
+        d="M95 73.0081C95 65.8239 100.824 60 108.008 60H342.154C349.338 60 355.162 65.8239 355.162 73.0081V223.252C355.162 230.436 349.338 236.26 342.154 236.26H108.008C100.824 236.26 95 230.436 95 223.252V73.0081Z"
+        fill="#1F2937"
+      />
+      <path
+        d="M167.846 70.4062H340.756C342.965 70.4062 344.756 72.1971 344.756 74.4062V221.853C344.756 224.062 342.965 225.853 340.756 225.853H167.846V70.4062Z"
+        fill="#F9FAFB"
+      />
+      <path
+        d="M173.049 99.772C173.049 97.5628 174.84 95.772 177.049 95.772H249.699C251.908 95.772 253.699 97.5628 253.699 99.772V151.609C253.699 153.818 251.908 155.609 249.699 155.609H177.049C174.84 155.609 173.049 153.818 173.049 151.609V99.772Z"
+        fill="white"
+      />
+      <path
+        d="M226.988 139.305C227.242 139.559 227.243 139.972 226.981 140.217C224.8 142.257 222.178 143.772 219.315 144.64C216.244 145.572 212.991 145.731 209.844 145.105C206.697 144.479 203.753 143.087 201.272 141.051C198.792 139.016 196.852 136.4 195.624 133.435C194.396 130.47 193.918 127.249 194.233 124.056C194.547 120.862 195.644 117.796 197.427 115.128C199.21 112.46 201.623 110.272 204.453 108.76C207.091 107.35 210.016 106.566 213.001 106.467C213.36 106.455 213.651 106.747 213.651 107.106V125.699C213.651 125.871 213.719 126.037 213.841 126.159L226.988 139.305Z"
+        fill="#FF83B4"
+      />
+      <path
+        d="M233.813 124.667C234.172 124.667 234.465 124.376 234.453 124.017C234.288 119.078 232.254 114.376 228.748 110.87C225.243 107.364 220.541 105.33 215.602 105.166C215.243 105.154 214.951 105.446 214.951 105.805L214.951 124.017C214.951 124.376 215.242 124.667 215.602 124.667H233.813Z"
+        fill="#52C6F4"
+      />
+      <path
+        d="M228.937 139.306C229.191 139.56 229.603 139.56 229.849 139.298C231.448 137.588 232.729 135.602 233.626 133.435C234.524 131.269 235.023 128.959 235.101 126.619C235.113 126.26 234.82 125.968 234.461 125.968H217.169C216.59 125.968 216.3 126.669 216.71 127.079L228.937 139.306Z"
+        fill="#6ABFA5"
+      />
+      <path
+        d="M258.902 99.772C258.902 97.5628 260.693 95.772 262.902 95.772H335.553C337.762 95.772 339.553 97.5628 339.553 99.772V151.609C339.553 153.818 337.762 155.609 335.553 155.609H262.902C260.693 155.609 258.902 153.818 258.902 151.609V99.772Z"
+        fill="white"
+      />
+      <path
+        d="M278.414 126.991C278.414 125.554 279.579 124.39 281.016 124.39H286.219C287.656 124.39 288.821 125.554 288.821 126.991V142.601C288.821 144.038 287.656 145.203 286.219 145.203H281.016C279.579 145.203 278.414 144.038 278.414 142.601V126.991Z"
+        fill="#52C6F4"
+      />
+      <path
+        d="M294.024 110.731C294.024 109.294 295.189 108.129 296.625 108.129H301.829C303.266 108.129 304.43 109.294 304.43 110.731V142.601C304.43 144.038 303.266 145.203 301.829 145.203H296.625C295.189 145.203 294.024 144.038 294.024 142.601V110.731Z"
+        fill="#52C6F4"
+      />
+      <path
+        d="M309.634 119.837C309.634 118.4 310.798 117.235 312.235 117.235H317.438C318.875 117.235 320.04 118.4 320.04 119.837V142.601C320.04 144.038 318.875 145.203 317.438 145.203H312.235C310.798 145.203 309.634 144.038 309.634 142.601V119.837Z"
+        fill="#6ABFA5"
+      />
+      <path
+        d="M258.902 164.812C258.902 162.603 260.693 160.812 262.902 160.812H335.553C337.762 160.812 339.553 162.603 339.553 164.813V216.65C339.553 218.859 337.762 220.65 335.553 220.65H262.902C260.693 220.65 258.902 218.859 258.902 216.65V164.812Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M280.096 191.874C280.096 191.874 271.487 183.28 280.774 174.655C280.774 174.655 284.175 171.052 291.053 172.041C294.952 172.603 296.482 174.453 299.075 178.366C299.075 178.366 302.291 172.16 310.8 172.137C318.05 172.118 323.604 180.223 321.565 186.881C321.565 186.881 320.884 188.957 318.05 191.874L299.122 210.243L280.096 191.874Z"
+        fill="#6ABFA5"
+      />
+      <path
+        d="M173.049 164.812C173.049 162.603 174.84 160.812 177.049 160.812H249.699C251.908 160.812 253.699 162.603 253.699 164.813V216.65C253.699 218.859 251.908 220.65 249.699 220.65H177.049C174.84 220.65 173.049 218.859 173.049 216.65V164.812Z"
+        fill="white"
+      />
+      <rect x="173.049" y="178.374" width="80.6503" height="1.30081" fill="#F4F4F4" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M228.738 169.616C229.132 169.54 229.539 169.651 229.84 169.915L245.45 183.573C245.991 184.046 246.046 184.868 245.573 185.409C245.1 185.949 244.278 186.004 243.737 185.531L229.383 172.972L214.533 202.054C214.362 202.388 214.057 202.632 213.694 202.724C213.331 202.816 212.946 202.747 212.637 202.535L197.149 191.886L181.676 185.762C181.008 185.497 180.681 184.741 180.945 184.073C181.21 183.405 181.965 183.078 182.633 183.343L198.243 189.521C198.334 189.557 198.421 189.604 198.501 189.659L212.89 199.551L227.825 170.302C228.008 169.945 228.345 169.692 228.738 169.616Z"
+        fill="#52C6F4"
+      />
+      <circle cx="182.805" cy="184.878" r="2.60162" fill="#3FABD6" />
+      <circle cx="197.764" cy="190.731" r="2.60162" fill="#3FABD6" />
+      <circle cx="213.373" cy="201.137" r="2.60162" fill="#3FABD6" />
+      <circle cx="229.635" cy="171.219" r="3.90244" fill="#6ABFA5" />
+      <circle cx="245.244" cy="184.878" r="2.60162" fill="#3FABD6" />
+      <path
+        d="M173.049 80.2603C173.049 78.0511 174.84 76.2603 177.049 76.2603H335.553C337.762 76.2603 339.553 78.0511 339.553 80.2603V86.5692C339.553 88.7783 337.762 90.5692 335.553 90.5692H177.049C174.84 90.5692 173.049 88.7783 173.049 86.5692V80.2603Z"
+        fill="white"
+      />
+      <rect x="178.252" y="81.4634" width="26.0162" height="3.90244" rx="1.95122" fill="#D1D5DB" />
+      <rect x="282.316" y="81.4634" width="52.0325" height="3.90244" rx="1.95122" fill="#D1D5DB" />
+      <rect x="209.471" y="81.4634" width="67.6422" height="3.90244" rx="1.95122" fill="#9CA3AF" />
+      <path
+        d="M160.041 289.594C160.041 283.846 164.7 279.187 170.448 279.187H279.716C285.463 279.187 290.122 283.846 290.122 289.594C290.122 295.341 285.463 300 279.716 300H170.448C164.7 300 160.041 295.341 160.041 289.594Z"
+        fill="#1F2937"
+      />
+      <path d="M203.617 236.26H246.544L251.747 279.187H198.414L203.617 236.26Z" fill="#4B5563" />
+      <path
+        d="M105.406 74.4062C105.406 72.1971 107.197 70.4062 109.406 70.4062H167.845V225.853H109.406C107.197 225.853 105.406 224.062 105.406 221.853V74.4062Z"
+        fill="#F3F4F6"
+      />
+      <rect x="108.658" y="73.6587" width="55.9349" height="15.6097" rx="4" fill="white" />
+      <rect x="123.617" y="76.2607" width="37.7235" height="5.20325" rx="2.60162" fill="#9CA3AF" />
+      <rect x="123.617" y="82.7642" width="26.0162" height="3.90244" rx="1.95122" fill="#D1D5DB" />
+      <ellipse cx="115.813" cy="81.464" rx="5.20325" ry="5.20325" fill="#D1D5DB" />
+      <rect x="108.658" y="94.4712" width="55.9349" height="15.6097" rx="4" fill="white" />
+      <rect x="123.617" y="97.0732" width="33.8211" height="5.20325" rx="2.60162" fill="#9CA3AF" />
+      <rect x="123.617" y="103.577" width="35.7723" height="3.90244" rx="1.95122" fill="#D1D5DB" />
+      <ellipse cx="115.813" cy="102.276" rx="5.20325" ry="5.20325" fill="#D1D5DB" />
+      <rect x="108.658" y="115.285" width="55.9349" height="15.6097" rx="4" fill="white" />
+      <rect x="123.617" y="117.887" width="37.7235" height="5.20325" rx="2.60163" fill="#9CA3AF" />
+      <rect x="123.617" y="124.391" width="26.0162" height="3.90244" rx="1.95122" fill="#D1D5DB" />
+      <ellipse cx="115.813" cy="123.09" rx="5.20325" ry="5.20325" fill="#D1D5DB" />
+      <rect x="108.658" y="136.098" width="55.9349" height="15.6097" rx="4" fill="white" />
+      <rect x="123.617" y="138.7" width="33.8211" height="5.20325" rx="2.60163" fill="#9CA3AF" />
+      <rect x="123.617" y="145.203" width="31.8699" height="3.90243" rx="1.95122" fill="#D1D5DB" />
+      <ellipse cx="115.813" cy="143.903" rx="5.20325" ry="5.20325" fill="#D1D5DB" />
+      <rect x="108.658" y="156.91" width="55.9349" height="15.6098" rx="4" fill="white" />
+      <rect x="123.617" y="159.512" width="37.7235" height="5.20325" rx="2.60163" fill="#9CA3AF" />
+      <rect x="123.617" y="166.016" width="26.0162" height="3.90244" rx="1.95122" fill="#D1D5DB" />
+      <ellipse cx="115.813" cy="164.715" rx="5.20325" ry="5.20325" fill="#D1D5DB" />
+      <rect x="108.658" y="177.723" width="55.9349" height="15.6097" rx="4" fill="white" />
+      <rect x="123.617" y="180.325" width="31.8699" height="5.20325" rx="2.60163" fill="#9CA3AF" />
+      <rect x="123.617" y="186.829" width="31.8699" height="3.90243" rx="1.95122" fill="#D1D5DB" />
+      <ellipse cx="115.813" cy="185.528" rx="5.20325" ry="5.20325" fill="#D1D5DB" />
+      <rect x="108.658" y="198.537" width="55.9349" height="15.6098" rx="4" fill="white" />
+      <rect x="123.617" y="201.138" width="37.7235" height="5.20324" rx="2.60162" fill="#9CA3AF" />
+      <rect x="123.617" y="207.642" width="26.0162" height="3.90243" rx="1.95122" fill="#D1D5DB" />
+      <ellipse cx="115.813" cy="206.341" rx="5.20325" ry="5.20325" fill="#D1D5DB" />
+      <path
+        d="M204.538 57.2204C206.044 55.1505 208.448 53.9258 211.008 53.9258H239.809C242.368 53.9258 244.773 55.1505 246.278 57.2204L248.979 60.9332H201.838L204.538 57.2204Z"
+        fill="#374151"
+      />
+      <circle cx="225.408" cy="52.6519" r="14.6519" fill="#374151" />
+      <circle cx="225.408" cy="52.6521" r="8.28148" fill="#1F2937" />
+      <circle cx="225.409" cy="52.6518" r="5.73333" fill="#86DDFF" />
+      <circle cx="223.497" cy="50.1035" r="1.91111" fill="white" fill-opacity="0.5" />
+    </svg>
+  );
+};

package/src/components/Icons/ExclamationMarkIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface ExclamationMarkIconProps {
+  className?: string;
+}
+
+export const ExclamationMarkIcon = (props: ExclamationMarkIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 13C11.45 13 11 12.55 11 12V8C11 7.45 11.45 7 12 7C12.55 7 13 7.45 13 8V12C13 12.55 12.55 13 12 13ZM13 17H11V15H13V17Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/EyeIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const EyeIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="22"
+      height="15"
+      viewBox="0 0 22 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0ZM11 12.5C8.24 12.5 6 10.26 6 7.5C6 4.74 8.24 2.5 11 2.5C13.76 2.5 16 4.74 16 7.5C16 10.26 13.76 12.5 11 12.5ZM11 4.5C9.34 4.5 8 5.84 8 7.5C8 9.16 9.34 10.5 11 10.5C12.66 10.5 14 9.16 14 7.5C14 5.84 12.66 4.5 11 4.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/GearIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const GearIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.5002 10C17.5002 9.77 17.4902 9.55 17.4702 9.32L19.3302 7.91C19.7302 7.61 19.8402 7.05 19.5902 6.61L17.7202 3.38C17.4702 2.94 16.9302 2.76 16.4702 2.96L14.3202 3.87C13.9502 3.61 13.5602 3.38 13.1502 3.19L12.8602 0.88C12.8002 0.38 12.3702 0 11.8702 0H8.14015C7.63015 0 7.20015 0.38 7.14015 0.88L6.85015 3.19C6.44015 3.38 6.05015 3.61 5.68015 3.87L3.53015 2.96C3.07015 2.76 2.53015 2.94 2.28015 3.38L0.410153 6.62C0.160153 7.06 0.270153 7.61 0.670153 7.92L2.53015 9.33C2.51015 9.55 2.50015 9.77 2.50015 10C2.50015 10.23 2.51015 10.45 2.53015 10.68L0.670153 12.09C0.270153 12.39 0.160153 12.95 0.410153 13.39L2.28015 16.62C2.53015 17.06 3.07015 17.24 3.53015 17.04L5.68015 16.13C6.05015 16.39 6.44015 16.62 6.85015 16.81L7.14015 19.12C7.20015 19.62 7.63015 20 8.13015 20H11.8602C12.3602 20 12.7902 19.62 12.8502 19.12L13.1402 16.81C13.5502 16.62 13.9402 16.39 14.3102 16.13L16.4602 17.04C16.9202 17.24 17.4602 17.06 17.7102 16.62L19.5802 13.39C19.8302 12.95 19.7202 12.4 19.3202 12.09L17.4602 10.68C17.4902 10.45 17.5002 10.23 17.5002 10ZM10.0402 13.5C8.11015 13.5 6.54015 11.93 6.54015 10C6.54015 8.07 8.11015 6.5 10.0402 6.5C11.9702 6.5 13.5402 8.07 13.5402 10C13.5402 11.93 11.9702 13.5 10.0402 13.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/GroupIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const GroupIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 12.75C13.63 12.75 15.07 13.14 16.24 13.65C17.32 14.13 18 15.21 18 16.38V17C18 17.55 17.55 18 17 18H7C6.45 18 6 17.55 6 17V16.39C6 15.21 6.68 14.13 7.76 13.66C8.93 13.14 10.37 12.75 12 12.75ZM4 13C5.1 13 6 12.1 6 11C6 9.9 5.1 9 4 9C2.9 9 2 9.9 2 11C2 12.1 2.9 13 4 13ZM5.13 14.1C4.76 14.04 4.39 14 4 14C3.01 14 2.07 14.21 1.22 14.58C0.48 14.9 0 15.62 0 16.43V17C0 17.55 0.45 18 1 18H4.5V16.39C4.5 15.56 4.73 14.78 5.13 14.1ZM20 13C21.1 13 22 12.1 22 11C22 9.9 21.1 9 20 9C18.9 9 18 9.9 18 11C18 12.1 18.9 13 20 13ZM24 16.43C24 15.62 23.52 14.9 22.78 14.58C21.93 14.21 20.99 14 20 14C19.61 14 19.24 14.04 18.87 14.1C19.27 14.78 19.5 15.56 19.5 16.39V18H23C23.55 18 24 17.55 24 17V16.43ZM12 6C13.66 6 15 7.34 15 9C15 10.66 13.66 12 12 12C10.34 12 9 10.66 9 9C9 7.34 10.34 6 12 6Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/HeartIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface HeartIconProps {
+  className?: string;
+}
+
+export const HeartIcon = (props: HeartIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.3502 20.1307C12.5902 20.8207 11.4202 20.8207 10.6602 20.1207L10.5502 20.0207C5.30015 15.2707 1.87015 12.1607 2.00015 8.28065C2.06015 6.58065 2.93015 4.95065 4.34015 3.99065C6.98015 2.19065 10.2402 3.03065 12.0002 5.09065C13.7602 3.03065 17.0202 2.18065 19.6602 3.99065C21.0702 4.95065 21.9402 6.58065 22.0002 8.28065C22.1402 12.1607 18.7002 15.2707 13.4502 20.0407L13.3502 20.1307Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/LeftArrowIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface LeftArrowIconProps {
+  className?: string;
+}
+
+export const LeftArrowIcon = (props: LeftArrowIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/LightBulbIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface LightBulbIconProps {
+  className?: string;
+}
+
+export const LightBulbIcon = (props: LightBulbIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22Z" fill="currentColor" />
+      <path
+        d="M9 19H15C15.55 19 16 18.55 16 18C16 17.45 15.55 17 15 17H9C8.45 17 8 17.45 8 18C8 18.55 8.45 19 9 19Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12 2C7.86 2 4.5 5.36 4.5 9.5C4.5 13.32 7.16 15.36 8.27 16H15.73C16.84 15.36 19.5 13.32 19.5 9.5C19.5 5.36 16.14 2 12 2Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/LockIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface LockIconProps {
+  className?: string;
+}
+
+export const LockIcon = (props: LockIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15C14 16.1 13.1 17 12 17ZM9 8V6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H9Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/MessagesIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface MessagesIconProps {
+  className?: string;
+}
+
+export const MessagesIcon = (props: MessagesIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20 2H4C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM17 14H7C6.45 14 6 13.55 6 13C6 12.45 6.45 12 7 12H17C17.55 12 18 12.45 18 13C18 13.55 17.55 14 17 14ZM17 11H7C6.45 11 6 10.55 6 10C6 9.45 6.45 9 7 9H17C17.55 9 18 9.45 18 10C18 10.55 17.55 11 17 11ZM17 8H7C6.45 8 6 7.55 6 7C6 6.45 6.45 6 7 6H17C17.55 6 18 6.45 18 7C18 7.55 17.55 8 17 8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/NotesIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface NotesIconProps {
+  className?: string;
+}
+
+export const NotesIcon = (props: NotesIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 3H4.99C3.89 3 3 3.9 3 5L3.01 19C3.01 20.1 3.9 21 5 21H15L21 15V5C21 3.9 20.1 3 19 3ZM8 8H16C16.55 8 17 8.45 17 9C17 9.55 16.55 10 16 10H8C7.45 10 7 9.55 7 9C7 8.45 7.45 8 8 8ZM11 14H8C7.45 14 7 13.55 7 13C7 12.45 7.45 12 8 12H11C11.55 12 12 12.45 12 13C12 13.55 11.55 14 11 14ZM14 19.5V15C14 14.45 14.45 14 15 14H19.5L14 19.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/PinIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface PinIconProps {
+  className?: string;
+}
+
+export const PinIcon = (props: PinIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="14"
+      height="20"
+      viewBox="0 0 14 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14 10.87C14 10.4 13.66 10.02 13.2 9.89C11.93 9.54 11 8.38 11 7V2H12C12.55 2 13 1.55 13 1C13 0.45 12.55 0 12 0L2 0C1.45 0 1 0.45 1 1C1 1.55 1.45 2 2 2H3V7C3 8.38 2.07 9.54 0.8 9.89C0.34 10.02 0 10.4 0 10.87L0 11C0 11.55 0.45 12 1 12H5.98L6 19C6 19.55 6.45 20 7 20C7.55 20 8 19.55 8 19L7.98 12H13C13.55 12 14 11.55 14 11V10.87Z"
+        fill="#64748b"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/PrintIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { IconProps } from "./types/IconProps.type";
+
+export const PrintIcon = (props: IconProps): JSX.Element => {
+  return (
+    <svg className={props.className} width="19" height="18" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.6 5H15V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V5H2.4A2.4 2.4 0 0 0 0 7.4v5.2A2.4 2.4 0 0 0 2.4 15H5v2.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V15h2.6a2.4 2.4 0 0 0 2.4-2.4V7.4A2.4 2.4 0 0 0 16.6 5zM5 1h9v4H5V1zm8 16H6v-5h7v5zm5-4.4a1.4 1.4 0 0 1-1.4 1.4H14v-2.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5V14H2.4A1.4 1.4 0 0 1 1 12.6V7.4A1.4 1.4 0 0 1 2.4 6h14.2A1.4 1.4 0 0 1 18 7.4v5.2z"
+        fill="currentColor"
+        fill-rule="nonzero"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/RightArrowIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface RightArrowIconProps {
+  className?: string;
+}
+
+export const RightArrowIcon = (props: RightArrowIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/SmallCircleIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface SmallCircleIconProps {
+  className?: string;
+}
+
+export const SmallCircleIcon = (props: SmallCircleIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="6" fill="currentColor" />
+      <circle cx="14.5" cy="9.5" r="1.5" fill="white" fillOpacity="0.1" />
+    </svg>
+  );
+};

package/src/components/Icons/SmallDiamondIcon.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface SmallDiamondIconProps {
+  className?: string;
+}
+
+export const SmallDiamondIcon = (props: SmallDiamondIconProps): JSX.Element => {
+  return (
+    <svg
+      className={props.className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.92984 13.4142C4.14879 12.6332 4.14879 11.3668 4.92984 10.5858L10.5867 4.92893C11.3677 4.14788 12.6341 4.14788 13.4151 4.92893L19.072 10.5858C19.853 11.3668 19.853 12.6332 19.072 13.4142L13.4151 19.0711C12.6341 19.8521 11.3677 19.8521 10.5867 19.0711L4.92984 13.4142Z"
+        fill="currentColor"
+      />
+      <circle
+        cx="12.0002"
+        cy="7.05078"
+        r="1.5"
+        transform="rotate(-45 12.0002 7.05078)"
+        fill="white"
+        fillOpacity="0.1"
+      />
+    </svg>
+  );
+};