@stream-io/video-react-native-sdk 0.0.1-alpha.141

package/src/icons/Chat.tsx

@@ -0,0 +1,14 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Chat = ({ color }: Props) => (
+  <Svg viewBox="0 0 21 20">
+    <Path
+      d="M 17.1887 0.353516 H 2.37385 C 1.35534 0.353516 0.522003 1.18685 0.522003 2.20537 V 18.872 L 4.22571 15.1683 H 17.1887 C 18.2072 15.1683 19.0405 14.335 19.0405 13.3165 V 2.20537 C 19.0405 1.18685 18.2072 0.353516 17.1887 0.353516 Z M 17.1887 13.3165 H 4.22571 L 2.37385 15.1683 V 2.20537 H 17.1887 V 13.3165 Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/Cross.tsx

@@ -0,0 +1,14 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Cross = ({ color }: Props) => (
+  <Svg viewBox="0 0 12 13">
+    <Path
+      d="M 0.322153 11.8408 C 0.700083 12.2188 1.34168 12.21 1.71083 11.8408 L 5.99989 7.56055 L 10.2802 11.8408 C 10.6493 12.21 11.2909 12.2188 11.6688 11.8408 C 12.0468 11.4629 12.038 10.8213 11.6688 10.4521 L 7.38856 6.16309 L 11.6688 1.88281 C 12.038 1.51367 12.0468 0.87207 11.6688 0.494141 C 11.2909 0.116211 10.6493 0.125 10.2802 0.494141 L 5.99989 4.77441 L 1.71083 0.485352 C 1.34168 0.125 0.700083 0.116211 0.322153 0.494141 C -0.0557764 0.87207 -0.0469874 1.51367 0.322153 1.88281 L 4.60243 6.16309 L 0.322153 10.4521 C -0.0469874 10.8213 -0.0557764 11.4629 0.322153 11.8408 Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/Mic.tsx

@@ -0,0 +1,18 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Mic = ({ color }: Props) => (
+  <Svg viewBox="0 0 22 28">
+    <Path
+      d="M11 17.6c2.459 0 4.444-1.923 4.444-4.305V4.683C15.444 2.301 13.46.378 11 .378 8.54.378 6.555 2.3 6.555 4.683v8.612c0 2.382 1.986 4.305 4.445 4.305Z"
+      fill={color}
+    />
+    <Path
+      d="M18.407 13.295c0 3.96-3.318 7.176-7.407 7.176-4.09 0-7.408-3.215-7.408-7.176H.63c0 5.066 3.867 9.228 8.89 9.931v4.42h2.962v-4.42c5.022-.703 8.89-4.865 8.89-9.931h-2.964Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/MicOff.tsx

@@ -0,0 +1,14 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const MicOff = ({ color }: Props) => (
+  <Svg viewBox="0 0 21 25">
+    <Path
+      d="M9.99986 0.241211C7.89048 0.241211 6.37263 1.70794 6.16057 3.87469V4.23026L13.9061 11.9417C13.9284 11.8639 13.9284 11.775 13.9284 11.6861V4.39693C13.9284 1.93017 12.2655 0.241211 9.99986 0.241211ZM18.6159 21.0976C18.9731 21.442 19.5423 21.442 19.8771 21.0976C20.2119 20.742 20.2231 20.1864 19.8771 19.842L1.98647 2.05239C1.64049 1.70794 1.07129 1.69682 0.725307 2.05239C0.379325 2.38574 0.379325 2.96354 0.725307 3.29689L18.6159 21.0976ZM1.46191 12.0861C1.46191 16.6863 4.54227 19.8309 8.96191 20.2531V22.5088H4.86593C4.27441 22.5088 3.78334 22.9754 3.78334 23.5644C3.78334 24.1422 4.27441 24.6199 4.86593 24.6199H15.1338C15.7253 24.6199 16.2164 24.1422 16.2164 23.5644C16.2164 22.9754 15.7253 22.5088 15.1338 22.5088H11.0378V20.2531C12.3883 20.1198 13.6048 19.742 14.6427 19.1308L13.1137 17.5975C12.2208 18.0419 11.1717 18.2864 9.99986 18.2864C6.19406 18.2864 3.61593 15.7974 3.61593 12.0083V9.89715C3.61593 9.30823 3.12486 8.85266 2.53334 8.85266C1.94182 8.85266 1.46191 9.30823 1.46191 9.89715V12.0861ZM16.049 14.0751L17.7566 15.764C18.2588 14.6973 18.5266 13.4528 18.5266 12.0861V9.89715C18.5266 9.30823 18.0467 8.85266 17.4552 8.85266C16.8637 8.85266 16.3838 9.30823 16.3838 9.89715V12.0083C16.3838 12.7639 16.2722 13.4528 16.049 14.0751ZM9.99986 15.9863C10.4463 15.9863 10.8816 15.9085 11.2722 15.764L6.04897 10.575V11.8306C6.04897 14.2973 7.73423 15.9863 9.99986 15.9863Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/Participants.tsx

@@ -0,0 +1,16 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Participants = ({ color }: Props) => (
+  <Svg viewBox="0 0 23 20">
+    <Path
+      clipRule="evenodd"
+      d="M 11 8 C 13.2091 8 15 6.20914 15 4 C 15 1.79086 13.2091 0 11 0 C 8.79086 0 7 1.79086 7 4 C 7 6.20914 8.79086 8 11 8 Z M 5.5 1 C 3.567 1 2 2.567 2 4.5 C 2 6.433 3.567 8 5.5 8 C 6.05228 8 6.5 7.55228 6.5 7 C 6.5 6.44772 6.05228 6 5.5 6 C 4.67157 6 4 5.32843 4 4.5 C 4 3.67157 4.67157 3 5.5 3 C 6.05228 3 6.5 2.55228 6.5 2 C 6.5 1.44772 6.05228 1 5.5 1 Z M 4 16 C 4 12.134 7.13401 9 11 9 C 14.866 9 18 12.134 18 16 C 18 16.397 17.9669 16.7869 17.903 17.1671 C 17.6021 18.9581 13 19.5 11 19.5 C 9 19.5 4.41865 19.0753 4.09763 17.1708 C 4.03335 16.7894 4 16.3982 4 16 Z M 3.85402 10.7725 C 4.28304 10.4247 4.34889 9.79494 4.0011 9.36592 C 3.6533 8.9369 3.02357 8.87105 2.59455 9.21884 C 1.01345 10.5006 0 12.4618 0 14.659 C 0 15.0572 0.0333547 15.4484 0.0976325 15.8297 C 0.18943 16.3743 0.705335 16.7414 1.24994 16.6496 C 1.79454 16.5578 2.16161 16.0419 2.06981 15.4973 C 2.02397 15.2253 2 14.9453 2 14.659 C 2 13.0903 2.72123 11.6908 3.85402 10.7725 Z M 20.5 4.5 C 20.5 2.567 18.933 1 17 1 C 16.4477 1 16 1.44772 16 2 C 16 2.55228 16.4477 3 17 3 C 17.8284 3 18.5 3.67157 18.5 4.5 C 18.5 5.32843 17.8284 6 17 6 C 16.4477 6 16 6.44772 16 7 C 16 7.55228 16.4477 8 17 8 C 18.933 8 20.5 6.433 20.5 4.5 Z M 18.3703 10.7725 C 17.9413 10.4247 17.8755 9.79494 18.2233 9.36592 C 18.5711 8.9369 19.2008 8.87105 19.6298 9.21884 C 21.2109 10.5006 22.2244 12.4618 22.2244 14.659 C 22.2244 15.0572 22.191 15.4484 22.1267 15.8297 C 22.0349 16.3743 21.519 16.7414 20.9744 16.6496 C 20.4298 16.5578 20.0628 16.0419 20.1546 15.4973 C 20.2004 15.2253 20.2244 14.9453 20.2244 14.659 C 20.2244 13.0903 19.5031 11.6908 18.3703 10.7725 Z"
+      fill={color}
+      fillRule="evenodd"
+    />
+  </Svg>
+);

package/src/icons/Phone.tsx

@@ -0,0 +1,14 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Phone = ({ color }: Props) => (
+  <Svg viewBox="0 0 34 33">
+    <Path
+      d="M9.779 24.114c5 5.017 11.085 8.881 16.052 8.881 2.22 0 4.17-.78 5.73-2.508.914-1.017 1.474-2.187 1.474-3.356 0-.899-.356-1.78-1.22-2.39l-5.204-3.695c-.83-.577-1.509-.848-2.12-.848-.796 0-1.508.44-2.287 1.22l-1.22 1.22a.982.982 0 0 1-.662.272c-.271 0-.525-.102-.695-.203-1.068-.577-2.898-2.136-4.593-3.831-1.695-1.695-3.272-3.509-3.831-4.594a1.454 1.454 0 0 1-.187-.695.95.95 0 0 1 .255-.644l1.22-1.237c.763-.797 1.22-1.492 1.22-2.288 0-.628-.27-1.306-.847-2.12L9.186 2.147C8.559 1.265 7.677.892 6.71.892c-1.153 0-2.305.508-3.305 1.474C1.71 3.96.965 5.943.965 8.13c0 4.967 3.814 10.984 8.814 15.985Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/PhoneDown.tsx

@@ -0,0 +1,15 @@
+import { Path, Svg } from 'react-native-svg';
+import { A11yIcons } from '../constants/A11yLabels';
+
+type Props = {
+  color: string;
+};
+
+export const PhoneDown = ({ color }: Props) => (
+  <Svg viewBox="0 0 42 17" accessibilityLabel={A11yIcons.HANG_UP_CALL}>
+    <Path
+      d="M20.983.96C13.406.977 6.372 2.536 2.863 6.045 1.287 7.621.473 9.537.575 11.876c.068 1.373.508 2.576 1.322 3.407.644.627 1.526 1 2.56.83l6.305-1.067c.983-.153 1.661-.458 2.102-.899.56-.559.729-1.373.729-2.474l.017-1.746c0-.272.118-.475.27-.644.187-.204.442-.306.645-.34 1.17-.27 3.56-.542 6.475-.542 2.899 0 5.289.204 6.458.543.187.05.44.152.627.339.153.17.255.372.271.627l.017 1.763c.017 1.101.187 1.915.746 2.474.441.441 1.119.746 2.102.899l6.238 1.05c1.068.187 1.966-.203 2.644-.88.814-.78 1.271-1.984 1.305-3.374.068-2.322-.813-4.238-2.373-5.797C35.527 2.536 28.577.96 20.983.96Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/Pin.tsx

@@ -0,0 +1,16 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Pin = ({ color }: Props) => (
+  <Svg viewBox="0 0 24 24">
+    <Path
+      fill={color}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M 16.041 0.293372 C 15.7956 0.0479219 15.4405 -0.0529382 15.1027 0.0268118 C 14.7649 0.106562 14.4924 0.355552 14.3826 0.684852 L 13.7492 2.58516 L 8.0804 8.25401 C 5.69213 7.71299 2.39999 9.68517 0.293348 11.7918 C -0.0977825 12.1829 -0.0977825 12.8171 0.293348 13.2082 L 4.8344 17.7493 L 1.70985 20.8738 C 1.31872 21.265 1.31872 21.8991 1.70985 22.2902 C 2.10098 22.6814 2.73513 22.6814 3.12626 22.2902 L 6.2508 19.1657 L 10.7918 23.7067 C 11.1829 24.0978 11.8171 24.0978 12.2082 23.7067 C 14.3148 21.6 16.287 18.3079 15.746 15.9196 L 21.4148 10.2508 L 23.3151 9.61735 C 23.6444 9.50758 23.8934 9.23514 23.9732 8.89731 C 24.0529 8.55948 23.9521 8.20444 23.7066 7.95899 L 16.041 0.293372 Z M 15.5748 3.4429 L 15.7705 2.85567 L 21.1443 8.2295 L 20.5571 8.42525 C 20.4096 8.47441 20.2756 8.55725 20.1656 8.6672 L 13.9164 14.9164 C 13.6481 15.1847 13.5545 15.5814 13.6744 15.9413 C 14.1518 17.3733 12.8573 19.8847 11.4693 21.5514 L 2.44861 12.5307 C 4.11529 11.1427 6.62666 9.84822 8.0587 10.3256 C 8.4186 10.4455 8.8153 10.3519 9.0836 10.0836 L 15.3328 3.83438 C 15.4427 3.72444 15.5256 3.59041 15.5748 3.4429 Z"
+    />
+  </Svg>
+);

package/src/icons/Reaction.tsx

@@ -0,0 +1,14 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Reaction = ({ color }: Props) => (
+  <Svg viewBox="0 0 22 20">
+    <Path
+      fill={color}
+      d="M 5.50033 8.16667 C 5.50033 7.40583 6.11449 6.79167 6.87533 6.79167 C 7.63616 6.79167 8.25033 7.40583 8.25033 8.16667 C 8.25033 8.9275 7.63616 9.54167 6.87533 9.54167 C 6.11449 9.54167 5.50033 8.9275 5.50033 8.16667 Z M 10.0837 15.5 C 12.2195 15.5 14.0345 14.1617 14.7678 12.2917 H 5.39949 C 6.13283 14.1617 7.94783 15.5 10.0837 15.5 Z M 13.292 9.54167 C 14.0528 9.54167 14.667 8.9275 14.667 8.16667 C 14.667 7.40583 14.0528 6.79167 13.292 6.79167 C 12.5312 6.79167 11.917 7.40583 11.917 8.16667 C 11.917 8.9275 12.5312 9.54167 13.292 9.54167 Z M 19.2503 0.375 H 17.417 V 2.20833 H 15.5837 V 4.04167 H 17.417 V 5.875 H 19.2503 V 4.04167 H 21.0837 V 2.20833 H 19.2503 V 0.375 Z M 17.417 10.4583 C 17.417 14.51 14.1353 17.7917 10.0837 17.7917 C 6.03199 17.7917 2.75033 14.51 2.75033 10.4583 C 2.75033 6.40667 6.03199 3.125 10.0837 3.125 C 11.422 3.125 12.6687 3.49167 13.7503 4.115 V 2.06167 C 12.6228 1.56667 11.3853 1.29167 10.0745 1.29167 C 5.01449 1.29167 0.916992 5.39833 0.916992 10.4583 C 0.916992 15.5183 5.01449 19.625 10.0745 19.625 C 15.1437 19.625 19.2503 15.5183 19.2503 10.4583 C 19.2503 9.49583 19.0945 8.57917 18.8195 7.70833 H 16.867 C 17.2153 8.56083 17.417 9.48667 17.417 10.4583 Z"
+    />
+  </Svg>
+);

package/src/icons/ScreenShare.tsx

@@ -0,0 +1,32 @@
+import Svg, { Mask, Path } from 'react-native-svg';
+import { A11yIcons } from '../constants/A11yLabels';
+
+type Props = {
+  color: string;
+};
+
+export const ScreenShare = ({ color }: Props) => {
+  return (
+    <Svg viewBox="0 0 24 24" accessibilityLabel={A11yIcons.SCREEN_SHARE}>
+      <Mask id="path-1-inside-1_1396_84816">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M 2 6.68176 C 2 5.57719 2.89543 4.68176 4 4.68176 H 20 C 21.1046 4.68176 22 5.57719 22 6.68176 V 16.3181 C 22 17.4227 21.1046 18.3181 20 18.3181 H 4 C 2.89543 18.3181 2 17.4227 2 16.3181 V 6.68176 Z M 10.4209 11.5243 L 8.3635 11.5 L 11.9999 7.25755 L 15.6362 11.5 L 13.5065 11.5247 V 15.7424 L 10.4209 15.7424 V 11.5243 Z"
+        />
+      </Mask>
+
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M 2 6.68176 C 2 5.57719 2.89543 4.68176 4 4.68176 H 20 C 21.1046 4.68176 22 5.57719 22 6.68176 V 16.3181 C 22 17.4227 21.1046 18.3181 20 18.3181 H 4 C 2.89543 18.3181 2 17.4227 2 16.3181 V 6.68176 Z M 10.4209 11.5243 L 8.3635 11.5 L 11.9999 7.25755 L 15.6362 11.5 L 13.5065 11.5247 V 15.7424 L 10.4209 15.7424 V 11.5243 Z"
+      />
+      <Path
+        mask="url(#path-1-inside-1_1396_84816)"
+        fill={color}
+        d="M 8.3635 11.5 L 6.84499 10.1984 L 4.05865 13.4491 L 8.33982 13.4998 L 8.3635 11.5 Z M 10.4209 11.5243 H 12.4209 V 9.54789 L 10.4446 9.52449 L 10.4209 11.5243 Z M 11.9999 7.25755 L 13.5184 5.95597 L 11.9999 4.18437 L 10.4814 5.95597 L 11.9999 7.25755 Z M 15.6362 11.5 L 15.6594 13.4998 L 19.9419 13.4501 L 17.1547 10.1984 L 15.6362 11.5 Z M 13.5065 11.5247 L 13.4833 9.52483 L 11.5065 9.54778 V 11.5247 H 13.5065 Z M 13.5065 15.7424 L 13.5065 17.7424 L 15.5065 17.7424 V 15.7424 H 13.5065 Z M 10.4209 15.7424 H 8.42094 V 17.7424 H 10.4209 L 10.4209 15.7424 Z M 4 2.68176 C 1.79086 2.68176 0 4.47263 0 6.68176 H 4 V 6.68176 V 2.68176 Z M 20 2.68176 H 4 V 6.68176 H 20 V 2.68176 Z M 24 6.68176 C 24 4.47262 22.2091 2.68176 20 2.68176 V 6.68176 H 24 Z M 24 16.3181 V 6.68176 H 20 V 16.3181 H 24 Z M 20 20.3181 C 22.2091 20.3181 24 18.5273 24 16.3181 H 20 V 16.3181 V 20.3181 Z M 4 20.3181 H 20 V 16.3181 H 4 V 20.3181 Z M 0 16.3181 C 0 18.5273 1.79086 20.3181 4 20.3181 V 16.3181 H 4 H 0 Z M 0 6.68176 V 16.3181 H 4 V 6.68176 H 0 Z M 8.33982 13.4998 L 10.3973 13.5242 L 10.4446 9.52449 L 8.38719 9.50012 L 8.33982 13.4998 Z M 10.4814 5.95597 L 6.84499 10.1984 L 9.88202 12.8016 L 13.5184 8.55913 L 10.4814 5.95597 Z M 17.1547 10.1984 L 13.5184 5.95597 L 10.4814 8.55913 L 14.1177 12.8016 L 17.1547 10.1984 Z M 13.5297 13.5246 L 15.6594 13.4998 L 15.613 9.50011 L 13.4833 9.52483 L 13.5297 13.5246 Z M 11.5065 11.5247 V 15.7424 H 15.5065 V 11.5247 H 11.5065 Z M 13.5065 13.7424 L 10.4209 13.7424 L 10.4209 17.7424 L 13.5065 17.7424 L 13.5065 13.7424 Z M 12.4209 15.7424 V 11.5243 H 8.42094 V 15.7424 H 12.4209 Z"
+      />
+    </Svg>
+  );
+};

package/src/icons/Settings.tsx

@@ -0,0 +1,13 @@
+import Svg, { Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Settings = ({ color }: Props) => {
+  return (
+    <Svg viewBox="0 0 24 24" fill={color}>
+      <Path d="M3.34 17a10.017 10.017 0 01-.978-2.326 3 3 0 00.002-5.347A9.99 9.99 0 014.865 4.99a3 3 0 004.631-2.674 9.99 9.99 0 015.007.002 3 3 0 004.632 2.672A9.99 9.99 0 0120.66 7c.433.749.757 1.53.978 2.326a3 3 0 00-.002 5.347 9.991 9.991 0 01-2.5 4.337 3 3 0 00-4.632 2.674 9.99 9.99 0 01-5.007-.002 3 3 0 00-4.632-2.672A10.02 10.02 0 013.34 17zm5.66.196a4.993 4.993 0 012.25 2.77c.5.047 1 .048 1.5 0a4.993 4.993 0 012.25-2.77 4.993 4.993 0 013.525-.564c.29-.408.54-.843.748-1.298A4.993 4.993 0 0118 12c0-1.26.47-2.437 1.273-3.334-.21-.455-.46-.89-.75-1.298A4.993 4.993 0 0115 6.804a4.992 4.992 0 01-2.25-2.77c-.499-.047-1-.048-1.499-.001a4.993 4.993 0 01-2.25 2.77 4.993 4.993 0 01-3.526.565 7.99 7.99 0 00-.748 1.298A4.993 4.993 0 016 12a4.99 4.99 0 01-1.273 3.334c.21.455.46.89.75 1.298A4.993 4.993 0 019 17.196zM12 15a3 3 0 110-6 3 3 0 010 6zm0-2a1 1 0 100-2 1 1 0 000 2z" />
+    </Svg>
+  );
+};

package/src/icons/Spotlight.tsx

@@ -0,0 +1,16 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const SpotLight = ({ color }: Props) => (
+  <Svg viewBox="0 0 24 24">
+    <Path
+      fill={color}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M 12 22 C 17.5228 22 22 17.5228 22 12 C 22 6.47715 17.5228 2 12 2 C 6.47715 2 2 6.47715 2 12 C 2 17.5228 6.47715 22 12 22 Z M 12 24 C 18.6274 24 24 18.6274 24 12 C 24 5.37258 18.6274 0 12 0 C 5.37258 0 0 5.37258 0 12 C 0 18.6274 5.37258 24 12 24 Z"
+    />
+  </Svg>
+);

package/src/icons/ThreeDots.tsx

@@ -0,0 +1,13 @@
+import { Svg, Circle } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const ThreeDots = ({ color }: Props) => (
+  <Svg viewBox="0 0 24 24">
+    <Circle cx="3.5" cy="12" r="2.5" fill={color} />
+    <Circle cx="12" cy="12" r="2.5" fill={color} />
+    <Circle cx="20.5" cy="12" r="2.5" fill={color} />
+  </Svg>
+);

package/src/icons/Video.tsx

@@ -0,0 +1,14 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Video = ({ color }: Props) => (
+  <Svg viewBox="0 0 29 19">
+    <Path
+      d="M4.725 18.635h11.741c2.411 0 3.795-1.35 3.795-3.717V3.958c0-2.366-1.295-3.716-3.705-3.716H4.726C2.403.242.93 1.592.93 3.958v11.038c0 2.355 1.395 3.639 3.794 3.639Zm17.177-5.603 3.817 3.281c.457.402.948.659 1.417.659.904 0 1.518-.648 1.518-1.63V3.59c0-.982-.614-1.63-1.518-1.63-.48 0-.96.257-1.417.659L21.902 5.9v7.132Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/VideoDisabled.tsx

@@ -0,0 +1,22 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const VideoDisabled = ({ color }: Props) => (
+  <Svg viewBox="0 0 24 24">
+    <Path
+      d="M 22.1126 16.2238 L 19.1546 13.6686 V 8.37994 L 22.1126 5.82471 L 22.1127 5.82476 L 22.1205 5.81781 C 22.4413 5.53481 22.6269 5.49515 22.686 5.49515 C 22.8267 5.49515 22.8809 5.53948 22.9048 5.56519 C 22.9344 5.59687 23 5.69295 23 5.91262 V 16.1359 C 23 16.3556 22.9344 16.4517 22.9048 16.4833 C 22.8809 16.5091 22.8267 16.5534 22.686 16.5534 C 22.634 16.5534 22.4383 16.5111 22.1205 16.2307 L 22.1206 16.2307 L 22.1126 16.2238 Z M 13.4493 18 H 3.28502 C 2.41817 18 1.87542 17.7686 1.55341 17.4618 C 1.23884 17.162 1 16.6616 1 15.835 V 6.23301 C 1 5.4144 1.24841 4.88792 1.58386 4.5637 C 1.92432 4.23463 2.47262 4 3.28502 4 H 13.5266 C 14.3853 4 14.898 4.23821 15.1995 4.54532 C 15.5041 4.85542 15.7343 5.37926 15.7343 6.23301 V 15.767 C 15.7343 16.6029 15.4949 17.126 15.1733 17.4423 C 14.8492 17.7609 14.3088 18 13.4493 18 Z"
+      fill={'none'}
+      stroke={color}
+      strokeWidth={2}
+    />
+    <Path
+      d="M 5.79311 7.27924 C 5.38794 6.90692 4.73102 6.90692 4.32585 7.27924 C 3.92068 7.65156 3.92068 8.25521 4.32585 8.62753 L 6.90766 11 L 4.32586 13.3725 C 3.92069 13.7448 3.92069 14.3484 4.32586 14.7208 C 4.73103 15.0931 5.38795 15.0931 5.79312 14.7208 L 8.37492 12.3483 L 10.9567 14.7208 C 11.3619 15.0931 12.0188 15.0931 12.424 14.7208 C 12.8291 14.3484 12.8291 13.7448 12.424 13.3725 L 9.84217 11 L 12.424 8.62754 C 12.8291 8.25521 12.8291 7.65156 12.424 7.27924 C 12.0188 6.90692 11.3619 6.90692 10.9567 7.27924 L 8.37492 9.65171 L 5.79311 7.27924 Z"
+      fill={color}
+      fillRule="evenodd"
+      clipRule="evenodd"
+    />
+  </Svg>
+);

package/src/icons/VideoOff.tsx

@@ -0,0 +1,20 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const VideoOff = ({ color }: Props) => (
+  <Svg viewBox="0 0 24 24" fill={color}>
+    <Path
+      fill={color}
+      d="M 22.1126 16.2238 L 19.1546 13.6686 V 8.37994 L 22.1126 5.82471 L 22.1127 5.82476 L 22.1205 5.81781 C 22.4413 5.53481 22.6269 5.49515 22.686 5.49515 C 22.8267 5.49515 22.8809 5.53948 22.9048 5.56519 C 22.9344 5.59687 23 5.69295 23 5.91262 V 16.1359 C 23 16.3556 22.9344 16.4517 22.9048 16.4833 C 22.8809 16.5091 22.8267 16.5534 22.686 16.5534 C 22.634 16.5534 22.4383 16.5111 22.1205 16.2307 L 22.1206 16.2307 L 22.1126 16.2238 Z M 13.4493 18 H 3.28502 C 2.41817 18 1.87542 17.7686 1.55341 17.4618 C 1.23884 17.162 1 16.6616 1 15.835 V 6.23301 C 1 5.4144 1.24841 4.88792 1.58386 4.5637 C 1.92432 4.23463 2.47262 4 3.28502 4 H 13.5266 C 14.3853 4 14.898 4.23821 15.1995 4.54532 C 15.5041 4.85542 15.7343 5.37926 15.7343 6.23301 V 15.767 C 15.7343 16.6029 15.4949 17.126 15.1733 17.4423 C 14.8492 17.7609 14.3088 18 13.4493 18 Z"
+    />
+    <Path
+      fill={color}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M 5.79311 7.27924 C 5.38794 6.90692 4.73102 6.90692 4.32585 7.27924 C 3.92068 7.65156 3.92068 8.25521 4.32585 8.62753 L 6.90766 11 L 4.32586 13.3725 C 3.92069 13.7448 3.92069 14.3484 4.32586 14.7208 C 4.73103 15.0931 5.38795 15.0931 5.79312 14.7208 L 8.37492 12.3483 L 10.9567 14.7208 C 11.3619 15.0931 12.0188 15.0931 12.424 14.7208 C 12.8291 14.3484 12.8291 13.7448 12.424 13.3725 L 9.84217 11 L 12.424 8.62754 C 12.8291 8.25521 12.8291 7.65156 12.424 7.27924 C 12.0188 6.90692 11.3619 6.90692 10.9567 7.27924 L 8.37492 9.65171 L 5.79311 7.27924 Z"
+    />
+  </Svg>
+);

package/src/icons/VideoSlash.tsx

@@ -0,0 +1,15 @@
+import { Svg, Path } from 'react-native-svg';
+import { A11yIcons } from '../../src/constants/A11yLabels';
+
+type Props = {
+  color: string;
+};
+
+export const VideoSlash = ({ color }: Props) => (
+  <Svg viewBox="0 0 30 25" accessibilityLabel={A11yIcons.MUTED_VIDEO}>
+    <Path
+      d="M22.4886 24.1679C22.8345 24.5139 23.4037 24.5139 23.7497 24.1679C24.0845 23.8219 24.0957 23.2639 23.7497 22.9067L1.81892 0.998256C1.4841 0.652274 0.903739 0.652274 0.557757 0.998256C0.222935 1.34424 0.222935 1.9246 0.557757 2.25942L22.4886 24.1679ZM17.5555 3.35317H6.14927L21.1604 18.3643C21.2274 18.0407 21.2609 17.6166 21.2609 17.2259V7.06968C21.2609 4.70361 19.9662 3.35317 17.5555 3.35317ZM22.9015 16.1433L26.7073 19.4246C27.1761 19.8264 27.656 20.0831 28.1359 20.0831C29.0399 20.0831 29.6537 19.4358 29.6537 18.4536V6.70138C29.6537 5.71924 29.0399 5.07192 28.1359 5.07192C27.656 5.07192 27.1761 5.32861 26.7073 5.7304L22.9015 9.01165V16.1433ZM5.72517 21.746H18.0801L2.13142 5.79736C2.00865 6.10986 1.94169 6.61209 1.94169 7.10317V18.0853C1.94169 20.4402 3.31445 21.746 5.72517 21.746Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/index.tsx

@@ -0,0 +1,19 @@
+export * from './CameraSwitch';
+export * from './Mic';
+export * from './MicOff';
+export * from './Phone';
+export * from './PhoneDown';
+export * from './Settings';
+export * from './Video';
+export * from './VideoSlash';
+export * from './Chat';
+export * from './Participants';
+export * from './ThreeDots';
+export * from './Pin';
+export * from './Spotlight';
+export * from './VideoOff';
+export * from './Cross';
+export * from './ScreenShare';
+export * from './ArrowRight';
+export * from './Reaction';
+export * from './VideoDisabled';

package/src/providers/MediaDevices.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from 'react';
+import { getAudioDevices, getVideoDevices } from '@stream-io/video-client';
+import { MediaDeviceInfo, useStreamVideoStoreSetState } from '../contexts';
+
+/**
+ * A renderless component that provides the audio and video devices to the store
+ * This component must be a child of StreamVideoStoreProvider
+ * @internal
+ *
+ * @category Device Management
+ */
+export const MediaDevices = (): React.ReactElement | null => {
+  const setState = useStreamVideoStoreSetState();
+  const initialVideoDeviceSet = useRef(false);
+
+  useEffect(() => {
+    const setAudioDevices = (audioDevices: MediaDeviceInfo[]) => {
+      setState({ audioDevices, currentAudioDevice: audioDevices[0] });
+    };
+    const subscription = getAudioDevices().subscribe(setAudioDevices);
+    return () => subscription.unsubscribe();
+  }, [setState]);
+
+  useEffect(() => {
+    const setVideoDevices = (videoDevices: MediaDeviceInfo[]) => {
+      if (videoDevices.length > 0 && !initialVideoDeviceSet.current) {
+        const frontFacingVideoDevice = videoDevices.find(
+          (videoDevice) =>
+            videoDevice.kind === 'videoinput' && videoDevice.facing === 'front',
+        );
+        const initialVideoDevice = frontFacingVideoDevice ?? videoDevices[0];
+        if (initialVideoDevice) {
+          initialVideoDeviceSet.current = true;
+          setState({ videoDevices, currentVideoDevice: initialVideoDevice });
+          return;
+        }
+      }
+      setState({ videoDevices });
+    };
+    const subscription = getVideoDevices().subscribe(setVideoDevices);
+    return () => subscription.unsubscribe();
+  }, [setState]);
+
+  return null;
+};

package/src/providers/StreamCall.tsx

@@ -0,0 +1,136 @@
+import {
+  StreamCallProvider,
+  useStreamVideoClient,
+} from '@stream-io/video-react-bindings';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { Call, CallingState } from '@stream-io/video-client';
+import { useCallCycleEffect } from '../hooks';
+
+type InitWithCallCID = {
+  /**
+   * The call type.
+   */
+  callType: string;
+  /**
+   * The call id.
+   */
+  callId: string;
+  /**
+   * The call instance to use.
+   */
+  call?: Call;
+};
+
+type InitWithCallInstance = {
+  /**
+   * The call instance to use.
+   */
+  call: Call | undefined;
+  /**
+   * The call type.
+   */
+  callType?: string;
+  /**
+   * The call id.
+   */
+  callId?: string;
+};
+
+type InitStreamCall = InitWithCallCID | InitWithCallInstance;
+
+export type StreamCallProps = InitStreamCall & {
+  callCycleHandlers: CallCycleHandlersType;
+};
+/**
+ * StreamCall is a wrapper component that orchestrates the call life cycle logic and
+ * provides the call object to the children components.
+ * @param PropsWithChildren<StreamCallProps>
+ *
+ * @category Client State
+ */
+export const StreamCall = ({
+  callId,
+  callType = 'default',
+  call,
+  callCycleHandlers = {},
+  children,
+}: PropsWithChildren<StreamCallProps>) => {
+  const videoClient = useStreamVideoClient();
+  const [activeCall, setActiveCall] = useState<Call | undefined>(() => {
+    if (call) return call;
+    if (!videoClient || !callId || !callType) return;
+    return videoClient?.call(callType, callId);
+  });
+
+  // Effect to create a new call with the given call id and type if the call doesn't exist
+  useEffect(() => {
+    if (!videoClient) return;
+
+    if (callId && callType && !activeCall) {
+      const newCall = videoClient.call(callType, callId);
+      setActiveCall(newCall);
+    }
+
+    return () => {
+      if (activeCall?.state.callingState === CallingState.LEFT) return;
+      activeCall?.leave().catch((e) => console.log(e));
+      setActiveCall(undefined);
+    };
+  }, [activeCall, callId, callType, videoClient]);
+
+  return (
+    <StreamCallProvider call={activeCall}>
+      <CallCycleLogicsWrapper callCycleHandlers={callCycleHandlers}>
+        {children}
+      </CallCycleLogicsWrapper>
+    </StreamCallProvider>
+  );
+};
+
+/**
+ * Exclude types from documentaiton site, but we should still add doc comments
+ * @internal
+ */
+export type CallCycleHandlersType = {
+  /**
+   * Handler called after a call is joined. Mostly used for navigation and related actions.
+   */
+  onCallJoined?: () => void;
+  /**
+   * Handler called after a callee receives a call. Mostly used for navigation and related actions.
+   */
+  onCallIncoming?: () => void;
+  /**
+   * Handler called after a call is hung up by the caller. Mostly used for navigation and cleanup actions.
+   */
+  onCallHungUp?: () => void;
+  /**
+   * Handler called after a caller initiates a call. Mostly used for navigation and related actions.
+   */
+  onCallOutgoing?: () => void;
+  /**
+   * Handler called after a call is rejected. Mostly used for navigation and cleanup actions.
+   */
+  onCallRejected?: () => void;
+  /**
+   * Handler called when the call is in joining state. Mostly used for navigation and related actions.
+   */
+  onCallJoining?: () => void;
+};
+
+/**
+ * Exclude types from documentaiton site, but we should still add doc comments
+ * @internal
+ */
+export type CallCycleLogicsWrapperProps = {
+  callCycleHandlers: CallCycleHandlersType;
+};
+
+export const CallCycleLogicsWrapper = ({
+  callCycleHandlers,
+  children,
+}: PropsWithChildren<CallCycleLogicsWrapperProps>) => {
+  useCallCycleEffect(callCycleHandlers);
+
+  return <>{children}</>;
+};

package/src/providers/StreamVideo.tsx

@@ -0,0 +1,50 @@
+import {
+  StreamVideo as StreamVideoProvider,
+  StreamVideoProps,
+} from '@stream-io/video-react-bindings';
+import React, { PropsWithChildren, useEffect } from 'react';
+import { StreamVideoStoreProvider } from '../contexts/StreamVideoContext';
+import NetInfo from '@react-native-community/netinfo';
+import { MediaDevices } from './MediaDevices';
+
+/**
+ *
+ * @param props
+ * @returns
+ *
+ * @category Client State
+ */
+export const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {
+  const { client, children, translationsOverrides, i18nInstance, language } =
+    props;
+
+  /**
+   * Effect to inform the coordinator about the online status of the app
+   */
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      const { isConnected, isInternetReachable } = state;
+      const isOnline = isConnected !== false && isInternetReachable !== false;
+      // @ts-expect-error - due to being incompatible with DOM event type
+      client.streamClient.wsConnection?.onlineStatusChanged({
+        type: isOnline ? 'online' : 'offline',
+      });
+    });
+
+    return unsubscribe;
+  }, [client]);
+
+  return (
+    <StreamVideoProvider
+      client={client}
+      translationsOverrides={translationsOverrides}
+      i18nInstance={i18nInstance}
+      language={language}
+    >
+      <StreamVideoStoreProvider>
+        <MediaDevices />
+        {children}
+      </StreamVideoStoreProvider>
+    </StreamVideoProvider>
+  );
+};

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './StreamVideo';
+export * from './StreamCall';

package/src/theme/avatar.ts

@@ -0,0 +1,9 @@
+import { AvatarScheme } from './types';
+
+export const avatar: AvatarScheme = {
+  xs: 50,
+  sm: 100,
+  md: 120,
+  lg: 180,
+  xl: 80,
+};

package/src/theme/button.ts

@@ -0,0 +1,9 @@
+import { ButtonScheme } from './types';
+
+export const button: ButtonScheme = {
+  xs: { height: 40, width: 40, borderRadius: 20 },
+  sm: { height: 50, width: 50, borderRadius: 25 },
+  md: { height: 60, width: 60, borderRadius: 30 },
+  lg: { height: 70, width: 70, borderRadius: 35 },
+  xl: { height: 80, width: 80, borderRadius: 40 },
+};

package/src/theme/colors.ts

@@ -0,0 +1,49 @@
+import { palette } from './constants';
+import { ColorType } from './types';
+
+const opacityToHex = (opacity: number) => {
+  return Math.round(opacity * 255)
+    .toString(16)
+    .padStart(2, '0');
+};
+
+const colors: ColorType = {
+  light: {
+    primary: palette.blue500,
+    error: palette.red400,
+    info: palette.green500,
+    static_black: palette.grey950,
+    static_white: palette.grey50,
+    static_overlay: palette.grey950 + opacityToHex(0.85),
+    static_grey: palette.grey700,
+    disabled: palette.grey400,
+    text_low_emphasis: palette.grey500,
+    text_high_emphasis: palette.grey950,
+    controls_bg: palette.grey50,
+    borders: palette.grey300,
+    overlay: palette.grey950 + opacityToHex(0.4),
+    overlay_dark: palette.grey950 + opacityToHex(0.6),
+    bars: palette.grey50,
+    content_bg: palette.grey950 + opacityToHex(0.05),
+  },
+  dark: {
+    primary: palette.blue500,
+    error: palette.red400,
+    info: palette.green500,
+    static_black: palette.grey950,
+    static_white: palette.grey50,
+    static_overlay: palette.grey950 + opacityToHex(0.85),
+    static_grey: palette.grey700,
+    disabled: palette.grey600,
+    text_low_emphasis: palette.grey500,
+    text_high_emphasis: palette.grey50,
+    controls_bg: palette.grey900,
+    borders: palette.grey700,
+    overlay: palette.grey950 + opacityToHex(0.4),
+    overlay_dark: palette.grey50 + opacityToHex(0.6),
+    bars: palette.grey900,
+    content_bg: palette.grey950 + opacityToHex(0.05),
+  },
+};
+
+export { colors };