quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.2

package/src/Presentation/components/UI/svgs/Icons/Navigation/SettingsField/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function SettingsField(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M35.09 23.7233C35.1634 23.1733 35.2 22.605 35.2 22C35.2 21.4133 35.1634 20.8267 35.0717 20.2767L38.7934 17.38C39.1234 17.1233 39.215 16.6283 39.0134 16.2617L35.4934 10.175C35.2734 9.77166 34.815 9.64333 34.4117 9.77166L30.03 11.5317C29.1134 10.835 28.1417 10.2483 27.06 9.80833L26.4 5.15166C26.3267 4.71166 25.96 4.39999 25.52 4.39999H18.48C18.04 4.39999 17.6917 4.71166 17.6184 5.15166L16.9584 9.80833C15.8767 10.2483 14.8867 10.8533 13.9884 11.5317L9.6067 9.77166C9.20337 9.62499 8.74504 9.77166 8.52504 10.175L5.02337 16.2617C4.80337 16.6467 4.8767 17.1233 5.24337 17.38L8.96504 20.2767C8.87337 20.8267 8.80004 21.4317 8.80004 22C8.80004 22.5683 8.8367 23.1733 8.92837 23.7233L5.2067 26.62C4.8767 26.8767 4.78504 27.3717 4.98671 27.7383L8.5067 33.825C8.7267 34.2283 9.18504 34.3567 9.58837 34.2283L13.97 32.4683C14.8867 33.165 15.8584 33.7517 16.94 34.1917L17.6 38.8483C17.6917 39.2883 18.04 39.6 18.48 39.6H25.52C25.96 39.6 26.3267 39.2883 26.3817 38.8483L27.0417 34.1917C28.1234 33.7517 29.1134 33.165 30.0117 32.4683L34.3934 34.2283C34.7967 34.375 35.255 34.2283 35.475 33.825L38.995 27.7383C39.215 27.335 39.1234 26.8767 38.775 26.62L35.09 23.7233ZM22 28.6C18.37 28.6 15.4 25.63 15.4 22C15.4 18.37 18.37 15.4 22 15.4C25.63 15.4 28.6 18.37 28.6 22C28.6 25.63 25.63 28.6 22 28.6Z"
+        id="SettingsField"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default SettingsField;

package/src/Presentation/components/UI/svgs/Icons/Status/Error/Error.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9999 11.8983L35.8049 35.7499H8.19492L21.9999 11.8983ZM21.9999 4.58325L1.83325 39.4166H42.1666L21.9999 4.58325ZM23.8333 30.2499H20.1666V33.9166H23.8333V30.2499ZM23.8333 19.2499H20.1666V26.5833H23.8333V19.2499Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Status/Error/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Error(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.9999 11.8983L35.8049 35.7499H8.19492L21.9999 11.8983ZM21.9999 4.58325L1.83325 39.4166H42.1666L21.9999 4.58325ZM23.8333 30.2499H20.1666V33.9166H23.8333V30.2499ZM23.8333 19.2499H20.1666V26.5833H23.8333V19.2499Z"
+        id="Error"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.9999 11.8983L35.8049 35.7499H8.19492L21.9999 11.8983ZM21.9999 4.58325L1.83325 39.4166H42.1666L21.9999 4.58325ZM23.8333 30.2499H20.1666V33.9166H23.8333V30.2499ZM23.8333 19.2499H20.1666V26.5833H23.8333V19.2499Z"
+        id="Error"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Error;

package/src/Presentation/components/UI/svgs/Icons/Status/Help/Help.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1667 33.0001H23.8334V29.3334H20.1667V33.0001ZM22.0001 3.66675C11.8801 3.66675 3.66675 11.8801 3.66675 22.0001C3.66675 32.1201 11.8801 40.3334 22.0001 40.3334C32.1201 40.3334 40.3334 32.1201 40.3334 22.0001C40.3334 11.8801 32.1201 3.66675 22.0001 3.66675ZM22.0001 36.6667C13.9151 36.6667 7.33341 30.0851 7.33341 22.0001C7.33341 13.9151 13.9151 7.33341 22.0001 7.33341C30.0851 7.33341 36.6667 13.9151 36.6667 22.0001C36.6667 30.0851 30.0851 36.6667 22.0001 36.6667ZM22.0001 11.0001C17.9484 11.0001 14.6667 14.2817 14.6667 18.3334H18.3334C18.3334 16.3167 19.9834 14.6667 22.0001 14.6667C24.0167 14.6667 25.6667 16.3167 25.6667 18.3334C25.6667 22.0001 20.1667 21.5417 20.1667 27.5001H23.8334C23.8334 23.3751 29.3334 22.9167 29.3334 18.3334C29.3334 14.2817 26.0517 11.0001 22.0001 11.0001Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Status/Help/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Help(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.1667 33.0001H23.8334V29.3334H20.1667V33.0001ZM22.0001 3.66675C11.8801 3.66675 3.66675 11.8801 3.66675 22.0001C3.66675 32.1201 11.8801 40.3334 22.0001 40.3334C32.1201 40.3334 40.3334 32.1201 40.3334 22.0001C40.3334 11.8801 32.1201 3.66675 22.0001 3.66675ZM22.0001 36.6667C13.9151 36.6667 7.33341 30.0851 7.33341 22.0001C7.33341 13.9151 13.9151 7.33341 22.0001 7.33341C30.0851 7.33341 36.6667 13.9151 36.6667 22.0001C36.6667 30.0851 30.0851 36.6667 22.0001 36.6667ZM22.0001 11.0001C17.9484 11.0001 14.6667 14.2817 14.6667 18.3334H18.3334C18.3334 16.3167 19.9834 14.6667 22.0001 14.6667C24.0167 14.6667 25.6667 16.3167 25.6667 18.3334C25.6667 22.0001 20.1667 21.5417 20.1667 27.5001H23.8334C23.8334 23.3751 29.3334 22.9167 29.3334 18.3334C29.3334 14.2817 26.0517 11.0001 22.0001 11.0001Z"
+        id="Help"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Help;

package/src/Presentation/components/UI/svgs/Icons/Status/Information/Information.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1667 27.5001H23.8334V31.1667H20.1667V27.5001ZM20.1667 12.8334H23.8334V23.8334H20.1667V12.8334ZM21.9817 3.66675C11.8617 3.66675 3.66675 11.8801 3.66675 22.0001C3.66675 32.1201 11.8617 40.3334 21.9817 40.3334C32.1201 40.3334 40.3334 32.1201 40.3334 22.0001C40.3334 11.8801 32.1201 3.66675 21.9817 3.66675ZM22.0001 36.6667C13.8967 36.6667 7.33341 30.1034 7.33341 22.0001C7.33341 13.8967 13.8967 7.33341 22.0001 7.33341C30.1034 7.33341 36.6667 13.8967 36.6667 22.0001C36.6667 30.1034 30.1034 36.6667 22.0001 36.6667Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Status/Information/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Information(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.1667 27.5001H23.8334V31.1667H20.1667V27.5001ZM20.1667 12.8334H23.8334V23.8334H20.1667V12.8334ZM21.9817 3.66675C11.8617 3.66675 3.66675 11.8801 3.66675 22.0001C3.66675 32.1201 11.8617 40.3334 21.9817 40.3334C32.1201 40.3334 40.3334 32.1201 40.3334 22.0001C40.3334 11.8801 32.1201 3.66675 21.9817 3.66675ZM22.0001 36.6667C13.8967 36.6667 7.33341 30.1034 7.33341 22.0001C7.33341 13.8967 13.8967 7.33341 22.0001 7.33341C30.1034 7.33341 36.6667 13.8967 36.6667 22.0001C36.6667 30.1034 30.1034 36.6667 22.0001 36.6667Z"
+        id="Information"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Information;

package/src/Presentation/components/UI/svgs/Icons/Status/InformationFill/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function InformationFill(theme: IconTheme | undefined = undefined) {
+  return (
+    // <svg
+    //   width={theme && theme.width ? theme.width : '44'}
+    //   height={theme && theme.height ? theme.height : '44'}
+    //   viewBox="0 0 44 44"
+    //   fill="none"
+    //   xmlns="http://www.w3.org/2000/svg"
+    // >
+    //   <rect
+    //     width="32"
+    //     height="32"
+    //     rx="4"
+    //     fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+    //   />
+    //   <path
+    //     d="M15 19H17V21H15V19ZM15 11H17V17H15V11ZM15.99 6C10.47 6 6 10.48 6 16C6 21.52 10.47 26 15.99 26C21.52 26 26 21.52 26 16C26 10.48 21.52 6 15.99 6ZM16 24C11.58 24 8 20.42 8 16C8 11.58 11.58 8 16 8C20.42 8 24 11.58 24 16C24 20.42 20.42 24 16 24Z"
+    //     fill="#3978FC"
+    //   />
+    // </svg>
+    <svg
+      className="status-information"
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '24'}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11 15H13V17H11V15ZM11 7H13V13H11V7ZM11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default InformationFill;

package/src/Presentation/components/UI/svgs/Icons/Status/Loader/Loader.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1666 7.46163V3.7583C16.4816 4.12497 13.1266 5.59163 10.4133 7.80997L13.0166 10.4316C15.0516 8.85497 17.49 7.79163 20.1666 7.46163ZM33.5866 7.80997C30.8733 5.59163 27.5183 4.12497 23.8333 3.7583V7.46163C26.51 7.79163 28.9483 8.85497 30.9833 10.4316L33.5866 7.80997ZM36.5383 20.1666H40.2416C39.875 16.4816 38.4083 13.1266 36.19 10.4133L33.5683 13.0166C35.145 15.0516 36.2083 17.49 36.5383 20.1666ZM10.4316 13.0166L7.80997 10.4133C5.59163 13.1266 4.12497 16.4816 3.7583 20.1666H7.46163C7.79163 17.49 8.85497 15.0516 10.4316 13.0166ZM7.46163 23.8333H3.7583C4.12497 27.5183 5.59163 30.8733 7.80997 33.5866L10.4316 30.965C8.85497 28.9483 7.79163 26.51 7.46163 23.8333ZM33.5683 30.9833L36.19 33.605C38.4083 30.8916 39.875 27.5183 40.2416 23.8516H36.5383C36.2083 26.51 35.145 28.9483 33.5683 30.9833ZM23.8333 36.5383V40.2416C27.5183 39.875 30.8733 38.4083 33.5866 36.19L30.965 33.5683C28.9483 35.145 26.51 36.2083 23.8333 36.5383ZM10.4133 36.19C13.1266 38.4083 16.5 39.875 20.1666 40.2416V36.5383C17.49 36.2083 15.0516 35.145 13.0166 33.5683L10.4133 36.19Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Status/Loader/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Loader(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.1666 7.46163V3.7583C16.4816 4.12497 13.1266 5.59163 10.4133 7.80997L13.0166 10.4316C15.0516 8.85497 17.49 7.79163 20.1666 7.46163ZM33.5866 7.80997C30.8733 5.59163 27.5183 4.12497 23.8333 3.7583V7.46163C26.51 7.79163 28.9483 8.85497 30.9833 10.4316L33.5866 7.80997ZM36.5383 20.1666H40.2416C39.875 16.4816 38.4083 13.1266 36.19 10.4133L33.5683 13.0166C35.145 15.0516 36.2083 17.49 36.5383 20.1666ZM10.4316 13.0166L7.80997 10.4133C5.59163 13.1266 4.12497 16.4816 3.7583 20.1666H7.46163C7.79163 17.49 8.85497 15.0516 10.4316 13.0166ZM7.46163 23.8333H3.7583C4.12497 27.5183 5.59163 30.8733 7.80997 33.5866L10.4316 30.965C8.85497 28.9483 7.79163 26.51 7.46163 23.8333ZM33.5683 30.9833L36.19 33.605C38.4083 30.8916 39.875 27.5183 40.2416 23.8516H36.5383C36.2083 26.51 35.145 28.9483 33.5683 30.9833ZM23.8333 36.5383V40.2416C27.5183 39.875 30.8733 38.4083 33.5866 36.19L30.965 33.5683C28.9483 35.145 26.51 36.2083 23.8333 36.5383ZM10.4133 36.19C13.1266 38.4083 16.5 39.875 20.1666 40.2416V36.5383C17.49 36.2083 15.0516 35.145 13.0166 33.5683L10.4133 36.19Z"
+        id="Loader"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Loader;

package/src/Presentation/components/UI/svgs/Icons/Status/Mention/Mention.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9998 3.66675C8.87984 3.66675 0.666504 11.8801 0.666504 22.0001C0.666504 32.1201 8.87984 40.3334 18.9998 40.3334H28.1665V36.6667H18.9998C11.0432 36.6667 4.33317 29.9567 4.33317 22.0001C4.33317 14.0434 11.0432 7.33341 18.9998 7.33341C26.9565 7.33341 33.6665 14.0434 33.6665 22.0001V24.6217C33.6665 26.0701 32.3648 27.5001 30.9165 27.5001C29.4682 27.5001 28.1665 26.0701 28.1665 24.6217V22.0001C28.1665 16.9401 24.0598 12.8334 18.9998 12.8334C13.9398 12.8334 9.83317 16.9401 9.83317 22.0001C9.83317 27.0601 13.9398 31.1667 18.9998 31.1667C21.5298 31.1667 23.8398 30.1401 25.4898 28.4717C26.6815 30.1034 28.7348 31.1667 30.9165 31.1667C34.5282 31.1667 37.3332 28.2334 37.3332 24.6217V22.0001C37.3332 11.8801 29.1198 3.66675 18.9998 3.66675ZM18.9998 27.5001C15.9565 27.5001 13.4998 25.0434 13.4998 22.0001C13.4998 18.9567 15.9565 16.5001 18.9998 16.5001C22.0432 16.5001 24.4998 18.9567 24.4998 22.0001C24.4998 25.0434 22.0432 27.5001 18.9998 27.5001Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Status/Mention/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Mention(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.9998 3.66675C8.87984 3.66675 0.666504 11.8801 0.666504 22.0001C0.666504 32.1201 8.87984 40.3334 18.9998 40.3334H28.1665V36.6667H18.9998C11.0432 36.6667 4.33317 29.9567 4.33317 22.0001C4.33317 14.0434 11.0432 7.33341 18.9998 7.33341C26.9565 7.33341 33.6665 14.0434 33.6665 22.0001V24.6217C33.6665 26.0701 32.3648 27.5001 30.9165 27.5001C29.4682 27.5001 28.1665 26.0701 28.1665 24.6217V22.0001C28.1665 16.9401 24.0598 12.8334 18.9998 12.8334C13.9398 12.8334 9.83317 16.9401 9.83317 22.0001C9.83317 27.0601 13.9398 31.1667 18.9998 31.1667C21.5298 31.1667 23.8398 30.1401 25.4898 28.4717C26.6815 30.1034 28.7348 31.1667 30.9165 31.1667C34.5282 31.1667 37.3332 28.2334 37.3332 24.6217V22.0001C37.3332 11.8801 29.1198 3.66675 18.9998 3.66675ZM18.9998 27.5001C15.9565 27.5001 13.4998 25.0434 13.4998 22.0001C13.4998 18.9567 15.9565 16.5001 18.9998 16.5001C22.0432 16.5001 24.4998 18.9567 24.4998 22.0001C24.4998 25.0434 22.0432 27.5001 18.9998 27.5001Z"
+        id="Mention"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Mention;

package/src/Presentation/components/UI/svgs/Icons/Status/Sent/Sent.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1334 29.1499L8.43337 21.4499L5.8667 24.0166L16.1334 34.2832L38.1334 12.2832L35.5667 9.71655L16.1334 29.1499Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Status/Sent/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function SentStatusIcon(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.1334 29.1499L8.43337 21.4499L5.8667 24.0166L16.1334 34.2832L38.1334 12.2832L35.5667 9.71655L16.1334 29.1499Z"
+        id="Sent"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default SentStatusIcon;

package/src/Presentation/components/UI/svgs/Icons/Status/ViewedDelivered/Viewed_Delivered.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.9358 12.2925L30.3508 9.70752L18.7275 21.3309L21.3125 23.9159L32.9358 12.2925ZM40.7092 9.70752L21.3125 29.1042L13.6492 21.4592L11.0642 24.0442L21.3125 34.2925L43.3125 12.2925L40.7092 9.70752ZM0.6875 24.0442L10.9358 34.2925L13.5208 31.7075L3.29083 21.4592L0.6875 24.0442Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Status/ViewedDelivered/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function ViewedDelivered(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M32.9358 12.2925L30.3508 9.70752L18.7275 21.3309L21.3125 23.9159L32.9358 12.2925ZM40.7092 9.70752L21.3125 29.1042L13.6492 21.4592L11.0642 24.0442L21.3125 34.2925L43.3125 12.2925L40.7092 9.70752ZM0.6875 24.0442L10.9358 34.2925L13.5208 31.7075L3.29083 21.4592L0.6875 24.0442Z"
+        id="ViewedDelivered"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width="13"
+      height="14"
+      viewBox="0 0 13 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.73104 4.13191L8.96729 3.36816L5.53313 6.80233L6.29688 7.56608L9.73104 4.13191ZM12.0277 3.36816L6.29688 9.099L4.03271 6.84025L3.26896 7.604L6.29688 10.6319L12.7969 4.13191L12.0277 3.36816ZM0.203125 7.604L3.23104 10.6319L3.99479 9.86816L0.972292 6.84025L0.203125 7.604Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+/*
+
+
+*/
+export default ViewedDelivered;

package/src/Presentation/components/UI/svgs/Icons/Toggle/CameraOff/Camera off.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.4166 12.8333L32.0833 20.1666V13.7499C32.0833 12.7416 31.2583 11.9166 30.2499 11.9166H18.9199L39.4166 32.4133V12.8333ZM6.91159 4.58325L4.58325 6.91159L9.58825 11.9166H8.24992C7.24159 11.9166 6.41659 12.7416 6.41659 13.7499V32.0833C6.41659 33.0916 7.24159 33.9166 8.24992 33.9166H30.2499C30.6349 33.9166 30.9649 33.7699 31.2399 33.5866L37.0883 39.4166L39.4166 37.0883L6.91159 4.58325Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/CameraOff/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function CameraOff(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M39.4166 12.8333L32.0833 20.1666V13.7499C32.0833 12.7416 31.2583 11.9166 30.2499 11.9166H18.9199L39.4166 32.4133V12.8333ZM6.91159 4.58325L4.58325 6.91159L9.58825 11.9166H8.24992C7.24159 11.9166 6.41659 12.7416 6.41659 13.7499V32.0833C6.41659 33.0916 7.24159 33.9166 8.24992 33.9166H30.2499C30.6349 33.9166 30.9649 33.7699 31.2399 33.5866L37.0883 39.4166L39.4166 37.0883L6.91159 4.58325Z"
+        id="CameraOff"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default CameraOff;

package/src/Presentation/components/UI/svgs/Icons/Toggle/CameraOn/Camera on.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.1667 19.25V12.8333C31.1667 11.825 30.3417 11 29.3333 11H7.33333C6.325 11 5.5 11.825 5.5 12.8333V31.1667C5.5 32.175 6.325 33 7.33333 33H29.3333C30.3417 33 31.1667 32.175 31.1667 31.1667V24.75L38.5 32.0833V11.9167L31.1667 19.25Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/CameraOn/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function CameraOn(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M31.1667 19.25V12.8333C31.1667 11.825 30.3417 11 29.3333 11H7.33333C6.325 11 5.5 11.825 5.5 12.8333V31.1667C5.5 32.175 6.325 33 7.33333 33H29.3333C30.3417 33 31.1667 32.175 31.1667 31.1667V24.75L38.5 32.0833V11.9167L31.1667 19.25Z"
+        id="CameraOn"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default CameraOn;

package/src/Presentation/components/UI/svgs/Icons/Toggle/CheckOff/Check off.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.8333 5.5H9.16667C7.15 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM34.8333 34.8333H9.16667V9.16667H34.8333V34.8333Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/CheckOff/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function CheckOff(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M34.8333 5.5H9.16667C7.15 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM34.8333 34.8333H9.16667V9.16667H34.8333V34.8333Z"
+        id="CheckOff"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default CheckOff;

package/src/Presentation/components/UI/svgs/Icons/Toggle/CheckOn/Check on.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.8333 5.5H9.16667C7.15 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM30.3967 13.8967L32.9817 16.5L18.315 31.1667L10.9817 23.8517L13.585 21.2667L18.315 25.9783L30.3967 13.8967Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/CheckOn/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function CheckOn(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M34.8333 5.5H9.16667C7.15 5.5 5.5 7.15 5.5 9.16667V34.8333C5.5 36.85 7.15 38.5 9.16667 38.5H34.8333C36.85 38.5 38.5 36.85 38.5 34.8333V9.16667C38.5 7.15 36.85 5.5 34.8333 5.5ZM30.3967 13.8967L32.9817 16.5L18.315 31.1667L10.9817 23.8517L13.585 21.2667L18.315 25.9783L30.3967 13.8967Z"
+        id="CheckOn"
+        fill="var(--color-icon)"
+      />
+    </svg>
+  );
+}
+
+export default CheckOn;

package/src/Presentation/components/UI/svgs/Icons/Toggle/Favourite/Favourite.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.3334 17.8566L27.1517 16.7199L22.0001 4.58325L16.8484 16.7383L3.66675 17.8566L13.6767 26.5283L10.6701 39.4166L22.0001 32.5783L33.3301 39.4166L30.3417 26.5283L40.3334 17.8566ZM22.0001 29.1499L15.1067 33.3116L16.9401 25.4649L10.8534 20.1849L18.8834 19.4883L22.0001 12.0999L25.1351 19.5066L33.1651 20.2033L27.0784 25.4833L28.9117 33.3299L22.0001 29.1499Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/Favourite/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Favourite(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M40.3334 17.8566L27.1517 16.7199L22.0001 4.58325L16.8484 16.7383L3.66675 17.8566L13.6767 26.5283L10.6701 39.4166L22.0001 32.5783L33.3301 39.4166L30.3417 26.5283L40.3334 17.8566ZM22.0001 29.1499L15.1067 33.3116L16.9401 25.4649L10.8534 20.1849L18.8834 19.4883L22.0001 12.0999L25.1351 19.5066L33.1651 20.2033L27.0784 25.4833L28.9117 33.3299L22.0001 29.1499Z"
+        id="Favourite"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Favourite;

package/src/Presentation/components/UI/svgs/Icons/Toggle/FavouriteFilled/Favourite filled.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.9998 32.5783L33.3298 39.4166L30.3232 26.5283L40.3332 17.8566L27.1515 16.7383L21.9998 4.58325L16.8482 16.7383L3.6665 17.8566L13.6765 26.5283L10.6698 39.4166L21.9998 32.5783Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/FavouriteFilled/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function FavouriteFilled(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.9998 32.5783L33.3298 39.4166L30.3232 26.5283L40.3332 17.8566L27.1515 16.7383L21.9998 4.58325L16.8482 16.7383L3.6665 17.8566L13.6765 26.5283L10.6698 39.4166L21.9998 32.5783Z"
+        id="FavouriteFilled"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default FavouriteFilled;

package/src/Presentation/components/UI/svgs/Icons/Toggle/FullScreen/Full screen.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.5 5.5L31.7167 9.71667L26.4183 14.9783L29.0217 17.5817L34.2833 12.2833L38.5 16.5V5.5H27.5ZM5.5 16.5L9.71667 12.2833L14.9783 17.5817L17.5817 14.9783L12.2833 9.71667L16.5 5.5H5.5V16.5ZM16.5 38.5L12.2833 34.2833L17.5817 29.0217L14.9783 26.4183L9.71667 31.7167L5.5 27.5V38.5H16.5ZM38.5 27.5L34.2833 31.7167L29.0217 26.4183L26.4183 29.0217L31.7167 34.2833L27.5 38.5H38.5V27.5Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/FullScreen/inex.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function FullScreen(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M27.5 5.5L31.7167 9.71667L26.4183 14.9783L29.0217 17.5817L34.2833 12.2833L38.5 16.5V5.5H27.5ZM5.5 16.5L9.71667 12.2833L14.9783 17.5817L17.5817 14.9783L12.2833 9.71667L16.5 5.5H5.5V16.5ZM16.5 38.5L12.2833 34.2833L17.5817 29.0217L14.9783 26.4183L9.71667 31.7167L5.5 27.5V38.5H16.5ZM38.5 27.5L34.2833 31.7167L29.0217 26.4183L26.4183 29.0217L31.7167 34.2833L27.5 38.5H38.5V27.5Z"
+        id="FullScreen"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default FullScreen;

package/src/Presentation/components/UI/svgs/Icons/Toggle/Hide/Hide.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.009 11.9166C27.069 11.9166 31.1756 16.0233 31.1756 21.0833C31.1756 22.2749 30.9373 23.3933 30.5156 24.4383L35.869 29.7916C38.6373 27.4816 40.819 24.4933 42.1573 21.0833C38.9856 13.0349 31.1573 7.33325 21.9906 7.33325C19.424 7.33325 16.9673 7.79159 14.694 8.61659L18.654 12.5766C19.699 12.1549 20.8173 11.9166 22.009 11.9166ZM3.67562 6.91159L8.69895 11.9349C5.65562 14.2999 3.27229 17.4533 1.84229 21.0833C5.01395 29.1316 12.8423 34.8333 22.009 34.8333C24.8506 34.8333 27.564 34.2833 30.039 33.2933L30.809 34.0633L36.1806 39.4166L38.509 37.0883L6.00395 4.58325L3.67562 6.91159ZM13.814 17.0499L16.6556 19.8916C16.564 20.2766 16.509 20.6799 16.509 21.0833C16.509 24.1266 18.9656 26.5833 22.009 26.5833C22.4123 26.5833 22.8156 26.5283 23.2006 26.4366L26.0423 29.2783C24.814 29.8833 23.4573 30.2499 22.009 30.2499C16.949 30.2499 12.8423 26.1433 12.8423 21.0833C12.8423 19.6349 13.209 18.2783 13.814 17.0499ZM21.7156 15.6199L27.4906 21.3949L27.5273 21.1016C27.5273 18.0583 25.0706 15.6016 22.0273 15.6016L21.7156 15.6199Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/Hide/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Hide(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22.009 11.9166C27.069 11.9166 31.1756 16.0233 31.1756 21.0833C31.1756 22.2749 30.9373 23.3933 30.5156 24.4383L35.869 29.7916C38.6373 27.4816 40.819 24.4933 42.1573 21.0833C38.9856 13.0349 31.1573 7.33325 21.9906 7.33325C19.424 7.33325 16.9673 7.79159 14.694 8.61659L18.654 12.5766C19.699 12.1549 20.8173 11.9166 22.009 11.9166ZM3.67562 6.91159L8.69895 11.9349C5.65562 14.2999 3.27229 17.4533 1.84229 21.0833C5.01395 29.1316 12.8423 34.8333 22.009 34.8333C24.8506 34.8333 27.564 34.2833 30.039 33.2933L30.809 34.0633L36.1806 39.4166L38.509 37.0883L6.00395 4.58325L3.67562 6.91159ZM13.814 17.0499L16.6556 19.8916C16.564 20.2766 16.509 20.6799 16.509 21.0833C16.509 24.1266 18.9656 26.5833 22.009 26.5833C22.4123 26.5833 22.8156 26.5283 23.2006 26.4366L26.0423 29.2783C24.814 29.8833 23.4573 30.2499 22.009 30.2499C16.949 30.2499 12.8423 26.1433 12.8423 21.0833C12.8423 19.6349 13.209 18.2783 13.814 17.0499ZM21.7156 15.6199L27.4906 21.3949L27.5273 21.1016C27.5273 18.0583 25.0706 15.6016 22.0273 15.6016L21.7156 15.6199Z"
+        id="Hide"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Hide;

package/src/Presentation/components/UI/svgs/Icons/Toggle/ImagePlay/Play.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9165 9.16675V34.8334L33.0832 22.0001L12.9165 9.16675Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/ImagePlay/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function ImagePlay(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.9165 9.16675V34.8334L33.0832 22.0001L12.9165 9.16675Z"
+        id="Play"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default ImagePlay;

package/src/Presentation/components/UI/svgs/Icons/Toggle/Louder/Louder.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 16.5V27.5H12.8333L22 36.6666V7.3333L12.8333 16.5H5.5ZM18.3333 16.1883V27.8116L14.355 23.8333H9.16667V20.1666H14.355L18.3333 16.1883ZM30.25 22C30.25 18.755 28.38 15.9683 25.6667 14.6116V29.37C28.38 28.0316 30.25 25.245 30.25 22ZM25.6667 5.92163V9.6983C30.965 11.275 34.8333 16.1883 34.8333 22C34.8333 27.8116 30.965 32.725 25.6667 34.3016V38.0783C33.0183 36.41 38.5 29.8466 38.5 22C38.5 14.1533 33.0183 7.58996 25.6667 5.92163Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/Louder/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function Louder(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.5 16.5V27.5H12.8333L22 36.6666V7.3333L12.8333 16.5H5.5ZM18.3333 16.1883V27.8116L14.355 23.8333H9.16667V20.1666H14.355L18.3333 16.1883ZM30.25 22C30.25 18.755 28.38 15.9683 25.6667 14.6116V29.37C28.38 28.0316 30.25 25.245 30.25 22ZM25.6667 5.92163V9.6983C30.965 11.275 34.8333 16.1883 34.8333 22C34.8333 27.8116 30.965 32.725 25.6667 34.3016V38.0783C33.0183 36.41 38.5 29.8466 38.5 22C38.5 14.1533 33.0183 7.58996 25.6667 5.92163Z"
+        id="Louder"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default Louder;

package/src/Presentation/components/UI/svgs/Icons/Toggle/MicOff/Mic off.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.8333 21.0833H31.7167C31.7167 22.4399 31.4233 23.7049 30.9283 24.8416L33.1833 27.0966C34.21 25.2999 34.8333 23.2649 34.8333 21.0833ZM27.4633 21.3949C27.4633 21.2849 27.5 21.1933 27.5 21.0833V10.0833C27.5 7.03992 25.0433 4.58325 22 4.58325C18.9567 4.58325 16.5 7.03992 16.5 10.0833V10.4133L27.4633 21.3949ZM7.82833 6.41659L5.5 8.74492L16.5183 19.7633V21.0833C16.5183 24.1266 18.9567 26.5833 22 26.5833C22.4033 26.5833 22.8067 26.5283 23.1917 26.4366L26.235 29.4799C24.9333 30.0849 23.485 30.4333 22 30.4333C16.94 30.4333 12.2833 26.5833 12.2833 21.0833H9.16667C9.16667 27.3349 14.1533 32.5049 20.1667 33.4033V39.4166H23.8333V33.4033C25.5017 33.1649 27.0783 32.5783 28.49 31.7533L36.1717 39.4166L38.5 37.0883L7.82833 6.41659Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Toggle/MicOff/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function MicOff(theme: IconTheme | undefined = undefined) {
+  return (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M34.8333 21.0833H31.7167C31.7167 22.4399 31.4233 23.7049 30.9283 24.8416L33.1833 27.0966C34.21 25.2999 34.8333 23.2649 34.8333 21.0833ZM27.4633 21.3949C27.4633 21.2849 27.5 21.1933 27.5 21.0833V10.0833C27.5 7.03992 25.0433 4.58325 22 4.58325C18.9567 4.58325 16.5 7.03992 16.5 10.0833V10.4133L27.4633 21.3949ZM7.82833 6.41659L5.5 8.74492L16.5183 19.7633V21.0833C16.5183 24.1266 18.9567 26.5833 22 26.5833C22.4033 26.5833 22.8067 26.5283 23.1917 26.4366L26.235 29.4799C24.9333 30.0849 23.485 30.4333 22 30.4333C16.94 30.4333 12.2833 26.5833 12.2833 21.0833H9.16667C9.16667 27.3349 14.1533 32.5049 20.1667 33.4033V39.4166H23.8333V33.4033C25.5017 33.1649 27.0783 32.5783 28.49 31.7533L36.1717 39.4166L38.5 37.0883L7.82833 6.41659Z"
+        id="MicOff"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default MicOff;