buttons, icons, input

2025-10-07 17:05:09 +05:00
parent 9e4bc7b0f8
commit 77fa8ca184
76 changed files with 1314 additions and 6 deletions
@@ -5,6 +5,7 @@
      "name": "client",
      "dependencies": {
        "@tanstack/react-query": "^5.90.2",
+        "clsx": "^2.1.1",
        "ky": "^1.11.0",
        "react": "^19.1.1",
        "react-dom": "^19.1.1",
@@ -278,6 +279,8 @@

    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],

+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],

    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
@@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@tanstack/react-query": "^5.90.2",
+    "clsx": "^2.1.1",
    "ky": "^1.11.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
@@ -0,0 +1,28 @@
+function AppsIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <mask id="a" fill="currentColor">
+        <rect width={8.58} height={8.58} rx={1} />
+      </mask>
+      <rect
+        width={8.58}
+        height={8.58}
+        rx={1}
+        transform="matrix(.87416 .48564 -.87416 .48564 10 3.5)"
+        stroke="currentColor"
+        strokeWidth={2.4}
+        mask="url(#a)"
+      />
+      <path
+        d="M10.875 14.894c-.483.268-1.266.268-1.749 0l-5.828-3.238c-.449-.25-.473-.65-.055-.914.23-.146.633-.154.88-.017l5.368 2.983a1 1 0 0 0 .868.003l5.48-2.964a.96.96 0 0 1 .828.003c.46.256.46.67 0 .926l-5 2.778z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.874 18.014c-.483.269-1.265.269-1.748 0l-5.91-3.282c-.416-.232-.48-.595-.154-.867l.026-.022c.215-.178.668-.205.945-.056l5.537 2.981c.24.13.62.13.86 0l5.537-2.981c.277-.15.73-.122.945.056l.026.022c.327.272.262.635-.155.867l-5.116 2.842z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default AppsIcon;
@@ -0,0 +1,15 @@
+function BellIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.38 14.235a20 20 0 0 0 4.546-1.092A7.47 7.47 0 0 1 15 8.125V7.5a5 5 0 0 0-10 0v.625a7.47 7.47 0 0 1-1.927 5.018 20 20 0 0 0 4.546 1.092m4.762 0c-1.582.188-3.18.188-4.762 0m4.762 0a2.5 2.5 0 1 1-4.762 0"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default BellIcon;
@@ -0,0 +1,14 @@
+function BookedIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.429 6.421C6.429 4.531 8.027 3 10 3s3.571 1.531 3.571 3.421v2.053h.286c.629 0 1.143.492 1.143 1.094v4.79C15 15.26 14.229 16 13.286 16H6.714C5.771 16 5 15.261 5 14.358v-4.79c0-.602.514-1.094 1.143-1.094h.286zm5.714 0v2.053H7.857V6.42c0-1.134.959-2.053 2.143-2.053s2.143.919 2.143 2.053M10 10.013c-.284 0-.56.092-.782.262s-.376.407-.439.673c-.062.265-.028.543.096.787.125.245.333.442.59.558v1.654c0 .137.056.267.156.363s.237.15.379.15a.55.55 0 0 0 .379-.15.5.5 0 0 0 .157-.363v-1.654c.257-.116.464-.313.589-.557s.158-.523.096-.788a1.2 1.2 0 0 0-.44-.673 1.3 1.3 0 0 0-.781-.262"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default BookedIcon;
@@ -0,0 +1,15 @@
+function BriefcaseIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.875 11.792v3.541c0 .912-.656 1.697-1.56 1.817a40.4 40.4 0 0 1-10.63 0c-.904-.12-1.56-.905-1.56-1.817v-3.541m13.75 0a1.82 1.82 0 0 0 .625-1.384V7.255c0-.9-.64-1.68-1.53-1.812a40 40 0 0 0-2.845-.323m3.75 6.672q-.244.208-.56.316A20 20 0 0 1 10 13.125c-2.207 0-4.33-.357-6.314-1.017a1.7 1.7 0 0 1-.561-.316m0 0a1.82 1.82 0 0 1-.625-1.384V7.255c0-.9.64-1.68 1.53-1.812a40 40 0 0 1 2.845-.323m6.25 0v-.745A1.875 1.875 0 0 0 11.25 2.5h-2.5a1.875 1.875 0 0 0-1.875 1.875v.745m6.25 0a41 41 0 0 0-6.25 0M10 10.625h.007v.007H10z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default BriefcaseIcon;
@@ -0,0 +1,15 @@
+function CalendarIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.917 3v1.75M14.083 3v1.75M3 15.25V6.5a1.75 1.75 0 0 1 1.75-1.75h10.5A1.75 1.75 0 0 1 17 6.5v8.75m-14 0A1.75 1.75 0 0 0 4.75 17h10.5A1.75 1.75 0 0 0 17 15.25m-14 0V9.417a1.75 1.75 0 0 1 1.75-1.75h10.5A1.75 1.75 0 0 1 17 9.417v5.833"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CalendarIcon;
@@ -0,0 +1,14 @@
+function ChatFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.865 3.374a35.4 35.4 0 0 1 10.27 0c1.42.209 2.403 1.452 2.403 2.85v4.322c0 1.397-.983 2.64-2.403 2.85a35 35 0 0 1-4.252.362.28.28 0 0 0-.191.08l-3.004 3.004a.538.538 0 0 1-.919-.38v-2.84a35 35 0 0 1-1.904-.227c-1.42-.208-2.404-1.453-2.404-2.85v-4.32c0-1.398.984-2.643 2.404-2.85"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default ChatFilledIcon;
@@ -0,0 +1,15 @@
+function ChatIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 11.049c0 1.155.864 2.162 2.082 2.33q1.255.174 2.533.267V17l3.136-2.944c.212-.198.498-.313.798-.32a40 40 0 0 0 4.369-.357c1.218-.168 2.082-1.174 2.082-2.33V6.701c0-1.157-.864-2.163-2.082-2.331A40 40 0 0 0 10 4c-1.84 0-3.65.126-5.418.37C3.364 4.54 2.5 5.547 2.5 6.703z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChatIcon;
@@ -0,0 +1,15 @@
+function ChatTextIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.292 7.792h6.5m-6.5 2.166h3.25M2.5 11.048c0 1.156.811 2.163 1.955 2.332q1.178.173 2.378.266V17l3.022-3.021a.82.82 0 0 1 .562-.24 35 35 0 0 0 4.21-.36c1.145-.168 1.956-1.174 1.956-2.33V6.701c0-1.157-.81-2.163-1.955-2.331A35 35 0 0 0 9.542 4a35 35 0 0 0-5.087.37C3.311 4.54 2.5 5.547 2.5 6.703z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChatTextIcon;
@@ -0,0 +1,14 @@
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.456 6.113a.833.833 0 0 1-.069 1.177l-7.5 6.666a.833.833 0 0 1-1.143-.033L3.578 9.756a.833.833 0 0 1 1.178-1.179l3.611 3.611 6.913-6.144a.833.833 0 0 1 1.176.07"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default CheckIcon;
@@ -0,0 +1,15 @@
+function ChevronDownIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m5 8 5 5 5-5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronDownIcon;
@@ -0,0 +1,15 @@
+function ChevronLeftIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m11.25 5-5 5 5 5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronLeftIcon;
@@ -0,0 +1,15 @@
+function ChevronRightIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m8.75 5 5 5-5 5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronRightIcon;
@@ -0,0 +1,15 @@
+function ChevronUpIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m11.25 5-5 5 5 5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ChevronUpIcon;
@@ -0,0 +1,22 @@
+function ClientIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4 15.35V17h12V2H4v2.1M2.5 12h1.667M2.5 9.5h1.667M2.5 7h1.667"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 8.75a1.667 1.667 0 1 0 0-3.333 1.667 1.667 0 0 0 0 3.333Zm3.333 5.833a3.333 3.333 0 0 0-6.666 0"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ClientIcon;
@@ -0,0 +1,15 @@
+function ClockIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 5.333V10h3.5m3.5 0a7.001 7.001 0 0 1-11.95 4.95A7 7 0 1 1 17 10"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ClockIcon;
@@ -0,0 +1,15 @@
+function CloseIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m10 10 4.167-4.166M10 10 5.834 5.833M10 10l4.167 4.167M10 10l-4.166 4.167"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CloseIcon;
@@ -0,0 +1,14 @@
+function CogFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.232 1.875c-.765 0-1.416.553-1.542 1.306l-.148.893c-.017.1-.096.217-.248.29q-.428.206-.822.475c-.138.096-.278.105-.375.07L5.25 4.59a1.56 1.56 0 0 0-1.902.683l-.768 1.33a1.56 1.56 0 0 0 .36 1.988l.7.577c.08.065.142.19.128.358a6 6 0 0 0 0 .949c.013.167-.049.293-.127.358l-.701.577a1.56 1.56 0 0 0-.36 1.988l.768 1.33a1.56 1.56 0 0 0 1.902.682l.85-.318c.095-.036.235-.026.374.068q.39.268.82.475c.153.073.232.19.248.292l.149.892a1.56 1.56 0 0 0 1.541 1.306h1.537c.763 0 1.416-.552 1.542-1.306l.148-.893c.017-.1.095-.217.248-.291q.43-.207.82-.475c.14-.095.28-.104.375-.068l.85.318a1.56 1.56 0 0 0 1.9-.683l.77-1.33a1.56 1.56 0 0 0-.36-1.988l-.7-.577c-.08-.065-.142-.19-.129-.358a6.4 6.4 0 0 0 0-.949c-.013-.167.05-.293.128-.358l.7-.577c.59-.485.742-1.325.36-1.987l-.768-1.331a1.56 1.56 0 0 0-1.901-.682l-.85.318c-.095.036-.235.026-.375-.069a6 6 0 0 0-.82-.475c-.153-.072-.231-.189-.248-.29l-.15-.893a1.56 1.56 0 0 0-1.54-1.306zM10 13.125a3.125 3.125 0 1 0 0-6.25 3.125 3.125 0 0 0 0 6.25"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default CogFilledIcon;
@@ -0,0 +1,20 @@
+function CogIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.618 17.988a8.33 8.33 0 0 1-3.623-2.21 2.5 2.5 0 0 0-2.16-4.1A8.4 8.4 0 0 1 2.049 7.5h.035a2.5 2.5 0 0 0 2.244-3.604 8.3 8.3 0 0 1 3.445-1.928 2.5 2.5 0 0 0 4.456 0 8.3 8.3 0 0 1 3.445 1.928A2.5 2.5 0 0 0 17.952 7.5a8.4 8.4 0 0 1 .212 4.18 2.5 2.5 0 0 0-2.16 4.1 8.33 8.33 0 0 1-3.622 2.208 2.501 2.501 0 0 0-4.764 0Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 12.917a2.917 2.917 0 1 0 0-5.834 2.917 2.917 0 0 0 0 5.834Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CogIcon;
@@ -0,0 +1,21 @@
+function CopyIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 5.725V4.03C6 3.461 6.462 3 7.031 3h8.938C16.539 3 17 3.462 17 4.031v8.938A1.03 1.03 0 0 1 15.969 14h-1.713"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.969 6H4.03A1.03 1.03 0 0 0 3 7.031v8.938C3 16.539 3.462 17 4.031 17h8.938A1.03 1.03 0 0 0 14 15.969V7.03A1.03 1.03 0 0 0 12.969 6Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default CopyIcon;
@@ -0,0 +1,12 @@
+function CrownIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m13.756 9.241 3.755-1.878L15.633 16H4.367L2.49 7.363l3.755 1.878L10 3.983zM10 10.371a1.503 1.503 0 1 0 .002 3.005A1.503 1.503 0 0 0 10 10.37"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default CrownIcon;
@@ -0,0 +1,15 @@
+function DocumentChartIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.25 11.875V9.688a2.81 2.81 0 0 0-2.812-2.813h-1.25a.937.937 0 0 1-.938-.937v-1.25a2.81 2.81 0 0 0-2.812-2.813H6.875M7.5 13.75v.625m2.5-2.5v2.5M12.5 10v4.375m-3.75-12.5H4.688a.94.94 0 0 0-.938.938v14.375c0 .517.42.937.938.937h10.625c.517 0 .937-.42.937-.937V9.375a7.5 7.5 0 0 0-7.5-7.5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default DocumentChartIcon;
@@ -0,0 +1,15 @@
+function DownloadIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 17.5h15M13.75 10 10 13.75 6.25 10m3.747-7.5v10.833"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default DownloadIcon;
@@ -0,0 +1,15 @@
+function EditIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m14.052 3.74 1.406-1.408a1.563 1.563 0 0 1 2.21 2.21l-8.85 8.85a3.75 3.75 0 0 1-1.58.941L5 15l.667-2.238a3.75 3.75 0 0 1 .941-1.58zm0 0 2.198 2.197M15 11.667v3.958a1.875 1.875 0 0 1-1.875 1.875h-8.75A1.875 1.875 0 0 1 2.5 15.625v-8.75A1.875 1.875 0 0 1 4.375 5h3.958"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default EditIcon;
@@ -0,0 +1,12 @@
+function ExitFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.5 9.375a.626.626 0 0 0-.442 1.067.63.63 0 0 0 .442.183h5.501v-1.25zm6.934-1.434a.626.626 0 0 1 .883-.882l2.5 2.5a.625.625 0 0 1 0 .882l-2.5 2.5a.627.627 0 0 1-.868-.014.627.627 0 0 1-.015-.868l1.433-1.434H13.25v4.22a2.1 2.1 0 0 1-.66 1.524A2.3 2.3 0 0 1 11 17H6.5a2.3 2.3 0 0 1-1.59-.63 2.1 2.1 0 0 1-.66-1.524V5.154c0-.57.237-1.12.66-1.523C5.33 3.227 5.902 3 6.5 3H11a2.3 2.3 0 0 1 1.59.63c.423.405.66.953.66 1.524v4.221h2.617z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default ExitFilledIcon;
@@ -0,0 +1,15 @@
+function FullscreenIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m2 18 5-5m-5 5v-5m0 5h5M18 2l-5 5m5-5v5m0-5h-5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default FullscreenIcon;
@@ -0,0 +1,12 @@
+function HandRaisedFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.605 2.8a.8.8 0 0 0-.23-.566.774.774 0 0 0-1.106 0 .8.8 0 0 0-.23.566v5.845q-.54.173-1.043.468V3.867a.8.8 0 0 0-.23-.566.774.774 0 0 0-1.106 0 .8.8 0 0 0-.23.566v7.777a3.1 3.1 0 0 1 1.326.571c.392.293.713.675.936 1.117a6.1 6.1 0 0 0-2.783-.665.52.52 0 0 1-.369-.156.54.54 0 0 1-.153-.378v-1.611A2.42 2.42 0 0 0 4.7 8.837a.773.773 0 0 0-1.093.013.81.81 0 0 0-.014 1.117.8.8 0 0 1 .23.562v2.138h.003a4.3 4.3 0 0 0 1.218 2.85l1.208 1.234A4.13 4.13 0 0 0 9.203 18h1.402a5.16 5.16 0 0 0 3.69-1.562 5.4 5.4 0 0 0 1.527-3.771V6a.8.8 0 0 0-.229-.566.774.774 0 0 0-1.107 0 .8.8 0 0 0-.229.566v3.925a5.2 5.2 0 0 0-1.043-.812V3.867a.8.8 0 0 0-.23-.566.774.774 0 0 0-1.107 0 .8.8 0 0 0-.229.566v4.64a5 5 0 0 0-1.043-.107z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedFilledIcon;
@@ -0,0 +1,15 @@
+function HandRaisedIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11.357 4.343a1.24 1.24 0 0 1 .337-.849q.162-.168.374-.26a1.11 1.11 0 0 1 1.255.26q.162.17.25.39c.057.145.087.301.087.459v2.286m-2.303-2.286V3.2c0-.318-.121-.623-.337-.849A1.13 1.13 0 0 0 10.206 2c-.306 0-.599.126-.815.351-.216.226-.337.53-.337.849v1.143m2.303 0-.055 4.514M13.66 6.63c0-.319.122-.624.338-.849s.508-.351.814-.351.598.126.814.351.337.53.337.849v6.228c0 1.364-.52 2.672-1.445 3.637A4.84 4.84 0 0 1 11.028 18H9.553a3.76 3.76 0 0 1-2.714-1.172l-1.267-1.32a4.1 4.1 0 0 1-1.124-2.828l-.002-1.542a.52.52 0 0 0-.145-.359 1.244 1.244 0 0 1 0-1.698q.163-.167.373-.26a1.11 1.11 0 0 1 1.256.26 2.98 2.98 0 0 1 .819 2.048m6.911-4.5V10M9.054 4.343v5.086m0-5.086c0-.318-.121-.624-.337-.849a1.13 1.13 0 0 0-.815-.351c-.305 0-.598.126-.814.351s-.337.53-.337.849v7.943m0 0c.432 0 .86.088 1.258.26.4.173.762.425 1.067.744M6.75 12.286h-.002"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedIcon;
@@ -0,0 +1,16 @@
+function HandRaisedOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.873 16.867a.613.613 0 0 1 .018.866.613.613 0 0 1-.866-.018L2.6 3.29a.61.61 0 0 1-.017-.865.61.61 0 0 1 .865.017zM4.15 8.616a.78.78 0 0 1 .55.22c.438.448.684 1.053.687 1.685v1.613a.54.54 0 0 0 .153.377c.098.1.23.156.37.156a6.1 6.1 0 0 1 2.781.665 3.2 3.2 0 0 0-.935-1.116 3.1 3.1 0 0 0-1.325-.571v-1.502a.5.5 0 0 1 .853-.354l6.826 6.826A5.15 5.15 0 0 1 10.605 18H9.203a4.13 4.13 0 0 1-2.951-1.249l-1.208-1.235a4.3 4.3 0 0 1-1.219-2.849h-.003v-2.138a.8.8 0 0 0-.23-.561.81.81 0 0 1 .015-1.117.77.77 0 0 1 .543-.235"
+        fill="currentColor"
+      />
+      <path
+        d="M9.822 2c.208 0 .406.085.553.234a.8.8 0 0 1 .23.566v5.6q.527 0 1.043.108V3.866a.8.8 0 0 1 .229-.565.775.775 0 0 1 1.107 0c.147.15.229.353.229.565v5.247c.372.22.724.49 1.044.812V6c0-.212.083-.415.23-.565a.773.773 0 0 1 1.106 0 .8.8 0 0 1 .23.565v6.667a5.4 5.4 0 0 1-.828 2.878L8.366 8.916q.33-.161.673-.271V2.8a.8.8 0 0 1 .23-.566A.78.78 0 0 1 9.822 2M7.213 3.066c.207 0 .407.085.554.235a.8.8 0 0 1 .23.565v4.68L6.43 6.98V3.866a.8.8 0 0 1 .23-.565.77.77 0 0 1 .552-.235"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedOffFilledIcon;
@@ -0,0 +1,12 @@
+function HandRaisedOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.116 8.13a1.7 1.7 0 0 1 1.03.347l.326.326a3 3 0 0 1 .88 2.122v.808q.462.075.896.262c.473.205.902.505 1.262.88a.601.601 0 0 1-.866.83 2.7 2.7 0 0 0-.872-.607 2.6 2.6 0 0 0-1.02-.212H6.75a.6.6 0 0 1-.6-.6l.001-.021v-1.116l-.002-.018a2.37 2.37 0 0 0-.65-1.633h-.002a.55.55 0 0 0-.38-.168.55.55 0 0 0-.382.167.64.64 0 0 0-.125.67q.044.113.122.195c.202.209.312.487.314.773v.003l.002 1.542c0 .909.348 1.777.958 2.413l1.266 1.32c.61.635 1.43.987 2.28.987h1.476c.873 0 1.721-.277 2.437-.787.264-.188.632-.185.861.044.24.24.236.632-.033.836a5.4 5.4 0 0 1-3.265 1.107H9.553a4.36 4.36 0 0 1-3.147-1.357l-1.266-1.32a4.7 4.7 0 0 1-1.291-3.241l-.002-1.513a1.8 1.8 0 0 1-.483-1.238 1.84 1.84 0 0 1 .504-1.265 1.75 1.75 0 0 1 1.248-.536m5.09-6.73c.472 0 .92.196 1.247.536.199.207.343.458.425.729a1.71 1.71 0 0 1 1.879.414 1.8 1.8 0 0 1 .504 1.263v.579a1.71 1.71 0 0 1 1.799.443c.325.34.504.795.504 1.265v6.228c0 .79-.161 1.564-.459 2.278l1.885 1.884a.6.6 0 1 1-.849.849L3.284 4.007a.599.599 0 1 1 .848-.848l2.02 2.02v-.837c0-.47.179-.925.504-1.264a1.71 1.71 0 0 1 1.88-.413 1.8 1.8 0 0 1 .424-.73 1.73 1.73 0 0 1 1.247-.536m0 1.2a.53.53 0 0 0-.382.167.63.63 0 0 0-.17.433v5.483l5.514 5.513c.127-.43.196-.88.196-1.339V6.63a.63.63 0 0 0-.17-.434.53.53 0 0 0-.382-.167.53.53 0 0 0-.381.167.6.6 0 0 0-.158.31l-.012.124V10a.6.6 0 0 1-1.2 0V4.343a.6.6 0 0 0-.045-.238.6.6 0 0 0-.125-.195.515.515 0 0 0-.763 0 .6.6 0 0 0-.17.433v.008l-.056 4.513a.6.6 0 0 1-1.199-.014l.055-4.514V3.2a.63.63 0 0 0-.17-.433.53.53 0 0 0-.382-.167M7.903 3.743a.53.53 0 0 0-.382.167.63.63 0 0 0-.17.433V6.38l1.103 1.102v-3.14l-.012-.121a.6.6 0 0 0-.158-.31.53.53 0 0 0-.38-.168"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HandRaisedOffFilledIcon;
@@ -0,0 +1,12 @@
+function HearthFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.6832 5.96499C14.3718 4.67834 12.2455 4.67834 10.9341 5.96499L10.0002 6.88122L9.06627 5.96499C7.75482 4.67834 5.62854 4.67834 4.31708 5.96499C3.00563 7.25165 3.00563 9.33772 4.31709 10.6244L10.0002 16.6667L15.6832 10.6244C16.9947 9.33772 16.9947 7.25165 15.6832 5.96499Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HearthFilledIcon;
@@ -0,0 +1,12 @@
+function HomeFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.1 17v-3.56c0-.565-.221-1.109-.615-1.51A2.08 2.08 0 0 0 10 11.307c-.557 0-1.091.225-1.485.625s-.615.944-.615 1.51V17H4.4a1.4 1.4 0 0 1-.99-.417A1.44 1.44 0 0 1 3 15.576V7.84c0-.245.063-.487.182-.701s.29-.393.498-.52l5.6-3.416a1.38 1.38 0 0 1 1.44 0l5.6 3.417A1.43 1.43 0 0 1 17 7.84v7.736c0 .378-.148.74-.41 1.007a1.4 1.4 0 0 1-.99.417z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default HomeFilledIcon;
@@ -0,0 +1,14 @@
+function HomeIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.667 8.184v6.65a1 1 0 0 1-1 1H13a1 1 0 0 1-1-1v-2a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H4.334a1 1 0 0 1-1-1v-6.65a1 1 0 0 1 .385-.788l5.666-4.417a1 1 0 0 1 1.23 0l5.667 4.417a1 1 0 0 1 .385.788Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+      />
+    </svg>
+  );
+}
+
+export default HomeIcon;
@@ -0,0 +1,12 @@
+function LightningIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.71 3h4.91l-3 4.9h4.09L8.166 17l1.364-6.65H5.711z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default LightningIcon;
@@ -0,0 +1,15 @@
+function LinkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.854 7.622a3.23 3.23 0 0 1 .892 5.201l-3.23 3.23a3.23 3.23 0 1 1-4.57-4.568l1.262-1.262m9.584-.446 1.262-1.262a3.23 3.23 0 1 0-4.57-4.569l-3.23 3.231a3.23 3.23 0 0 0 .892 5.2"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default LinkIcon;
@@ -0,0 +1,35 @@
+function LoaderIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g
+        clipPath="url(#paint0_angular_5431_46786_clip_path)"
+        data-figma-skip-parse="true"
+      >
+        <g transform="matrix(0.00466667 0.00466667 -0.00466667 0.00466667 10 10.0002)">
+          <foreignObject x={-1750} y={-1750} width={3500} height={3500}>
+            <div
+              style={{
+                background:
+                  "conic-gradient(from 90deg,rgba(123, 96, 243, 0.0195) 0deg,rgba(123, 96, 243, 1) 314.826deg,rgba(123, 96, 243, 0) 353.741deg,rgba(123, 96, 243, 0.0195) 360deg)",
+                height: "100%",
+                width: "100%",
+                opacity: 1,
+              }}
+            />
+          </foreignObject>
+        </g>
+      </g>
+      <path
+        d="M15.8333 10.0002C16.2935 10.0002 16.672 9.62558 16.6147 9.1689C16.4542 7.89178 15.9263 6.68189 15.0866 5.69075C14.0664 4.48659 12.6521 3.68341 11.0954 3.4241C9.5386 3.16479 7.94032 3.46618 6.58491 4.27464C5.2295 5.0831 4.20485 6.3462 3.69328 7.83921C3.18172 9.33221 3.2164 10.9583 3.79118 12.4281C4.36595 13.8979 5.44353 15.1162 6.83219 15.8661C8.22085 16.616 9.83053 16.849 11.3748 16.5235C12.6459 16.2556 13.8049 15.6237 14.7149 14.7134C15.0403 14.3879 14.971 13.8599 14.6075 13.5776C14.2439 13.2953 13.7244 13.3676 13.3857 13.6793C12.7279 14.2846 11.9157 14.7061 11.0311 14.8926C9.8729 15.1367 8.66567 14.9619 7.6242 14.3995C6.58274 13.8371 5.77457 12.9234 5.3435 11.8211C4.91243 10.7187 4.88642 9.49921 5.27008 8.37949C5.65375 7.25976 6.42221 6.31246 7.43875 5.70613C8.45528 5.0998 9.65396 4.87376 10.8215 5.06824C11.989 5.26271 13.0497 5.86509 13.8149 6.76819C14.3993 7.45798 14.7823 8.28905 14.9306 9.17059C15.007 9.62448 15.373 10.0002 15.8333 10.0002Z"
+        data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:1.0},&#34;position&#34;:0.87451690435409546},{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:0.0},&#34;position&#34;:0.98261332511901855}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:1.0},&#34;position&#34;:0.87451690435409546},{&#34;color&#34;:{&#34;r&#34;:0.48235294222831726,&#34;g&#34;:0.37647059559822083,&#34;b&#34;:0.95294117927551270,&#34;a&#34;:0.0},&#34;position&#34;:0.98261332511901855}],&#34;transform&#34;:{&#34;m00&#34;:9.3333330154418945,&#34;m01&#34;:-9.3333330154418945,&#34;m02&#34;:10.000001907348633,&#34;m10&#34;:9.3333330154418945,&#34;m11&#34;:9.3333330154418945,&#34;m12&#34;:0.66682958602905273},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"
+      />
+      <defs>
+        <clipPath id="paint0_angular_5431_46786_clip_path">
+          <path d="M15.8333 10.0002C16.2935 10.0002 16.672 9.62558 16.6147 9.1689C16.4542 7.89178 15.9263 6.68189 15.0866 5.69075C14.0664 4.48659 12.6521 3.68341 11.0954 3.4241C9.5386 3.16479 7.94032 3.46618 6.58491 4.27464C5.2295 5.0831 4.20485 6.3462 3.69328 7.83921C3.18172 9.33221 3.2164 10.9583 3.79118 12.4281C4.36595 13.8979 5.44353 15.1162 6.83219 15.8661C8.22085 16.616 9.83053 16.849 11.3748 16.5235C12.6459 16.2556 13.8049 15.6237 14.7149 14.7134C15.0403 14.3879 14.971 13.8599 14.6075 13.5776C14.2439 13.2953 13.7244 13.3676 13.3857 13.6793C12.7279 14.2846 11.9157 14.7061 11.0311 14.8926C9.8729 15.1367 8.66567 14.9619 7.6242 14.3995C6.58274 13.8371 5.77457 12.9234 5.3435 11.8211C4.91243 10.7187 4.88642 9.49921 5.27008 8.37949C5.65375 7.25976 6.42221 6.31246 7.43875 5.70613C8.45528 5.0998 9.65396 4.87376 10.8215 5.06824C11.989 5.26271 13.0497 5.86509 13.8149 6.76819C14.3993 7.45798 14.7823 8.28905 14.9306 9.17059C15.007 9.62448 15.373 10.0002 15.8333 10.0002Z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default LoaderIcon;
@@ -0,0 +1,12 @@
+function MagicIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.434 8.242a.83.83 0 0 1-.158.508.83.83 0 0 1-.434.317l-1.425.475a3 3 0 0 0-1.166.716 2.9 2.9 0 0 0-.717 1.167l-.5 1.417a.83.83 0 0 1-.3.425.9.9 0 0 1-.517.158.834.834 0 0 1-.833-.592l-.475-1.425a2.9 2.9 0 0 0-.717-1.166 3.2 3.2 0 0 0-1.166-.725L2.6 9.05a.9.9 0 0 1-.425-.308A.9.9 0 0 1 2 8.225a.83.83 0 0 1 .591-.833l1.434-.475a2.95 2.95 0 0 0 1.9-1.9L6.4 3.608A.83.83 0 0 1 7.192 3c.18 0 .355.05.509.142a.9.9 0 0 1 .333.425l.483 1.45a2.95 2.95 0 0 0 1.9 1.9l1.417.5a.83.83 0 0 1 .425.316.83.83 0 0 1 .175.509M16 14.51a.53.53 0 0 1-.09.29.53.53 0 0 1-.248.184l-.664.221a1.3 1.3 0 0 0-.496.306c-.138.14-.243.309-.306.494l-.227.653a.47.47 0 0 1-.185.247.53.53 0 0 1-.295.095.53.53 0 0 1-.301-.1.53.53 0 0 1-.18-.247l-.216-.658a1.3 1.3 0 0 0-.306-.49 1.16 1.16 0 0 0-.49-.305l-.66-.221a.5.5 0 0 1-.253-.184.525.525 0 0 1 .253-.774l.66-.216a1.32 1.32 0 0 0 .807-.805l.216-.647a.53.53 0 0 1 .169-.248.53.53 0 0 1 .29-.105.53.53 0 0 1 .3.084c.089.06.157.144.196.242l.222.674a1.31 1.31 0 0 0 .807.805l.66.227a.5.5 0 0 1 .242.184.5.5 0 0 1 .095.295M14.907 3.784A.55.55 0 0 0 15 3.505c0-.1-.033-.197-.093-.278a.55.55 0 0 0-.223-.163l-.344-.115a.6.6 0 0 1-.175-.109.5.5 0 0 1-.109-.18l-.114-.35a.55.55 0 0 0-.175-.223.5.5 0 0 0-.289-.087.55.55 0 0 0-.267.104.55.55 0 0 0-.153.218l-.114.338a.5.5 0 0 1-.11.18.5.5 0 0 1-.18.11l-.332.108a.5.5 0 0 0-.23.164A.5.5 0 0 0 12 3.5c0 .1.03.196.087.278.06.076.14.134.23.17l.338.108a.4.4 0 0 1 .174.11q.079.072.11.174l.114.338c.032.096.093.18.174.24a.6.6 0 0 0 .268.082.45.45 0 0 0 .283-.098.5.5 0 0 0 .158-.213l.12-.344a.46.46 0 0 1 .284-.283l.338-.115a.45.45 0 0 0 .23-.163"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MagicIcon;
@@ -0,0 +1,15 @@
+function MailIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18.125 5.625v8.75a1.875 1.875 0 0 1-1.875 1.875H3.75a1.875 1.875 0 0 1-1.875-1.875v-8.75m16.25 0A1.875 1.875 0 0 0 16.25 3.75H3.75a1.875 1.875 0 0 0-1.875 1.875m16.25 0v.202a1.88 1.88 0 0 1-.892 1.597l-6.25 3.846a1.88 1.88 0 0 1-1.966 0l-6.25-3.845a1.88 1.88 0 0 1-.892-1.597v-.203"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default MailIcon;
@@ -0,0 +1,36 @@
+function ManagersIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.264 8.611a2.43 2.43 0 1 0 0-4.861 2.43 2.43 0 0 0 0 4.861Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.988 4.097a2.43 2.43 0 0 1 0 4.167"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.06 15.834v.416h10.416v-.416c0-1.556 0-2.334-.302-2.928a2.78 2.78 0 0 0-1.214-1.214c-.594-.303-1.372-.303-2.928-.303H7.504c-1.555 0-2.333 0-2.927.303a2.78 2.78 0 0 0-1.214 1.214c-.303.594-.303 1.372-.303 2.928Z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.946 16.25v-.417c0-1.555 0-2.333-.302-2.927a2.78 2.78 0 0 0-1.214-1.214"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ManagersIcon;
@@ -0,0 +1,16 @@
+function MicrophoneFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.333 4.667a2.667 2.667 0 1 1 5.333 0v5.866a2.666 2.666 0 1 1-5.333 0z"
+        fill="currentColor"
+      />
+      <path
+        d="M5.734 8.933a.533.533 0 0 1 .533.534v1.066a3.733 3.733 0 1 0 7.466 0V9.467a.533.533 0 0 1 1.067 0v1.066a4.8 4.8 0 0 1-4.267 4.771v1.63h2.134a.533.533 0 0 1 0 1.066H7.334a.533.533 0 0 1 0-1.067h2.133v-1.629a4.8 4.8 0 0 1-4.267-4.77V9.466a.533.533 0 0 1 .534-.534"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneFilledIcon;
@@ -0,0 +1,15 @@
+function MicrophoneIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 15.143c1.326 0 2.598-.482 3.536-1.34.937-.856 1.464-2.02 1.464-3.232V9.43m-5 5.714c-1.326 0-2.598-.482-3.536-1.34C5.527 12.948 5 11.784 5 10.572V9.43m5 5.714V18m-3.125 0h6.25M10 12.857c-.663 0-1.299-.24-1.768-.67a2.2 2.2 0 0 1-.732-1.616V4.286c0-.606.263-1.188.732-1.617A2.62 2.62 0 0 1 10 2c.663 0 1.299.24 1.768.67.469.428.732 1.01.732 1.616v6.285c0 .607-.263 1.188-.732 1.617a2.62 2.62 0 0 1-1.768.67"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneIcon;
@@ -0,0 +1,20 @@
+function MicrophoneOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.99 14.435a.6.6 0 1 1-.848.848L4.283 4.423a.6.6 0 1 1 .848-.847z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.34 11.895c.483.483.344 1.305-.34 1.305a2.667 2.667 0 0 1-2.667-2.667.682.682 0 0 1 1.164-.482zM10 2a2.67 2.67 0 0 1 2.666 2.667v5.866c0 .84-1.023.97-1.617.376l-3.13-3.13a2 2 0 0 1-.586-1.415V4.667A2.667 2.667 0 0 1 10 2"
+        fill="currentColor"
+      />
+      <path
+        d="M5.734 8.934a.533.533 0 0 1 .533.533v1.067a3.734 3.734 0 0 0 7.466 0V9.467a.533.533 0 0 1 1.067 0v1.067a4.8 4.8 0 0 1-4.267 4.77v1.63h2.134a.533.533 0 0 1 0 1.066H7.334a.533.533 0 0 1 0-1.066h2.133v-1.63a4.8 4.8 0 0 1-4.267-4.77V9.467a.533.533 0 0 1 .534-.533"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneOffFilledIcon;
@@ -0,0 +1,19 @@
+function MicrophoneOffIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.566 14.86 4.707 4M10 15.143c1.326 0 2.598-.482 3.536-1.34.937-.856 1.464-2.02 1.464-3.232V9.43m-5 5.714c-1.326 0-2.598-.482-3.536-1.34C5.527 12.948 5 11.784 5 10.572V9.43m5 5.714V18m-3.125 0h6.25"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.924 9.479a.6.6 0 0 1 .176.424v.668c0 .43.186.853.537 1.174a2.03 2.03 0 0 0 1.586.5c.242-.027.495.028.667.2.316.315.23.847-.207.94a3.3 3.3 0 0 1-.683.072 3.22 3.22 0 0 1-2.173-.826 2.8 2.8 0 0 1-.927-2.06v-.668a.6.6 0 0 1 1.024-.424m2.377-8.065c.697.063 1.36.345 1.872.813.586.536.927 1.276.927 2.06v6.284c0 .412-.096.81-.271 1.174-.16.33-.593.35-.852.091-.213-.213-.227-.547-.14-.836q.063-.21.063-.429V4.286c0-.429-.186-.853-.537-1.174a2 2 0 0 0-1.17-.504L10 2.6c-.52 0-1.01.19-1.363.512A1.6 1.6 0 0 0 8.1 4.286v2.225a.6.6 0 0 1-1.2 0V4.286c0-.783.34-1.523.927-2.06A3.22 3.22 0 0 1 10 1.4z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default MicrophoneOffIcon;
@@ -0,0 +1,15 @@
+function MoreIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.008 10.005v-.007h-.006v.007zm-6 0v-.007h-.006v.007zm12 0v-.007h-.006v.007z"
+        stroke="currentColor"
+        strokeWidth={3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default MoreIcon;
@@ -0,0 +1,12 @@
+function PhotoFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.246 3.265 1.349 2.824h2.352c.603 0 1.327.488 1.327 1.09v8.73A1.09 1.09 0 0 1 16.184 17H3.817a1.09 1.09 0 0 1-1.09-1.09V7.18c0-.603.252-1.091.855-1.091h2.824l1.54-2.824zm-2.245 5.713a2.567 2.567 0 1 0 0 5.134 2.567 2.567 0 0 0 0-5.134"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default PhotoFilledIcon;
@@ -0,0 +1,14 @@
+function PinIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.125 1.875H17.5a.625.625 0 0 1 .625.625v4.375a.625.625 0 1 1-1.25 0V4.008L6.692 14.192a.625.625 0 0 1-.884-.884L15.992 3.125h-2.867a.625.625 0 1 1 0-1.25m-8.75 3.75a1.25 1.25 0 0 0-1.25 1.25v8.75a1.25 1.25 0 0 0 1.25 1.25h8.75a1.25 1.25 0 0 0 1.25-1.25V8.75a.625.625 0 1 1 1.25 0v6.875a2.5 2.5 0 0 1-2.5 2.5h-8.75a2.5 2.5 0 0 1-2.5-2.5v-8.75a2.5 2.5 0 0 1 2.5-2.5h6.875a.625.625 0 1 1 0 1.25z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default PinIcon;
@@ -0,0 +1,15 @@
+function PlusIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m10.025 4.167-.015 11.666M4.167 10h11.666"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default PlusIcon;
@@ -0,0 +1,14 @@
+function QRIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 4.063c0-.864.7-1.563 1.563-1.563h3.75c.863 0 1.562.7 1.562 1.563v3.75c0 .863-.7 1.562-1.562 1.562h-3.75A1.56 1.56 0 0 1 2.5 7.813zm1.563-.313a.31.31 0 0 0-.313.313v3.75c0 .172.14.312.313.312h3.75a.31.31 0 0 0 .312-.312v-3.75a.31.31 0 0 0-.312-.313zm6.562.313c0-.864.7-1.563 1.563-1.563h3.75c.862 0 1.562.7 1.562 1.563v3.75c0 .863-.7 1.562-1.562 1.562h-3.75a1.563 1.563 0 0 1-1.563-1.562zm1.563-.313a.313.313 0 0 0-.313.313v3.75c0 .172.14.312.313.312h3.75a.313.313 0 0 0 .312-.312v-3.75a.31.31 0 0 0-.312-.313zM5 5.625A.625.625 0 0 1 5.625 5h.625a.625.625 0 0 1 .625.625v.625a.625.625 0 0 1-.625.625h-.625A.625.625 0 0 1 5 6.25zm8.125 0A.625.625 0 0 1 13.75 5h.625a.625.625 0 0 1 .625.625v.625a.625.625 0 0 1-.625.625h-.625a.625.625 0 0 1-.625-.625zM2.5 12.188c0-.864.7-1.563 1.563-1.563h3.75c.863 0 1.562.7 1.562 1.563v3.75c0 .862-.7 1.562-1.562 1.562h-3.75A1.563 1.563 0 0 1 2.5 15.938zm1.563-.313a.31.31 0 0 0-.313.313v3.75c0 .172.14.312.313.312h3.75a.31.31 0 0 0 .312-.312v-3.75a.313.313 0 0 0-.312-.313zm6.562-.625a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zm5 0a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zM5 13.75a.625.625 0 0 1 .625-.625h.625a.625.625 0 0 1 .625.625v.625A.625.625 0 0 1 6.25 15h-.625A.625.625 0 0 1 5 14.375zm8.125 0a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zm-2.5 2.5a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625zm5 0a.624.624 0 0 1 .625-.625h.625a.624.624 0 0 1 .625.625v.625a.624.624 0 0 1-.625.625h-.625a.624.624 0 0 1-.625-.625z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default QRIcon;
@@ -0,0 +1,15 @@
+function QuestionMarkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.35 6.515c.911-.797 2.389-.797 3.3 0s.911 2.09 0 2.887c-.158.14-.335.253-.521.344-.58.28-1.128.777-1.128 1.42v.584M17 10a7.001 7.001 0 0 1-11.95 4.95A7 7 0 1 1 17 10m-7 4.083h.006v.007H10z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default QuestionMarkIcon;
@@ -0,0 +1,14 @@
+function RestartIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.963 8.383a6.25 6.25 0 0 1 10.456-2.804l1.586 1.586h-2.652a.625.625 0 1 0 0 1.25h4.16a.625.625 0 0 0 .625-.625V3.63a.625.625 0 0 0-1.25 0v2.65l-1.584-1.583A7.5 7.5 0 0 0 2.755 8.058a.625.625 0 1 0 1.208.324m12.84 2.793a.625.625 0 0 0-.766.441A6.25 6.25 0 0 1 5.58 14.422l-1.585-1.586h2.653a.625.625 0 1 0 0-1.25H2.487a.625.625 0 0 0-.625.625v4.16a.625.625 0 1 0 1.25 0v-2.65l1.583 1.583a7.5 7.5 0 0 0 12.55-3.362.625.625 0 0 0-.442-.765"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default RestartIcon;
@@ -0,0 +1,22 @@
+function ScreenIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.95 3.208H4.05c-.58 0-1.05.493-1.05 1.1v8.8c0 .608.47 1.1 1.05 1.1h11.9c.58 0 1.05-.492 1.05-1.1v-8.8c0-.607-.47-1.1-1.05-1.1Zm-5.95 11v3"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 17.208h10"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ScreenIcon;
@@ -0,0 +1,22 @@
+function SearchIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle
+        cx={9.583}
+        cy={9.583}
+        r={4.817}
+        stroke="currentColor"
+        strokeWidth={1.2}
+      />
+      <path
+        d="m15 15.833-2.5-2.5"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default SearchIcon;
@@ -0,0 +1,14 @@
+function SendIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.216 15.81a.5.5 0 0 1-.929.037l-1.543-3.473a.5.5 0 0 1 .082-.535l4.845-5.468L14 6l-.371.329-5.47 4.844a.5.5 0 0 1-.534.082L4.152 9.712a.5.5 0 0 1 .038-.929l9.83-3.44a.5.5 0 0 1 .637.637z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SendIcon;
@@ -0,0 +1,12 @@
+function ShareFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.833 2.874a.5.5 0 0 1 .854-.354l6.283 6.283a.5.5 0 0 1-.01.717l-6.283 5.934a.5.5 0 0 1-.844-.364v-2.923a.477.477 0 0 0-.5-.485c-4.104.257-6.456 3.63-7.377 5.304-.106.194-.447.11-.44-.11.196-6.302 2.256-10.387 7.816-10.616a.52.52 0 0 0 .501-.51z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default ShareFilledIcon;
@@ -0,0 +1,15 @@
+function ShareIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m10.833 1.667 7.5 7.5-7.5 7.083v-4.583c-5.833 0-8.333 6.25-8.333 6.25 0-7.084 2.083-11.667 8.333-11.667z"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ShareIcon;
@@ -0,0 +1,12 @@
+function SortIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.857 11.526 10 14.39l-2.857-2.864a.669.669 0 1 0-.946.946l3.33 3.33a.667.667 0 0 0 .946 0l3.331-3.33a.67.67 0 0 0-.946-.946M7.142 8.474 9.999 5.61l2.858 2.865a.666.666 0 0 0 1.092-.216.67.67 0 0 0-.146-.73l-3.33-3.33a.666.666 0 0 0-.947 0l-3.33 3.33a.669.669 0 0 0 .946.946"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SortIcon;
@@ -0,0 +1,16 @@
+function SoundIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11.25 3.383c0-1.113-1.347-1.67-2.133-.883l-3.75 3.75h-1.61c-.951 0-1.932.553-2.217 1.587A8 8 0 0 0 1.25 10c0 .748.1 1.473.292 2.162.284 1.034 1.265 1.588 2.216 1.588h1.608l3.75 3.75c.787.787 2.134.23 2.134-.883zm4.237.872a.625.625 0 0 1 .883 0 8.124 8.124 0 0 1 0 11.49.625.625 0 0 1-.883-.883 6.873 6.873 0 0 0 0-9.724.625.625 0 0 1 0-.883"
+        fill="currentColor"
+      />
+      <path
+        d="M13.277 6.464a.624.624 0 0 1 .884 0 5 5 0 0 1 0 7.072.625.625 0 0 1-.883-.884 3.75 3.75 0 0 0 0-5.304.625.625 0 0 1 0-.883z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default SoundIcon;
@@ -0,0 +1,13 @@
+function StartIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width={20} height={20} rx={10} fill="#fff" fillOpacity={0.1} />
+      <path
+        d="M13.438 9.595a.5.5 0 0 1 0 .81l-4.645 3.353A.5.5 0 0 1 8 13.353V6.647a.5.5 0 0 1 .793-.405z"
+        fill="#D9D9D9"
+      />
+    </svg>
+  );
+}
+
+export default StartIcon;
@@ -0,0 +1,15 @@
+function TrashIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.283 7.5-.288 7.5m-3.99 0-.288-7.5m8.306-2.675q.428.065.852.138m-.852-.138-.89 11.57a1.875 1.875 0 0 1-1.87 1.73H6.737a1.875 1.875 0 0 1-1.87-1.73l-.89-11.57m12.046 0a40 40 0 0 0-2.898-.33m-9.148.33q-.427.063-.852.137m.852-.137a40 40 0 0 1 2.898-.33m6.25 0V3.73c0-.984-.758-1.804-1.742-1.834a43 43 0 0 0-2.766 0c-.984.03-1.742.851-1.742 1.834v.763m6.25 0a41 41 0 0 0-6.25 0"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default TrashIcon;
@@ -0,0 +1,13 @@
+function UnlinkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.381 7A3.38 3.38 0 0 0 3 10.381v.238A3.38 3.38 0 0 0 6.381 14h2.037a3.43 3.43 0 0 1-1.085-1.4H6.5c-2.8 0-2.8-4.2 0-4.2h2.1q.079.001.158.008L7.35 7zm5.201 0a3.43 3.43 0 0 1 1.085 1.4h.833c2.225.002 2.919 3.01.92 3.986l1.055 1.056A3.38 3.38 0 0 0 17 10.62v-.238A3.38 3.38 0 0 0 13.619 7zm-2.528.021 3.03 3.029a3.38 3.38 0 0 0-3.03-3.029m-.995 2.367c-.04.129-.103.412-.103.412a4 4 0 0 0-.056.581v.238A3.38 3.38 0 0 0 11.281 14h2.338q.332 0 .659-.066L12.943 12.6H11.4a2.1 2.1 0 0 1-1.974-2.8zm2.628.952a2.1 2.1 0 0 1-.113.86h.972z"
+        fill="currentColor"
+      />
+      <path d="M3.854 3 3 3.854 16.16 17l.84-.854z" fill="currentColor" />
+    </svg>
+  );
+}
+
+export default UnlinkIcon;
@@ -0,0 +1,18 @@
+function UsersFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.875 5.625a3.125 3.125 0 1 1 6.25 0 3.125 3.125 0 0 1-6.25 0m6.25 2.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m-11.25 0a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0m3.383 4.473A5.62 5.62 0 0 1 10 10a5.62 5.62 0 0 1 5.59 6.248.63.63 0 0 1-.31.474A10.6 10.6 0 0 1 10 18.125c-1.92 0-3.725-.51-5.28-1.403a.63.63 0 0 1-.31-.474 5.66 5.66 0 0 1 .848-3.65"
+        fill="currentColor"
+      />
+      <path
+        d="M4.235 11.878a6.9 6.9 0 0 0-1.09 4.28 8 8 0 0 1-1.47-.367l-.096-.034a.47.47 0 0 1-.31-.405l-.009-.101a3.125 3.125 0 0 1 2.975-3.373m12.62 4.28a6.9 6.9 0 0 0-1.09-4.28 3.127 3.127 0 0 1 2.975 3.373l-.008.1a.47.47 0 0 1-.311.406l-.096.033q-.709.251-1.47.367"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default UsersFilledIcon;
@@ -0,0 +1,15 @@
+function UsersIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.5 15.94c.71.206 1.447.31 2.187.31a7.8 7.8 0 0 0 3.435-.793 3.437 3.437 0 0 0-6.278-2.078m.656 2.561v-.002a5.3 5.3 0 0 0-.656-2.559m.656 2.561v.088A10.27 10.27 0 0 1 7.187 17.5c-1.943 0-3.76-.538-5.312-1.472l-.001-.09a5.312 5.312 0 0 1 9.97-2.559M10 5.313a2.813 2.813 0 1 1-5.625 0 2.813 2.813 0 0 1 5.625 0m6.875 1.875a2.188 2.188 0 1 1-4.375 0 2.188 2.188 0 0 1 4.375 0"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default UsersIcon;
@@ -0,0 +1,12 @@
+function VideoFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.285 4.285a2.286 2.286 0 0 0-2.286 2.286v6.858a2.286 2.286 0 0 0 2.286 2.285h6.286a2.286 2.286 0 0 0 2.286-2.285V6.57a2.286 2.286 0 0 0-2.286-2.286zm11.764 10.858L14 13.093V6.906l2.05-2.05c.72-.72 1.95-.21 1.95.809v8.67c0 1.018-1.23 1.528-1.95.808"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default VideoFilledIcon;
@@ -0,0 +1,15 @@
+function VideoIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.813 8.875 3.54-3.54a.562.562 0 0 1 .96.397v8.535a.562.562 0 0 1-.96.398l-3.54-3.54m-8.438 3.938h6.75a1.687 1.687 0 0 0 1.688-1.688v-6.75a1.687 1.687 0 0 0-1.688-1.687h-6.75a1.687 1.687 0 0 0-1.687 1.687v6.75a1.687 1.687 0 0 0 1.687 1.688"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default VideoIcon;
@@ -0,0 +1,16 @@
+function VideoOffFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.403 14.788q-.098.136-.216.257a2.3 2.3 0 0 1-1.616.669H4.285A2.286 2.286 0 0 1 2 13.429V6.57c0-.583.225-1.142.623-1.565zm3.646-9.932c.72-.72 1.95-.21 1.951.808v8.671c0 1.018-1.232 1.528-1.951.808L14 13.093V6.906zm-5.478-.57a2.287 2.287 0 0 1 2.285 2.285v6.858l-.005.11L3.68 4.368q.294-.083.605-.084z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.565 16.644c.322.322.392.772.158 1.006s-.684.164-1.006-.158L1.809 2.584c-.321-.321-.392-.771-.158-1.006s.685-.163 1.006.158z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default VideoOffFilledIcon;
@@ -0,0 +1,15 @@
+function VideoOffIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="m12.781 8.875 3.54-3.54a.563.563 0 0 1 .96.397v8.535a.562.562 0 0 1-.96.398l-3.54-3.54M9.97 15.063H4.344a1.687 1.687 0 0 1-1.688-1.688V7.75m9.631 6.818 1.057 1.057m-1.057-1.057c.305-.305.494-.727.494-1.193v-6.75a1.687 1.687 0 0 0-1.687-1.687h-6.75c-.466 0-.888.189-1.194.494m9.137 9.136L3.151 5.432m0 0L2.094 4.375"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default VideoOffIcon;
@@ -0,0 +1,12 @@
+function WarningIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.375 2.815c.722-1.25 2.527-1.25 3.249 0l6.128 10.623c.72 1.25-.181 2.812-1.623 2.812H3.87c-1.442 0-2.345-1.562-1.623-2.812zM10 12.743a.75.75 0 0 0-.75.75v.007c0 .414.336.75.75.75h.006a.75.75 0 0 0 .75-.75v-.007a.75.75 0 0 0-.75-.75zm0-6.493a.75.75 0 0 0-.75.75v3.125a.75.75 0 0 0 1.5 0V7a.75.75 0 0 0-.75-.75"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default WarningIcon;
@@ -0,0 +1,12 @@
+function XMarkFilledIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14m2.424 4.576a.6.6 0 0 0-.848 0L10 9.152 8.424 7.576a.599.599 0 1 0-.848.848L9.152 10l-1.576 1.576a.599.599 0 1 0 .848.848L10 10.848l1.576 1.576a.599.599 0 1 0 .848-.848L10.848 10l1.576-1.576a.6.6 0 0 0 0-.848"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default XMarkFilledIcon;
@@ -0,0 +1,15 @@
+function XMarkIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 15 15 5M5 5l10 10"
+        stroke="currentColor"
+        strokeWidth={1.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default XMarkIcon;
@@ -0,0 +1,57 @@
+import clsx from "clsx";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant?: "critical" | "tertiary" | "secondary" | "primary" | "cta" | "menu";
+  className?: string;
+  size?: "small" | "medium" | "large";
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}
+
+function Button({
+  children,
+  variant = "primary",
+  className,
+  size = "medium",
+  ref,
+  type,
+  onClick,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      ref={ref}
+      {...props}
+      onClick={(e) => {
+        if (type !== "submit" && variant !== "menu") e.preventDefault();
+        onClick?.(e);
+      }}
+      className={clsx(
+        "transition-all cursor-pointer disabled:!cursor-default flex outline-none gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:!text-[#D6D6D6]",
+        variant === "menu" &&
+          "text-[#7D7D7D] hover:bg-[#F3F3F3] active:bg-[#F3F1FD] active:text-[#7B60F3]",
+        variant === "cta" &&
+          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
+        variant === "primary" &&
+          "bg-[#F3F1FD] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F3F1FD]",
+        variant === "secondary" &&
+          "bg-[#FFFFFF] hover:bg-[#F0F0F0] active:text-[#7B60F3] active:bg-[#F3F1FD]",
+        variant === "tertiary" &&
+          "bg-[#FFFFFF] hover:bg-[#F0F0F0] text-[#7D7D7D] active:text-[#141414] active:bg-[#F3F3F3]",
+        variant === "critical" &&
+          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
+        size === "large" &&
+          "2xl:p-[1.111vw] p-4 button-m 2xl:rounded-[1.111vw] rounded-2xl",
+        size === "medium" &&
+          "2xl:p-[0.833vw] p-3 button-s 2xl:rounded-[0.833vw] rounded-xl",
+        size === "small" &&
+          "2xl:p-[0.556vw] p-2 button-s 2xl:rounded-[0.556vw] rounded-lg",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default Button;
@@ -0,0 +1,47 @@
+import clsx from "clsx";
+
+interface ControlButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size: "small" | "large";
+  icon: React.ReactNode;
+  enabled: boolean;
+}
+
+function ControlButton({
+  size,
+  enabled,
+  icon,
+  className,
+  onClick,
+  ...props
+}: ControlButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      {...props}
+      className={clsx(
+        "backdrop-blur-[10px] rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none",
+        size === "large" ? "2xl:p-[0.833vw] p-3" : "2xl:p-[0.417vw] p-[6px]",
+        !enabled
+          ? "bg-[#FF4517] hover:bg-[#FF4517]/85"
+          : size === "large"
+          ? "bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
+          : "bg-[#141414]/15 hover:bg-[#141414]/25",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "text-white",
+          size === "large"
+            ? "2xl:size-[1.111vw] size-4"
+            : "2xl:size-[0.833vw] size-3"
+        )}
+      >
+        {icon}
+      </div>
+    </button>
+  );
+}
+
+export default ControlButton;
@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+interface FloatingActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant: "default" | "critical";
+}
+
+function FloatingActionButton({
+  children,
+  variant = "default",
+  className,
+  onClick,
+  ...props
+}: FloatingActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(
+        "2xl:p-[0.833vw] p-3 rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none backdrop-blur-[10px]",
+        variant === "default" &&
+          "2xl:border-[0.069vw] border border-[#FFFFFF]/15 bg-[#000000]/15 hover:bg-[#000000]/25 hover:border-[#FFFFFF]/25 active:bg-[#7B60F3] active:border-[#FFFFFF]/25",
+        variant === "critical" && "bg-[#FF4517] hover:bg-[#FF4517]/85",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default FloatingActionButton;
@@ -0,0 +1,51 @@
+import clsx from "clsx";
+import LoaderIcon from "../icons/LoaderIcon";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  isLoading?: boolean;
+  errorMessage?: string;
+  isError?: boolean;
+  mask?: string;
+}
+
+function Input({
+  isError,
+  placeholder,
+  errorMessage,
+  isLoading,
+  children,
+  ...props
+}: InputProps) {
+  return (
+    <div className="relative">
+      <input
+        placeholder=""
+        className={clsx(
+          isError
+            ? "hover:ring-[#FF4517] focus:ring-[#FF4517]"
+            : "hover:ring-[#7B60F3] focus:ring-[#7B60F3]",
+          "peer bg-[#F6F6F6] rounded-[0.833vw] px-[1.111vw] pt-[19px] pb-[11px] outline-none ring-1 ring-transparent transition-all inline-block w-full h-[3.889vw] text-m"
+        )}
+        {...props}
+      />
+      {children}
+      {placeholder && (
+        <span className="absolute caption-m font-medium text-[#7D7D7D] left-[1.111vw] top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300 peer-focus:caption-xs peer-focus:top-[0.556vw] peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:caption-xs peer-[:not(:placeholder-shown)]:top-[0.556vw] peer-[:not(:placeholder-shown)]:translate-y-0">
+          {placeholder + (props.required ? "*" : "")}
+        </span>
+      )}
+      {isError && (
+        <div className="text-red-500 font-medium caption-s 2xl:mt-[0.556vw] mt-2">
+          {errorMessage}
+        </div>
+      )}
+      {isLoading && (
+        <div className="size-[1.389vw] text-[#7B60F3] animate-spin z-1 absolute right-[1.111vw] top-1/2 -translate-y-1/2">
+          <LoaderIcon />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Input;
@@ -1,3 +1,53 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+body {
+  color: #141414;
+}
+
+@layer utilities {
+  .title-l {
+    @apply text-2xl leading-[120%] tracking-[-0.02em];
+  }
+
+  .title-m {
+    @apply text-xl leading-[110%] tracking-[-0.02em];
+  }
+
+  .title-s {
+    @apply text-base leading-[110%] tracking-[-0.02em];
+  }
+
+  .text-m {
+    @apply text-base leading-[125%] tracking-[-0.02em];
+  }
+
+  .text-s {
+    @apply text-sm leading-[115%] tracking-[-0.02em];
+  }
+
+  /* .text-xs {
+    @apply text-xs leading-[110%] tracking-[-0.02em];
+  } */
+
+  .button-m {
+    @apply text-sm leading-[115%] tracking-[-0.02em];
+  }
+
+  .button-s {
+    @apply text-xs leading-[130%] tracking-[-0.02em];
+  }
+
+  .caption-m {
+    @apply text-sm leading-[120%] tracking-[-0.02em];
+  }
+
+  .caption-s {
+    @apply text-xs leading-[120%] tracking-[-0.02em];
+  }
+
+  .caption-xs {
+    @apply text-[10px] leading-[110%] tracking-[-0.02em];
+  }
+}
@@ -1,12 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
+    screens: {
+      "2xl": { min: "1440px" },
+    },
  },
  plugins: [],
-}
-
+};